npm 包 metalsmith-tags-list 使用教程

AI 编程助手,豆包旗下的编程助手,提供智能补全、智能预测、智能问答等能力,节省开发时间,释放脑海中的创造力,支持 VSCode,点击体验 AI

简介

在前端开发中,我们常常需要对文章或页面进行分类和标签的管理。而 metalsmith-tags-list 就是一款可以实现这种需求的 npm 包,它可以根据文章或页面的标签,生成对应的分类页面,并在分类页面中展示所有相关文章或页面的列表。

安装

使用 npm 进行安装:

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

配置

在 metalsmith 的配置文件(通常是一个 js 文件)中进行如下配置:

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

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

上述配置会在生成的网站中,为每个标签生成一个分类页面,并在每个分类页面中添加对应标签的文章或页面列表。

使用

在文章或页面的 metadata 中,添加一个名为 "tags" 的属性,并将它设为一个数组,该数组中包含该文章或页面所属的所有标签。例如:

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

上述 markdown 文件中,该文章所属的标签为 "前端"、"JavaScript" 和 "Markdown"。

现在,运行 metalsmith,即可看到每个标签都对应着一个分类页面,并且这个分类页面中,列出了所有与该标签有关的文章或页面。

高级配置

metalsmith-tags-list 还提供了一些高级配置选项,以便更丰富的自定义。在进行高级配置之前,需要先了解 metalsmith-tags-list 中提供的几个默认选项,它们分别为:

选项 描述
templateFile 模板文件路径
templateHelper 模板中可以使用的 Helper 函数
outputPath 生成的页面输出的路径
pageTitle 分类页面的标题

下面我们来学习如何进行高级配置。

sortKey

使用 sortKey 可以指定文章或页面列表的排序方式。默认为 "date",即按发布时间排序。

例如,设置为 "title",则会按照文章或页面的标题进行排序。示例配置如下:

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

reverse

使用 reverse 可以指定文章或页面列表的排序方式是否为反转,默认为 false,即升序排序。

例如,设置为 true,则会按照倒序进行排序。示例配置如下:

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

limit

使用 limit 可以指定每个分类页面中,文章或页面列表的限制数量。默认为无限制。

例如,设置为 10,则每个分类页面中,最多只会显示 10 篇文章或页面。示例配置如下:

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

skipMetadata

使用 skipMetadata 可以指定 metalsmith-tags-list 不应该处理哪些 metadata 信息。默认为空,即不跳过任何信息。

例如,设置为 ["title"],则 metalsmith-tags-list 不会处理文章或页面的标题信息。示例配置如下:

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

addToList

使用 addToList 可以在每个分类页面中添加其他内容,例如 sidebars。

例如,设置为 function (files, tag, tagData, options) { return mySidebar },其中 mySidebar 表示侧边栏内容,则会在分类页面中添加该侧边栏。示例配置如下:

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

总结

metalsmith-tags-list 是一款非常实用的 npm 包,它可以方便我们对文章或页面进行分类和标签的管理,并且生成对应的分类页面,让我们的网站更加健全。希望本文能够对您有所帮助,欢迎交流探讨。

来源:JavaScript中文网 ,转载请联系管理员! 本文地址:https://www.javascriptcn.com/post/60066f421d8e776d08040ddc


