Hexo使用畅言评论系统

title: Hexo使用畅言评论系统
date: 2018-10-13 23:25:33
tags: [hexo,畅言]
categories: hexo博客折腾

一、前言

作为一个博客网站，怎么能没有跟各位互动呢，而github是一个纯静态的网页博客，无法设置评论，所以就只有用其它网站的插件了。听网上说之前githubpage很多人的评论系统是用的多说，不过最近多说网站关闭，导致很多人没有办法使用评论，而友言又因为是http协议不支持https的github博客,别担心，还有一个替代品，那就是畅言

二、注册登录畅言

网上搜索畅言，可以直接传送门：http://changyan.kuaizhan.com/
在这里插入图片描述

注册完成后还会有一大堆初始化，有个需要注意的地方，畅言是需要备案的，不备案会有15天的试用期，现在我们不管，点击下图标注的地方，后面我会介绍怎么通过备案。
在这里插入图片描述
其它可以参考我写的。

三、插入代码

接下来就是代码的插入了，我用的是yelee的主题，所以就用这个作为例子。

在\themes\hexo-theme-yelee\layout_partial\comments文件夹下建立一个changyan.ejs的文件，文件里的代码参考在你畅言的管理页有。

<!--PC版-->
<div id="SOHUCS" ></div>
<script charset="utf-8" type="text/javascript" src="https://changyan.sohu.com/upload/changyan.js" ></script>
<script type="text/javascript">
window.changyan.api.config({
appid: '***',
conf: '***''
});
</script>

这是我畅言网站建议我的代码

<section class="changyan" id="comments">    
    <div id="SOHUCS"></div>
    <script charset="utf-8" type="text/javascript" src="https://changyan.sohu.com/upload/changyan.js" ></script>
    <script type="text/javascript">
         var loadComment = function(){
                window.changyan.api.config({
                appid: '**appid**',
                conf: '**appkey**'
                });
        }
    </script>
    <%- partial('click2show') %>
</section>

大家参考我写的代码和网站示例代码，这里其实大家可以参考你们主题里面其它评论里面的代码，根据主题不同可以做变动，大家有不懂的地方可以给我发邮箱，我一定及时给你们答复。
2. 在article.ejs里面添加一句代码，下面高亮部分就是我加的代码

<article id="<%= post.layout %>-<%= post.slug %>" class="article article-type-<%= post.layout %>" itemscope itemprop="blogPost">
  <%if(post.noDate != "true"){%>
    <div class="article-meta">
      <%- partial('post/date', {class_name: 'article-date', date_format: null}) %>
    </div>
  <%}%>
  <div class="article-inner">
    <% if (theme.fancybox){ %>
      <input type="hidden" class="isFancy" />
    <% } %>
    <% if (post.link || post.title){ %>
      <header class="article-header">
        <%- partial('post/title', {class_name: 'article-title'}) %>
      </header>
      <% if (!index){ %>
      <div class="article-info article-info-post">
        <%- partial('post/category') %>
        <%- partial('post/tag') %>
        <div class="clearfix"></div>
      </div>
      <% } %>
    <% } %>
    <div class="article-entry" itemprop="articleBody">
      <% if (index && (post.description || post.excerpt)){ %>
          <% if (post.description){ %>
              <%- post.description %>
          <% } else { %>
              <%- post.excerpt %>
          <% } %>
      <% } else { %>
          <% if (is_page()){ %>
              <%- partial('_partial/page') %>
          <% } %>
        <%- post.content %>
      <% } %>
    </div>
    <% if (index){ %>
    <div class="article-info article-info-index">
      <%if(post.top){%>
        <div class="article-pop-out tagcloud">
          <a class="">置顶</a>
        </div>
      <% } %>
      <%- partial('post/category') %>
      <%- partial('post/tag') %>
      <% if (index && (post.description || post.excerpt)){ %>
        <p class="article-more-link">
          <a href="<%- url_for(post.path) %>#more"><%= __('index.more') %> >></a>
        </p>
      <% } %>
      <div class="clearfix"></div>
    </div>
    <% } %>
  </div>
  <% if (!index){ %>
    <%- partial('post/nav') %>
  <% } %>
</article>
<%- partial('_partial/toc') %>

<% if (!index && theme.share.on && (post.share != false || post.share)){ %>
    <%- partial('post/share') %>
<% } %>

<% if (!index && post.comments){ %>
    <% if (theme.duoshuo.on) { %>
      <%- partial('comments/duoshuo', {
          key: post.path,
          title: post.title,
          url: config.url+url_for(post.path),
          }) %>
    <% } else if (theme.youyan.on) { %>
        <%- partial('comments/youyan') %>
    <% } else if (theme.disqus.on) { %>
        <%- partial('comments/disqus', {
            shortname: theme.disqus.shortname
          }) %>
    <% } else if (config.disqus_shortname) { %>
        <%- partial('comments/disqus', {
            shortname: config.disqus_shortname
          }) %>
      <% } %>
      #下面这四行代码就是我加的代码
      <%else if (theme.changyan.on) { %>
        <%- partial('comments/changyan', {
          }) %>
    <% } %> 
<% } %>
<%- partial('_partial/post-nav-button') %>
<% if (!index) { %>
    <script>
        <% if (post.fancybox === false){ %>
            yiliaConfig.fancybox = false;
        <% } %>
    </script>
<% } %>

我就加了这几行代码

<%else if (theme.changyan.on) { %>
        <%- partial('comments/changyan', {
          }) %>
    <% } %>

其中theme.changyan.on是在主题的_config.yml文件中配置，comments/changyan是添加文件的位置。

在主题的config.yml 文件中加

changyan:
 on: true

当然，我们要把文件中的preload_comment: 配成ture。

 preload_comment: true

此时，我们对畅言插件的添加就完成了一大半了。如果你畅言中的地址写对，应该在页面可以看到效果了。
在这里插入图片描述

四、畅言的备案

前面也提到，畅言是需要备案的，但是如果我们搭建个个人网站还得去买域名买空间备案，那也太得不偿失了。下面我教大家用一个方法忽略备案。

我们需要一个已经备案的网站域名和备案号，这个大家可以去网上百度。可以找一个小众的网站域名，去备案查询网查询备案号。
然后在畅言后台系统系统设置-通用设置添加备案号和站点网址，注意站点网址一定要改。

重点来了，备案地址没有写我们自己的网站域名我们的博客是用不了评论系统的，这个时候我们只需要把我们的域名地址写入域名白名单就行了。

做到这样，差不多就完成了。如果大家遇到什么问题，可以联系我的email，也可以在评论区写下你的评论，我会第一时间回复大家。