valine评论与博客升级

valine 确实是个颜值比较高的评论插件,但碍于 hexo 和主题版本过低的问题,不能安装,只好先行升级博客和主题。

升级 hexo

1
npm i hexo-cli -g

很顺利,但 next 主题并不是平滑升级。

升级 next

官网教程

  1. 克隆新的 v6.x 仓库到任一异于 next 的目录(如 next-reloaded):

    1
    $ git clone https://github.com/theme-next/hexo-theme-next themes/next-reloaded

    如此,你可以在不修改原有的 NexT v5.1.x 目录的同时使用 next-reloaded 目录中的新版本主题。

  2. 在 Hexo 的主配置文件中设置主题:

    1
    2
    3
    ...
    theme: next-reloaded
    ...

    如此,你的 next-reloaded 主题将在生成站点时被加载。如果你遇到了任何错误、或只是不喜欢这一新版本,你可以随时切换回旧的 v5.1.x 版本。

注意

  • 原先自定义的 css 文件存放的地方,也记得迁移

自定义的 CSS 配置,它们应在 next/source/css/_custom/*next/source/css/_variables/* 中。

自定义的排布配置,它们应在 next/layout/_custom/* 中。

  • next 我是从 5.0升到6.0,其中不太一样的地方

侧边栏头像需要在主题配置文件里设置:

友情链接在主题配置文件中的位置:

其他都是些小的问题,对比新旧配置文件基本上都能解决。

以前没做笔记的地方

以前博客做的一些优化,当时没有记录下来,升级主题之后,不记得是怎么做的,也不记得在哪里改的文件,网上找了很久,才配回来。

文章字数,阅读时长

新的 next 主题内置了 symbols_count_time 文章字数,时长的插件。

安装插件 symbols_count_time

1
npm install hexo-symbols-count-time --save

主题配置文件:

image-20180827223551539

最后的 awl 和 wpm 是官网针对中文做的取值。

有意思的是,在站点配置文件下还有针对博客页脚的数值统计,像这样:

image-20180827223812415

站点配置文件的位置:

image-20180827223857615

最后一项是博客文章总计阅读时长,时间显示我觉得莫名其妙的不准,没有开启。

字体大小

image-20180827224416883

以前记得不是再在这里改的。

标题,正文 css

1
2
3
4
5
6
7
8
9
10
11
12
13
14
//标题大小
.post-title{
font-size:60px
}
正文大小
body{
font-size:18px
}
h2{
font-size:30px
}
h3{
font-size:22px
}

效果:

评论

不太顺滑的升级本就是为了加 valine 评论才做的。

next 升级后内置 valine

打开主题配置文件:

image-20180827225551175

这里需要你先去 LeanCloud 注册账号,具体教程官网比较详细。

LeanCloud 设置记得开你博客域名的白名单,所以你在本地测试的时候回报403错误,没关系,推到线上就可以看到评论了。

大概是这样,评论里支持 markdown 其实意义不大,但是 valine 确实做得很简约也很好看。

评论的门槛比较低,其实你不填昵称邮箱网站也可以评论。

评论后会显示你的浏览器和系统版本。

你可以再去LeanCloud设置邮件推送,有评论的时候通知你,评论管理需要在LeanCloud数据库界面操作,比较原始。

不要在文章旁边显示评论数量

没人评论,岂不是很丢人?

找到 post.swig文件

所在目录:

删除以下代码(位置在200行左右)

1
2
3
4
5
6
7
8
9
<span class="post-comments-count">
<span class="post-meta-divider">|</span>
<span class="post-meta-item-icon">
<i class="fa fa-comment-o"></i>
</span>
<a href="{{ url_for(post.path) }}#comments" itemprop="discussionUrl">
<span class="post-meta-item-text">{{ __('post.comments_count') + __('symbol.colon') }}</span> <span class="post-comments-count valine-comment-count" data-xid="{{ url_for(post.path) }}" itemprop="commentCount"></span>
</a>
</span>

评论邮件推送插件——valine-admin

valine 本身不可以做推送,也就是如果有人评论你的博客,你又想第一时间知道,建议你安装这个插件。

步骤在作者博客github 都有,已经很详细了,这里不再赘述。

说一个需要注意的地方。

在 leancloud 网站拉取 valine-admin 代码配置后,需要添加自定义变量,这个时候还需要你再做一步——重启容器,因为邮件推送需要在配置完自定义变量后重启才生效。

值得一提的是 valine-admin 的作者还提供了更榨取免费 leancloud 性能的方法,因为免费版本每天需要停机6小时,而且30分钟没收到评论,容器就会自动休眠。

翻译一下:

  • 这种限制只对邮件推送有影响,对评论无影响
  • 对邮件有影响体现在:
    • 每天的邮件推送需要休息6小时
    • 一天的任意30分钟内,如果没有人评论你,容器会休眠,休眠时来评论,这个评论邮件收不到,只是这个时候容器会被唤醒,唤醒后的30分钟内如果有评论则会有推送邮件,如果无评论还是会休眠,重复这个过程

作者的解决方案是一条 linux 命令

1
*/20 7-23 * * * curl https://yoursite.leanapp.cn

早上7点到23点之间,每20分钟访问你的 web 容器一次。基本上评论推送就可以整天不宕机了。

开 web 容器,只是说让你加个二级域名:

image-20180829000100075

不过这个服务需要跑在服务器上,如果你有vps,可以跑在你的vps上:

执行代码如下:

  1. 登陆 vps 后输入 crontab -e
  2. /20 7-23 curl https://你配置的域名前缀.leanapp.cn(vim模式)

如果你没有服务器,也可以麻烦麻烦作者

最后感谢:

valine 作者:云淡风轻

valine-admin 作者:zhaojun

开发了便捷好用的评论插件。

最后

不开评论总是觉得自说自话,希望看到这篇文章的你,可以和我在评论中交流你的看法与观点。最近准备将写作重心迁移到我的 webview 播客上,不仅录一些常规的节目,也会在上面发一些自己编译和原创的文章,欢迎移步,最近我在微博上也很活跃,也欢迎你在微博上找到我。