Disqus is a detailed tutorial that allows websites to have a social network form of website message service system and comment box

　　Disqus 是一个可以在自己网站加入社群网路形式的留言服务，本文将会介绍多种安装的方法（包含手动安装、AMP 版安装），以及针对网站管理员可能会遇到的问题或设定做完整的步骤教学与相关内容（例如：改为繁体中文、移除广告、加速等等）。

1 前言

　　近年来，有许多网站或部落格在网页下方使用了 Disqus 留言评论框，到底什么是 Disqus 呢？为什么那么多网站要使用 Disqus 呢？

　　Disqus 是一家利用社群网路的形式，并向各种网路社区（例如：网路论坛、部落格等等）提供网站留言服务的公司，并提供了许多不同功能的平台，像是不同社群网路服务连结（例如提供 Disqus、Facebook、Twitter、Google 等帐号登入，但也提供匿名留言）、社群网路、用户个人档案、垃圾宣传及审核工具、资料分析、电子邮件通知和在行动装置留言等等。

　　在 2011 年的时候，在 Quantcast 的美国网路排名报告中，Disqus 显示第一，一个月单次访问美国的次数高达 1.44 亿的独立用户存取。在许多知名的网站（如：CNN、每日电讯报和 IGN 等）和大约七十五万个网站（包含部落格）上，都使用了 Disqus 的留言系统。Disqus 在 2017 年 12 月 5 日的时候被 Zeta global 收购了。

　　而在两、三年前热门一时的第三方留言系统，包含了 Google+ 留言、多说等等，这些曾经热门的留言系统如今却关闭了，若有在这些倒闭的第三方评论框留言，则在关闭后就一去不复返了，所以选择一款能够长久经营、不容易关闭的第三方留言系统才是较好的选择。而 Disqus 则是目前全球热门的留言系统之一，也是非常老牌的第三方留言系统，同时也被营销公司 Zeta global 以九千万美元所收购，较容易长久经营，不容易倒闭。

　　目前除了 Facebook 留言框以外，再来最多网站使用的留言评论框就是 Disqus 了。虽然 Disqus 的竞争对手像是 IntenseDebate、Livefyre 及 Echo 等等，但是较不为人知、热门程度较小。同时 Disqus 所使用的留言系统是以社群网路的形式，也就是可以查看 Disqus 用户在不同网站有哪些留言，形成一个留言用户在不同网站的互通，能够增加许多人流。

　　另外，Disqus 所提供的留言评论框可以提供网站管理员导入与导出留言数据，使用 WordPress 平台还可以同步留言，所以可以让管理员随时备份，不会被留言平台绑死，像 Facebook 留言框等系统接不能让网站管理员导出留言数据，如果像之前 Google+留言框、多说等平台那样倒闭，留言就再也拿不回来了，所以在留言数据能够备份或与网站同步的情况下，Disqus 是很好的选择。

　　另外，网站安装 Disqus 留言评论框后，网站浏览者留言或发表留言时，留言数据与留言框都是经由 Disqus 的主机（服务器）所提供的，能一定程度上减少网站主机的负荷（因为网站就不必有大量留言的数据写入与读取），也能够避免黑帽骇客与垃圾留言机器人的攻击，也能够达到提升速度，以及增加 SEO 的效果。

2 建立帐户

　　要在网站中安装 Disqus 之前，要先注册一个 Disqus 帐号，才顺利的在网页中载入 Disqus 的留言评论框，并且使用后台查看留言的数据与分析，请先至「Disqus 官方网站」首页点击上方的「Get Started」按钮进入注册页面，并输入注册资讯后按「Signup」按钮以获得 Disqus 帐号。

3 安装

　　Disqus 安装在自己网站的方法有许多种，包含了在各类架站平台（例如：WordPress、Drupal、Joomla 等等）中安装，以及直接用程式码直接手动的安装方式，但如果是要安装在 AMP 网页的话也是有的，只不过会比较复杂，以下介绍几种最常见的安装方式，读者只要选择其中一种安装即可。

　　Disqus 官方所提供的架站平台的安装方式是最快速、最方便的方法，官方也有安装的步骤教学，只要按照指示做，就能够安装完成。目前官方所提供的安装平台有 WordPress、Blogger、Tumblr、Squarespace、TypePad、Movable Type、Drupal、Joomla、Wix、Weebly、Strikingly、Jekyll、Ghost、HubSpot、Shopigy、AdobeMuse、Jimdo、Postach.io、Pattern 等等，有使用这些平台的读者可使用此方法安装。

　　目前最多人使用的架站平台应该就是自架的 WordPress 了，可以直接到 WordPress 后台的外挂（插件）功能中，搜寻 Disqus 并快速安装，至于其它的架站平台可以到 Disqus 官网参阅安装说明，在此不再说明。

　　虽然使用 Disqus 官方所提供的架站平台安装方法可能是最快、最方便的方式，但是如果有独立手动安装的需求，像是想要自行更改程式码以符合自身网站的需求（像是改样式、更动显示位置等等），或是除了官方所提供的架站平台之外，或者直接黏贴在一般的 HTML 档中，亦或者想要手动独立安装以减少数据查询次数以降低主机负荷等因素，那么 Disqus 也提供使用程式码的方式可以使用，只要将以下官方所提供的程式码贴到想要显示的网页中即可。

