NexT主题优化

Posted on In Views:
Symbols count in article: 11k Reading time ≈ 10 mins.
Hexo Blog 的 NexT 主题优化项目

博客更新清单

思路来源：https://theme-next.org/docs/

本地图片上传问题

  • *.md文件中，图片路径需要写成./[文件夹名]/[图片名]的格式；
  • 配置博客配置文件/blog/_config.yml，post_asset_folder:false设置为true。
  • 安装插件hexo-asset-image：cnpm install hexo-asset-image --save
  • 如果遇到update >> /.com//[图片名]的报错，打开/node_modules/hexo-asset-image/index.js，修改第 24 行代码为：
1
var endPos = link.length - 1;

【阅读全文】的设置

  1. 在文章中使用< !--more--> 手动进行截断。

    这种方法可以根据文章的内容，自己在文章合适的位置添加 < !--more--> 标签（Typora使用源代码模式添加），可以精确控制需要显示的摘录内容以外， 也可以让 Hexo 中的插件更好的识别。

  2. 在文章中的front-matter中添加description: [...]字段，并提供文章摘录[...]

    这种方式只会在首页列表中显示文章的摘要内容，进入文章详情后不会再显示。

  3. 自动形成摘要，在主题配置文件中添加

    1
    2
    3
    auto_excerpt:
      enable: true
      length: 150

    默认截取的长度为 150 字符。

推荐第 2 种方法

文章内链接样式

  1. 主题配置文件 _config.next.yml 中，设置为采用自定义样式：

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    # Define custom file paths.
    # Create your custom files in site directory `source/_data` and uncomment needed files below.
    custom_file_path:
      #head: source/_data/head.njk
      #header: source/_data/header.njk
      #sidebar: source/_data/sidebar.njk
      #postMeta: source/_data/post-meta.njk
      #postBodyEnd: source/_data/post-body-end.njk
      #footer: source/_data/footer.njk
      #bodyEnd: source/_data/body-end.njk
      #variable: source/_data/variables.styl
      #mixin: source/_data/mixins.styl
      style: source/_data/styles.styl

  2. /source/_data/ 下新建 styles.styl 作为自定义样式文件

  3. 更改文章内链接文本样式（蓝色，鼠标放置其上变橙色）：

1
2
3
4
5
6
7
8
9
10
11
// 添加文章内链接文本样式
.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;
  }
}

浏览页面的时候显示浏览进度

打开主题配置文件 _config.next.yml：

1
2
3
4
5
6
back2top:
  enable: true
  # Back to top in sidebar.
  sidebar: true
  # Scroll percent label in b2t button.
  scrollpercent: true

SideBar头像

  1. 打开 主题配置文件 找到Sidebar Avatar字段；
  2. 设置url为images/[图像名]；
  3. rounded为图像形状，true为圆形，false为正方形；
  4. rotated为是否旋转。

设置点击头像返回主页

  1. 打开 Blog\themes\next\layout\_partials\sidebar\site-overview.njk，找到如下代码：

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

  2. 添加 a 标签：

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

Mathjax 支持数学公式

  1. 主题配置文件 _config.next.yml 修改 mathjax 相关选项
  2. 卸载原来的 Markdown 渲染插件 hexo-renderer-marked，安装 pandoc 和 hexo-renderer-pandoc
  3. 需要渲染的文章元数据部分添加 mathjax: true

