博客配置说明

Posted on Edited on In Views:
Symbols count in article: 4k Reading time ≈ 4 mins.
博客配置更新日志

博客配置说明

不要随便升级 hexo 和 主题！！！

不要随便升级 hexo 和 主题！！！

不要随便升级 hexo 和 主题！！！

已安装插件

1
2
3
4
5
6
7
8
9
10
11
hexo-asset-image
hexo-blog-encrypt
hexo-helper-live2d
hexo-word-counter
hexo-renderer-marked -> hexo-renderer-pandoc
hexo-deployer-git
aplayer
hexo-generator-searchdb
hexo-generator-index -> hexo-generator-index-pin-top
hexo-git-backup
hexo-browsersync

源码修改

  1. npm 下载的 hexo-asset-image ，index.js 第 24 行代码替换为：

    1
    var endPos = link.length - 1;

  2. /source/_data/ 下新建 styles.styl 作为自定义样式：① 更改文章内链接文本样式（蓝色，鼠标放置其上变橙色）；② 设置 mermaid 图居中，以及最大高度：

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    // 添加文章内链接文本样式
    .post-body p a {
      color: #0593d3;
      border-bottom: none;
      border-bottom: 1px solid #0593d3;
      &:hover {
        color: #fc6423;
        border-bottom: none;
        border-bottom: 1px solid #fc6423;
      }
    }
    // mermaid 图居中，规定最大高度
    .mermaid{
    	text-align: center;
    	// max-height: 300px;
     }

  3. 修改主题页面布局为圆角。/source/_data/ 下新建 variables.styl 作为自定义样式：

    1
    2
    3
    // 修改主题页面布局为圆角
    $border-radius-inner            = 15px 15px 15px 15px;
    $border-radius                  = 15px;

    但是 header 顶部仍为直角，需要向 /source/_data/styles.styl 添加：

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    // 主要内容顶部留白 10px
    .main-inner {
      margin-top: 10px;
    }

    // 使用 overflow 设置 header 顶部圆角，侧边栏顶部留白 10px
    .header-inner {
      overflow: hidden;
      margin-top: 10px;
    }

  4. 博文置顶。修改 /Blog/themes/next/layout/_partials/post/post-meta.njk，定位到 <div class="post-meta">，其下插入：

    1
    2
    3
    4
    5
    6
    7
    8
    {%- if post.top %}
    <span class="post-meta-item">
        <span class="post-meta-item-icon">
            <i class="fas fa-thumbtack"></i>
        </span>
        <font color="7D26CD">Top</font>
    </span>
    {%- endif %}

  5. DaoVoice 网页通讯。打开/Blog/themes/next/layout/_partials/head/head.njk，添加如下代码：

    1
    2
    3
    4
    5
    6
    7
    8
    9
    {% if theme.daovoice %}
      <script>
      (function(i,s,o,g,r,a,m){i["DaoVoiceObject"]=r;i[r]=i[r]||function(){(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;a.charset="utf-8";m.parentNode.insertBefore(a,m)})(window,document,"script",('https:' == document.location.protocol ? 'https:' : 'http:') + "//widget.daovoice.io/widget/0f81ff2f.js","daovoice")
      daovoice('init', {
          app_id: "{{theme.daovoice_app_id}}"
        });
      daovoice('update');
      </script>
    {% endif %}

  6. APlayer 音乐播放器。进入/Blog/node_modules/aplayer，复制文件夹 dist 至/Blog/themes/next/source。新建 /themes/next/source/dist/music.js 文件，添加内容：

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    const ap = new APlayer({
        container: document.getElementById('aplayer'),
        fixed: true,
        autoplay: false,
        audio: [
          {
            name: "[name]",
            artist: '[artist]',
            url: '[url]'
            cover: '[url]',
          }
          {
            ......
          }
        ]
    })

    打开 /Blog/themes/next/layout/_layout.njk文件，添加如下代码：

    1
    2
    3
    4
    <link rel="stylesheet" href="/dist/APlayer.min.css">
    <div id="aplayer"></div>
    <script type="text/javascript" src="/dist/APlayer.min.js"></script>
    <script type="text/javascript" src="/dist/music.js"></script>

    添加位置位于<body></body>之间，<body itemscoop ...>之后。

  7. Valine 评论系统。打开 /Blog/themes/next/scripts/filters/comment/valine.js，第 27 行替换为：

    1
    ${iconText('far fa-comment', 'comments')}

    这样在显示评论数的时候，显示的是 Comments，而不是 Valine。

  8. 点击头像返回主页。打开 Blog\themes\next\layout\_partials\sidebar\site-overview.njk，找到如下代码：

    1
    2
    <img class="site-author-image" itemprop="image" alt="{{ author }}"
    	src="{{ url_for(theme.avatar.url) }}">

    修改为：

    1
    2
    3
    4
    <a href='/'>
    	<img class="site-author-image" itemprop="image" alt="{{ author }}"
        	src="{{ url_for(theme.avatar.url) }}">
    </a>

附录

  1. 博文配图使用 post_asset_folder: 设置，但是 hexo 渲染时，会将 .md 文件渲染为 index.html，把引用的静态资源复制到与 index.html 同目录下，因此 .md 文件中引用图片不能写成 ![](./folder/pic.png)，而应该写为 ![](./pic.png)。这是反直觉的，因此使用 hexo-asset-image 插件进行路径替换，这样在 .md 文件中引用图片就可以写成 ![](./folder/pic.png)。
  2. npm 下载的 hexo-asset-image 未更新，需要将 index.js 第 24 行代码替换为 var endPos = link.length - 1;