npm包wordpress-comments-jekyll-staticman使用教程

阅读时长 7 分钟读完

前言

近些年来，静态网站越来越受到欢迎，尤其是在 blog 圈和知识管理领域，一些工具和框架对静态网站的支持和优化也越来越成熟。其中，以 Jekyll、Hexo 为代表的静态网站生成器已经能够完成很多功能，而在静态网站中添加评论功能是当前较为常见的需求之一。

在本文中，我们将介绍如何使用 npm 包中的 wordpress-comments-jekyll-staticman 模块来实现静态网站的评论功能，并结合实例代码进行演示。

关于 wordpress-comments-jekyll-staticman

wordpress-comments-jekyll-staticman 是一个用于静态网站评论处理的 npm 包，它的主要功能是将提交的评论邮件发送到指定邮箱，并通过开发者提供的接口实现评论的管理和展示。

针对它的一些核心特点和功能，我们进行以下概述：

  • 注意到其名称，wordpress-comments-jekyll-staticman 的功能并不仅限于 WordPress。实际上，它适用于大多数静态网站生成器和 CMS。
  • 该模块是利用了 Staticman，这是一个可用于多种场合的评论处理服务。
  • 静态网站常常使用 GitHub Page 托管，因此 wordpress-comments-jekyll-staticman 可以与 GitHub 无间隙地搭配使用。
  • 该模块结合了邮件、 API 和作为 web 界面的静态网页，可以灵活地满足静态网页评论面临的众多问题，例如垃圾评论拦截、评论管理和用户认证等。

准备工作

在使用这个 npm 包前，我们需要进行以下准备工作：

  • 配置 Staticman API。具体方法请参照 官方文档，或参考以下步骤概述（前提是您已经拥有 GitHub 帐号和一枚可以用于 API 认证的 access token）：

    • 创建一个新的 GitHub repo，并在其中创建一个 .staticman.yml 文件，该文件中填写本地安装的 Staticman 的相关设置;
    • 创建新的 OAuth App；
    • 填写 App 的 Desctiption、homepage、Access tocken（勾选 public_repo）；
    • 安装 Staticman（npm install staticman --save）并将 config.js 配置完成。
    • 设置 config.js 中的 GitHub 的 apiDomain、clientId 和 clientSecret 等字段。

  • 在您的学习项目中添加 wordpress-comments-jekyll-staticman。使用以下命令：

使用方法

准备工作完成后，您需要进行以下步骤将 wordpress-comments-jekyll-staticman 的评论功能添加到您的静态网站中。

步骤1：编写 HTML 页面

在静态网站的代码中，要开始使用评论功能，您需要修改网页 HTML/CSS 文件。可以在网页的任何位置插入一个带有 form 标签的区域，用于添加评论表格。在本示例中，我们将评论表格放在了网页底部。

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

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

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

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

步骤2：调用 Staticman API

接下来，我们需要使用 Staticman API 去处理评论表单的数据。在调用 Staticman API 之前，确保您已经安装了 Staticman。然后，在网页代码中的 head 标签内添加如下代码：

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

其中 setData() 的参数值为：

  • repository：可访问该存储库的 URL，例如 fs.github.com/fs/blog-comments。
  • path：评论文件的存储路径，例如 _comments/2022-05-11.md。

步骤3：使用 WordPress API 去处理 Staticman 提交的评论

接下来，是最后一个步骤。在上一步中我们使用 Staticman API 处理了表单的数据，现在我们需要使用 WordPress API 来完善评论的提交、审核、展示等功能，因为 Staticman 本身并不能提供这样的功能。

为了对评论进行完整的处理，我们可以使用一个 WordPress API 插件 wp-comments-api，并按照以下示例配置：

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

通过这些处理，您可以轻松地在您的静态网站上实现评论功能。

总结

在本文中，我们对静态网站评论功能的实现方法进行了介绍，并针对 npm 包 wordpress-comments-jekyll-staticman 进行了引导和具体操作。该模块具有灵活性高、维护安全、功能可自定制等优点，是静态网站评论处理的实用工具。

也希望本文能对您的实践有所启发。

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005693681e8991b448e4bee

纠错
反馈
相关推荐
精选内容