个人博客的一些修改

教程 博客
发布日期:   2024-01-22
更新日期:   2024-01-22
文章字数:   1.8k

部分样式修改

导航栏颜色

修改/themes/hexo-theme-matery/source/css/matery.css的.bg-color部分，我的渐变如下：

.bg-color {
    background-image: linear-gradient(to right, #43baba 0%, #008080 100%);
}

进度条颜色修改

修改/themes/hexo-theme-matery/source/css/matery.css的::-webkit-scrollbar-thumb部分(滑动条本身)和::-webkit-scrollbar-track(滑动条背景颜色)。我的设置如下：

/* 滚动条 */
::-webkit-scrollbar-thumb {
    background-color: #172936;
    background-image: -webkit-linear-gradient(45deg,rgba(32,64,89,.4) 25%,transparent 25%,transparent 50%,rgba(38,92,133,.4) 50%,rgba(36,112,169,.4) 75%,transparent 75%,transparent);
    border-radius: 3em;
}
::-webkit-scrollbar-track {
    background-color: #778899;
    border-radius: 3em;
}

滑动条颜色修改

原版的红色实在辣眼睛。修改/themes/hexo-theme-matery/source/css/matery.css的.progress-bar部分

添加图片

将图片添加到你主题的目录，名字随意，我个人的图片目录是/themes/hexo-theme-matery/source/medias/banner/chunwu。格式随意。

修改js

修改/themes/hexo-theme-matery/layout/_partial/bg-cover-content.ejs对应位置。这是我的修改

var bannerUrl = "<%- url_for('/medias/banner/chunwu/') %>" + new Date().getDay() + '.webp';
$('.bg-cover').css('background-image', 'url(' + bannerUrl + ')');

我的修改是默认根据时间读取目录下的0-6.webp图片

滤镜

滤镜按需求修改/themes/hexo-theme-matery/source/css/matery.css的@-webkit-keyframes rainbow和@keyframes rainbow，不想要也可以直接注释掉。以下为注释部分。

/* .bg-cover:after {
    -webkit-animation: rainbow 60s infinite;
    animation: rainbow 60s infinite;
} */

如自行修改的话推荐这个调色板网站

深夜强制深色模式

由于定时开启功能会导致强制深色模式，我太拉跨没办法解决，不推荐大家开启。

修改/themes/hexo-theme-matery/source/js/matery.js。将以下代码添加至setTimeOut函数中

//定时开启黑夜模式功能.由于定时开启功能会导致强制深色模式，我太拉跨没办法解决，不推荐大家开启
if (new Date().getHours() >= 23 || new Date().getHours() < 5) {
	   let toastHTML = '<span style="color:#97b8b2;border-radius: 10px;>' + '<i class="fa fa-bellaria-hidden="true"></i>深夜强制开启深色模式哦，可点击按钮切换。(ﾟ▽ﾟ)</span>'
    M.toast({ html: toastHTML })
    document.body.classList.add('DarkMode');
}

在/themes/hexo-theme-matery/source/css/matery.css的第6行之后添加如下代码：

/*手机端不显示logo*/
header .brand-logo .logo-img{
    display: none;
}

小屏的样式完整如下：

/*小屏幕下(手机类)的样式*/
@media only screen and (max-width: 601px) {
    .container {
        width: 95%;
    }
    /*手机端不显示logo*/
    header .brand-logo .logo-img{
        display: none;
    }
}

404页面的优化

演示图片

自带的实在太丑，所以更换了页面。这是原教程.

搬运教程

下载特效文件

这是链接

导入js文件

先假设你的404资源文件夹名字为own404.

将压缩包中的两个js文件移动到/themes/hexo-theme-matery/source/libs/own404/下.

然后在主题的_config.yml文件中的libs下的js下添加如下两行内容：

own404bodymovin: /libs/own404404/bodymovin.js
own404data: /libs/own404404/data.js

修改404页面

然后去修改/themes/hexo-theme-matery/layout/404.ejs文件。我的如下：

<style type="text/css">
    /* don't remove. */
    .page404-cover {
        /* height: 75vh; */
        height: 88vh;
    }
 
    #svgContainer {
      width: 100%;
      height: 100%;
      background-color: white;
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      margin: auto;
    }
</style>
 
 
<script src="<%- theme.libs.js.my404bodymovin %>"></script>
<script src="<%- theme.libs.js.my404data %>"></script>
 
<div class="bg-cover pd-header page404-cover">
    <div id="svgContainer"></div>
 
    <script type="text/javascript">
        var svgContainer = document.getElementById('svgContainer');
        var animItem = bodymovin.loadAnimation({
          wrapper: svgContainer,
          animType: 'svg',
          loop: true,
          animationData: JSON.parse(animationData)
        });
    </script>
</div>

然后上传即可。

SEO收录

参考自该教程

百度收录验证

由于百度收录现在无法进行CNAME验证来添加网站，所以我选择html验证。