猜你喜欢

  • npm 包 object-fit-polyfill 使用教程

    在前端开发中,图片显示的方式是比较常见的需求,而 object-fit 是一种 CSS 属性,用于确定一个已经调整大小的元素内容应该如何垂直和水平放置。但是,该属性在一些浏览器上不被完全支持,特别是一...

    4 年前
  • npm 包 oauth-login-http 使用教程

    前言 在现今互联网时代,各种第三方应用授权登录已经成为了一种经典的应用场景。如何优雅地完成授权登录,顺畅地获取用户信息,成为了每个前端工程师需要具备的技能之一。在这方面,npm 包 oauth-log...

    4 年前
  • npm 包 nxfilter 使用教程

    介绍 Nxfilter 是一种网络过滤器,具有强大的功能和扩展性,通过使用 Nxfilter,可以实现对网络应用程序的访问控制、域名过滤、协议过滤、IP 地址过滤,并能监控用户的活动。

    4 年前
  • Critical dependency: require function is used in a way in which dependencies cannot be statically extracted

    如果你曾经在开发 Node.js 应用或者 Webpack 打包应用时遇到过 Critical dependency: require function is used in a way in whi...

    4 年前
  • NPM 包 NXS 使用教程

    介绍 NXS 是一个基于 Node.js 的数据格式转换工具,支持自定义转换规则,常常用于前端开发中的数据处理和格式转换工作。本文将为大家介绍如何使用 NPM 包 NXS,并给出相应的示例代码,帮助大...

    4 年前
  • NPM 包 nxs-bin 的使用教程

    NPM 是 Node.js 默认的包管理器,允许开发者从一个公共或私人的仓库中安装和发布代码包。其中,nxs-bin 是一种 NPM 包,可帮助前端开发者快速配置和访问 Nexus 数据库。

    4 年前
  • npm包 nxs-bitjws-js 使用教程

    前言 在前端开发中,我们常常需要使用一些第三方包来实现某些功能。其中,npm是一个常用的包管理器,它可以让我们很方便地安装、更新和管理各种包。在这篇文章中,我将介绍 npm 包 nxs-bitjws-...

    4 年前
  • npm 包 object-fitter 使用教程

    在前端开发过程中,经常会遇到图片和视频的适应问题,比如图片裁剪、缩放、居中等操作,这时候 object-fit 和 object-position 就成了常用的解决方案。

    4 年前
  • npm 包 nxt-api 使用教程

    介绍 nxt-api 是一个前端 npm 包,它提供了与 Next.js 应用程序通信的 API 客户端。如果您正在构建一个使用 Next.js 的客户端,那么 nxt-api 是一个非常好的选择。

    4 年前
  • npm 包 object-flatten 使用教程

    在前端开发中,经常需要处理由嵌套对象组成的数据结构。而 object-flatten 是一个可以将嵌套对象转换成扁平化对象的 npm 包,可以大大简化对数据结构的操作。

    4 年前
  • npm 包 object-flip 使用教程

    当我们需要快速地交换 JavaScript 对象中键和值的位置时,可以使用 npm 包 object-flip。 安装 使用 npm 安装 object-flip 包: --- ------- ---...

    4 年前
  • npm 包 object-flow 使用教程

    作为前端开发者,我们经常需要处理各种类型的数据结构,这就需要我们花费大量的时间和精力去考虑如何处理数据流。但是,有没有一种更加便捷的方式来处理数据流呢?今天,我们将要介绍一个名为 object-flo...

    4 年前
  • npm包object-fmap使用教程

    在前端编程中,数据的处理是非常重要的,通过object-fmap这个npm包,可以方便地对数据进行递归处理,并返回新的数据。本文将介绍object-fmap的使用方法以及其在前端开发中的实际应用。

    4 年前
  • npm 包 object-foreach-polyfill 使用教程

    什么是 object-foreach-polyfill object-foreach-polyfill 是一个用于兼容低版本浏览器中对 Object 对象的 forEach 方法的 npm 包。

    4 年前
  • npm 包 object-formatter 使用教程

    前言 在前端开发中,我们经常需要对对象进行格式化的操作。而在 JavaScript 中,对象的格式化是一个非常常见的需求。当我们需要将对象转化为指定格式的字符串,或者需要将字符串转化为对象时,我们就需...

    4 年前
  • npm 包 oauth-open 使用教程

    在前端开发中,我们经常需要实现 OAuth 授权的功能。OAuth 是开放式授权协议,允许资源的拥有者授权第三方应用访问其资源。在使用 OAuth 授权时,我们通常会使用第三方平台提供的 SDK 或者...

    4 年前
  • npm 包 oauth-percent-encode 使用教程

    前言 对于前端开发人员来说,OAuth(开放授权)是一个非常重要的概念。在与 API 交互时,授权是必不可少的,而 OAuth 是其中最常用的一种。在 OAuth 标准中,数据需要进行百分比编码(pe...

    4 年前
  • npm包object-fit-videos使用教程

    在日常的前端开发工作中,常常会遇到需要在页面中嵌入视频元素的情况。但是,不同的浏览器对于视频元素的解析方式是不同的,从而导致视频在页面中的展示效果存在着一定的差异。

    4 年前
  • npm 包 nut-cli 使用教程

    在现代的前端开发中,使用各种工具包和框架来帮助编写高质量的代码已经成为了一个必不可少的环节。在这些工具包中,npm 包无疑是其中最为重要和广泛使用的一个。而在 npm 包中,nut-cli 又是一个非...

    4 年前
  • npm 包 nutella-scrape 使用教程

    简介 nutella-scrape 是一个基于 Node.js 的 npm 包,用于实现 Web 页面的自动爬取和数据提取,可以帮助前端开发者快速的获取网站信息。 安装 使用 npm 进行安装: --...

    4 年前

相关推荐

    暂无文章