支持 Markdown 代码形式的 mermaid 流程图

  1. 安装 hexo-filter-mermaid-diagrams 插件：

    1
    cnpm install hexo-filter-mermaid-diagrams --save

  2. 主题配置文件 _config.next.yml 修改为：

    1
    2
    3
    4
    5
    # Mermaid tag
    mermaid:
      enable: true
      # Available themes: default | dark | forest | neutral
      theme: forest

  3. 设置居中展示和最大高度。在 source/_data/styles.styl 自定义样式文件中添加：

    1
    2
    3
    4
    5
    // mermaid 图居中
    .mermaid{
      text-align: center;
      max-height: 300px;
    }

  4. WARNING NexT 更新后，对于 mermaid 的支持出现了问题，表现为无法渲染及主题无效。目前识别出的原因有：

    1. 代码块添加的 copy_button 干扰了 mermaid.js 渲染；
    2. mermaid 代码中的 < 和 > 干扰渲染；
    3. 主题设置无效的原因不明。

    因此进行以下更改：

    1. hexo-filter-mermaid-diagram/lib/render.js 中：

      1
      return `${start}<pre class="mermaid">${content}</pre>${end}`;

      更改为：

      1
      return `${start}<pre><div class="mermaid">${content}</div></pre>${end}`;

    2. hexo-filter-mermaid-diagram/lib/render.js 中添加函数 HtmlEncode 用于替换 < 和 >：

      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      const HtmlEncode =text=>{
        return text.replace(/</g, '&lt;').replace(/>/g, '&gt;');
      }
      ...
      if (!ignore(data)) {
          data.content = data.content
            .replace(reg, function (raw, start, startQuote, lang, content, endQuote, end) {
              content = HtmlEncode(content)
              return `${start}<pre><div class="mermaid">${content}</div></pre>${end}`;
            });
        }

  5. 对于主题设置无效的问题，修改 next/layout/_third-party/tags/mermaid.njk 文件：mermaid.init 修改为 mermaid.initialize。

  6. 以上修改完成后，mermaid 图片能够正常渲染，正常设置主题，但是其背景为灰色，与使用模板语言生成的 mermaid 图片不同。主要在于以下设置：

    1
    2
    3
    4
    code, kbd, figure.highlight, pre {
        background: var(--highlight-background);
        color: var(--highlight-foreground);
    }

本地站点推送到GitHub/Gitee上

  1. 安装插件 hexo-deployer-git：

    1
    cnpm install hexo-deployer-git --save

  2. 站点配置文件 _config.yml 中的 deploy：

    1
    2
    3
    4
    5
    type: git
      repository: 
        github: git@github.com:name/name.github.io.git
        gitee: git@gitee.com:name/name.git
      branch: master

添加搜索功能

  1. 安装 hexo-generator-searchdb 插件

    1
    cnpm install hexo-generator-searchdb --save

  2. 打开 主题配置文件 找到local_search，按如下配置修改：

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    # Local Search
    # Dependencies: https://github.com/next-theme/hexo-generator-searchdb
    local_search:
      enable: true
      # If auto, trigger search by changing input.
      # If manual, trigger search by pressing enter key or search button.
      trigger: auto
      # Show top n results per article, show all results by setting to -1
      top_n_per_article: -1
      # Unescape html strings to the readable one.
      unescape: false
      # Preload the search data when the page loads.
      preload: false

显示字数统计及阅读时间

  1. 安装插件hexo-word-counter

    1
    cnpm install hexo-word-counter --save

  2. 主题配置文件，维持默认设置：

    1
    2
    3
    4
    5
    6
    # Post wordcount display settings
    # Dependencies: https://github.com/next-theme/hexo-word-counter
    symbols_count_time:
      separated_meta: true
      item_text_post: true
      item_text_total: false

  3. 博客配置文件，添加：

    1
    2
    3
    4
    5
    6
    7
    8
    9
    symbols_count_time:
      symbols: true
      time: true
      total_symbols: true
      total_time: true
      exclude_codeblock: false
      awl: 4
      wpm: 275
      suffix: "mins."

遇到无法统计文章字数、无法显示阅读时长的情况，先运行 hexo clean，再重新生成。

博文加密

使用插件hexo-blog-encrypt：cnpm install hexo-blog-encrypt --save。

  1. 在 /blog/_config.yml 中启用该插件：

    1
    2
    3
    4
    # Security
    ##
    encrypt:
        enable: true

  2. 在文章的头部添加对应字段，如 password, abstract, message：

    1
    2
    3
    password: Mike
    abstract: Welcome to my blog, enter password to read.
    message: Welcome to my blog, enter password to read.

    可以直接更改\Blog\scaffolds\post.md，这是hexo new生成文章的模板。

博文置顶

  1. 修改支持：

    1
    2
    npm uninstall hexo-generator-index --save
    npm install hexo-generator-index-pin-top --save

  2. 在需要置顶的文章的Front-matter中加上top: true即可置顶；

  3. 设置置顶标识：打开/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 %}

需要注意的是，NexT 8.0 使用了 Font Awesome 5

DaoVoice实现网页在线通讯

  1. 注册DaoVoice账户，打开应用设置，找到安装到网站，最后一栏有用户的app_id。

  2. 打开\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 %}

  3. 在主题配置文件 _config.yml，添加如下代码：

    1
    2
    3
    # DaoVoive
    daovoice: true
    daovoice_app_id: [app_id]

  4. 在DaoVoice控制台，应用设置--聊天设置--定制聊天窗口样式，设定小窗口的大小、颜色和位置；

  5. hexo s测试后提交。

