前言
在前端开发中，我们经常需要使用到静态网站生成器（SSG）来将静态页面生成为 HTML、CSS、JS 等静态文件，其中比较流行的有 Jekyll、Hugo 等。而在生成文章时，我们经常会需要添加标签，方便分类和检索。metalsmith-tags 就是一个可以方便地生成文章标签的 npm 包。
本篇文章将详细介绍 metalsmith-tags 的使用方法，并提供代码示例以供参考。
安装
使用 npm 进行安装：
npm install metalsmith-tags --save
配置
在使用 metalsmith-tags 之前，我们需要在设置文件 metalsmith.js 中进行如下的配置：
-- -------------------- ---- -------
--- ---- - ---------------------------
---------------------
-- ------- ------- ----
------- -------
-- ------------
----------------------
-----------------
------- -------
-------- -----
------------- ------
----- ------------- - ------ ----------------------------------------- --
------ ---
---------- -
------ ---------------
---- ---------
-
----接下来我们来逐一解释一下这些配置项。
handle
handle: 'tags'
用于指定文章中包含标签的 key。默认是 tags。
path
path: 'tags/:tag.html'
用于指定标签页的地址格式。可以包括标签本身（使用 :tag 替代）。默认是 tags/:tag.html。
layout
layout: 'tag.hbt'
指定标签页的模板使用的模板文件名。默认值是 tag.hbt。
sortBy
sortBy: 'date'
指定按照哪个元数据进行排序。默认值是 date。
reverse
reverse: true
用于指定是否按照降序进行排序。默认值是 true。
skipMetadata
skipMetadata: false
用于指定是否在 metadata() 中额外增加标签页信息。默认值是 false。
slug
slug: function(tag) { return tag.toLowerCase().replace(/[^\w]+/g,'-'); }用于处理标签的 slug。默认值如上所示。可以自定义 slug 处理方式，比如将 # 替换为 - 进行处理。
limit
limit: 10
用于指定标签页中最多显示多少个文章链接。默认值是 10。
templates
templates: {
index: 'tagIndex.hbt',
tag: 'tag.hbt'
}用于指定标签页使用的模板文件。默认值如上所示。
使用
在文章的 Front-matter 中添加 tags 属性指定添加的标签，多个标签使用逗号分隔：
--- title: 我的文章 date: 2022-06-10 tags: A, B, C --- 正文正文正文...
添加了 tags 属性之后，metalsmith-tags 就会根据配置自动生成对应的标签页面。
在模板中，我们可以通过 tags 属性来获取文章中的标签列表：
const tags = require('metalsmith-tags');
tags(here.tags, here.metadata())示例
下面是一份完整的示例代码和模板代码，供参考。
metalsmith.js
-- -------------------- ---- -------
--- ---------- - ----------------------
-------- - -------------------------------
---------- - ---------------------------------
---- - ---------------------------
---------------------
-----------
------ --- ------
------------ -- ----- ----------- -- -- ------
--
----------------
-----------------------
------------
----------------
-----------------
-------- --------
---
-----------
------- -------
----------------------
-----------------
------- -------
-------- -----
------------- ------
----- ------------- - ------ ----------------------------------------- --
------ ---
---------- -
------ ---------------
---- ---------
-
---
-------------------- -
-- ----- -
-----------------
-
------------------ -------------
---index.hbt
-- -------------------- ---- -------
--------- -----
----- -------------
------
----- ----------------
------------------------
-------
------
------- -----------
------ ----------------------------------
----------------------
-------- ------------
---------
-------
-------tag.hbt
-- -------------------- ---- -------
--------- -----
----- -------------
------
----- ----------------
-------------- - -----------------
-------
------
----------------
------- ----------
------ ----------------------------------
----------------------
---------
-------
-------tagIndex.hbt
-- -------------------- ---- -------
--------- -----
----- -------------
------
----- ----------------
----------- - -----------------
-------
------
----
------- ------
------ ----------------------- ---------------------
---------
-----
-------
-------结语
以上就是对 metalsmith-tags 的详细介绍和使用教程。通过使用 metalsmith-tags，我们可以方便地为静态博客生成标签页，使得我们的博客更加方便地被分类检索。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/5eedb60fb5cbfe1ea06114d3