UDN-企业互联网技术人气社区

板块导航

浏览  : 631
回复  : 4

[原生js] 使用多说评论

[复制链接]
芭芭拉的头像 楼主
发表于 2017-1-8 15:12:09 | 显示全部楼层 |阅读模式
  网站的评论功能使用多说( http://duoshuo.com/ )。

  考虑到 Disqus 在国内基本访问不到,所以还是把评论功能换成国内能访问的较常用的 多说(duoshuo) (使用微信、微博、QQ、人人、豆瓣、开心、百度、谷歌的账号登录)吧。

  此外 Comm(ent|it) ( https://commentit.io/ )似乎也是个不错的选择(使用github, facebook, twitter账号登录),但对hexo开发者来说可能不太适用。

  使用多说评论

  注册账号,然后填入网站相关内容,之后会提示把以下代码复制并粘帖到您网页代码 <body> 与 </body> 间的任意位置。
  1. <!-- 多说评论框 start -->
  2.     <divclass="ds-thread"data-thread-key="请将此处替换成文章在你的站点中的ID"data-title="请替换成文章的标题"data-url="请替换成文章的网址"></div>
  3. <!-- 多说评论框 end -->
  4. <!-- 多说公共JS代码 start (一个网页只需插入一次) -->
  5. <scripttype="text/JavaScript">
  6. var duoshuoQuery = {short_name:"你的多说short_name"};
  7.     (function(){
  8.         var ds = document.createElement('script');
  9.         ds.type = 'text/JavaScript';ds.async = true;
  10.         ds.src = (document.location.protocol == 'https:' ? 'https:' : 'http:') + '//static.duoshuo.com/embed.js';
  11.         ds.charset = 'UTF-8';
  12.         (document.getElementsByTagName('head')[0]
  13.          || document.getElementsByTagName('body')[0]).appendChild(ds);
  14.     })();
  15.     </script>
  16. <!-- 多说公共JS代码 end -->
复制代码

  对于hexo用户

  对hexo用户,可以使用以下代码:
  1. <!-- 多说评论框 start -->
  2.     <divclass="ds-thread"data-thread-key="<%= post.layout %>-<%= post.slug %>"data-title="<%= post.title %>"data-url="<%= page.permalink %>"></div>
  3. <!-- 多说评论框 end -->
  4. <!-- 多说公共JS代码 start (一个网页只需插入一次) -->
  5. <scripttype="text/JavaScript">
  6. var duoshuoQuery = {short_name:"<%= theme.duoshuo_shortname %>"};
  7.     (function(){
  8.         var ds = document.createElement('script');
  9.         ds.type = 'text/JavaScript';ds.async = true;
  10.         ds.src = (document.location.protocol == 'https:' ? 'https:' : 'http:') + '//static.duoshuo.com/embed.js';
  11.         ds.charset = 'UTF-8';
  12.         (document.getElementsByTagName('head')[0]
  13.          || document.getElementsByTagName('body')[0]).appendChild(ds);
  14.     })();
  15.     </script>
  16. <!-- 多说公共JS代码 end -->
复制代码

  对tranquilpeak主题来说,可作如下修改:

  在 /themes/tranquilpeak/layout/_partial/script.ejs 中加入
  1. <%if(theme.duoshuo_shortname&&is_post() &&post.comments) { %>
  2.     <scripttype="text/JavaScript">
  3.     var duoshuoQuery = {short_name:'<%= theme.duoshuo_shortname %>'};
  4.         (function(){
  5.             var ds = document.createElement('script');
  6.             ds.type = 'text/JavaScript';ds.async = true;
  7.             ds.src = (document.location.protocol == 'https:' ? 'https:' : 'http:') + '//static.duoshuo.com/embed.js';
  8.             ds.charset = 'UTF-8';
  9.             (document.getElementsByTagName('head')[0]
  10.              || document.getElementsByTagName('body')[0]).appendChild(ds);
  11.         })();
  12.     </script>
  13. <%} %>
复制代码

  修改 themes/tranquilpeak/layout/_partial/post.ejs
  1. <divclass="post-footer main-content-wrap">
  2.     <%-partial('post/actions') %>
  3.     <%if(post.comments&&theme.duoshuo_shortname) { %>
  4.         <%-partial('post/duoshuo') %>
  5.     <%} %>
  6. </div>
复制代码

  修改 themes/tranquilpeak/layout/_partial/post/actions.ejs
  1. <aclass="post-action-btn btn btn--default"href="#ds-thread">
复制代码

  在 themes/tranquilpeak/_config.yml 中加入

  duoshuo_shortname: 你的多说shortname

  添加 themes/tranquilpeak/layout/_partial/post/duoshuo.ejs
  1. <divclass="ds-thread"data-thread-key="<%= post.layout %>-<%= post.slug %>"data-title="<%= post.title %>"data-url="<%= page.permalink %>">
  2. </div>
复制代码

相关帖子

发表于 2017-1-8 15:12:40 | 显示全部楼层
js框架越来越火了, 不过本人还是喜欢原生的好, 自己写类库, 自己来封装,用着方便。。。。
使用道具 举报

回复

发表于 2017-1-8 15:12:40 | 显示全部楼层
我完全是被标题<<使用多说评论>>吸引过来的
使用道具 举报

回复

发表于 2017-1-8 15:12:41 | 显示全部楼层
感觉JavaScript很有前途
使用道具 举报

回复

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

关于我们
联系我们
  • 电话:010-86393388
  • 邮件:udn@yonyou.com
  • 地址:北京市海淀区北清路68号
移动客户端下载
关注我们
  • 微信公众号:yonyouudn
  • 扫描右侧二维码关注我们
  • 专注企业互联网的技术社区
版权所有:用友网络科技股份有限公司82041 京ICP备05007539号-11 京公网网备安1101080209224 Powered by Discuz!
快速回复 返回列表 返回顶部