pug如何加入畅言评论功能

## 前言

小菜鸡前段时间尝试着用 Hexo 建一个个人博客。 安装hexo过程很顺畅，没有遇到什么问题，但是如果你有hexo安装的其他问题可以去看这位 小仙女 写的很详细的教程。 相比之下我的教程内容不是很精细，但是如果你想少走弯路可以来瞅瞅。

## 问题

我用的是畅言来当评论后台，但是我在添加评论模块的时候遇到了棘手的问题 -- > 这个主题的语言 > Pug 我不会，哈哈。其实就是把畅言的模块放到你想要的位置，然后配置 SourceID。但是由于语言不通，所以不能成功的设置 SourceID。查到的资料也都是 Next主题相关的解决方案，而我的主题是Pug生成的。难道我要因为一个评论功能就换掉我精挑细选的主题么，当然不阔能。一番翻云覆雨之后我终于搞定了这个东西。

### Pug

Pug的前身是jade，百度jade和Pug的教程都是一样的，它们的语法都很相近。

### SourceID

SourceID 是文章的唯一标识符，用来区分的文章的评论。文章的唯一标识符可以根据文章的标题、发布时间或者文章链接来生成独一无二的哈希值， 如果你不想区分开可以不写。

### 注册畅言

注册没什么难的地方，就是繁琐。我就不啰嗦了。

### 安装畅言

在博客里面 安装畅言，不要被这两个字困扰，其实是引入。畅言会自动给你生成相关代码，我用的是自适应版本，可以根据自己的需要去选择。
下面看代码 ：首先是布局的代码，将这段代码放在你想要显示评论的位置。一般都会放在文章的底部。

<!--PC和WAP自适应版-->
<div id="SOHUCS" sid="请将此处替换为配置SourceID的语句" ></div> 

sid 的值就是 SourceID 就是用来区分文章评论的

然后是js部分

<script type="text/javascript"> 
(function(){ 
var appid = 'xxxxxxxxxx'; 
var conf = 'xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx'; 
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.οnlοad=a}}c.appendChild(b)};loadJs("https://changyan.sohu.com/upload/changyan.js",function(){window.changyan.api.config({appid:appid,conf:conf})}); } })(); </script>

## 操作

### 新建模块

一、新建评论模块文件

  
  路径： themes -> terminal -> layout -> includes   在自己使用的主题下新建 comment.pug  如图：

  路径： themes -> terminal -> layout -> source -> js  下新建comment文件夹用来存放一系列的js文件 ： comment.js (畅言提供的js代码) common.js (畅言的配置) getHashCode.js (获取文章的独一无二的哈希值，作为 SourceID) 

二、加入评论模块

  在 comment.pug 加入代码

- var hash = page.title + page.date;
div(id="SOHUCS" hash=`${hash}` sid="")
each url in theme.comment.js
  script(src=url) 

hash 是 根据文章的标题和文章的时间组合成的字符串 


  在 comment.js 内加入

<script type="text/javascript"> 
(function(){ 
var appid = 'xxxxxxxxxx'; 
var conf = 'xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx'; 
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.οnlοad=a}}c.appendChild(b)};loadJs("https://changyan.sohu.com/upload/changyan.js",function(){window.changyan.api.config({appid:appid,conf:conf})}); } })(); </script>

  在 getHashCode.js 里面加入 

  

//获取字符串的 哈希值 
  function getHashCode(str,caseSensitive){
    if(!caseSensitive){
      str = str.toLowerCase();
    }
    var hash  =   1315423911,i,ch;
    for (i = str.length - 1; i >= 0; i--) {
      ch = str.charCodeAt(i);
      hash ^= ((hash << 5) + ch + (hash >> 2));
    }
    return  (hash & 0x7FFFFFFF);
  }


  var SOHUCS = document.getElementById("SOHUCS");
  var hashData = SOHUCS.getAttribute("hash");
  SOHUCS.setAttribute("sid", getHashCode(hashData));

将获取哈希值的方法添加到 sid的属性值里
 
  在 post.pug 最下面 引入 comment.pug 。post.pug 是文章详情页面， 也就是文章详情页面才会显示评论。

extends includes/layout.pug


block content
  article#post
    a.article-title= page.title || 'No Title'
    span(id="busuanzi_container_page_pv" class="article-traffic")
      |本文阅读量 
      span(id="busuanzi_value_page_pv")
      |  次
    br
    time.article-date #[i(class="fa fa-calendar" aria-hidden="true")] !{date(page.date, config.date_format)}
    != page.content
  include includes/pagination.pug
  include includes/comment.pug 

  在主题下的 _config.yml 的配置文件里面添加代码，否则生成页面的时候不会引入这3个js文件， 代码如下：

comment:
  js:
    common: /blogs/js/comment/common.js
    getHashCode: /blogs/js/comment/getHashCode.js
    commemt: /blogs/js/comment/comment.js

地址以自己部署博客的地址为准， 比如我生成的页面都部署在 www.shyboy.cc/blogs 文件夹下。所以就是 /blogs/js/comment/xxx.js

至此就大功告成啦，点击文章，下面应该会有畅言的评论出现。 如想修改主题，就在 common.js 加入如下代码：

var _config={
  skin: 'black' /*黑色皮肤，目前只支持black参数*/
}