使用 Hexo 搭建个人网站写文章之后一直用 hexo-theme-yelee 这个主题,比较喜欢 hexo-theme-yelee 的简约风格,不花哨,加载速度快。可惜随着使用发现了很多的 bug 且预览博客同样存在问题没有修复,近期有时间刚好替换一下 Hexo 的主题,当然有很多人推荐 hexo-theme-next,不过个人不太喜欢,最终决定替换为 hexo-theme-indigo

基本安装

安装及配置见github,hexo-theme-indigo 配置相对少而简单
github地址:https://github.com/yscoder/hexo-theme-indigo

遇到的问题

添加备案号等常见问题及解决办法见:Hexo通用问题集锦

1. 使用 Valine 作为评论系统

之前在使用 hexo-theme-yelee 并没有使用评论系统,使用 hexo-theme-indigo 之后尝试了一下 Valine 这款评论系统,界面简约,无需自建后端,但是在 hexo-theme-indigo 的配置文档中却没有对 Valine 使用的详细配置过程,所以记录一下配置过程

Valine 官网及配置参考:

Valine 官网:https://valine.js.org/
配置参考:https://cloud.tencent.com/developer/article/1142490

1. 部署 Valine

  1. 首先为了获取 AppID 和 AppKey,需要注册 leancloud,然后实名验证,邮箱验证,之后就可以创建应用了
  2. 创建应用名称取个自己喜欢的,创建应用之后 -> 设置 -> 应用Keys,就可以看到需要的 AppID 和 AppKey了,这个到时候要填入 hexo-theme-indigo 的配置文件中,如下图:
    AppID和AppKey
    AppID和AppKey
  3. 然后点击安全中心,服务开关自己选择,填入自己的域名,如下图:
    安全中心
    安全中心
  4. 在存储 -> 数据 -> 创建class -> 输入Comment,用来存放评论数据

2. 配置 hexo-theme-indigo 使用 Valine

hexo-theme-indigo 已经集成了 Valine,所以只需修改 hexo-theme-indigo 的配置文件即可
找到 hexo-theme-indigo 主题的配置文件 _config.yml,然后将自己的 AppID 和 AppKey 填入配置文件中,配置如下:

1
2
3
4
5
6
7
8
9
10
valine:
enable: true # 如果你想使用valine,请将值设置为 true
appId: 你的AppID # 写你自己的AppID
appKey: 你的AppKey # 写你自己的AppKey
notify: false # Mail notify
verify: false # Verify code
avatar: mm # Gravatar style : mm/identicon/monsterid/wavatar/retro/hide
placeholder: 你的留言 # 评论框里面的提示内容
guest_info: nick,mail,link # 三个分别对应昵称,邮箱,https连接,假如不想出现https那么就去掉link即可
pageSize: 10 # comment list page size

配置完成之后清空缓存重启 Hexo,那么就出现了想要的界面,如下图:

ValineView
ValineView

3. 配置管理后台

Valine 是无管理后端的,为了实现邮件通知和垃圾评论过滤,可以结合部署一个 Valine-Admin 来管理
github地址:https://github.com/DesertsP/Valine-Admin

  • 首先仍然 打开 LeanCloud 后台,然后点击云引擎 -> 部署 -> 部署项目

    ValineAdmin1
    ValineAdmin1
  • 然后点击Git部署,配置Git,填入github地址

    ValineAdmin2
    ValineAdmin2
  • 设置一些 valine-admin 需要依赖的参数,下面的表格是从官网搬过来的

变量 示例 说明
SITE_NAME Deserts [必填]博客名称
SITE_URL https://deserts.io [必填]首页地址
SMTP_SERVICE QQ [新版支持]邮件服务提供商,支持 QQ、163、126、Gmail 以及 更多
SMTP_USER xxxxxx@qq.com [必填]SMTP登录用户
SMTP_PASS ccxxxxxxxxch [必填]SMTP登录密码(QQ邮箱需要获取独立密码)
SENDER_NAME Deserts [必填]发件人
SENDER_EMAIL xxxxxx@qq.com [必填]发件邮箱
ADMIN_URL https://xxx.leanapp.cn/ [建议]Web主机二级域名,用于自动唤醒
BLOGGER_EMAIL xxxxx@gmail.com [可选]博主通知收件地址,默认使用SENDER_EMAIL
AKISMET_KEY xxxxxxxxxxxx [可选]Akismet Key 用于垃圾评论检测,设为

我的配置图例:

ValineAdmin3
ValineAdmin3

