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

背景介绍

在开发一个静态网站时，我们经常会使用 Metalsmith 来处理静态文件。Metalsmith 是一个类似于 Gulp 和 Grunt 的静态网站生成器。它既可以作为构建工具，也可以作为生成器来使用。

metalsmith-permalinks-uid 是一个针对 Metalsmith 的插件，它可以为每篇文章生成一个唯一标识符，并根据这个标识符生成永久链接。这篇文章就是为了教你如何在你的 Metalsmith 项目中成功应用 metalsmith-permalinks-uid 插件。

安装

首先，我们需要安装 Metalsmith 和 metalsmith-permalinks-uid：

npm install --save metalsmith metalsmith-permalinks-uid

使用

在 Metalsmith 配置中使用插件

在 Metalsmith 的配置文件中，我们需要引入 metalsmith-permalinks-uid 插件，并在 Metalsmith 实例中使用它。

const Metalsmith = require('metalsmith');
const permalinks = require('metalsmith-permalinks-uid');

Metalsmith(__dirname)
  .source('./src')
  .destination('./build')
  .use(permalinks())
  .build();

使用这段代码，我们就已经成功引入了 metalsmith-permalinks-uid 插件，并将其应用到了所有的文章页面上。

在文章中使用唯一标识符

我们需要在每篇文章中添加唯一标识符，metalsmith-permalinks-uid 才能为我们生成正确的永久链接。唯一标识符可以是任何字符串，最好是全局唯一的。在示例代码中，我们使用了日期和文件名的组合作为唯一标识符：

---
title: Example Article
date: 2022-01-01
---

This is an example article.

[//]: # (uid: 2022-01-01-example-article)

在文章的 YAML 头部，我们需要添加一个 uid 字段。这个字段的值可以是任何字符串，只要满足全局唯一即可。我们建议使用类似日期和文章名称的组合，以便更容易地辨识每篇文章的永久链接。

注意，我们在示例代码中使用了一个注释来插入 uid 字段，这是为了避免 uid 字段被解析成 Markdown。

使用插件自定义格式

metalsmith-permalinks-uid 支持自定义 permalink 的格式。例如，我们可以将 uid 字段中的日期和文章名提取出来，并在永久链接中使用它们。我们可以这样配置插件：

Metalsmith(__dirname)
  .source('./src')
  .destination('./build')
  .use(permalinks({
    pattern: ':year/:month/:day/:title'
  }))
  .build();

在这个例子中，我们配置了插件使用如下格式生成永久链接：

/:year/:month/:day/:title

例如，如果一篇文章的 uid 为 2022-01-01-example-article，这篇文章的永久链接就是 /2022/01/01/example-article。

示例代码

为了更好地理解使用方法，这里提供了一个简单的 Metalsmith 项目示例，你可以按照以下步骤来创建一个简单的博客网站。

步骤 1：创建项目

首先，创建一个新的文件夹，使用 npm 初始化一个新的项目：

mkdir my-blog
cd my-blog
npm init -y

步骤 2：安装依赖

我们需要安装以下依赖：

npm install --save metalsmith metalsmith-markdown metalsmith-permalinks-uid

步骤 3：创建文件夹

在项目的根目录下创建两个文件夹： src 和 build。src 文件夹用来存放所有的源文件，build 文件夹是最终生成的静态网站。

mkdir src build

步骤 4：创建 Markdown 文章

在 src 文件夹中创建一篇 Markdown 文章：

cd src
touch example.md

在这篇文章的 YAML 头部中添加 uid 字段：

---
title: Example Article
date: 2022-01-01
---

This is an example article.

[//]: # (uid: 2022-01-01-example-article)

步骤 5：配置 Metalsmith

在项目的根目录下创建一个 index.js 文件，并添加以下代码：

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

---------------------
  ----------------
  -----------------------
  ----------------
  -----------------
    -------- --------------------------
  ---
  ------------ -- -
    -- ----- ----- ----
  ---展开代码

步骤 6：运行生成器

最后，在命令行中运行以下命令：

node index.js

步骤 7：查看结果

生成的静态网站已经在 build 文件夹中准备完毕。现在，我们可以在浏览器中打开 index.html 查看效果了。

总结

在这篇文章中，我们学习了如何使用 metalsmith-permalinks-uid 插件为 Metalsmith 中的每篇文章生成唯一的永久链接。我们还从一个简单的示例项目中学习了如何以正确的方式使用它。在实际开发中，我们相信这个插件和示例代码将会帮助你更加便捷地生成自己的静态网站。

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

npm 包 metalsmith-permalinks-uid 使用教程