Tranquilpeak主题修复高亮代码_增加valing评论

修复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 ID` 和 `APP Key`

请先登录或注册 LeanCloud, 进入控制台后点击左下角创建应用：

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

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

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

config.toml添加参数

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

# 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行的位置：

{{- 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 }}