Hugo使用LiveRe评论系统

by · 2017年08月30日 · 962 Words · ~2min reading time | Improve on


原文链接： Hugo使用LiveRe评论系统

Hugo内置了Disqus评论系统，Disqus虽然好用，但在大中华局域网下经常加载不出或者干脆不显示，多说也关了，准备用搜狐畅言,但注册信息时需要网站的备案号，否则只能用15天，无奈放弃。后来无意在电影天堂还是啥网站看到他评论系统还不错，查了一下，是韩国的牌子LiveRe(来必力)，于是小折腾一下。

注册LiveRe

略过，将网站注册完成后到管理页面->代码管理 中可以拿到一般网站 的安装代码。里面有你的data-uid。

更改tranquilpeak主题文件

tranquilpeak原声支持Disqus，通过在config.toml中设置disqusShortname的方式可以方便的使用Disqus。所以这里也不添加新的config字段了，直接将disqusShortname设置为LiveRe的data-uid。但这样就完了么？答案是naive。我们还需要将主题中Disqus的安装代码替换掉，下面给出需要替换的文件内容。

layout_default\single.html

评论部分的分区是在<div id="post-footer">中，其中有一段代码

{{ if not (eq .Params.comments false) }}
    {{ if .Site.DisqusShortname }}
    <div id="lv-container" data-id="city" data-uid='{{ .Site.DisqusShortname }}'>
    {{ partial "post/disqus.html" . }}
    </div>
    {{ end }}
{{ end }}

这里是LiveRe插件是否启用的判断逻辑，如果设置了disqusShortname且开启了评论功能，那么就会加载LiveRe，data-uid即是配置在config.toml中的disqusShortname字段。

layout\partials\post\disqus.html

其实改无所谓，改只是为了显示起来更统一。

<div id="livere_thread">
  <noscript>为正常使用来必力评论功能请激活JavaScript</noscript>
</div>

layout\partials\post\actions.html

这里面的disqus_thread也改为livere_thread，不然链接不到。

layout\partials\script.html

不好意思把重点放在了最后，这里才是加载LiveRe插件的脚本逻辑。
找到{{ if .Site.DisqusShortname }},可以看到原来这里是配置Disqus的安装代码,我们需要做的就是把Disqus的代码替换为LiveRe的安装代码。注意不要把<div id="lv-container" data-id="city" data-uid='{{ .Site.DisqusShortname }}'>这行写在这里，不然界面布局会乱。改完后大概是这样

{{ if .IsPage }}
  {{ if not (eq .Params.comments false) }}
    {{ if .Site.DisqusShortname }}
      <script type="text/javascript">
        (function(d, s) {
            var j, e = d.getElementsByTagName(s)[0];
            if (typeof LivereTower === 'function') { return; }
            j = d.createElement(s);
            j.src = 'https://cdn-city.livere.com/js/embed.dist.js';
            j.async = true;

            e.parentNode.insertBefore(j, e);
        })(document, 'script');
      </script>
    {{ end }}
  {{ end }}
{{ end }}

到这里，就已经把Disqus系统替换为LiveRe系统了。

Tags:

`