搞定在Hexo博客上添加Valine评论


基于很多不可知原因换到Hexo,用过很多主题模板,最终喜欢简洁的我选用了【polarbearsimple】主题,并一直用到现在,此主题默认是Dsiqus和多说评论,可惜都不好用,一度想采用畅言,但是登录比较麻烦,故最后用Valine,此文叙述添加过程,感谢xCss大佬。

背后的故事

polarbearsimple主题简洁明了,非常适合文字写作,我博客主要记叙我的工作和生活,非常适合我;关于在polarbearsimple添加Valine评论,我在网上检索了很多教程,按照教程改,但是最终都失败了,苦于无评论系统的原因,我到那些成功添加Valine的站点留言咨询,也给xCss大佬发了邮件;诸位博主的文章和回答,只是让我学会了配置线上的后台,而涉及到在我使用的主题上就完全不懂了,最终xCss大佬完美解决此问题,此处再次致谢!

polarbearsimple主题改造

polarbearsimple主题中,某些文件和其他主题不一样,一方面我对代码一窍不通,另一方面参考其他主题更改也不知道代码需放到何处,找不到对应文件让我倍感伤神。

需改造的文件如下

1.polarbearsimple/layout/_script/_comments/valine.swig
2.polarbearsimple/layout/_script/comments.swig
3.polarbearsimple/layout/_partial/comments.swig
4.polarbearsimple/_config.yml

步骤1:添加valine.swig

路径:polarbearsimple/layout/_script/_comments/valine.swig 并添加如下代码

<script src="//cdn1.lncld.net/static/js/3.0.4/av-min.js"></script>
<script src="//unpkg.com/valine@latest/dist/Valine.min.js"></script>
{% if theme.valine.enable and theme.valine.appid and theme.valine.appkey %}
  <script type="text/javascript">
    window.valine = new Valine({
        el: '#vcomment' ,
        verify: {{ theme.valine.verify }},
        notify: {{ theme.valine.notify }},
        appId: '{{ theme.valine.appid }}',
        appKey: '{{ theme.valine.appkey }}',
        placeholder: '{{ theme.valine.placeholder }}',
        visitor: {{ theme.valine.visitor }}
    });
  </script>
{% endif %}

步骤2:修改comments.swig文件

路径:polarbearsimple/layout/_script/comments.swig 并改成如下代码

{% include "_comments/duoshou.swig" %}
{% include "_comments/disqus.swig" %}
{% include "_comments/valine.swig" %}

步骤3:修改_partial下的comments.swig文件

路径:polarbearsimple/layout/_partial/comments.swig 并修改为如下代码

{% if page.comments and not is_home() %}
  <div class="comments" id="comments">
    {% if config.disqus_shortname %}
    <div style="text-align:center;">
        <button class="btn" id="load-disqus" onclick="disqus.load();">加载 Disqus 评论</button>
    </div>
      <div id="disqus_thread">
        <noscript>
          Please enable JavaScript to view the
          <a href="//disqus.com/?ref_noscript">comments powered by Disqus.</a>
        </noscript>
      </div>
    {% elif config.duoshuo_shortname %}
      <div class="ds-thread" data-thread-key="{{ page.path }}"
           data-title="{{ page.title }}" data-url="{{ page.permalink }}">
      </div>
    
    {% elif theme.valine.enable and theme.valine.appid and theme.valine.appkey %}
      <div id="vcomment"></div>
    {% endif %}
  </div>
{% endif %}

步骤4:修改_config.yml文件

路径:此文件为主题目录下配置文件polarbearsimple/_config.yml 添加如下代码

# Valine. 
# You can get your appid and appkey from https://leancloud.cn
# more info please open https://valine.js.org
valine:
  enable: false # if you want use Valine,please set enable: true
  appid:  # your leancloud application appid
  appkey:  # your leancloud application appkey
  notify: false
  verify: false
  visitor: false
  placeholder: ヾノ≧∀≦)o来啊,快活啊!

其中的appid和appkey需要到leancloud官网申请,至于网站上的设置此处就不再赘述,网上有很多。

看看最后的成果

将文件修改保存完毕,PUSH到代码仓库里稍等几分钟,网站上就会出现评论框,在本地预览的时候无法加载评论,只能看到评论框,主要是因为设置的安全域名限制了,PUSH到线上即可正常显示。

至此,【hexo-theme-polarbearsimple】主题添加Valine评论系统的工作就完毕了,非常感谢xCss大佬以及其他博主的解答!

文 / iGuanren 2019/01/09

声明:官仁有话说|版权所有,违者必究|如未注明,均为原创|本网站采用BY-NC-SA协议进行授权

转载:转载请注明原文链接 - 搞定在Hexo博客上添加Valine评论


从来没有这样去喜欢一个女孩子,即便她说现在或将来都不会喜欢我,而我也不会这样放弃 —— 2019 在成都遇见了她