在一个网页上,如果我们需要添加多个 Disqus 评论框,比如为不同的文章或页面分别提供评论区,该怎么做呢?本文将介绍一种简单的方法来实现这个目标。
前置条件
在开始之前,请确保你已经完成了以下步骤:
- 注册并创建了 Disqus 帐户
- 在你的网站中添加了 Disqus 评论框(详情请参阅 Disqus 官方文档)
- 熟悉基本的 HTML、CSS 和 JavaScript
实现方法
第一步:为每个评论框创建唯一的 ID
首先,我们需要为每个评论框创建一个唯一的 ID。可以使用任何字符串作为 ID,只要它们在每个 Disqus 配置代码块中是唯一的即可。例如,我们可以使用“disqus_thread_1”、“disqus_thread_2”,以此类推。
<div id="disqus_thread_1"></div> <div id="disqus_thread_2"></div>
第二步:定义全局变量
然后,我们需要定义一个全局变量 disqus_config
,它包含了所有 Disqus 配置选项。这个变量将在每个 Disqus 配置代码块中被使用。
<script> var disqus_config = function () { this.page.url = PAGE_URL; // 此处替换成你自己的页面地址 this.page.identifier = PAGE_IDENTIFIER_1; // 此处替换成你自己的页面标识符 }; </script>
请注意,PAGE_URL
和 PAGE_IDENTIFIER_1
都需要被替换为你自己的值。PAGE_IDENTIFIER_1
应该与第一步中定义的评论框 ID 相关联。
第三步:添加 Disqus 配置代码块
现在,我们可以添加多个 Disqus 配置代码块了,每个配置代码块对应一个评论框。在每个配置代码块中,我们将使用前面定义的全局变量 disqus_config
,并根据评论框的 ID 来设置相应的页面标识符。
-- -------------------- ---- ------- ------- ----------------------- --- ---------------- - ------------------------ -- --------- ------ --- ----------- - --- --- - --------------------------------- -------- - ------------------ --------- - ----- ------- - ---- - ---------------- - ----------------------- ----------------------------------------- -- ----------------------------------------------------------- ----- --------- -------- --- --------------- - -------------- --- ----------------- - -------------------- -- -------------- --- ---------------- - ------------------------ -- --------- ------ --- ----------- - --- --- - --------------------------------- -------- - ------------------ --------- - ----- ------- - ---- - ---------------- - ----------------------- ----------------------------------------- -- ----------------------------------------------------------- ----- --------- ---- --------------------------- ---- --------------------------- -------- --- --------------- - -------------- --- ----------------- - -------------------- -- -------------- --- ---------------- - ------------------------ -- --------- ------ --- ----------- - --- --- - --------------------------------- -------- - ------------------ - ----------------------------------------------------------- -------- ----------------------------------------------------------------------------------