在同一页上嵌入多个 Disqus 评论框

在一个网页上,如果我们需要添加多个 Disqus 评论框,比如为不同的文章或页面分别提供评论区,该怎么做呢?本文将介绍一种简单的方法来实现这个目标。

前置条件

在开始之前,请确保你已经完成了以下步骤:

  1. 注册并创建了 Disqus 帐户
  2. 在你的网站中添加了 Disqus 评论框(详情请参阅 Disqus 官方文档
  3. 熟悉基本的 HTML、CSS 和 JavaScript

实现方法

第一步:为每个评论框创建唯一的 ID

首先,我们需要为每个评论框创建一个唯一的 ID。可以使用任何字符串作为 ID,只要它们在每个 Disqus 配置代码块中是唯一的即可。例如,我们可以使用“disqus_thread_1”、“disqus_thread_2”,以此类推。

---- ---------------------------
---- ---------------------------

第二步:定义全局变量

然后,我们需要定义一个全局变量 disqus_config,它包含了所有 Disqus 配置选项。这个变量将在每个 Disqus 配置代码块中被使用。

--------
  --- ------------- - -------- -- -
    ------------- - ---------  -- -------------
    -------------------- - ------------------  -- --------------
  --
---------

请注意,PAGE_URLPAGE_IDENTIFIER_1 都需要被替换为你自己的值。PAGE_IDENTIFIER_1 应该与第一步中定义的评论框 ID 相关联。

第三步:添加 Disqus 配置代码块

现在,我们可以添加多个 Disqus 配置代码块了,每个配置代码块对应一个评论框。在每个配置代码块中,我们将使用前面定义的全局变量 disqus_config,并根据评论框的 ID 来设置相应的页面标识符。

------- -----------------------
  --- ---------------- - ------------------------ -- --------- ------ ---
  ----------- -
    --- --- - ---------------------------------
    -------- - ------------------
    --------- - -----
    ------- - ---- - ---------------- - -----------------------
    ----------------------------------------- -- -----------------------------------------------------------
  -----
---------

--------
  --- --------------- - --------------
  --- ----------------- - -------------------- -- --------------
  --- ---------------- - ------------------------ -- --------- ------ ---
  ----------- -
    --- --- - ---------------------------------
    -------- - ------------------
    --------- - -----
    ------- - ---- - ---------------- - -----------------------
    ----------------------------------------- -- -----------------------------------------------------------
  -----
---------

---- ---------------------------
---- ---------------------------

--------
  --- --------------- - --------------
  --- ----------------- - -------------------- -- --------------
  --- ---------------- - ------------------------ -- --------- ------ ---
  ----------- -
    --- --- - ---------------------------------
    -------- - ------------------

- ----------------------------------------------------------- --------
---------------------------------------------------------------------------------------