在同一页上嵌入多个 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_URL 和 PAGE_IDENTIFIER_1 都需要被替换为你自己的值。PAGE_IDENTIFIER_1 应该与第一步中定义的评论框 ID 相关联。

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

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

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

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

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

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

----------------------------------------------------------- ----------
---------------------------------------------------------------------------------------
阅读全文

猜你喜欢

  • 如何用 Raphael.js 逐步绘制矢量路径

    在前端开发中，有时需要实现一个逐步绘制的效果，比如文字动画或者矢量图形的渐显。本文将介绍如何使用 Raphael.js 实现逐步绘制矢量路径的效果。 准备工作 首先，在 HTML 中引入 Raphae...

    7 年前
  • Javascript 字符串中双引号和单引号的替换

    在前端开发中，我们经常需要对字符串进行处理。有时候我们需要将字符串中的双引号或单引号替换成另一个类型的引号。本文将介绍如何用 JavaScript 实现这个功能。 使用 replace() 方法 Ja...

    7 年前
  • 计算定义的数组元素数量

    在 JavaScript 中，我们可以使用数组来存储和操作数据。有时候，我们需要知道一个数组中定义了多少个元素。本篇文章将介绍如何计算一个定义的数组中的元素数量。 什么是定义的数组 在 JavaScr...

    7 年前
  • Angular.js中ng-repeat指令的使用：渲染带有HTML内容的列表项

    在Angular.js中，ng-repeat指令是用于循环遍历一个数组，并将其每个元素映射到一个模板块的重要指令之一。在此文中，我们将深入探讨如何使用ng-repeat来呈现包含HTML内容的列表项。

    7 年前
  • 在 Javascript 控制台中访问 jsFiddle 中的变量？

    介绍 jsFiddle 是一个流行的在线代码编辑器，方便前端开发人员分享和测试他们的代码。在使用 jsFiddle 时，您可能会遇到一些问题，例如如何在 JavaScript 控制台中访问 jsFid...

    7 年前
  • 如何为 Ember.js 创建自定义适配器（Adapter）？

    在 Ember.js 中，适配器（Adapter）是一种连接应用程序与服务器或数据存储之间的桥梁。它允许您使用统一的 API 与后端交互，并提供了对 CRUD 操作（创建、读取、更新和删除）的支持。

    7 年前
  • 如何检查两个对象是否具有相同的属性名？

    在前端开发中，常常需要比较两个对象是否拥有相同的属性名。这种需求可以通过遍历对象的属性，然后逐一比较来实现。但是，这种方法很麻烦且效率较低，因此我们需要一种更加高效和简单的方法。

    7 年前
  • Property change subscription with Aurelia

    Aurelia是一款流行的前端JavaScript框架，它提供了方便快捷的前端开发方式。在实际开发中，我们经常需要监听某个属性值的变化，然后进行相应的操作。这时候，通过Aurelia的属性变化订阅机制...

    7 年前
  • jQuery 获取 `<div>` 标签之间的内容

    在前端开发中，我们经常需要获取特定 HTML 元素中的内容，尤其是位于 &lt;div&gt; 标签之间的内容。本文将介绍使用 jQuery 获取 &lt;div&gt; 标签之间内容的方法，并提供示...

    7 年前
  • ES6 Javascript 中的 @ 符号的作用

    在ES6(ECMAScript 2015)中，@符号被引入为一种新的语法元素，主要用于装饰器(decorators)和类(class)之间的交互。本文将探讨@符号的具体用法和其对前端开发的学习和指导意...

    7 年前
  • 如何在 Javascript 中将光标移动到 textarea 的末尾位置？

    当我们需要编写一个文本编辑器或者聊天应用时，我们通常需要将光标移动到 textarea 的末尾位置。这里提供了几种方法可以帮助你实现这个操作。 方法一：使用 selectionStart 和 sele...

    7 年前
  • JQuery 数字格式化

    数字在前端开发中是一个常见的数据类型，但是对于用户来说，一串无格式的数字可能会让人感到困惑。为了让用户更容易理解和阅读数字，我们需要将它们格式化。在这篇文章中，我们将介绍使用 JQuery 实现数字格...

    7 年前
  • AngularJS ng-repeat 计数器

    在 AngularJS 的 ng-repeat 指令中，有一种常见的需求是要获取当前循环到的索引值。为此，我们可以使用 $index 变量来获取当前项的索引值，如下所示： ---- ---------...

    7 年前
  • What is my script src URL?

    在前端开发中，我们经常需要引入 JavaScript 代码文件以便实现某些特定功能。在引入这些文件时，我们通常使用 script 标签，并指定对应的 src 属性值为相应的文件路径。

    7 年前
  • 如何在 JavaScript 中动态地向 div 添加锚点标签

    在 Web 开发中，锚点标签是一种非常有用的工具，它可以将页面内的不同部分链接起来。在本文中，我们将探讨如何使用 JavaScript 动态地向 div 元素添加锚点标签。

    7 年前
  • 动态排布元素在圆周上

    在前端开发中，有时需要将一组元素动态地排布在一个圆周上。这种布局方式可以用于展示轮播图、标签页等场合，增强页面的交互性和美观性。 实现思路 要实现这种布局，我们可以使用 CSS3 的 transfor...

    7 年前
  • Jquery post，response in new window

    在前端开发中，我们通常需要向服务器发送一些请求，比如获取数据、提交表单等。其中，使用 jQuery 的 $.post() 方法可以方便地向服务器发送 POST 请求，并且获取响应数据。

    7 年前
  • 如何从一个数组中过滤掉另一个数组的所有元素

    在前端开发中，经常需要从一个数组中过滤掉另一个数组的所有元素。这个任务可以通过使用 JavaScript 的内置方法来完成。本文将详细介绍这个问题的解决方案，并提供示例代码。

    7 年前
  • "with" 关键字在 JavaScript 中的使用

    在 JavaScript 中，"with" 关键字可以用于简化代码并提高可读性。它可以将一个对象作为上下文环境，使得在该对象内部的属性和方法可以直接访问和调用，而无需通过对象名进行引用。

    7 年前
  • Google Maps API V3 中的 fitBounds() 方法不能正确调整边界问题的解决

    在使用 Google Maps API V3 开发 Web 应用程序时，经常需要在地图上展示多个标记点或区域。为了确保这些标记点或区域都能完全显示在地图中，我们通常会使用 fitBounds() 方法...

    7 年前

相关推荐

    暂无文章