📄
hexo
  • Introduction
  • 目录
    • 前言
    • 基本介绍
      • 1.1 安装环境
      • 1.2 基本命令
      • 1.3 初始化
      • 1.4 Markdown书写
      • 1.5 文章Front-matter
      • 1.6 第一篇文章
      • 1.7 部署到Web服务器
      • 1.8 托管到Github或Coding
    • 自定义主题
      • 2.1 修改标题
      • 2.2 去Google化
      • 2.3 替换评论服务
      • 2.4 添加百度统计
      • 2.5 新浪微博挂件
      • 2.6 微信二维码挂件
      • 2.7 添加文章目录
      • 2.8 添加回到顶部按钮
      • 2.9 集成推荐模块
      • 2.10 添加计数器
      • 2.11 添加日历云挂件
      • 2.12 添加站内搜索
      • 2.13 国际化
    • 创建主题
      • 3.1 了解主题目录
      • 3.2 了解布局
      • 3.3 选择技术
    • 插件
      • 4.1 脚本
      • 4.2 插件
      • 4.3 脚本示例
      • 4.4 插件示例
    • 致谢
Powered by GitBook
On this page
  • 1. 删掉disqus评论
  • 2. 添加多说评论
  • 2.1 获取通用代码
  • 2.2 创建comment.ejs文件
  • 2.3 配置多说short_name
  • 2.4 在文章页面中显示多说

Was this helpful?

  1. 目录
  2. 自定义主题

2.3 替换评论服务

landscape主题默认使用的评论服务是disqus,disqus的评论服务在国内也是可以访问的,但是鉴于速度问题,这里替换成国内的多说评论。

1. 删掉disqus评论

还是刚才那个after-footer.ejs文件,删掉如下代码:

<% if (config.disqus_shortname){ %>
<script>
  var disqus_shortname = '<%= config.disqus_shortname %>';
  <% if (page.permalink){ %>
  var disqus_url = '<%= page.permalink %>';
  <% } %>
  (function(){
    var dsq = document.createElement('script');
    dsq.type = 'text/javascript';
    dsq.async = true;
    dsq.src = '//' + disqus_shortname + '.disqus.com/<% if (page.comments) { %>embed.js<% } else { %>count.js<% } %>';
    (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq);
  })();
</script>
<% } %>

2. 添加多说评论

2.1 获取通用代码

首先登陆多说,创建一个站点,获取通用代码,如下图,

这里有4个地方需要注意填写:

  • data-thread-key 填上<%= page.path %>,代表页面路径;

  • data-title 填上<%= page.title %>,代表页面标题;

  • data-url 填上<%= page.permalink %>,代表页面的完整网址;

  • short_name 填上<%= theme.duoshuo_short_name %>注册多说账号的时候让你填的多说域名;

上面的data-title、data-url只是为了在多说的控制平台上更方便地控制,其实可以不填。但是data-thread-key肯定要区分开,不然多说就不知道评论在哪个页面上显示了,那可就乱了。

2.2 创建comment.ejs文件

在主题目录下layout/_partial文件夹下创建comment.ejs文件,用于存放多说评论代码片段;将上面代码拷贝到comment.ejs中,如图所示,

<!-- 多说评论框 start -->
  <div class="ds-thread" data-thread-key="<%= page.path %>" data-title="<%= page.title %>" data-url="<%= page.permalink %>"></div>
<!-- 多说评论框 end -->
<!-- 多说公共JS代码 start (一个网页只需插入一次) -->
<script type="text/javascript">
var duoshuoQuery = {short_name:"<%= theme.duoshuo_short_name %>"};
  (function() {
    var ds = document.createElement('script');
    ds.type = 'text/javascript';ds.async = true;
    ds.src = (document.location.protocol == 'https:' ? 'https:' : 'http:') + '//static.duoshuo.com/embed.js';
    ds.charset = 'UTF-8';
    (document.getElementsByTagName('head')[0] 
     || document.getElementsByTagName('body')[0]).appendChild(ds);
  })();
  </script>
<!-- 多说公共JS代码 end -->

2.3 配置多说short_name

short_name是多说账号的唯一凭证,自己的评论系统使用自己的short_name,这里最好通过主题变量来控制,如果别人使用了你的主题,恰好没有改short_name,那么你的评论系统里就会出现别人文章的评论,这就有点乱了。

在主题目录下修改_config.yml文件,添加下面两行:

# duoshuo
duoshuo_short_name: lupeng-test

这样就行了,别人如果使用你的主题,就不用去代码里修改short_name里,直接在主题的配置文件里修改一下就可以了。

2.4 在文章页面中显示多说

上面的工作是把多说的代码以及配置全部搞定了,最后一步就是将它放到文章底部。先找到文章的那部分片段代码;

Blog
├── themes
    └──landscape
        └── layout
            └── _partial
                └── article.ejs

在article.ejs文件最后找到这段代码,

<% if (!index && post.comments && config.disqus_shortname){ %>
<section id="comments">
  <div id="disqus_thread">
    <noscript>Please enable JavaScript to view the <a href="//disqus.com/?ref_noscript">comments powered by Disqus.</a></noscript>
  </div>
</section>
<% } %>

修改成:

<% if (!index && post.comments && theme.duoshuo_short_name){ %>
<section id="comments">
  <%- partial('comment') %>
</section>
<% } %>

上面判断语句,首先判断非首页,启用文章评论,多说短域名已经配置,就会展现多说评论框。

Previous2.2 去Google化Next2.4 添加百度统计

Last updated 5 years ago

Was this helpful?

提供了多说评论框、最新评论以及热评文章等插件。

下图就是展示的效果 进入多说后台管理界面,就会发现,出现了两篇文章,一篇是默认文章,一篇是咱们写第一篇文章。

多说 - 社会化评论系统