hexo个人博客进阶优化

hexo 博客搭建
工具使用文档
发布日期:   2022-02-08
更新日期:   2022-08-10
文章字数:   2.2k
阅读时长:   11 分
阅读次数:  

hexo博客初阶版搭建教程链接：hexo个人博客搭建

1. 主题颜色个性化设计

修改主题文件 /source/css/matery.css 文件中的 .bg-color 、@-webkit-keyframes rainbow、@keyframes rainbow 三处进行个性化设计

下面是本博客的主题颜色方案：

.bg-color {
    /* 整体背景颜色，包括导航、移动端的导航、页尾、标签页等的背景颜色. */
    background-image: linear-gradient(to right, #4cbf30 0%, #0f9d58 100%);
}

@-webkit-keyframes rainbow {
    /* 动态切换背景颜色. */
    0%,
    100% {
        background: rgba(183, 149, 11, 0.75);
        background: linear-gradient(45deg, rgba(183, 149, 11, 0.75) 0%, rgba(183, 149, 11, 0.65) 100%);
        background: -moz-linear-gradient(135deg, rgba(183, 149, 11, 0.75) 0%, rgba(183, 149, 11, 0.65) 100%);
        background: -webkit-linear-gradient(135deg, rgba(183, 149, 11, 0.75) 0%, rgba(183, 149, 11, 0.65) 100%);
    }

    16% {
        background: rgba(185, 119, 14, 0.75);
        background: linear-gradient(45deg, rgba(185, 119, 14, 0.75) 0%, rgba(185, 119, 14, 0.65) 100%);
        background: -moz-linear-gradient(135deg, rgba(185, 119, 14, 0.75) 0%, rgba(185, 119, 14, 0.65) 100%);
        background: -webkit-linear-gradient(135deg, rgba(185, 119, 14, 0.75) 0%, rgba(185, 119, 14, 0.65) 100%);
    }

    32% {
        background: rgba(175, 96, 26, 0.75);
        background: linear-gradient(45deg, rgba(175, 96, 26, 0.75) 0%, rgba(175, 96, 26, 0.65) 100%);
        background: -moz-linear-gradient(135deg, rgba(175, 96, 26, 0.75) 0%, rgba(175, 96, 26, 0.65) 100%);
        background: -webkit-linear-gradient(135deg, rgba(175, 96, 26, 0.75) 0%, rgba(175, 96, 26, 0.65) 100%);
    }

    48% {
        background: rgba(154, 125, 10, 0.75);
        background: linear-gradient(45deg, rgba(154, 125, 10, 0.75) 0%, rgba(154, 125, 10, 0.65) 100%);
        background: -moz-linear-gradient(135deg, rgba(154, 125, 10, 0.75) 0%, rgba(154, 125, 10, 0.65) 100%);
        background: -webkit-linear-gradient(135deg, rgba(154, 125, 10, 0.75) 0%, rgba(154, 125, 10, 0.65) 100%);
    }

    64% {
        background: rgba(156, 100, 12, 0.75);
        background: linear-gradient(45deg, rgba(156, 100, 12, 0.75) 0%, rgba(156, 100, 12, 0.65) 100%);
        background: -moz-linear-gradient(135deg, rgba(156, 100, 12, 0.75) 0%, rgba(156, 100, 12, 0.65) 100%);
        background: -webkit-linear-gradient(135deg, rgba(156, 100, 12, 0.75) 0%, rgba(156, 100, 12, 0.65) 100%);
    }

    80% {
        background: rgba(147, 81, 22, 0.75);
        background: linear-gradient(45deg, rgba(147, 81, 22, 0.75) 0%, rgba(147, 81, 22, 0.65) 100%);
        background: -moz-linear-gradient(135deg, rgba(147, 81, 22, 0.75) 0%, rgba(147, 81, 22, 0.65) 100%);
        background: -webkit-linear-gradient(135deg, rgba(147, 81, 22, 0.75) 0%, rgba(147, 81, 22, 0.65) 100%);
    }
}

@keyframes rainbow {

    0%,
    100% {
        background: rgba(183, 149, 11, 0.75);
        background: linear-gradient(45deg, rgba(183, 149, 11, 0.75) 0%, rgba(183, 149, 11, 0.65) 100%);
        background: -moz-linear-gradient(135deg, rgba(183, 149, 11, 0.75) 0%, rgba(183, 149, 11, 0.65) 100%);
        background: -webkit-linear-gradient(135deg, rgba(183, 149, 11, 0.75) 0%, rgba(183, 149, 11, 0.65) 100%);
    }

    16% {
        background: rgba(185, 119, 14, 0.75);
        background: linear-gradient(45deg, rgba(185, 119, 14, 0.75) 0%, rgba(185, 119, 14, 0.65) 100%);
        background: -moz-linear-gradient(135deg, rgba(185, 119, 14, 0.75) 0%, rgba(185, 119, 14, 0.65) 100%);
        background: -webkit-linear-gradient(135deg, rgba(185, 119, 14, 0.75) 0%, rgba(185, 119, 14, 0.65) 100%);
    }

    32% {
        background: rgba(175, 96, 26, 0.75);
        background: linear-gradient(45deg, rgba(175, 96, 26, 0.75) 0%, rgba(175, 96, 26, 0.65) 100%);
        background: -moz-linear-gradient(135deg, rgba(175, 96, 26, 0.75) 0%, rgba(175, 96, 26, 0.65) 100%);
        background: -webkit-linear-gradient(135deg, rgba(175, 96, 26, 0.75) 0%, rgba(175, 96, 26, 0.65) 100%);
    }

    48% {
        background: rgba(154, 125, 10, 0.75);
        background: linear-gradient(45deg, rgba(154, 125, 10, 0.75) 0%, rgba(154, 125, 10, 0.65) 100%);
        background: -moz-linear-gradient(135deg, rgba(154, 125, 10, 0.75) 0%, rgba(154, 125, 10, 0.65) 100%);
        background: -webkit-linear-gradient(135deg, rgba(154, 125, 10, 0.75) 0%, rgba(154, 125, 10, 0.65) 100%);
    }

    64% {
        background: rgba(156, 100, 12, 0.75);
        background: linear-gradient(45deg, rgba(156, 100, 12, 0.75) 0%, rgba(156, 100, 12, 0.65) 100%);
        background: -moz-linear-gradient(135deg, rgba(156, 100, 12, 0.75) 0%, rgba(156, 100, 12, 0.65) 100%);
        background: -webkit-linear-gradient(135deg, rgba(156, 100, 12, 0.75) 0%, rgba(156, 100, 12, 0.65) 100%);
    }

    80% {
        background: rgba(147, 81, 22, 0.75);
        background: linear-gradient(45deg, rgba(147, 81, 22, 0.75) 0%, rgba(147, 81, 22, 0.65) 100%);
        background: -moz-linear-gradient(135deg, rgba(147, 81, 22, 0.75) 0%, rgba(147, 81, 22, 0.65) 100%);
        background: -webkit-linear-gradient(135deg, rgba(147, 81, 22, 0.75) 0%, rgba(147, 81, 22, 0.65) 100%);
    }
}

2. banner 图和文章特色图个性化设计

你可以直接在 /source/medias/banner 文件夹中更换你喜欢的 banner 图片，主题代码中是每天动态切换一张，只需 7 张即可。如果你会 JavaScript 代码，可以修改成你自己喜欢切换逻辑，如：随机切换等，banner 切换的代码位置在 /layout/_partial/bg-cover-content.ejs 文件的 <script></script> 代码中：

$('.bg-cover').css('background-image', 'url(/medias/banner/' + new Date().getDay() + '.jpg)');

在 /source/medias/featureimages 文件夹中默认有 24 张特色图片，你可以再增加或者减少，并需要在 _config.yml 做同步修改。

下面是本博客个性化方案：

featureImages:
  - /medias/featureimages/0.jpg
  - /medias/featureimages/1.jpg
  - /medias/featureimages/2.jpg
  - /medias/featureimages/3.jpg
  - /medias/featureimages/4.jpg
  - /medias/featureimages/5.jpg
  - /medias/featureimages/6.jpg
  - /medias/featureimages/7.jpg
  - /medias/featureimages/8.jpg
  - /medias/featureimages/9.jpg
  - /medias/featureimages/10.jpg
  - /medias/featureimages/11.jpg
  - /medias/featureimages/12.jpg
  - /medias/featureimages/13.jpg
  - /medias/featureimages/14.jpg
  - /medias/featureimages/15.jpg
  - /medias/featureimages/16.jpg
  - /medias/featureimages/17.jpg
  - /medias/featureimages/18.jpg
  - /medias/featureimages/19.jpg
  - /medias/featureimages/20.jpg
  - /medias/featureimages/21.jpg
  - /medias/featureimages/22.jpg
  - /medias/featureimages/23.jpg

3. 标题字体优化

移动端标题没有没有做自适应优化，标题字数太长，会变成两行，影响美观

解决方案：https://github.com/blinkfox/hexo-theme-matery/issues/682

将 layout\_partial\header.ejs 替换成

<header class="navbar-fixed">
    <nav id="headNav" class="bg-color nav-transparent">
        <div id="navContainer" class="nav-wrapper container">
            <div class="brand-logo">
                <a href="<%- url_for() %>" class="waves-effect waves-light" id="fixFontSizeToTitle">
                    <% if (theme.logo !== undefined && theme.logo.length > 0) { %>
                    <img src="<%- theme.jsDelivr.url %><%= theme.logo %>" class="logo-img" alt="LOGO">
                    <% } %>
                </a>
            </div>
            <%- partial('_partial/navigation') %>
        </div>

        <% if (theme.githubLink && theme.githubLink.enable) { %>
            <%- partial('_partial/github-link') %>
        <% } %>
    </nav>

</header>

<script>
    let width=document.documentElement.clientWidth;
    let html_title=''
    if (width<500){
        html_title='<span class="logo-span" style="font-size: 1.2rem;"><%= config.title %></span>';
    }else{
        html_title='<span class="logo-span"><%= config.title %></span>';
    }
    document.getElementById("fixFontSizeToTitle").insertAdjacentHTML("beforeEnd", html_title);
</script>

4. 不蒜子 (busuanzi) 文章计数出错

解决方案：https://jdhao.github.io/2020/10/31/busuanzi_pv_count_error/

/layout/_partial/head.ejs 文件中，将

{{- if .Site.Params.busuanzi.enable -}}
  <script async src="//busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js"></script>
{{- end -}}

修改为

{{- if .Site.Params.busuanzi.enable -}}
  <script async src="//busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js"></script>
  <meta name="referrer" content="no-referrer-when-downgrade">
{{- end -}}

5. 数学公式渲染出错

hexo-prism-plugin插件会与mathjax产生冲突，数学公式代码的\{和\\中的\会自动被识别为逃逸符，可以修改.\node_modules\marked\lib\marked.js文件，搜索 escape: 和 em: 两处，修改为

escape: /^\\([`*\[\]()#$+\-.!_>])/,
em: /^\*((?:\*\*|[\s\S])+?)\*(?!\*)/,

修改完后还会有两个bug：

  • markdown中存在两个或以上的{时，中间需要加一个空格变成{ {，否则渲染报错
  • markdown文本中出现半角的括号()，会错误的将括起来的文字变成斜体显示

6. mathjax渲染超时

主题默认使用的mathjax的渲染js文件来自于公用的cdn，其优点是使用方便，只用设置一个连接就可以了；缺点是公用的服务器，你不能保证其是否永久可用，万一哪一天别人的服务器抽风了，博客的公式渲染服务也就失效了。

解决方案是将mathjax的渲染js文件放到自己的服务器本地。

因为主题默认使用的是mathjax的2.x版本，所以下面也已2.7为例子进行说明，代码修改量较少。

  1. 下载mathjax

    git clone https://github.com/mathjax/MathJax.git -b 2.7.8

    下载需要删除文件夹中的 .git 文件夹

  2. 部署mathjax

    • 方案一：部署到本地的代码仓库。直接将 MathJax 文件夹移动到 /source 文件夹下。优点是操作方便，文件随版本一起迁移。缺点是mathjax太大了，每次渲染的时间较久，且代码的版本体积太大。
    • 方案二：部署到远端的服务器。将 MathJax 文件夹打包上传至服务器，在服务器博客根目录下解压即可。

  3. 修改 _config.yml mathjax的cdn地址

    # 如果是使用方案二，下面推荐使用绝对路径，这样本地测试的时候也可以使用公式渲染服务
mathjax:
  enable: true
  cdn: /MathJax/MathJax.js?config=TeX-AMS-MML_HTMLorMML

另外，mathjax的体积太大，有整整70多m，所以需要轻量化

解决方案：

  • https://segmentfault.com/a/1190000003822609
  • https://zhzh2001.github.io/2017/04/08/deploy-mathjax/

mathjax内存占比最高就是字体的位图，所以基本想法就是删除了一些没用到的字体格式

7. 图片加载优化

如果使用的是hexo-lazyload-image懒加载策略，那么点开图像是，显示还是loading image

解决方案：

  • https://blog.ichr.me/post/hexo-better-image-lazyload/
  • https://blog.sky03.cn/posts/42790.html

修改 /themes/matery/source/js 中的 matery.js文件，在

$('#articleContent, #myGallery').lightGallery({
    selector: '.img-item',
    // 启用字幕
    subHtmlSelectorRelative: true
});

后加入

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

修改完后还会有一个bug：首页的logo点击会直接打开logo图，而不是跳到首页。

而由于前面优化了标题字体，所以上面这个bug暂时无法解决>_<

hexo 博客搭建
赏
评论
  目录