2018-04-07-正确的Disqus使用姿势
前言
给自己的 Jekyll-blog加上了评论系统，上网找了一堆教程结果都是原地爆炸的老教程了噗嗤
正好因为有的同学要这份教程我就写出来了
使用的是Disqus的评论插件：传送门
【根本不是因为我英语不好没有看懂网站上面配置的使用说明】
【md郊区英语还留学生】
顺便提醒一下，因为某些不宜公开讨论的原因，Disqus在P.R.China的部分地区会变得奇慢不比甚至失效......
如果不是肉身翻墙的同学可以尝试一下Gitaik，不过我目前都不知道怎么创建每一篇文章对应的issue......
0x01 准备
首先我使用的是Jekyll的网站模板，其他的模板也有哦，在这个页面应该可以找到，但是是英文的【大雾】
会配合着做一下翻译啦别担心
首先呢肯定是要注册一个Disqus的账号：https://disqus.com/profile/signup/
然后进入到设置：https://disqus.com/home/settings/
这里十分重要了，因为这个评论插件是要登陆评论的，先配置你的个人信息，看左边的第一行Profile和Username，
这里很重要！！！这里的Username（下图就是我们配置时候写在_config.yml里面的disqus_username）
# Disqus settings（https://disqus.com/）
disqus_username: 你的Username
下面的东西爱捣鼓的你也可以看看【看得懂吗
设置个人信息
然后点击右上角的setting（齿轮图标），选择‘Add Disqus to Site’（将Disqus添加到我的网站），找到下面的‘Get start’，然后选择你的网站模板，
没找到？没事我帮你找了【汗】 https://disqus.com/profile/signup/intent/
然后在这个页面选择‘install Disqus on my site’，然后会出现一个新建网站页面
没有？？那么尝试一下https://disqus.com/admin/settings/install/这个页面，然后选择一个网站【可能是因为你之前新建过了网站在Disqus里面，所以她叫你选择一个网站来着】
成功了？？应该是这个页面来着：https://0xc00005.disqus.com/admin/settings/install/
选择网站搭建的语言
然后我这里选择了Jekyll
然后跟着教程里面走就行了，到时候直接copy我的就行了
当然了你要是想自己添加的话也没关系，就是很容易写错来着【我是蒟蒻行吧】
0x02 部署
打开Github或者你自己的服务器，在_layouts文件夹下新建或修改keynote.html
Ummm或者你自己的网页配置文件【乱取名很好玩是吧
然后插入以下代码：
{% if site.disqus.enable %}
<!-- disqus 评论框 start -->
<div class="comment">
<div id="disqus_thread" class="disqus-thread">
</div>
</div>
<!-- disqus 评论框 end -->
{% endif %}
</div>
<!-- Sidebar Container -->
<div class="sidebar-container
col-lg-8 col-lg-offset-2
col-md-10 col-md-offset-1 ">
<!-- Featured Tags -->
{% if site.featured-tags %}
<section>
<hr class="hidden-sm hidden-xs">
<h5><a href="/tags/">FEATURED TAGS</a></h5>
<div class="tags">
{% for tag in site.tags %}
{% if tag[1].size > {{site.featured-condition-size}} %}
<a href="/tags/#{{ tag[0] }}" title="{{ tag[0] }}" rel="{{ tag[1].size }}">
{{ tag[0] }}
</a>
{% endif %}
{% endfor %}
</div>
</section>
{% endif %}
<!-- Friends Blog -->
{% if site.friends %}
<hr>
<h5>FRIENDS</h5>
<ul class="list-inline">
{% for friend in site.friends %}
<li><a href="{{friend.href}}">{{friend.title}}</a></li>
{% endfor %}
</ul>
{% endif %}
</div>
</div>
</div>
</article>
<!-- resize header to fullscreen keynotes -->
<script>
var $header = document.getElementsByTagName("header")[0];
function resize(){
/*
* leave 85px to both
* - told/imply users that there has more content below
* - let user can scroll in mobile device, seeing the keynote-view is unscrollable
*/
$header.style.height = (window.innerHeight-85) + 'px';
}
document.addEventListener('DOMContentLoaded', function(){
resize();
})
window.addEventListener('load', function(){
resize();
})
window.addEventListener('resize', function(){
resize();
})
resize();
</script>
{% if site.disqus.enable %}
<!-- disqus 公共JS代码 start (一个网页只需插入一次) -->
<script type="text/javascript">
/* * * CONFIGURATION VARIABLES * * */
var disqus_shortname = "{{site.disqus.username}}";
var disqus_identifier = "{{page.id}}";
var disqus_url = "{{site.url}}{{page.url}}";
(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>
<!-- disqus 公共JS代码 end -->
{% endif %}
或者可以直接copy我的代码：Github传送门
在_layouts下新建或修改文件post.html，插入以下代码【好像是一样的】
{% if site.disqus_username %}
<!-- disqus 评论框 start -->
<div class="comment">
<div id="disqus_thread" class="disqus-thread"></div>
</div>
<!-- disqus 评论框 end -->
{% endif %}
</div>
<!-- Side Catalog Container -->
{% if page.catalog %}
<div class="
col-lg-2 col-lg-offset-0
visible-lg-block
sidebar-container
catalog-container">
<div class="side-catalog">
<hr class="hidden-sm hidden-xs">
<h5>
<a class="catalog-toggle" href="#">CATALOG</a>
</h5>
<ul class="catalog-body"></ul>
</div>
</div>
{% endif %}
<!-- Sidebar Container -->
<div class="
col-lg-8 col-lg-offset-2
col-md-10 col-md-offset-1
sidebar-container">
<!-- Featured Tags -->
{% if site.featured-tags %}
<section>
<hr class="hidden-sm hidden-xs">
<h5><a href="/tags/">FEATURED TAGS</a></h5>
<div class="tags">
{% for tag in site.tags %}
{% if tag[1].size > {{site.featured-condition-size}} %}
<a href="/tags/#{{ tag[0] }}" title="{{ tag[0] }}" rel="{{ tag[1].size }}">
{{ tag[0] }}
</a>
{% endif %}
{% endfor %}
</div>
</section>
{% endif %}
<!-- Friends Blog -->
{% if site.friends %}
<hr>
<h5>FRIENDS</h5>
<ul class="list-inline">
{% for friend in site.friends %}
<li><a href="{{friend.href}}">{{friend.title}}</a></li>
{% endfor %}
</ul>
{% endif %}
</div>
</div>
</div>
</article>
{% if site.disqus_username %}
<!-- disqus 公共JS代码 start (一个网页只需插入一次) -->
<script type="text/javascript">
/* * * CONFIGURATION VARIABLES * * */
var disqus_shortname = "{{site.disqus_username}}";
var disqus_identifier = "{{page.id}}";
var disqus_url = "{{site.url}}{{page.url}}";
(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>
<!-- disqus 公共JS代码 end -->
{% endif %}
说白了就是在每一种通用网页的配置下面添加Disqus，然后就自动设置了呗
0x03 修改
在_config.yml里面添加：
# Disqus settings（https://disqus.com/）
disqus_username: 你的Username
然后保存刷新，成功？？
成功了应该是这个样子的
0x05 FAQ
1.为什么评论栏的轮子一直转加载不出来？？
--还能是什么，被qia.....【枪毙后的寂静】
2.为什么没有评论栏显示，
--找不到用户名，返回0x01检查是否在Disqus官网上新建这个网站
这个是非常有毒的，我以前一直因为只要在Disqus上面注册了就可以用了，但是你不仅仅要在_config.yml里面设置Username，你还要新建一个网站，而不是以一个评论者的身份登录，
要在设置里面配置网站
要在设置里面配置网站
要在设置里面配置网站
重要的事情说三遍
我因为这个问题卡了半个月，淦
最后
Blog用的是BY大大的模板：传送门
噗嗤，给大大反馈了一下Disqus更新的事情不知道大大什么时候更新自己就先写出来了噗嗤
所有的网站在上面了噗嗤
如上
再不会我打你
最后的最后
友情联谊：
棱镜军事，一个网站无论从外观还是运维上看起来都像是在copy我的神奇网站【不对啊我是外包运维来着】
