hexo主题升级

本文字数： 1.1k 阅读时长 ≈ 4 分钟
hexo next 主题已经升级到 7.0，有必要对博客做一个升级，简要记录一些升级过程
  1. 下载最新next 6.0.4, —> 参见11，使用模块管理主题

  1. 备份_config.yml，同时对配置进行修改，相关图片位于next/source/images

    1
    2
    3
    4
    cd themes/next
    git clone https://github.com/theme-next/theme-next-fancybox3 source/lib/fancybox
    git clone https://github.com/theme-next/theme-next-pace source/lib/pace
    git clone https://github.com/theme-next/theme-next-algolia-instant-search source/lib/algolia-instant-search

  2. 其他插件

    1. 增加阅读进度

      1
      git clone https://github.com/theme-next/theme-next-reading-progress source/lib/reading_progress

    2. 填补字符间空白

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

    3. 页面增加3D渲染，next默认提供两种渲染效果，theme-next-three和canvas_nest

      1
      2
      3
      cd themes/next
      git clone https://github.com/theme-next/theme-next-three source/lib/three
      git clone https://github.com/theme-next/theme-next-canvas-nest source/lib/canvas-nest

      启用以下任意项：

      1
      three_waves: true
      1
      canvas_lines: true
      1
      canvas_sphere: true
      1
      canvas_nest: true

  3. 添加访问人数（6.0已原生支持busuanzi，启用即可）

    打开\themes\next\layout\_partials\footer.swig文件,在copyright前加上画红线这句话

    1
    <script async src="//busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js"></script>

    然后再合适的位置添加显示统计的代码，如图：

    1
    2
    3
    4
    5
    <div class="powered-by">
    <i class="fa fa-user-md"></i><span id="busuanzi_container_site_uv">
      本站访客数:<span id="busuanzi_value_site_uv"></span>
    </span>
    </div>
    • pv的方式，单个用户连续点击n篇文章，记录n次访问量
    • uv的方式，单个用户连续点击n篇文章，只记录1次访客数

  4. 每篇文章末尾统一添加“本文结束”标记

    实现方法

    在路径 \themes\next\layout\_macro 中新建 passage-end-tag.swig 文件,并添加以下内容：

    1
    2
    3
    4
    5
    <div>
        {% if not is_index %}
            <div style="text-align:center;color: #ccc;font-size:15px;">--------------都看到这了，请我喝杯咖啡吧！<i class="fa fa-coffee"></i>--------------</div>
        {% endif %}
    </div>

    接着打开\themes\next\layout\_macro\post.swig文件，在`` 之后， <footer class="post-footer"> 之前添加

    1
    2
    3
    4
    5
    <div>
      {% if not is_index %}
        {% include 'passage-end-tag.swig' %}
      {% endif %}
    </div>

    打开主题配置文件，文章末尾添加标记（不用设置）

    1
    2
    passage_end_tag:
      enabled: true

  5. 增加评论系统

    gitment

    主题配置

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    gitment:
      enable: true
      mint: true # RECOMMEND, A mint on Gitment, to support count, language and proxy_gateway
      count: true # Show comments count in post meta area
      lazy: false # Comments lazy loading with a button
      cleanly: false # Hide 'Powered by ...' on footer, and more
      github_user: silloy  # MUST HAVE, Your Github Username
      github_repo: repo  # MUST HAVE, The name of the repo you use to store Gitment comments
      client_id: xxx # MUST HAVE, Github client id for the Gitment
      client_secret: xxx

    问题：

    • Error：validation failed

      修改 next/layout/_third-party/comments/gitment.swig中id: window.location.pathname为

      1
      id: '{{ page.date }}'

    valine

  6. 文章底部增加版权信息

  7. 修改文章底部的那个带#号的标签

修改模板/themes/next/layout/_macro/post.swig，搜索 rel="tag">#，将 # 换成<i class="fa fa-tag"></i>

  1. 修改打赏字体不闪动，next 7.0 已支持配置

修改文件next/source/css/_common/components/post/post-reward.styl， 注释wechat:hover 和alipay:hover， 如下：

1
2
3
4
5
6
7
8
9
10
11
12
/* 注释文字闪动函数
 #wechat:hover p{
    animation: roll 0.1s infinite linear;
    -webkit-animation: roll 0.1s infinite linear;
    -moz-animation: roll 0.1s infinite linear;
}
 #alipay:hover p{
   animation: roll 0.1s infinite linear;
    -webkit-animation: roll 0.1s infinite linear;
    -moz-animation: roll 0.1s infinite linear;
}
*/

  1. 模块化主题管理（以next主题为例）

  2. 备份next主题 mv next next-bak，提交代码

  3. 增加子模块 git submodule add git@github.com:silloy/hexo-theme-next.git themes/next

  4. 查看状态 git status

    1
    2
    3
    4
    5
    Changes to be committed:
      (use "git reset HEAD <file>..." to unstage)

    	new file:   .gitmodules
    	new file:   themes/next

  5. 提交

    1
    2
    3
    4
    5
    $  git commit -m "add next module"
    [hexo adbe36e] add next module
     3 files changed, 19 insertions(+), 1 deletion(-)
     create mode 100644 .gitmodules
     create mode 160000 themes/next

  6. 更新子模块 git submodule update --remote

  7. 拉取含子模块的项目，git clone 后执行以下操作

    1. git submodule init 初始化本地配置文件

    2. git submodule update 从该项目中抓取所有数据并检出父项目中列出的合适的提交

      也可在 clone 使用 git clone --recursive 命令, git 就会自动初始化并更新仓库中的每一个子模块.

    3. 若子分支仓库中有未同步的更新, 可通过 git submodule update --remote --rebase 来同步最新的内容

  8. 同步源主题的修改

    1. 增加源

      1
      2
      cd theme/next
      git remote add source  git@github.com:theme-next/hexo-theme-next.git

    2. 拉取更新

      1
      git pull source master

      等同于

      1
      2
      3
      git fetch source master
      git checkout master
      git merge source/master

  9. 发布子模块的修改

    1. 使用 git push --recurse-submodules=check 命令 检查没有推送的子模块
    2. 使用 git push --recurse-submodules=on-demand git 会自动尝试推送变更的子项目

参考文章：

NexT 使用文档

利用Gulp来压缩你的Hexo博客

hexo的next主题个性化教程:打造炫酷网站

老高博客

gitment

Gitment评论功能接入踩坑教程

实现 Hexo next 主题博客本地站内搜索

我的个人博客之旅：从jekyll到hexo

在 hexo 中使用 git submodules 管理主题