修复highlight框横向滚动

修改文件themes/tranquilpeak_0.47beta/src/scss/themes/_hljs-custom.scss
增加以下内容

1
2
3
pre > code.codeblock {
overflow-x: auto;
}

增加valine评论系统

Valine - 一款快速、简洁且高效的无后端评论系统。
Valine 诞生于2017年8月7日,是一款基于Leancloud的快速、简洁且高效的无后端评论系统。
理论上支持但不限于静态博客,目前已有Hexo、Jekyll、Typecho等博客程序在使用Valine。
所以,理论上它也是支持 Hugo 的, 实践证明,确实如此。其特性如下:

  • 快速
  • 安全
  • Emoji 😉
  • 无后端实现
  • MarkDown 全语法支持
  • 轻量易用(~15kb gzipped)
  • 文章阅读量统计 v1.2.0-beta1+

这么好的评论系统,值得宣传,希望看到此文章的童鞋,也支持一下 Valine。下面就讲一下我是如何一步步添加 Valine 支持的。

Tips:

整个过程,是以Tranquilpeak主题为例的,其它主题操作大同小异。
配置之前应该先阅读Valine快速开始

如果你想在某个网页或者文章页中使用Valine,请参照以下步骤配置

获取APP IDAPP Key

请先登录或注册 LeanCloud, 进入控制台后点击左下角创建应用:
20190903102145-2019-9-3.png

应用创建好以后,进入刚刚创建的应用,选择左下角的设置>应用Key,然后就能看到你的APP ID和APP Key了:
20190903102220-2019-9-3.png

因为评论和文章阅读数统计依赖于存储,所以还需要建立两个新的存储 Class,左边栏找到并点击 存储,点击 创建Class:
20190903102316-2019-9-3.png

创建两个存储Class,分别命名为: Counter 和 Comment;
还需要为应用添加安全域名,左边栏点击 设置,找到 安全中心,点击后会看到 安全域名 设置框,输入博客使用的域名,点击保存即可:

20190903102401-2019-9-3.png

config.toml添加参数

为了使配置更灵活,将 Valine 中大部分初始化参数项均设置为配置文件中的参数项,在 config.toml 的适当位置,比如我的文件中 [params.gitment] 的下面:

1
2
3
4
5
6
7
8
9
10
11
12
# Valine.
# You can get your appid and appkey from https://leancloud.cn
# more info please open https://valine.js.org
[params.valine]
enable = true
appId = '你的appId'
appKey = '你的appKey'
notify = false # mail notifier , https://github.com/xCss/Valine/wiki
verify = false # Verification code
avatar = 'mm'
placeholder = '说点什么吧...'
visitor = true

上面几项内容的含义,这里简单一说,具体还是要看 Valine官网中配置相关的内容:

参数 用途
enable 这是用于主题中配置的,不是官方Valine的参数,true时控制开启此评论系统
appId 这是在 leancloud 后台应用中获取的,也就是上面提到的 App ID
appKey 这是在 leancloud 后台应用中获取的,也就是上面提到的 App Key
notify 用于控制是否开启邮件通知功能,具体参考邮件提醒配置
verify 用于控制是否开启评论验证码功能
avatar 用于配置评论项中用户头像样式,有多种选择:mm, identicon, monsterid, wavatar, retro, hide。详细参考:头像配置
placehoder 评论框的提示符
visitor 控制是否开启文章阅读数的统计功能i, 详情阅读文章阅读数统计

修改主题文件

themes/tranquilpeak_0.47beta/layouts/_default/single.html文件,将以下代码插入到第42行的位置:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
{{- if .Site.Params.valine.enable -}}
<!-- id 将作为查询条件 -->
<span id="{{ .URL | relURL }}/" class="leancloud_visitors" data-flag-title="{{ .Title }}">
<span class="post-meta-item-text">文章阅读量 </span>
<span class="leancloud-visitors-count">1000000</span>
<p></p>
</span>
<div id="vcomments"></div>
<script src="//cdn1.lncld.net/static/js/3.0.4/av-min.js"></script>
<script src='//unpkg.com/valine/dist/Valine.min.js'></script>
<script type="text/javascript">
new Valine({
el: '#vcomments',
appId: '{{ .Site.Params.valine.appId }}',
appKey: '{{ .Site.Params.valine.appKey }}',
notify: '{{ .Site.Params.valine.notify }}',
verify: '{{ .Site.Params.valine.verify }}',
avatar: '{{ .Site.Params.valine.avatar }}',
placeholder: '{{ .Site.Params.valine.placeholder }}',
visitor: '{{ .Site.Params.valine.visitor }}'
});
</script>
{{- end }}