2014年11月12日 - 2022年4月11日

在 Github Pages 中使用 Disqus

`Github Pages`由于是一堆静态页面,导致无法写评论和留言,所有这里就用到`Disqus`了,在页面中引入后便可以实现评论等各种吐槽交互的功能,简直狂拽吊炸天~

注册`Disqus`

要使用Disqus,当然需要先注册一个Disqus帐号了,也许你在吐槽别人Blog的时候已经注册过了,那就直接用吧.(附上官网地址https://www.disqus.com/)

新建实例

注册完毕后登入帐号,点击Admin菜单进入管理页面,选择Add new site来新建一个实例,找不到的也可以直接使用网址https://disqus.com/admin/create/进入创建页面.然后填入需要的资料,三下五除二即可创建完毕,第二个网址是用来管理这个Disqus实例的管理页域名地址.

添加`Disqus` 到页面

搞定上面的就可以直接把Disqus添加到页面了,进入刚刚设置的域名,也就是管理页面,然后点击Settings菜单,选择Install,这里有Disqus支持的网站类型,静态页面直接选择第一个,也就是Universal Code,进入教程页面后把那段html粘贴到页面中即可实现引入.

代码如下:

<div id="disqus_thread"></div>
<script type="text/javascript">
    /* * * CONFIGURATION VARIABLES: EDIT BEFORE PASTING INTO YOUR WEBPAGE * * */
    var disqus_shortname = 'xxx'; // 这里是你新建实例时实例的名称
    /* * * 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="http://disqus.com/?ref_noscript">comments powered by Disqus.</a></noscript
>

另外还有几个扩展的非必要参数,如下

var disqus_container_id = 'disqus_thread'; // 此处设置显示disqus的容器,不设置时默认为disqus_thread
var disqus_category_id = '21314'; //页面的分类id,默认为引用的disqus创建时的分类,可在./admin/settings/advanced/页面中管理分类及查看分类id
var disqus_identifier = '{{ page.blogid }}'; // 页面的id,不设置默认为页面的url,当blog迁移时url会变动会导致很麻烦,所以做好还是每篇blog单独设置一下
var disqus_title = '{{ page.title }}'; // disqus的title
var disqus_url = ''; //当前页面的url地址,啥用途没搞清楚,默认是window.location.href,一般无需设置(大概吧~)