修改/themes/hexo-theme-matery/layout/_partial/head.ejs，在<head>....</head>之间添加你的百度验证信息<meta name="baidu-site-verification" content="yourcode" />，然后重新build部署即可。

使用sitemap方式推送

安装 sitemap 插件生成站点地图文件:

npm install hexo-generator-sitemap --save

在博客根目录的_config.yml中添加如下代码:

# 通用站点地图
sitemap:
  path: sitemap.xml

Google收录

登录 Google Search Console，点击添加资源，输入自己的域名，按提示操作。

验证成功后，需要提交站点地图。链接为https://yourblog.com/sitemap.xml然后等待收录。

robots.txt修改

robots.txt 是一种存放于网站根目录下的 ASCII 编码的文本文件，它的作用是告诉搜索引擎此网站中哪些内容是可以被爬取的，哪些是禁止爬取的。
robots.txt 要放在 Hexo根目录 下的 source 文件夹中。

这是原作者的robots.txt，如下：

User-agent: *
Allow: /
Allow: /posts/
Disallow: /about/
Disallow: /archives/
Disallow: /js/
Disallow: /css/
Disallow: /contact/
Disallow: /fonts/
Disallow: /friends/
Disallow: /libs/
Disallow: /medias/
Disallow: /page/
Disallow: /tags/
Disallow: /categories/

图片懒加载

参考自该教程

在博客根目录执行以下命令安装：

npm install hexo-lazyload-image --save

然后在博客根目录下的_config.yml中添加以下内容：

lazyload:
  enable: true  # 是否开启图片懒加载
  onlypost: false  # 是否只对文章的图片做懒加载
  loadingImg: # eg ./images/loading.gif
  isSPA: false # optional. For performance considering, isSPA is added. If your theme is a SPA page, please set it as true
  preloadRatio: 3 # optional, default is 1

然后修改/themes/hexo-theme-matery/source/js/matery.js，在108行左右添加以下代码：

$(document).find('img[data-original]').each(function(){
	$(this).parent().attr("href", $(this).attr("data-original"));
});

然后重新生成并部署即可。

提高网页加载评分

优化之后效果如下图：

手机

PC

无障碍是我个人背景图片选择的问题，所以等同于没问题(

mobile-nav.ejs

首先则是修改/themes/hexo-theme-matery/layout/_partial/mobile-nav.ejs，对其中的<div class="mobile-head bg-color">下的img src选项进行修改，在其后添加 alt="LOGO"。如下：

<img src="<%- theme.jsDelivr.url %><%- url_for(theme.logo) %>" class="logo-img circle responsive-img" alt="LOGO">

aos.js

由于内置的aos.js使用的是较为老式的api，所以自行更新为https://unpkg.com/aos@2.3.1/dist/aos.js中的内容。

paging.ejs

首页情况修改为如下：

<a href="javascript:;"
   class="left btn-floating btn-large disabled">
    <i class="fas fa-angle-left"></i>
</a>

尾页情况修改为如下：

<a href="javascript:;"
   class="right btn-floating btn-large disabled">
    <i class="fas fa-angle-right"></i>
</a>

paging.ejs代码：

<div class="container paging">
    <div class="row">
        <div class="col s6 m4 l4">
            <% if (page.prev) { %>
            <a href="<%- url_for(page.prev_link) %>"
               class="left btn-floating btn-large waves-effect waves-light bg-color">
                <i class="fas fa-angle-left"></i>
            </a>
            <% } else { %>
            <a href="javascript:;"
               class="left btn-floating btn-large disabled">
                <i class="fas fa-angle-left"></i>
            </a>
            <% } %>
        </div>
        <div class="page-info col m4 l4 hide-on-small-only">
            <div class="center-align b-text-gray"><%- page.current %> / <%- page.total %></div>
        </div>
        <div class="col s6 m4 l4">
            <% if (page.next) { %>
            <a href="<%- url_for(page.next_link) %>"
               class="right btn-floating btn-large waves-effect waves-light bg-color">
                <i class="fas fa-angle-right"></i>
            </a>
            <% } else { %>
            <a href="javascript:;"
               class="right btn-floating btn-large disabled">
                <i class="fas fa-angle-right"></i>
            </a>
            <% } %>
        </div>
    </div>
</div>

post-detail-toc.ejs

将TOC 悬浮按钮内容修改为如下：

<div id="floating-toc-btn" class="hide-on-med-and-down">
    <a href="javascript:;" class="btn-floating btn-large bg-color" title="显示/隐藏目录">
        <i class="fas fa-list-ul"></i>
    </a>
</div>
文章作者: xieshang
文章链接: https://blog.xieshang.org/ge-ren-bo-ke-de-xiu-gai/
版权声明: 本博客所有文章除特別声明外，均采用 CC BY-NC 4.0 许可协议。转载请注明来源 xieshang !
教程 博客
评论
  目录