注意，DaoVoice在网页上加载较慢，可能需要等待1-2分钟才能加载出来。

顶部加载进度条

  1. 进入Blog/theme/next；
  2. 运行git bash安装Progress Moudle：git clone https://github.com/theme-next/theme-next-pace source/lib/pace；
  3. 主题配置文件，pace--enable true; theme flash

顶部阅读进度条

  1. 进入Blog/theme/next；
  2. 运行git bash安装reading_progress：git clone https://github.com/theme-next/theme-next-reading-progress source/lib/reading_progress；
  3. 主题配置文件，reading_progress--enable true

动态背景

  1. 对于Hexo-5.1.1以上的版本，找到主题配置文件中的canvas_nest，修改成true；

  2. 进入themes/next，安装插件theme-next-canvas-nest：

    1
    git clone https://github.com/theme-next/theme-next-canvas-nest source/lib/canvas-nest

添加Live2D看板娘

添加网易云音乐外链播放器

  1. 打开网页版网易云音乐，找到想要的歌曲，点击生成外链播放器；

  2. 设定iframe插件，播放器大小选择310x66；

  3. 打开themes/next/layout/_macro/sidebar.njk，在display_toc之上添加以下代码：

    1
    2
    3
    4
    <div id="music163player">
    	<iframe frameborder="no" border="0" marginwidth="0" marginheight="0" width=330 height=86 src="//music.163.com/outchain/player?type=2&id=642614&auto=1&height=66">
    	</iframe>
    </div>

注意，代码放置位置决定界面上外链播放器的位置，需要进一步研究。

网站标题栏背景变色

  1. 打开themes/next/source/css/_custom/custom.styl

  2. 打开\source\_data\styles.styl；

  3. 添加如下代码：

    1
    2
    3
    .site-meta {
      background: $blue;
    }

APlayer音乐播放器

  1. 安装Aplayer插件：

    1
    npm install aplayer --save

  2. 进入\Blog\node_modules\aplayer，复制文件夹dist至\Blog\themes\next\source；

  3. 新建\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]',
          }
          {
            ......
          }
        ]
    })

    内容及格式参照：https://aplayer.js.org/#/zh-Hans/

  4. 打开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 ...>之后。

将放置代码放在不同的/themes/next/layout/***.njk文件内会有不同的效果。

music.js具体见 Aplayer相关

添加 Valine 评论系统

  1. 注册 leancloud 国际版账号，建立应用。（网上有详细教程）

  2. 主题配置文件 _config.next.yml 中，找到 Comments Settings ，修改（或添加）：

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    # Valine
    # For more information: https://valine.js.org, https://github.com/xCss/Valine
    valine:
      enable: true
      appId: [app id] # https://leancloud.app
      appKey: [app key] # leancloud 国际版
      # appid: # Your leancloud application appid
      # appkey: # Your leancloud application appkey
      placeholder: Hello World! # Comment box placeholder
      avatar: identicon # Gravatar style
      meta: [nick, mail, link] # Custom comment header
      pageSize: 10 # Pagination size
      language: zh-cn # Language, available values: en, zh-cn
      visitor: true # Article reading statistic
      comment_count: true # If false, comment count will only be displayed in post page, not in home page
      recordIP: false # Whether to record the commenter IP
      serverURLs: # When the custom domain name is enabled, fill it in here (it will be detected automatically by default, no need to fill in)
      enableQQ: false # Whether to enable the Nickname box to automatically get QQ Nickname and QQ Avatar
      requiredFields: ['nick','mail'] # Set required fields: ['nick'] | ['nick','mail']
      #post_meta_order: 0

  3. 安装 Valine 支持插件（next 8.2.0 移除了对 Valine 的支持）

    1
    npm install next-theme/hexo-next-valine --save

  4. 打开 \node_modules\hexo-next-valine\index.js，第 53 行替换为：

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

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

使用分支同步博客源代码

使用插件：hexo-git-backup

  1. ```shell npm install hexo-git-backup --save 

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12

    2. 向博客配置文件中写入：

       ```yaml
       # git backup
       backup:
         type: git
         theme: next
         message: Back up source code of my blog
         repository:
           github: git@github.com:alltobenice/alltobenice.github.io.git,backup
           gitee: git@gitee.com:alltobenice/alltobenice.git,backup

  2.    hexo backup