给MWeb生成的静态博客增加分享和评论
此文章将介绍如何增加多说、Disqus 的评论和JiaThis、AddThis 的分享。
文章目录:
增加多说的评论和JiaThis的分享
打开多说网站,注册并新建站点,我的设置如下:

点创建后会跳到多说的获取代码页面。比如说我的代码如下:
<!-- 多说评论框 start -->
<div class="ds-thread" data-thread-key="请将此处替换成文章在你的站点中的ID" data-title="请替换成文章的标题" data-url="请替换成文章的网址"></div>
<!-- 多说评论框 end -->
<!-- 多说公共JS代码 start (一个网页只需插入一次) -->
<script type="text/javascript">
var duoshuoQuery = {short_name:"mweb-zh"};
(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 -->
然后删除 data-thread-key="请将此处替换成文章在你的站点中的ID" data-title="请替换成文章的标题" data-url="请替换成文章的网址"
这些文字。这些都用不到。然后就贴到 MWeb 的分类设置的 Comment & Share code
输入框中。
如果你还要增加分享功能,请去 http://www.jiathis.com/ 然后点 获取代码
,然后会得到以下代码:
<!-- JiaThis Button BEGIN -->
<div class="jiathis_style_24x24">
<a class="jiathis_button_tsina"></a>
<a class="jiathis_button_qzone"></a>
<a class="jiathis_button_tqq"></a>
<a class="jiathis_button_weixin"></a>
<a class="jiathis_button_renren"></a>
<a href="http://www.jiathis.com/share" class="jiathis jiathis_txt jtico jtico_jiathis" target="_blank"></a>
<a class="jiathis_counter_style"></a>
</div>
<script type="text/javascript" src="http://v3.jiathis.com/code/jia.js" charset="utf-8"></script>
<!-- JiaThis Button END -->
然后把分享代码放上边,评论代码在下边,一起加起来贴到 MWeb 的分类设置的 Comment & Share code
输入框中。大概是像下面这样,这也是 MWeb 中文官网的分享和评论所用的代码。
<!-- JiaThis Button BEGIN -->
<div class="jiathis_style_24x24">
<a class="jiathis_button_tsina"></a>
<a class="jiathis_button_qzone"></a>
<a class="jiathis_button_tqq"></a>
<a class="jiathis_button_weixin"></a>
<a class="jiathis_button_renren"></a>
<a href="http://www.jiathis.com/share" class="jiathis jiathis_txt jtico jtico_jiathis" target="_blank"></a>
<a class="jiathis_counter_style"></a>
</div>
<script type="text/javascript" src="http://v3.jiathis.com/code/jia.js" charset="utf-8"></script>
<!-- JiaThis Button END -->
<div class="ds-thread" ></div>
<!-- 多说评论框 end -->
<!-- 多说公共JS代码 start (一个网页只需插入一次) -->
<script type="text/javascript">
var duoshuoQuery = {short_name:"mweb-zh"};
(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 -->
如图:


其中 Site other code
这个框可以填入 Google 分析代码等。
增加 Disqus 的评论和 AddThis 的分享
打开 https://disqus.com/ 注册并登入后,点 Add Disqus To Site
填入博客信息,我是这样填:

然后点 Universal Code
会得到以下代码:
<div id="disqus_thread"></div>
<script type="text/javascript">
/* * * CONFIGURATION VARIABLES * * */
var disqus_shortname = 'mweb-en';
/* * * DON'T EDIT BELOW THIS LINE * * */
(function() {
var dsq = document.createElement('script'); dsq.type = 'text/javascript'; dsq.async = true;
dsq.src = '//' + disqus_shortname + '.disqus.com/embed.js';
(document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq);
})();
</script>
<noscript>Please enable JavaScript to view the <a href="https://disqus.com/?ref_noscript" rel="nofollow">comments powered by Disqus.</a></noscript>
直接贴到 MWeb 的分类设置的 Comment & Share code
输入框中即可。
如果你还要增加分享功能,请去 https://www.addthis.com 然后注册,登录等等,然后它会出来让你选择样式,我选免费的如下图右边的那个,点 Get Code
。

会得到两段代码,点 Active
后,把合在一起即可。
<!-- Go to www.addthis.com/dashboard to customize your tools -->
<script type="text/javascript" src="//s7.addthis.com/js/300/addthis_widget.js#pubid=ra-55117df11d1413c3" async="async"></script>
<!-- Go to www.addthis.com/dashboard to customize your tools -->
<div class="addthis_native_toolbox"></div>
如图:

1.2 及以下升级上来的朋友请看
1.3 版的主题模板有更新!考虑到主题模板有可能被修改,所以 MWeb 在新版发布时不会更新旧版本的网站主题模板。如果你没有改动到,请去 https://github.com/oulvhai/MWeb-Themes 下载最新的主题换掉即可。 如果你有改动到,请参考这个网址:http://zh.mweb.im/mweb1.3-release-zh.html