记录next主题的hexo博客配置

发表于 更新于 分类于 阅读次数：
本文字数： 4.1k 阅读时长 ≈ 4 分钟

添加评论模块 utterances

目的

为部署在github（或gitee）上安装了next主题的hexo博客添加评论系统，以此增加博客的互动性。

为什么选择utterances评论系统？

utterances的简介

一款基于GitHub中issues开发的轻量级评论插件。可将GitHub的issues作为博客评论，wiki页等等；

  • 开源；🙌
  • 不记录信息，没有广告, 一直免费；📡🚫
  • 不保存数据，所有数据都保存在GitHub issues中；🔓
  • 支持Primer, 该工具包支撑着GitHub的css样式；💅
  • 暗色主题；🌘
  • 轻量级. Vanilla TypeScript. 不需要下载字体, JS框架 或 polyfills for evergreen browsers. 🐦🌲

其他评论插件

流行的gitment和gitalk评论插件要求的权限过多，有的甚至存在安全性争议。

添加步骤

Step 1

在GitHub上新建一个库comments，该库专门用来存放评论内容。

Step 2

安装GitHua App——utterances

（1）进入utterances页面，点击Install按钮；

（2）这里选择Only select repositories，输入并选中前面新建的comments库；这里也可以看到utterances不能操作代码，只可以操作元数据，以及读写issues；点击下方Install按钮；

Step 3

在next主题中手动添加utterances，所有操作都在next主题文件夹下

（1）在layout/_third-party/comments/中新建文件utterances.swig，并添加下面的内容：

1
2
3
4
5
6
7
8
9
{% if theme.utterances.enable %}
  <script src="https://utteranc.es/client.js"
    repo="{{ theme.utterances.repo }}"
    issue-term="{{ theme.utterances.issue_term }}"
    theme="{{ theme.utterances.theme }}"
    crossorigin="anonymous"
    async>
  </script>
{% endif %}

（2）在layout/_partials/comments.swig中添加下面的内容：

1
2
3
4
{% elseif theme.utterances.enable %}
    <div class="comments" id="comments">
      {% include '../_third-party/comments/utterances.swig' %}
    </div>

      （3）在_config.yml中添加以下配置：

1
2
3
4
5
6
7
8
utterance:
  enable: true
  #仓库名字，这里用来判断评论是否为博主本人owner为博主的username
  repo: owner/comment
  #主题
  theme: github-light
  #映射配置，这里指issues中标题
  issue-term: title

utterances 工作原理

当utterances被加载后，它会利用GitHub中的issue search API去寻找基于url、pathname或title关联页面的issues。如果utterances未能找到匹配页面的issues，没关系，utterances-bot将会在有人评论后第一时间自动创建一条issue。

进行评论的话，用户必须允许utterances通过GitHub的OAuth flow去授权登录。或者用户可以直接在GitHub issue上进行评论。

关闭评论

如果想关闭某篇博客的评论部分，仅需在首部两条---之间添加comments: false即可；
这里添加网评论模块后，会导致原来的分类和标签页底部出现评论框，这里同样只需要在首部添加comments: false即可，例如标签页的修改如下

1
2
3
4
5
6
---
title: 标签
date: 201x-0x-xx xx:xx:xx
type: tags
comments: false
---

自定义 favicon

Step 1

将已有图片转为 icon 格式，准备好图片，打开在线生成 icon 工具，上传图片，下载可得到.zip包。

Step 2

在 NexT 主题中进行设置

Step 2.1

首先在博客根目录的source目录下创建images文件夹，将上面.zip包里解压出的文件拷贝到images文件夹下

Step 2.2

然后编辑 NexT 主题配置文件themes/next/_config.yml，找到下方对应部分，并配置如下：

1
2
3
4
5
6
7
favicon:
  small: images/favicon-16x16.png
  medium: images/favicon-32x32.png
  apple_touch_icon: images/apple-icon-180x180.png
  safari_pinned_tab: 
  android_manifest: images/manifest.json
  ms_browserconfig: images/browserconfig.xml
Step 2.3

验证效果

1
2
3
# 启动本地预览
$ hexo s
浏览器打开 http://localhost:4000

同时部署 hexo 到 github 和 腾讯云（原 Coding）上

编辑 hexo 根目录下的配置文件 _config.yml，修改 deploy 处如下：

1
2
3
4
5
6
7
# Deployment
## Docs: https://hexo.io/docs/deployment.html
deploy: 
  type: git
  repo:
    github: git@github.com:yourusername/yourusername.github.io.git,master
    tencent: git@git.dev.tencent.com:yourusername/yourusername.git,master

在 pages 页面绑定自定义域名

腾讯云

在自定义域名解析处添加一条 CNAME 记录到 yourname.coding.me，替换对应的yourusername

github

在自定义域名解析处添加一条 CNAME 记录到 yourname.github.io，替换对应的yourusername，然后由于每次 deploy 时都会覆盖掉，所以需要手动在 hexo 根目录下添加一个名为 CNAME 的文件，内容如下：

1
your.custom.com

利用 Hexo-Blog-Encrypt 给博客加密

参考文章：hexo-blog-encrypt

特点

输入正确密码后，可在接下来的30分钟内，无需密码访问该页面。

安装

1
2
3
4
5
# 国内可用 cnpm 替换 npm
$ npm install --save hexo-blog-encrypt

# 或者用 yarn 安装
$yarn add hexo-blog-encrypt

开始配置

  1. 首先, 确保文章中含有内容（不能为空，或者只包含空格）

  2. 然后在 _config.yml 中启用该插件:
    2.1 文章设置的 password 优先级最高，其次是设置标签加密，文章多标签加密密码优先级跟文章标签先后顺序有关

    1
    2
    3
    4
    5
    6
    # Security
    encrypt: # hexo-blog-encrypt
      enable: true
      tags:  # 配置标签加密
        - {name: test, password: test}
        - {name: diary, password: diary}

  3. 然后在你的文章的头部添加上对应的字段，如 password, abstract, message

    1
    2
    3
    4
    5
    6
    7
    ---
    title: Hello World
    date: 2016-03-30 21:18:02
    password: mikemessi
    abstract: Something was encrypted, please enter password to read.
    message: Welcome to my blog, please enter password to read.
    ---

    3.1 （可选）如果你想对 TOC 也进行加密，则在 article.ejs 中将 TOC 的生成代码修改成如下：

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    <% if(post.toc == true){ %>
      <div id="toc-div" class="toc-article" <% if (post.encrypt == true) { %>style="display:none" <% } %>>
        <strong class="toc-title">Index</strong>
          <% if (post.encrypt == true) { %>
            <%- toc(post.origin) %>
          <% } else { %>
            <%- toc(post.content) %>
          <% } %>
      </div>
    <% } %>
    <%- post.content %>

说明

  1. hexo根目录下的source文件夹将被编译到public文件夹，最终以public为工作区部署到配置的远程仓库上，source目录因为为远程仓库的原始根目录；


  2. 可以在 _post 目录下新建文件夹分隔不同的 .md 文件；

码哥 wechat
欢迎关注个人订阅号：「码上行动GO」