其中需要注意的有两个点,一个是SMTP_PASS,另外一个就是ADMIN_URL

  • SMTP_PASS 获取需要开启SMTP,每个邮箱服务商的开启方式不一致,特别注意的是qq需要开启SMTP需要设置独立密码才能成功
  • ADMIN_URL 这个设置为你自己域名的二级域名,千万不要写https://xxx.leanapp.cn,我设置的时候一直以为是leanapp这个网站会根据我的设置给我一个免费二级域名来绑定服务,后面我发现压根不是这样,这里自己填写一个自己的二级域名,比如我的是https://valine.uukongjian.com
    • 再次点击Git部署,默认就是生产环境,master分支,然后点击部署,部署需要一定时间,部署成功会打印日志
      ValineAdmin4
      ValineAdmin4
      ValineAdmin5
      ValineAdmin5
  • 绑定域名,这一步可坑惨我了,官方网站和别的博客误导了我,这里一定是使用自己的二级域名

    • 首先点击设置 -> 域名绑定 -> 绑定新域名 -> 普通域名 -> 输入自己的二级域名和是否启用ssl,启用ssl还要申请ssl证书,所以我就不设置域名证书了,之后就会进入到一个等待配置 CNAME的状态
      ValineAdmin6
      ValineAdmin6
    • 然后去设置映射关系,复制上图的 CNAME,比如我的域名服务商是腾讯云,那么就登录腾讯云添加一条映射记录,如下图:
      ValineAdmin7
      ValineAdmin7
    • 过个几分钟就会显示状态为已绑定
  • 绑定之后就可以访问的配置好的二级域名先注册管理员了,比如我的路径为https://valine.uukongjian.com/sign-up,如果你访问之后直接跳转到了登录页面,那么存储 -> 结构化数据 -> _User里面的数据行全部删除即可以正常访问注册页面。注册页面填入登录名和密码,之后用设置好的登录名和密码登录即可访问管理页面,这时候邮件提醒也成功了,成功登录和邮箱提醒内容图例如下:

    ValineAdmin8
    ValineAdmin8
    ValineAdmin9
    ValineAdmin9
  • 最后一步,免费的 leancloud 容器有强制性休眠策略,不能24小时运行,所以配置一个定时任务,点击云引擎 -> 定时任务 -> 创建定时任务,配置如下

    ValineAdmin10
    ValineAdmin10

2. 使用 gitalk 作为评论系统

Valine 无需自己搭建后端环境,无需登录即可发表评论、足够自由,这两点虽然很赞,但是他的数据却高度依赖 leancloud,如果未来 leancloud 不再提供这样的免费开发版服务,那么对于数据不利于迁移

鉴于以上原因,那么就考虑一下基于 github Issues 的神奇操作了, 考虑了 gitmentgitalkvssue,比较了一下这三个,选择了 gitalk 作为尝试

1. 获得 Client ID 和 Client Secret

首先,你得有个github账号(这就不用多说了),然后打开 https://github.com/settings/applications/new,输入信息后即会获得一个Client ID 和 Client Secret,这两个信息不要泄露了,不然别人可能拿来干坏事,比如删除你的公共代码仓库什么的

gitalk1
gitalk1

申请之后就会跳转页面得到 Client ID 和 Client Secret 信息了,如果需要查看的话,位置在 用户头像 -> Settings -> Developer settings -> OAuth Apps 就可以看到了

2. 创建存放 Issues 的仓库

这一步有 github 账号的应该都知道吧,创建一个代码仓库,我创建的名称叫做 gitalk-comments,其中有一个需要注意的就是开启 Issues,不然无法正常使用gitalk(当然,Issues 默认是开启的),选择仓库之后 -> Settings -> 勾选 Issues

gitalk2
gitalk2

3. 配置主题的_config

hexo-theme-indigo 已经集成好了 gitalk,所以同样只需要修改 hexo-theme-indigo 的配置文件就好了,不过 hexo-theme-indigo 主题的配置文件里面有个坑,原文如下:

1
2
3
4
5
gitalk: false
owner:
repo:
client_id:
client_secret:

这里需要增加一个enable属性,如果只是把 false 改成 true 是会报错,正确配置及注释如下

1
2
3
4
5
6
gitalk:
enable: true
owner: uukongjian # 你的 github 名称
repo: gitalk-comments # 你创建仓库的名称,而不是仓库的https地址
client_id: 你的client_id # 改成你自己的 client_id
client_secret: 你的client_secret # 改成你自己的 client_secret

注意

  • 如果报了 Error NOT FOUND 这个错误,那么就是 repo 这个属性没配置对
  • 官方文档有提到 Ensure uniqueness and length less than 50,也就是说文章域名之后的字符长度不能超过 50,当然我使用了 hexo-abbrlink 这个插件,文章地址长度为固定长度,如果有碰到这个问题报错的,那么就可以参考 https://uukongjian.com/posts/cbff0a0f/ 来查看如何使用 hexo-abbrlink,当然你也可以使用其他替代方案

修改之后清空 Hexo 缓存,重启 Hexo 即可生效,到了这里基本就大功告成了,每一篇文章都对应一个 Issues,如果没有对应的 Issues,那么就会显示某某某还没有创建 Issues,去提醒他吧!

当然每篇文章对应的 Issues 不需要你去手动创建,只要你每篇文章编译完成之后都要去访问一下,然后登录 github 账号即可在仓库生成一个 Issues

这样别人查看时就会出现评论框,使用 github 账号登录即可评论,当然 github 对于大陆有时候不太稳定,有时候可能会出现随缘评论,放一个测试的评论图例如下:

gitalk3
gitalk3

3. 文章宽度太窄问题

文档中并没有提及怎么设置文章的宽度,这个问题在 Issues 里面找到了答案,打开配置文件 hexo-theme-indigo/source/css/_partial/variable.less,修改如下:

1
2
//@contentWidth: 960px; // 原来的
@contentWidth: 70%; // 修改的宽度,按你需要的尺寸修改

修改之后清空缓存,重新编译即可