李世德的博客

我有故事，你有酒吗？

0%

hexo 的主题切换为 NexT 后的若干个性化配置

发表于 更新于
本文字数： 1.5k 阅读时长 ≈ 1 分钟

刚使用 hexo 搭建个人博客的时候，看到推荐使用相对较多的主题是 yilia，便安装了，讲真，yilia 主题是一个简洁优雅的主题，后期也做了一些个人配置，体验上还算不错。用过一段时间后，个人对代码块的黑色背景配色有点不喜欢，而且无法自己定制，另外不支持某些鼠标手势……于是想换一款更适合自己的主题，昨天换上了 NexT，很清新简洁，风格是我喜欢的，哈哈~。网上有很多大佬分享了针对 NexT 主题的一些配置，根据个人需求，做了部分配置，本文记录将 hexo 的主题切换为 NexT 后的若干个性化配置，具体的操作就不详细描述了，主要参考了hexo的next主题个性化教程:打造炫酷网站，尊重原作，我把自己修改的地方只做序号记录即可（简称 N），以后在主题更新后方便找回自己的配置。

使用主题

使用的 版本是v6.0.x，GitHub 地址：hexo-theme-next。

v6.x -> v7.x

个性化配置

选择 scheme

主题配置文件 中，设置 scheme: Gemini。

设置语言

站点配置文件 中，设置 language: zh-CN。

设置社交账号

主题配置文件 中，social 节点下配置你的 GitHub、weibo 等账号，|| 后面是其对应的图标。

修改文章内链接文本样式

参考 N5

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

参考 N6

更新-2019.09.01
NexT 新版本已加入了此功能，升级新版本，在 主题配置文件 中，设置 tag_icon: true。

在网站底部加上访问量

参考 N13

步骤：

  • 打开\themes\next\layout\_partials\footer.swig文件
  • 在 copyright 的 div 前添加：
    1
    <script async src="https://dn-lbstatics.qbox.me/busuanzi/2.3/busuanzi.pure.mini.js"></script>
  • 在合适位置添加显示统计的代码，如下是我添加的：
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    <div class="powered-by">
    <i class="fa fa-eye"></i>
    <span id="busuanzi_container_site_pv">
      访问量：<span id="busuanzi_value_site_pv"></span>
    </span>
    <span class="post-meta-divider">|</span>
    <i class="fa fa-user-md"></i>
    <span id="busuanzi_container_site_uv">
      访客数：<span id="busuanzi_value_site_uv"></span>
    </span>
    </div>
    <span class="post-meta-divider">|</span>
    有两种统计方式：pv 和 uv，根据个人需要选择。

添加之后进行部署，成功后刷新页面就能看到效果了。

网站底部字数统计

参考 N15

添加字数统计、阅读时长

参考 N18
参考 Hexo 添加字数统计、阅读时长
参考 给hexo博客,next主题,文章添加字数和阅读时长
参考 为Hexo NexT主题添加字数统计功能

步骤：

  • 打开\themes\next\layout\_macro/post.swig文件
  • 在 class 为 post-mata 的 div 中的添加如下内容：
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    {% if theme.post_wordcount.wordcount %}
    <span class="post-letters-count">
      <span class="post-meta-divider">|</span>
      <i class="fa fa-file-word-o"></i>
      <span>
          {{ wordcount(post.content) }} 字
      </span>
      <span class="post-meta-divider">|</span>
      <i class="fa fa-clock-o"></i>
      <span>
          {{ min2read(post.content) }} 分钟
      </span>
    </span>
    {% endif %}

    设置了 title 但未显示，已移除。

更新-2019.09.01
NexT 新版本（v7.x）加入了字数统计插件——hexo-symbols-count-time，比 hexo-worcount 更快。GitHub 地址：hexo-symbols-count-time

站点配置文件 中，设置：

1
2
3
4
5
6
symbols_count_time:
  symbols: true
  time: true
  total_symbols: true
  total_time: true
  exclude_codeblock: true

主题配置文件 中，设置：（默认已设置）

1
2
3
4
5
6
symbols_count_time:
  separated_meta: true
  item_text_post: true
  item_text_total: false
  awl: 4
  wpm: 275

打开 站点配置文件 中的统计功能即可，几项配置参数在项目介绍中有说明，根据需要进行调整。

添加本地搜索功能

  • 安装本地搜索插件 hexo-generator-search

    1
    npm install hexo-generator-search --save

    安装之后，会在站点目录的 public 文件夹下创建一个 search.json 文件。

  • 修改站点配置文件
    站点配置文件 中添加搜索配置：

    1
    2
    3
    4
    5
    search:
        path: search.json
        field: all
        format: html
        limit: 10000
  • path：索引文件的路径，相对于站点根目录
  • field：搜索范围，默认是 post，还可以选择 page、all，设置成 all 表示搜索所有页面
  • limit：限制搜索的条目数
  • 打开搜索功能
    主题配置文件 中，设置：
    1
    2
    3
    4
    5
    6
    local_search:
        enable: true
        trigger: auto
        top_n_per_article: 1
        unescape: false
        preload: true
    确保 enable 设成 true。
  • top_n_per_article 字段表示在每篇文章中显示的搜索结果数量，设成 -1 会显示每篇文章的所有搜索结果数量。

重新部署网站即可使用本地搜索功能了。

添加百度统计

http://theme-next.iissnan.com/getting-started.html

后记

不断折腾中，不定期更新~