npm 包 metalsmith-commento 使用教程-JavaScript中文网-JavaScript教程资源分享门户

Metalsmith-commento 是一个集成了 Commento 评论系统的 metalsmith 插件。它允许你在你的静态网站中轻松集成评论系统。

在本文中，我们将详细介绍如何使用 metalsmith-commento。我们将提供深度和学习以及指导意义，并为每个步骤提供示例代码。

安装

首先，你需要安装 metalsmith-commento。你可以使用 npm 进行安装：

npm install metalsmith-commento --save-dev

在 metalsmith 插件列表中包含这个插件：

const Metalsmith = require('metalsmith');
const commento = require('metalsmith-commento');

Metalsmith(__dirname)
  .use(commento({
    url: 'https://comments.example.com', // Commento 的 URL
    apiKey: 'my-api-key', // Commento 的 API Key
    title: 'My Blog', // 你的博客标题
    id: 'blog', // 用于生成 Commento thread ID 的前缀
    path: '**/*.html' // 匹配文件路径的 glob 样式
  }))
  .build();

选项

url（必填）：你的 Commento 实例的 URL
apiKey（必填）：你的 Commento API Key
title（必填）：你的博客标题
id（可选）：用于生成 Commento thread ID 的前缀，默认为 'default'
path（可选）：要为其添加评论框的文件的 glob 样式，默认为 '**/*.html'

使用

现在，我们已经成功安装了 metalsmith-commento 插件。接下来，我们需要在需要的页面中添加评论系统，以让访问者能够在你的网站上留下评论。

添加评论框

在需要添加评论框的页面中，添加以下代码：

<div id="commento"></div>
<script src="https://cdn.commento.io/js/commento.js"></script>

渲染评论列表

如果你需要在指定页面中显示评论列表，你只需使用以下命令：

const commento = require('commento-api');

commento.getComments({
  key: 'my-api-key',
  url: 'https://comments.example.com',
  pageID: 'my-page'
}).then(comments => {
  console.log(comments);
});

在此处，key 是你的 Commento API Key，url 是 Commento 的 URL，pageID 是要显示评论的页面的 ID。

结论

现在你已经学会了如何使用 metalsmith-commento 将 Commento 评论系统集成到你的静态网站中。希望这篇文章对你有帮助，并能为你提供指导和深度学习资源。如果你有问题或建议，请随时在评论中留言。

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/600673e0fb81d47349e53d36