0%

Hexo 以及 NexT 主题升级

旧版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论文,又不愿意了,哈哈哈。

参考