最近将博客的生成器由Hexo转回到Hugo了,在这之后选了一些主题,试过Even,Jane,mainroad等等,最后还是选了v2上有人发布的这个LeaveIt主题。主要是因为这个主题简洁又不缺乏华丽的感觉。不过有点不足的是这个主题并不能直接用评论系统,在查看了相关教程之后,终于添加了原来使用的Valine评论系统。

今天参考了Even主题和Jane主题的源码,并且看了@5km的教程,尝试了好久,一直无法添加成功,最后在该教程的评论区,有其他人请教了和我一样的主题的问题,最后通过@5km的解答,终于成功实现了Valine评论系统的添加。

方法1:只加入Valine

由于LeaveIt主题并没有自带任何一个评论系统,所以如果只要Valine评论就直接修改下面文件即可。

修改站点配置文件

首先先在站点的配置文件config.toml里面添加下面的配置。

  # 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 = 'mp' #神秘人(一个灰白头像) 
    placeholder = '说点什么吧...' #在评论框显示的温馨提示等
    visitor = true #访问量统计

2.主题的文章页模板添加Valine

另外在LeaveIt的主题下的 layouts/_default/single.html 找到第97行的 <div class="post-comment"> 代码块中的判断Disqus略称后的 {{ end }} 后面,插入Valine代码,插入后的效果如下:

 <div class="post-comment">
       {{ if ( .Params.showComments | default true ) }}
             {{ if ne .Site.DisqusShortname "" }}
                 {{ template "_internal/disqus.html" . }}
             {{ end }}
             <!-- valine -->
             {{- 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"></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 }}
       {{ end }}
 </div>

其实这样已经可以实现了。回到博客文章下方就可以看到已经显示出来了。当然前提是你已经配置好过Valine了,就是在Leancloud上注册等等。相关可以查看Valine官方文档

Valine已经可以用了
Valine已经可以用了

方法2:同时加入多个评论系统的配置

这样是很多主题的做法,为了方便切换评论系统直接内置多个评论系统,这样做的话可以直接在站点配置文件里面修改即可使用。

1.主题模板下新建comments.html

在LeaveIt主题的/themes/LeaveIt/layouts/partials下新建comments.html模板(如有,则不需新建,直接修改内容即可。)在comments.html里面添加下面的内容。

{{ if and .IsPage (ne .Params.comment false) -}}
  <!-- valine -->
  {{- 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"></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 }}

  <!-- Disqus -->
  {{- if .Site.DisqusShortname -}}
    <div id="disqus_thread"></div>
    <script type="text/javascript">
    (function() {
      // Don't ever inject Disqus on localhost--it creates unwanted
      // discussions from 'localhost:1313' on your Disqus account...
      if (window.location.hostname === 'localhost') return;
      var dsq = document.createElement('script'); dsq.type = 'text/javascript'; dsq.async = true;
      var disqus_shortname = '{{ .Site.DisqusShortname }}';
      dsq.src = '//' + disqus_shortname + '.disqus.com/embed.js';
      (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq);
    })();
    </script>
    <noscript>Please enable JavaScript to view the <a href="http://disqus.com/?ref_noscript">comments powered by Disqus.</a></noscript>
  {{- end -}}

  <!-- changyan -->
  {{- if and .Site.Params.changyanAppid .Site.Params.changyanAppkey -}}
    <div id="SOHUCS" sid="{{ .URL }}"></div>
    <script type="text/javascript">
    (function(){
      if (window.location.hostname === 'localhost') return;
      var appid = '{{ .Site.Params.changyanAppid }}';
      var conf = '{{ .Site.Params.changyanAppkey }}';
      var width = window.innerWidth || document.documentElement.clientWidth; 
      if (width < 960) {window.document.write('<script id="changyan_mobile_js" charset="utf-8" type="text/javascript" src="https://changyan.sohu.com/upload/mobile/wap-js/changyan_mobile.js?client_id=' + appid + '&conf=' + conf + '"><\/script>'); } else { var loadJs=function(d,a){var c=document.getElementsByTagName("head")[0]||document.head||document.documentElement;var b=document.createElement("script");b.setAttribute("type","text/javascript");b.setAttribute("charset","UTF-8");b.setAttribute("src",d);if(typeof a==="function"){if(window.attachEvent){b.onreadystatechange=function(){var e=b.readyState;if(e==="loaded"||e==="complete"){b.onreadystatechange=null;a()}}}else{b.onload=a}}c.appendChild(b)};loadJs("https://changyan.sohu.com/upload/changyan.js",function(){window.changyan.api.config({appid:appid,conf:conf})}); }
    })();
    </script>
  {{- end -}}

  <!-- LiveRe -->
  {{- if .Site.Params.livereUID -}}
    <div id="lv-container" data-id="city" data-uid="{{ .Site.Params.livereUID }}">
    <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>
    <noscript>Please enable JavaScript to view the comments powered by <a href="https://livere.com/">LiveRe.</a></noscript>
    </div>
  {{- end -}}

  <!-- gitment -->
  {{- if .Site.Params.gitment.owner -}}
    <div id="comments-gitment"></div>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/gitment@0.0.3/style/default.min.css" crossorigin="anonymous">
    <script src="https://cdn.jsdelivr.net/npm/gitment@0.0.3/dist/gitment.browser.min.js" crossorigin="anonymous"></script>
    <script type="text/javascript">
      var gitment = new Gitment({
        id: '{{ .Date }}',
        title: '{{ .Title }}',
        link: decodeURI(location.href),
        desc: '{{ .Summary }}',
        owner: '{{ .Site.Params.gitment.owner }}',
        repo: '{{ .Site.Params.gitment.repo }}',
        oauth: {
          client_id: '{{ .Site.Params.gitment.clientId }}',
          client_secret: '{{ .Site.Params.gitment.clientSecret }}'
        }
      });
      gitment.render('comments-gitment');
    </script>
    <noscript>Please enable JavaScript to view the <a href="https://github.com/imsun/gitment">comments powered by gitment.</a></noscript>
  {{- end -}}

  <!-- gitalk -->
  {{- if .Site.Params.gitalk.owner -}}
    <div id="gitalk-container"></div>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.css" crossorigin="anonymous">
    <script src="https://cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.js" crossorigin="anonymous"></script>
    <script type="text/javascript">
      var gitalk = new Gitalk({
        id: '{{ .Date }}',
        title: '{{ .Title }}',
        clientID: '{{ .Site.Params.gitalk.clientId }}',
        clientSecret: '{{ .Site.Params.gitalk.clientSecret }}',
        repo: '{{ .Site.Params.gitalk.repo }}',
        owner: '{{ .Site.Params.gitalk.owner }}',
        admin: ['{{ .Site.Params.gitalk.owner }}'],
        body: decodeURI(location.href)
      });
      gitalk.render('gitalk-container');
    </script>
    <noscript>Please enable JavaScript to view the <a href="https://github.com/gitalk/gitalk">comments powered by gitalk.</a></noscript>
  {{- end }}

{{- end }}

2.在文章页模板中调用上面新建的评论模板

例如本站用的LeaveIt主题是在layouts/_default/single.html 找到第97行的<div class="post-comment"> 代码块中的判断Disqus略称后的 {{ end }}后面,插入调用代码。

{{ partial "comments.html" . }}

其实就是方法1的第二步,只是方法一是直接将评论代码加到文章页模板中,而这个是将评论代码统统放在comments.html模板下,再在文章页模板通过代码调用这个comments.html,只要站点配置文件config.toml里面存在相关开关配置,则评论系统就会被正常调用。

方法二参考的是其他的主题Even等,Valine评论系统是可以正常被调用,但是其他的没有测试过。

参考来源

hugo博客添加评论系统Valine

Valine官方文档