0%

Hexo 以及 NexT 主题升级

发表于 分类于 阅读次数：
本文字数： 3.5k 阅读时长 ≈ 3 分钟

旧版Hexo博客已近建了两年多了，也没写几篇博客，最近想把一些笔记发表上来，旧版有些功能失效了，强迫症犯了想升级一下。

Hexo 以及 NexT 主题升级

从原目录升级太麻烦了，各种报错，所以使用增量升级的方式。

简单来说就是直接在新的环境中安装最新版本的Hexo以及NexT主题，然后创建一个博客的框架，把旧的配置文件中自定义的内容复制到新的配置文件中，最后把文章拷到新的目录中。

这种方式差不多等于重新装了一遍，也是相当麻烦。没办法，不出错就行。所以重新走了一遍流程。

安装Hexo

创建hexo目录，打开 git bash：

1
2
3
4
npm install hexo-cli -g
hexo init .
npm install
hexo server

在http://localhost:4000应该可以看到博客页面了。

报错的话，执行：

1
2
npm install hexo —save
npm install hexo-server --save

打开老目录下的 _config.yml 文件，看哪些地方改了，修改新目录 _config.yml 对应的地方。

中文语言设置，已经从 zh-Hans 更换为 zh-CN。

清除 Hexo 的缓存并验证主题：

1
hexo clean & hexo s --debug

安装Next主题

注意老版已经不维护了，新版是 https://github.com/theme-next/hexo-theme-next ，但只有英文文档，配置方面可以参考一下老版文档。

1
2
cd hexo
git clone https://github.com/theme-next/hexo-theme-next themes/next

打开老 theme 目录下的 _config.yml 文件，估计哪些地方改了，修改新 theme 目录下 _config.yml 文件对应的地方。这个文件很长，耐心改。

把scaffolds、source拷贝过来。

生成并部署：

1
hexo g -d

报错的话执行：

1
npm install hexo-deployer-git --save

之前有设立另外的分支作为博客源文件备份，建立新目录后，只需把原目录下的 .git 文件夹复制过来即可，什么都不要改，一样的 git add commit push 。

评论

之前用的 LiveRe.，几年了多说、畅言等都不好用了，这个倒是挺坚挺的。虽然挺稳定的，但速度有点慢，也没有回复通知，不是很好用。

Valine

Valine 现在用的人挺多的，于是打算试试。 leancloud 中国需要绑定域名了，使用国际版即可。

进入控制台后点击左下角创建应用，应用创建好以后，进入刚刚创建的应用，选择左下角的设置>应用Key，然后就能看到你的APP ID和APP Key了。

设置评论邮件通知：(https://github.com/xCss/Valine/wiki)。设置了没有效果，有更复杂的方法，很麻烦不弄了。

界面和 Next 挺搭的，但不能收到回复提醒（虽然没几个人回复）。就算能收到提醒，你如果没有立即回复，访客也大概不会之后再点进你的博客了。如果访客用常用的账号登录，并能在某个地方方便地看到回复（不需要再点进你的博客找到某篇文章），相当于有个第三方评论系统，感觉这样比较好。

utterances

又想用回 cnblogs，可 cnblogs 毕竟是个技术论坛，想有个地方能写写东西，不仅仅局限于技术。而且 Hexo 对于颜控无法割舍。看到 utteranc，有点接近我想要的亚子，又有点动力了，哈哈哈。

utterances 是基于 github issue，拥有多种主题的开源免费小组件。需要满足两个条件：

  1. 首先我们所需要的 github 存储库必须是公开的，而不是私有的，这样我们的读者才可以查看以及发表评论。
  2. 我们必须在 github 上进行安装 utterances,首先我们访问 utterances应用程序 然后点击 Install 按钮进行安装。我们只选择某一个需要进行评论的库安装。

Next 已经集成了utterances 评论： https://github.com/theme-next/hexo-next-utteranc。

安装：

1
npm install --save github:theme-next/hexo-next-utteranc

在主题配置文件中新建配置：

1
2
3
4
5
6
7
8
9
10
# Demo: https://utteranc.es/  http://trumandu.github.io/about/
utteranc:
  enable: true
  repo: paleomoon/paleomoon.github.io #Github repo such as :TrumanDu/comments
  pathname: pathname
  # theme: github-light,github-dark,github-dark-orange
  theme: github-light
  cdn: https://utteranc.es/client.js
  # If you want to modify priority, please config in **hexo**
  #priority:

如果出现跳转错误的问题（如登录后跳转到 https://yoursite.com/），请在Hexo 的配置文件中搜索# URL，将url:配置为/或你的站点的URL地址。

这样我们每篇博客的评论会显示在 repository 的 issues 中， 可以直接在 issues 进行评论和回复，博客中的评论也会更新，很棒了！唯一缺点就是文章链接不能显示中文，问题不大。

参考

访问统计

使用 leancloud_visitors 经常不显示，改用不蒜子。

在主题的配置文件中搜索busuanzi_count，将下面的enable属性设为true即可。不蒜子的缺点是统计不是很准（只多不少，很容易刷数据），将就着用吧。

站内搜索

使用 Local Search。

  1. 安装 hexo-generator-searchdb，在站点的根目录下执行以下命令：

    1
    $ npm install hexo-generator-searchdb --save

  2. 编辑 站点配置文件，新增以下内容到任意位置：

    1
    2
    3
    4
    5
    search:
      path: search.xml
      field: post
      format: html
      limit: 10000

  3. 编辑 主题配置文件，启用本地搜索功能：

    1
    2
    3
    # Local search
    local_search:
      enable: true

字体

在主题配置文件中搜索 font，可设置字体。我把 global 中设为 size: 0.88，没改其他东西，看着也还行。

如果要自定义CSS样式，只要在themes/next/source/css/_custom/custom.styl文件中写入相应的CSS代码就行了。

注意

  • 文件后缀为styl，猜测可能是使用stylus语法的样式文件。但是我试过了，直接写CSS代码是可行的。
  • 涉及到文件引用的地方要注意路径。如果使用相对路径，默认当前目录为themes/next/source/css/。
  • 注意要执行hexo clean命令，清除已经生成的文件。然后再执行hexo generate重新生成文件。否则样式可能不会生效。
  • 如果页面刷新后，新的样式没有生效，建议检查public/css/main.css中有没有加入新的CSS代码。

设置动态背景

https://github.com/theme-next/theme-next-canvas-nest

字数和阅读时间统计

https://github.com/theme-next/hexo-symbols-count-time

版权声明

修改主题配置文件：

1
2
3
4
5
creative_commons:
  license: by-nc-sa
  sidebar: false
  post: true
  language: zh-CN

总结

其实不用查很多资料，Next 内部集成了很多功能，直接看 Hexo 配置文件和 Next 主题配置文件，看懂注释，一项项改最快。

发现自己就喜欢折腾，不对，是不需要很多脑子的折腾。要是折腾看懂一篇cv论文，又不愿意了，哈哈哈。

参考