<div id=”disqus_thread”></div><br /> <script></p> <p>/**<br /> * RECOMMENDED CONFIGURATION VARIABLES: EDIT AND UNCOMMENT THE SECTION BELOW TO INSERT DYNAMIC VALUES FROM YOUR PLATFORM OR CMS.<br /> * LEARN WHY DEFINING THESE VARIABLES IS IMPORTANT: https://disqus.com/admin/universalcode/#configuration-variables/<br /> /<br /> var disqus_config = function () {<br /> this.page.url = PAGE_URL; // Replace PAGE_URL with your page’s canonical URL variable<br /> this.page.identifier = PAGE_IDENTIFIER; // Replace PAGE_IDENTIFIER with your page’s unique identifier variable<br /> };<br /> */<br /> (function() { // DON’T EDIT BELOW THIS LINE<br /> var d = document, s = d.createElement(‘script’);<br /> s.src = ‘https://wpchennet.disqus.com/embed.js’;<br /> s.setAttribute(‘data-timestamp’, +new Date());<br /> (d.head || d.body).appendChild(s);<br /> })();<br /> </script><br /> <noscript>Please enable JavaScript to view the <a href=”https://disqus.com/?ref_noscript”>comments powered by Disqus.</a></noscript>

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

<div id=“disqus_thread”></div>

<script>

/**

*  RECOMMENDED CONFIGURATION VARIABLES: EDIT AND UNCOMMENT THE SECTION BELOW TO INSERT DYNAMIC VALUES FROM YOUR PLATFORM OR CMS.

*  LEARN WHY DEFINING THESE VARIABLES IS IMPORTANT: https://disqus.com/admin/universalcode/#configuration-variables/

/

var disqus_config = function () {

this.page.url = PAGE_URL;  // Replace PAGE_URL with your page’s canonical URL variable

this.page.identifier = PAGE_IDENTIFIER; // Replace PAGE_IDENTIFIER with your page’s unique identifier variable

};

*/

(function() { // DON’T EDIT BELOW THIS LINE

var d = document, s = d.createElement(‘script’);

s.src = ‘https://wpchennet.disqus.com/embed.js’;

s.setAttribute(‘data-timestamp’, +new Date());

(d.head || d.body).appendChild(s);

})();

</script>

<noscript>Please enable JavaScript to view the <a href=“https://disqus.com/?ref_noscript”>comments powered by Disqus.</a></noscript>

　　上方的程式码默认会根据所在的网址显示该网址的留言，但是如果要统一网址（避免不同网址但相同内容），或者需要不同网页但用同一个留言，那么可以手动修改程式码中该页面的网址 (this.page.url) 和识别码 (this.page.identifier) 等参数，而原始官方的程式码是把这两个参数给屏蔽的，所以要改成以下的程式码，记得网址和识别码要修改。

<div id=”disqus_thread”></div><br /> <script></p> <p>/**<br /> * RECOMMENDED CONFIGURATION VARIABLES: EDIT AND UNCOMMENT THE SECTION BELOW TO INSERT DYNAMIC VALUES FROM YOUR PLATFORM OR CMS.<br /> * LEARN WHY DEFINING THESE VARIABLES IS IMPORTANT: https://disqus.com/admin/universalcode/#configuration-variables*/</p> <p>var disqus_config = function () {<br /> this.page.url = 这边请改成要显示页面的网址; // Replace PAGE_URL with your page’s canonical URL variable<br /> this.page.identifier = 这边请改成页面识别码，若无则可留空; // Replace PAGE_IDENTIFIER with your page’s unique identifier variable<br /> };</p> <p>(function() { // DON’T EDIT BELOW THIS LINE<br /> var d = document, s = d.createElement(‘script’);<br /> s.src = ‘https://wpchennet.disqus.com/embed.js’;<br /> s.setAttribute(‘data-timestamp’, +new Date());<br /> (d.head || d.body).appendChild(s);<br /> })();<br /> </script><br /> <noscript>Please enable JavaScript to view the <a href=”https://disqus.com/?ref_noscript”>comments powered by Disqus.</a></noscript>

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

<div id=“disqus_thread”></div>

<script>

/**

*  RECOMMENDED CONFIGURATION VARIABLES: EDIT AND UNCOMMENT THE SECTION BELOW TO INSERT DYNAMIC VALUES FROM YOUR PLATFORM OR CMS.

*  LEARN WHY DEFINING THESE VARIABLES IS IMPORTANT: https://disqus.com/admin/universalcode/#configuration-variables*/

var disqus_config = function () {

this.page.url = 这边请改成要显示页面的网址;  // Replace PAGE_URL with your page’s canonical URL variable

this.page.identifier = 这边请改成页面识别码，若无则可留空; // Replace PAGE_IDENTIFIER with your page’s unique identifier variable

};

(function() { // DON’T EDIT BELOW THIS LINE

var d = document, s = d.createElement(‘script’);

s.src = ‘https://wpchennet.disqus.com/embed.js’;

s.setAttribute(‘data-timestamp’, +new Date());

(d.head || d.body).appendChild(s);

})();

</script>

<noscript>Please enable JavaScript to view the <a href=“https://disqus.com/?ref_noscript”>comments powered by Disqus.</a></noscript>

　　若网站是使用 WordPress 架站平台架设，那么可以使用 WordPress 本身的参数来自动获取网址 (get_permalink()) 和识别码 (the_ID())，以下程式码为例。

<div id=”disqus_thread”></div><br /> <script></p> <p>/**<br /> * RECOMMENDED CONFIGURATION VARIABLES: EDIT AND UNCOMMENT THE SECTION BELOW TO INSERT DYNAMIC VALUES FROM YOUR PLATFORM OR CMS.<br /> * LEARN WHY DEFINING THESE VARIABLES IS IMPORTANT: https://disqus.com/admin/universalcode/#configuration-variables*/</p> <p>var disqus_config = function () {<br /> this.page.url = ‘<?php echo get_permalink(); ?>’; // Replace PAGE_URL with your page’s canonical URL variable<br /> this.page.identifier = ‘<?php the_ID(); ?>’; // Replace PAGE_IDENTIFIER with your page’s unique identifier variable<br /> };</p> <p>(function() { // DON’T EDIT BELOW THIS LINE<br /> var d = document, s = d.createElement(‘script’);<br /> s.src = ‘https://wpchennet.disqus.com/embed.js’;<br /> s.setAttribute(‘data-timestamp’, +new Date());<br /> (d.head || d.body).appendChild(s);<br /> })();<br /> </script><br /> <noscript>Please enable JavaScript to view the <a href=”https://disqus.com/?ref_noscript”>comments powered by Disqus.</a></noscript>

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

<div id=“disqus_thread”></div>

<script>

/**

*  RECOMMENDED CONFIGURATION VARIABLES: EDIT AND UNCOMMENT THE SECTION BELOW TO INSERT DYNAMIC VALUES FROM YOUR PLATFORM OR CMS.

*  LEARN WHY DEFINING THESE VARIABLES IS IMPORTANT: https://disqus.com/admin/universalcode/#configuration-variables*/

var disqus_config = function () {

this.page.url = ‘<?php echo get_permalink(); ?>’;  // Replace PAGE_URL with your page’s canonical URL variable

this.page.identifier = ‘<?php the_ID(); ?>’; // Replace PAGE_IDENTIFIER with your page’s unique identifier variable

};

(function() { // DON’T EDIT BELOW THIS LINE

var d = document, s = d.createElement(‘script’);

s.src = ‘https://wpchennet.disqus.com/embed.js’;

s.setAttribute(‘data-timestamp’, +new Date());

(d.head || d.body).appendChild(s);

})();

</script>

<noscript>Please enable JavaScript to view the <a href=“https://disqus.com/?ref_noscript”>comments powered by Disqus.</a></noscript>

　　AMP 的全名为「Accelerated Mobile Pages」（中文译为「加速行动页面」），是由 Google 所领头的开放原始码专案，其目的是利用 AMP HTML、AMP JS 和 AMP Cache 三个部分让行动装置的网路存取速度有所提升。关于更多有关 AMP 的介绍与 AMP 系统的安装在网路上已有许多资讯，有需要的读者可自行查询参阅，以下将直接针对已经安装好 AMP 系统的网站如何再安装 Disqus 留言评论框。

　　在 AMP 的网页中要使用需要网页渲染的元件（例如：JavaScript 等）或外部档案（例如：外连 CSS、iframe、社交平台元件等等）时，都需要引入 AMP 专案所规定的格式。而 Disqus 本身是使用 JavaScript 的方式来调用留言评论框，但是 AMP 专案中并不能直接使用 JavaScript 也没有 Disqus 的元件，所以必须把 Disqus 贴在非 AMP 的网页（一般的 HTML 档）中，并使用 AMP 专案所提供的 AMP iframe 来调用 Disqus。

　　首先，因为要使用 iframe 的方式调用 Disqus，所以要在 AMP 网页原始码 HTML 档的「</head>」位置之前，将以下 AMP 专案的 iframe 元件的程式码写入。

<script async custom-element=”amp-iframe”<br /> src=”https://cdn.ampproject.org/v0/amp-iframe-0.1.js”><br /> </script>

<script async custom-element=“amp-iframe”

src=“https://cdn.ampproject.org/v0/amp-iframe-0.1.js”>

</script>

　　将 AMP iframe 元件的程式码引入后，接着创建一个新的 HTML档（非 AMP 网页），并将以下的 Disqus 程式码贴到此档中，并将新的档案上传到其它不同的域名中保存（以下举例以「`disqus-amp.html`」为保存的档案名称，可自行取其它名称），也就是此档案的域名不能与原本要显示 Disqus 留言评论框的网页相同，并且请记得将程式码里的「`EXAMPLE.disqus.com/embed.js`」中的「`EXAMPLE`」改成你自己在 Disqus 所设定的域名名称。

<div id=”disqus_thread”></div><br /> <script><br /> window.addEventListener(‘message’, receiveMessage, false);<br /> function receiveMessage(event)<br /> {<br /> if (event.data) {<br /> var msg;<br /> try {<br /> msg = JSON.parse(event.data);<br /> } catch (err) {<br /> // Do nothing<br /> }<br /> if (!msg)<br /> return false;</p> <p> if (msg.name === ‘resize’ || msg.name === ‘rendered’) {<br /> window.parent.postMessage({<br /> sentinel: ‘amp’,<br /> type: ’embed-size’,<br /> height: msg.data.height<br /> }, ‘*’);<br /> }<br /> }<br /> }<br /> </script><br /> <script><br /> /**<br /> * RECOMMENDED CONFIGURATION VARIABLES: EDIT AND UNCOMMENT THE SECTION BELOW TO INSERT DYNAMIC VALUES FROM YOUR PLATFORM OR CMS.<br /> * LEARN WHY DEFINING THESE VARIABLES IS IMPORTANT: https://disqus.com/admin/universalcode/#configuration-variables<br /> /<br /> var disqus_config = function () {<br /> this.page.url = window.location; // Replace PAGE_URL with your page’s canonical URL variable<br /> this.page.identifier = window.location.hash; // Replace PAGE_IDENTIFIER with your page’s unique identifier variable<br /> };<br /> (function() { // DON’T EDIT BELOW THIS LINE<br /> var d = document, s = d.createElement(‘script’);</p> <p> s.src = ‘//EXAMPLE.disqus.com/embed.js’;</p> <p> s.setAttribute(‘data-timestamp’, +new Date());<br /> (d.head || d.body).appendChild(s);<br /> })();<br /> </script>

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

<div id=“disqus_thread”></div>

<script>

window.addEventListener(‘message’, receiveMessage, false);

function receiveMessage(event)

{

    if (event.data) {

        var msg;

        try {

            msg = JSON.parse(event.data);

        } catch (err) {

            // Do nothing

        }

        if (!msg)

            return false;

        if (msg.name === ‘resize’ || msg.name === ‘rendered’) {

            window.parent.postMessage({

              sentinel: ‘amp’,

              type: ’embed-size’,

              height: msg.data.height

            }, ‘’);

        }

    }

}

</script>

<script>

    /**

     *  RECOMMENDED CONFIGURATION VARIABLES: EDIT AND UNCOMMENT THE SECTION BELOW TO INSERT DYNAMIC VALUES FROM YOUR PLATFORM OR CMS.

     *  LEARN WHY DEFINING THESE VARIABLES IS IMPORTANT: https://disqus.com/admin/universalcode/#configuration-variables

     */

    var disqus_config = function () {

        this.page.url = window.location;  // Replace PAGE_URL with your page’s canonical URL variable

        this.page.identifier = window.location.hash; // Replace PAGE_IDENTIFIER with your page’s unique identifier variable

    };

    (function() {  // DON’T EDIT BELOW THIS LINE

        var d = document, s = d.createElement(‘script’);

        s.src = ‘//EXAMPLE.disqus.com/embed.js’;

        s.setAttribute(‘data-timestamp’, +new Date());

        (d.head || d.body).appendChild(s);

    })();

</script>

　　以上将 Disqus 程式码在非 AMP 的网页安装好后，最后在要显示的 AMP 网页当中加入 iframe 调用 Disqus 的程式码。在要显示 Disqus 的 AMP 网页当中，请将以下的程式码贴到要显示的位置，请记得要将程式码里的「`https://example.com/disqus-amp.html`」改成刚刚新创好的档案网址。

<amp-iframe width=600 height=140<br /> layout=”responsive”<br /> sandbox=”allow-scripts allow-same-origin allow-modals allow-popups allow-forms”<br /> resizable<br /> src=”https://example.com/disqus-amp.html”<br /> ><br /> <div overflow<br /> tabindex=0<br /> role=button<br /> aria-label=”Load more”<br /> style=”display:block;font-size:12px;font-weight:500;font-family:Helvetica Neue, arial, sans-serif;text-align:center;line-height:1.1;padding:12px 16px;border-radius:4px;background:rgba(29,47,58,0.6);color:rgb(255,255,255)”<br /> ><br /> Load more<br /> </div><br /> </amp-iframe>

<amp-iframe width=600 height=140

            layout=“responsive”

            sandbox=“allow-scripts allow-same-origin allow-modals allow-popups allow-forms”

            resizable

            src=“https://example.com/disqus-amp.html”

>

    <div overflow

         tabindex=0

         role=button

         aria-label=“Load more”

         style=“display:block;font-size:12px;font-weight:500;font-family:Helvetica Neue, arial, sans-serif;text-align:center;line-height:1.1;padding:12px 16px;border-radius:4px;background:rgba(29,47,58,0.6);color:rgb(255,255,255)”

    >

        Load more

    </div>

</amp-iframe>

　　另外，若网站为使用 WordPress 系统所架设，可以将以上的程式码中加上开启留言才显示的判断式，并且网址与识别码可以改成 WordPress 系统内的参数，并请记得一定要把程式码内的「`https://example.com/disqus-amp.html`」一样改成新创档案的网址。

if ( ! function_exists( ‘add_disqus’ ) ) {<br /> function add_disqus( $content ) {<br /> if(is_amp_endpoint()) {<br /> $post = get_post();<br /> $content .= ‘<br /> <amp-iframe width=600 height=140<br /> layout=”responsive”<br /> sandbox=”allow-scripts allow-same-origin allow-modals allow-popups”<br /> resizable<br /> frameborder=”0″<br /> src=”https://example.com/disqus-amp.html?url=’.urlencode(get_permalink()).’&identifier=’.urlencode($post->ID).'”<br /> ><br /> <div overflow tabindex=0 role=button aria-label=”Comentários”>Comentários</div><br /> </amp-iframe>’;<br /> }<br /> return $content;<br /> }<br /> }<br /> add_action( ‘the_content’, ‘add_disqus’ );

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

if ( ! function_exists( ‘add_disqus’ ) ) {

function add_disqus( $content ) {

if(is_amp_endpoint()) {

$post = get_post();

$content .= ‘

<amp-iframe width=600 height=140

layout=”responsive”

sandbox=”allow-scripts allow-same-origin allow-modals allow-popups”

resizable

frameborder=”0″

src=”https://example.com/disqus-amp.html?url=’.urlencode(get_permalink()).‘&identifier=’.urlencode($post->ID).‘”

>

<div overflow tabindex=0 role=button aria-label=”Comentários”>Comentários</div>

</amp-iframe>’;

}

return $content;

}

}

add_action( ‘the_content’, ‘add_disqus’ );

　　以上做好准备后，即可在 AMP 页面是否有正常显示 Disqus 评论留言框，如果没显示则可以到 Disqus 后台的「Site Advanced Settings」(Disqus > Admin > Site > Advanced)，并将自己网站的域名加入至「Trusted Domains」当中，基本上就可以顺利地看到 AMP 网页载入 Disqus 的留言评论框了。

　　另外，由于 amp-iframp 不允许使用非加密的「http」连线，所以域名记得开启 SSL (Secure Sockets Layer) 凭证，并且程式码中的网址务必使用「https」连线。

4 进阶设定

　　在以上内容中，就已经针对 Disqus 的各种安装方法做教学说明，只要正确安装完成后，基本上就可以成功地在网页中显示 Disqus 留言评论框了，但是如果还要更进一步的做一些设定，让 Disqus 留言评论框能够更符合自己的需求，也可以做其它的自定义化设定，本章节将会针对一些读者可能会有需求、有问题的设定做教学说明。

4.1 允许匿名留言

　　在安装好 Disqus 之后，系统预设是不能够匿名留言的，必须要登入 Disqus、Facebook、Twitter、Google 等帐号之后才能够留言，但事实上可以从后台设定来开启允许访客匿名留言。

　　在登入 Disqus 后到系统后台，并到「Admin > Community」的页面，找到「Guest Commenting」的部分，并把「Allow guests to comment」打勾后按页面底下的「Save」按钮保存，网站访客就可以在 Disqus 留言评论框留言时，选择匿名留言了。

4.2 更改语言设定

　　Disqus 的介面预设是以英文为主，但还是可以从后台更改语言的设定。

　　更改 Disqus 语言介面最简单快速的方法就是到后台设定了，只要到 Disqus 后台的「Admin > Site > General」后，看到「Language」的项目，选择要设定的语言后按下方的「Save」钮保存后，就可以成功地更改 Disqus 留言评论框的语言了。

　　虽然上述讲解了如果快速从 Disqus 后台来更改留言评论框的语言，而且也有中文 (Chinese) 的选项，但预设是却是只有简体中文，而没有繁体中文的选项，如果真的一定要改成繁体中文也是有办法的，要从 Disqus 程式码中修改。

　　由于 Disqus 的本地化语言代码是藉由 Transifex 服务平台网站来协做进行的，在「Disqus 翻译项目」中，可以看到许多 Disqus 已经完成或者还在进行翻译的语言项目，其中是有「Chinese (Taiwan)」的语言，而且翻译进度已经达到百分之百完成了。在旧版的页面中将滑鼠移到语言名称上方，会显示出语言的代码，但是不知道为什么现在新版的介面似乎无法显示语言代码了，不过笔者还是在网路上找到以前介面的一些语言代码。

Disqus 的语言代码

Disqus 的语言代码备注

英文中文

English 英文 en

Chinese 中文 zh 简体中文

Chinese (Taiwan) 中文（台湾） zh_TW 繁体中文

　　首先，知道了语言代码后，就要将更改语言的程式码加入至 Disqus 的程式码中了。在 Disqus 程式码中找到以下的程式码。

var disqus_config = function () {<br /> this.page.url = PAGE_URL; // Replace PAGE_URL with your page’s canonical URL variable<br /> this.page.identifier = PAGE_IDENTIFIER; // Replace PAGE_IDENTIFIER with your page’s unique identifier variable<br /> };

var disqus_config = function () {

this.page.url = PAGE_URL; // Replace PAGE_URL with your page’s canonical URL variable

this.page.identifier = PAGE_IDENTIFIER; // Replace PAGE_IDENTIFIER with your page’s unique identifier variable

};

　　在找到上方的程式码后，在其中加入以下程式码以宣告 Disqus 留言评论框此页面所要显示的语言是哪一个，记得更改语言代码。

this.language = “修改为要变更的语言代码”; // Disqus 显示语言

this.language = “修改为要变更的语言代码”; // Disqus 显示语言

　　以下为配置后的示范的例子，保存修改的档案后就可以正常显示更改后的语言了。

var disqus_config = function () {<br /> this.language = “zh_TW”;<br /> this.page.url = “https://www.wpchen.net/zh-hans/posts/disqus”;<br /> this.page.identifier = “/zh/posts/disqus””;<br /> };

var disqus_config = function () {

  this.language = “zh_TW”;

  this.page.url = “https://www.wpchen.net/zh-hans/posts/disqus”;

  this.page.identifier = “/zh/posts/disqus”“;

};

　　虽然可以用以上加入程式码的方法来将 Disqus 留言评论框的语言设定为繁体中文，但是实际测试过后发现只有部分文字能够显示繁体中文，剩下的部分却是显示英文，这代表其实 Disqus 官方并没有完全将留言评论框的语言翻译为繁体中文，只能等待官方日后能够将完整的译文加入了。读者可以自行选择是否还是保留此设定，还是默认英文或改为简体中文。

**Disqus 的语言代码**
Disqus 的语言	代码	备注
英文	中文
English	英文	en
Chinese	中文	zh	简体中文
Chinese (Taiwan)	中文（台湾）	zh_TW	繁体中文

　　除了 Disqus 留言评论框可以更改语言外，如果网站是使用 WordPress 架站平台，或者是有调用 Disqus 的留言数量 API，会发现显示的留言数量是英文的，这时可以将「Comment Count Link」内的「Comments」文字改为中文，保存后就可以更改语言设定了。

　　在同一个页面中，还有一个地方也可以针对语言做设定，在「Moderator Badge Text」栏中可以设定管理员在网站的 Disqus 留言评论框留言时，在帐号名称左方所显示的管理员称谓，如果留空 (Mod) 则会显示「General」所设定的语言。

4.3 加载速度提升

　　网页速度是经营网站的其中之一个指标，加速也能够适度的提升 SEO，虽然在网站中加入 Disqus 留言评论框能够增加网站管理者与访客之间的互动性，也能够促进不同网站却能共享 Disqus 帐号的社群网路型态，但不该因此而牺牲掉网页的加载与浏览速度。可能会有网站管理者安装 Disqus 后发现速度有变慢些，因为毕竟是要从第三方加载资源，但还是能够透过一些方法让加载 Disqus 留言评论框的网页速度加快。

　　在安装 Disqus 完成后，在浏览有 Disqus 留言评论框的网页时时，会发现即使 Disqus 已经出现了，但是浏览器似乎还在加载一些资源，这是因为 Disqus 留言评论框会载入一些返利连结和追踪连结，如果查看加载的资源会发现有各种不同域名、类型的请求，例如 collect.gif、referrer.php、aff.php 等的档案不停地载入，再加上文章内可能会跑出一些不是自己设定的超连结。

　　虽然 Disqus 留言评论框预设是会加载一些网路资源，但其实是可以从 Disqus 官方后台禁止这些资源载入的，只要登陆到 Disqus 后台，并进入到「Admin > Site > Advanced」的页面，并看到「Deeply integrate Disqus with your community.」的部分，并将「Tracking」与「Affiliate links」这两个选项取消后并按「Save」钮保存，完成之后就会发现开启有安装 Disqus 的页面时，在显示 Disqus 留言评论框后就不会再载入其它的资源了。

　　在上述说明如何取消 Disqus 的追踪与返利连结后，基本上 Disqus 的载入速度就已经很快了，但是如果觉得加载的速度还不够快的话，可以试试将 Disqus 延后载入，也是能够提升网页加载速度的方法之一。另外，在以下的程式码当中，请记得一定要将「`disqus_shortname`」改为自己在 Disqus 的 shortname，如果要指定网址和识别码时，可以在 `<script>` 的后方加上网址和识别码的参数。

4.3.2.1 方法一：滚动页面延迟加载

　　此方法只在网页访客将页面往下移动到靠近 Disqus 留言评论框附近时才开始加载 Disqus，方法只要将安装的方法改为以下的 JavaScript 程式码即可。

<div id=”disqus_thread”><br /> <div id=”disqus_empty”></div><br /> </div><br /> <script><br /> function load_disqus( disqus_shortname ) {<br /> // Prepare the trigger and target<br /> var is_disqus_empty = document.getElementById(‘disqus_empty’),<br /> disqus_target = document.getElementById(‘disqus_thread’),<br /> disqus_embed = document.createElement(‘script’),<br /> disqus_hook = (document.getElementsByTagName(‘head’)[0] || document.getElementsByTagName(‘body’)[0]);</p> <p> // Load script asynchronously only when the trigger and target exist<br /> if( disqus_target && is_disqus_empty ) {<br /> disqus_embed.type = ‘text/javascript’;<br /> disqus_embed.async = true;<br /> disqus_embed.src = ‘//’ + disqus_shortname + ‘.disqus.com/embed.js’;<br /> disqus_hook.appendChild(disqus_embed);<br /> is_disqus_empty.remove();<br /> }<br /> }</p> <p>/*<br /> * Load disqus only when the document is scrolled till the top of the<br /> * section where comments are supposed to appear.<br /> */<br /> window.addEventListener(‘scroll’, function(e) {<br /> var currentScroll = document.scrollingElement.scrollTop;<br /> var disqus_target = document.getElementById(‘disqus_thread’);</p> <p> if( disqus_target && (currentScroll > disqus_target.getBoundingClientRect().top – 150) ) {<br /> load_disqus(‘w3bits’);<br /> console.log(‘Disqus loaded.’);<br /> }<br /> }, false);<br /> </script>

</div>

function load_disqus( disqus_shortname ) {

// Prepare the trigger and target

var is_disqus_empty = document.getElementById(‘disqus_empty’),

disqus_target = document.getElementById(‘disqus_thread’),

disqus_embed = document.createElement(‘script’),

disqus_hook = (document.getElementsByTagName(‘head’)[0] || document.getElementsByTagName(‘body’)[0]);

// Load script asynchronously only when the trigger and target exist

if( disqus_target && is_disqus_empty ) {

disqus_embed.type = ‘text/javascript’;

disqus_embed.async = true;

disqus_embed.src = ‘//’ + disqus_shortname + ‘.disqus.com/embed.js’;

disqus_hook.appendChild(disqus_embed);

is_disqus_empty.remove();

}

* Load disqus only when the document is scrolled till the top of the

* section where comments are supposed to appear.

window.addEventListener(‘scroll’, function(e) {

var currentScroll = document.scrollingElement.scrollTop;

var disqus_target = document.getElementById(‘disqus_thread’);

if( disqus_target && (currentScroll > disqus_target.getBoundingClientRect().top – 150) ) {

load_disqus(‘w3bits’);

console.log(‘Disqus loaded.’);

}

}, false);

</script>

　　如果想要用 jQuery 库来执行，则可以改为以下的程式码。

<div id=”disqus_thread”><br /> <div id=”disqus_empty”></div><br /> </div><br /> <script><br /> function load_disqus( disqus_shortname ) {<br /> // Prepare the trigger and target<br /> var is_disqus_empty = jQuery(‘disqus_empty’),<br /> disqus_target = jQuery(‘disqus_thread’),<br /> disqus_hook = (jQuery(‘head’)[0] || jQuery(‘body’)[0]);</p> <p> // Load script asynchronously only when the trigger and target exist<br /> if( disqus_target && is_disqus_empty ) {<br /> jQuery.ajaxSetup({ cache:true });<br /> jQuery.getScript(‘//’ + disqus_shortname + ‘.disqus.com/embed.js’);<br /> jQuery.ajaxSetup({ cache:false });<br /> is_disqus_empty.remove();<br /> }<br /> }</p> <p>jQuery(document).scroll( function(e) {<br /> var currentScroll = $(window).scrollTop;<br /> var disqus_target = jQuery(‘#disqus_thread’);</p> <p> if( currentScroll > disqus_target.getBoundingClientRect().top – 150 ) {<br /> load_disqus(‘w3bits’);<br /> console.log(‘Disqus loaded.’);<br /> }<br /> }, false);<br /> </script>

</div>

function load_disqus( disqus_shortname ) {

// Prepare the trigger and target

var is_disqus_empty = jQuery(‘disqus_empty’),

disqus_target = jQuery(‘disqus_thread’),

disqus_hook = (jQuery(‘head’)[0] || jQuery(‘body’)[0]);

// Load script asynchronously only when the trigger and target exist

if( disqus_target && is_disqus_empty ) {

jQuery.ajaxSetup({ cache:true });

jQuery.getScript(‘//’ + disqus_shortname + ‘.disqus.com/embed.js’);

jQuery.ajaxSetup({ cache:false });

is_disqus_empty.remove();

}

jQuery(document).scroll( function(e) {

var currentScroll = $(window).scrollTop;

var disqus_target = jQuery(‘#disqus_thread’);

if( currentScroll > disqus_target.getBoundingClientRect().top – 150 ) {

load_disqus(‘w3bits’);

console.log(‘Disqus loaded.’);

}

}, false);

</script>

4.3.2.2 方法二：点击开关按钮的延迟加载

　　除了滚动页面延迟加载 Disqus 来加速网页以外，如果不想要让访客把网页往下拉时自动加载，或者觉得留言的人数太少不想要自动显示，那么也可以改成让访客手动点击开启 Disqus 留言评论框按钮才显示，不点击时则一直维持隐藏的状态。

　　如要使用 JavaSript 来实现此功能可以将以下程式码加入到要显示 Disqus 留言评论框的位置中。

function load_disqus( disqus_shortname ) {

// Prepare the trigger and target

var disqus_trigger = document.getElementById(‘disqus_trigger’),

disqus_target = document.getElementById(‘disqus_thread’),

disqus_embed = document.createElement(‘script’),

disqus_hook = (document.getElementsByTagName(‘head’)[0] || document.getElementsByTagName(‘body’)[0]);

// Load script asynchronously only when the trigger and target exist

if( disqus_target && disqus_trigger ) {

disqus_embed.type = ‘text/javascript’;

disqus_embed.async = true;

disqus_embed.src = ‘//’ + disqus_shortname + ‘.disqus.com/embed.js’;

disqus_hook.appendChild(disqus_embed);

disqus_trigger.remove();

console.log(‘Disqus loaded.’);

}

</script>

<button id=“diqus_trigger” onclick=“load_disqus(‘your_disqus_shortname’)”>Post a Comment</button>

</div>

　　如果想要使用 jQuery 库的方式，则可以改为以下的程式码。

/**

* Disqus loader which verifies the existence of `#disqus_thread` on

* the web page and then prepares the disqus embed script to hook in

* the document

function load_disqus( disqus_shortname ) {

// Prepare the trigger and target

var disqus_trigger = jQuery(‘#disqus_trigger’),

disqus_target = jQuery(‘#disqus_thread’);

// Load script asynchronously only when the trigger and target exist

if(disqus_target && disqus_trigger) {

jQuery.ajaxSetup({ cache:true });

jQuery.getScript(‘//’ + disqus_shortname + ‘.disqus.com/embed.js’);

jQuery.ajaxSetup({ cache:false });

disqus_trigger.remove();

console.log(‘Disqus loaded.’);

}

</script>

<button id=“diqus_loader” onclick=“load_disqus(‘your_disqus_shortname’)”>Post a Comment</button>

</div>

　　保存之后就可以拥有点击开关而显示或隐藏 Disqus 留言评论框的按钮了。如果使用的程式码是 jQuery 版本的，但没有正常显示，请查看网页是否有正常加载 jQuery 库，没有的话请记得引入 jQuery，引入方法在网路上已有许多教学，在此不再赘述。或者改用纯 JavaScript 版的程式码。

4.4 移除广告

　　多数网站或网路服务的经营是需要一定的经费以正常运行，所以很可能会放置广告是在所难免的，尤其像 Disqus 这种留言评论框的服务很可能每时每刻会有数百甚至数千个网站在存取数百、数千条的留言数据，会消耗非常多的网站伺服器资源。

　　Disqus 一刚开始服务的时候是完全没有广告的，后来大约是在 2013 年左右的时候（不是很确定确切的时间）开始有广告的，当时可以在 Disqus 的后台自由地把广告关闭，如果不把广告关闭，也可以开启利用 Disqus 所显示的广告作为分润来赚取收入。

　　但是后来官方关闭广告分润赚钱，并且强制无法完全取消广告，也就是在三个广告位中（评论留言框的「上方 (Above Comments)」、「评论之间 (In-thread)」、「下方 (Below Comments)」），仅仅可以选择关闭至多两个广告位，最少要保留一个广告位（也可以三个广告位全部开启）。

　　不过并不是每个使用 Disqus 的网页都会显示广告，只有在流量足够大的网站才会自动显示广告，若网页浏览量不够大则不会显示广告。但是对于流量较大的网站、部落格的站长来说，应该会有许多人想要把在评论留言框显示的广告给移除，以下介绍几种可以把 Disqus 广告给关闭的方法。

　　Disqus 早期从没有广告到有广告时，那时可以在后台自由地把广告给关闭，不需要负任何的费用，但是后来随着服务量增大，已经改成强制一定要开启广告，但是官方提供升级付费帐号可以在后台关闭广告

　　前本文前述的安装方法中，有提到如何将 Disqus 放置在 AMP 网页当中，也说明了 AMP 网页不允许使用自定义的 JavaScript，必须要使用 AMP 专案所提供的元件才行。而 Disqus 内的广告也是使用 JavaScript 来调用广告的，正因为如此，如果使用 AMP 网页来安装 Disqus ，很自然而然地广告的程式码就会被阻挡，因此就不会显示 Disqus 的广告了。

　　要移除 Disqus 广告还可以只用一段 jQuery 的程式码，就可以解决这个问题了。将以下程式码插入每个有显示 Disqus 留言评论框的网页中，该段程式码会检查 Disqus 留言评论框是否有广告，如果有则会删除广告。注意：请确定网页有引入 jQuery，否则无法正常生效！

<script><br /> (function($){<br /> setInterval(() => {<br /> $.each($(‘iframe’), (arr,x) => {<br /> let src = $(x).attr(‘src’);<br /> if (src && src.match(/(ads-iframe)|(disqusads)/gi)) {<br /> $(x).remove();<br /> }<br /> });<br /> }, 300);<br /> })(jQuery);<br /> </script>

<script>

(function($){

    setInterval(() => {

        $.each($(‘iframe’), (arr,x) => {

            let src = $(x).attr(‘src’);

            if (src && src.match(/(ads-iframe)|(disqusads)/gi)) {

                $(x).remove();

            }

        });

    }, 300);

})(jQuery);

</script>

　　若读者所架设的网站是使用 WordPress 架站平台，那么可以试试使用安装 WordPress 外挂（插件）的方式来移除 Disqus 广告，但是不一定有用，笔者在 WordPress 外挂平台中找到一款名为「Remove Disqus Ads」的外挂，但经测试后发现没有起作用，不晓得是版本的关系或其它原因，所以在此不在深入讨论，有兴趣的读者再自行试试看。

4.5 其它功能的程式码调用

　　Disqus 除了可以在自己的网网站上放上留言评论框的功能外，官方也提供了可以调用 Disqus 的「最新评论」(Recent Comments)、「热门留言」(Top Commenters)、「聚合评论」(Combination) 与「热门文章」(Popular Treads) 等功能，只需要把程式码放在想要显示的网页上即可，例如侧边拦或任何页面。

4.5.1 最新评论

<div id=”recentcomments” class=”dsq-widget”><br /> <h2 class=”dsq-widget-title”>Recent Comments</h2><br /> <script type=”text/javascript” src=”http://[shortname].disqus.com/recent_comments_widget.js?num_items=5&hide_avatars=0&avatar_size=32&excerpt_length=200&hide_mods=0″></script><br /> </div>

<h2 class=“dsq-widget-title”>Recent Comments</h2>

</div>

参数说明：

[shortname]：请务必修改成在 Disqus 所注册的 shortname，才可以正常显示，若忘记的话可以到 Disqus 后台查询。
num_items：显示数量。
excerpt_length：字节长度。
hide_mods：隐藏管理员的评论，「0」为显示，「1」为隐藏。
hide_avatars：隐藏头像，「0」为显示，「1」为隐藏。
avatar_size：头像尺寸，预设大小为「预设 32px」或「48px」。

4.5.2 热门留言

<div id=”topcommenters” class=”dsq-widget”><br /> <h2 class=”dsq-widget-title”>Top Commenters</h2><br /> <script type=”text/javascript” src=”http://[shortname].disqus.com/top_commenters_widget.js?num_items=5&hide_mods=0&hide_avatars=0&avatar_size=32″></script><br /> </div>

<h2 class=“dsq-widget-title”>Top Commenters</h2>

</div>

参数说明：

[shortname]：请务必修改成在 Disqus 所注册的 shortname，才可以正常显示，若忘记的话可以到 Disqus 后台查询。
num_items：显示数量
hide_mods：隐藏管理员的评论，「0」为显示，「1」为隐藏。
hide_avatars：隐藏头像，「0」为显示，「1」为隐藏。
avatar_size：头像尺寸，预设大小为「预设 32px」或「48px」。

4.5.3 聚合评论

<div class=”heading blue”><br /> <h2>Community</h2><br /> <script type=”text/javascript” src=”http://[shortname].disqus.com/combination_widget.js?num_items=5&hide_mods=1&color=grey&default_tab=recent&excerpt_length=30″></script><br /> </div>

<h2>Community</h2>

</div>

参数说明：

[shortname]：请务必修改成在 Disqus 所注册的 shortname，才可以正常显示，若忘记的话可以到 Disqus 后台查询。
num_items：显示数量
excerpt_length：字节长度

4.5.4 热门文章

<div id=”popularthreads” class=”dsq-widget”><br /> <h2 class=”dsq-widget-title”>Popular Threads</h2><br /> <script type=”text/javascript” src=”http://[shortname].disqus.com/popular_threads_widget.js?num_items=5″></script><br /> </div>

<h2 class=“dsq-widget-title”>Popular Threads</h2>

</div>

参数说明：

[shortname]：请务必修改成在 Disqus 所注册的 shortname，才可以正常显示，若忘记的话可以到 Disqus 后台查询。
num_items：显示数量。

4.5.5 安装至 AMP 中

　　在 AMP 网页中安装「最新评论」、「热门留言」、「聚合评论」与「热门文章」等其它 Disqus 所提供的附加功能，作法与本文前述所说的载 AMP 网页中安装 Disqus 的方法相同。只要先把想要显示的程式码贴在另一个非 AMP 的网页当中（创建一个新的 HTML 档），接着在 AMP 网页引入 AMP iframe 元件并嵌入创建好的新档，就可以在 AMP 网页中正常显示了。实际做法为将以下的程式码贴在要显示的 AMP 网页中，记得更改嵌入的网址。

<amp-iframe width=600 height=140 layout=”responsive” sandbox=”allow-scripts allow-same-origin allow-modals allow-popups” resizable frameborder=”0″ src=”请记得更改这里的网址” ></amp-iframe>

<amp-iframe width=600 height=140 layout=“responsive” sandbox=“allow-scripts allow-same-origin allow-modals allow-popups” resizable frameborder=“0” src=“请记得更改这里的网址” ></amp-iframe>

参考文献

Hovspian (2019)，〈Disqus for Accelerated Mobile Pages (AMP)〉，GitHub。
JACK (2013)，〈Disqus最新评论JS调用码〉，月光部落。
Larry (2016)，〈WordPress AMP配置Disqus评论功能〉，HZSH Site。
pallxk (2016)，〈Disqus 中文化〉，zzz.buzz。
Rahul (2018)，〈Load Disqus on Click and Scroll Events〉，W3Bits。
Sukka (2019)，〈使 Disqus 不再拖累性能和页面加载〉，Sukka’s Blog。
可芮 (2017)，〈营销科技公司Zeta收购同类创企Disqus，交易金额或达9000万美元〉，猎云网。
维基百科编者 (2018)，〈Accelerated Mobile Pages〉，维基百科。
维基百科编者 (2018)，〈Disqus〉，维基百科。

更新纪录

2022/05/17，新增多语言版本。

1 前言

2 建立帐户

3 安装

4 进阶设定

4.1 允许匿名留言

4.2 更改语言设定

更改 Disqus 语言介面最简单快速的方法就是到后台设定了，只要到 Disqus 后台的「Admin > Site > General」后，看到「Language」的项目，选择要设定的语言后按下方的「Save」钮保存后，就可以成功地更改 Disqus 留言评论框的语言了。

4.3 加载速度提升

4.3.2.1 方法一：滚动页面延迟加载

4.3.2.2 方法二：点击开关按钮的延迟加载

4.4 移除广告

Disqus 早期从没有广告到有广告时，那时可以在后台自由地把广告给关闭，不需要负任何的费用，但是后来随着服务量增大，已经改成强制一定要开启广告，但是官方提供升级付费帐号可以在后台关闭广告

4.5 其它功能的程式码调用

4.5.1 最新评论

4.5.2 热门留言

4.5.3 聚合评论

4.5.4 热门文章

4.5.5 安装至 AMP 中

参考文献

更新纪录

Related posts 你可能也喜歡 :

　　Disqus 早期从没有广告到有广告时，那时可以在后台自由地把广告给关闭，不需要负任何的费用，但是后来随着服务量增大，已经改成强制一定要开启广告，但是官方提供升级付费帐号可以在后台关闭广告