npm 包 metalsmith-page-data 使用教程

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

在 Web 前端开发中，有许多工具和框架可以让我们更加方便地开发网站，其中一个非常常见的工具就是 Metalsmith。Metalsmith 是一个静态网站生成器，可以将 Markdown 文件、HTML 文件以及其他资源转换为静态网页。在这个过程中，我们可能需要一些数据来渲染我们的网页，比如文章的分类、标签、作者等等。这时候，就需要使用一个叫做 metalsmith-page-data 的 npm 包。

metalsmith-page-data 可以将来自不同来源的数据注入到 metalsmith 的 metadata 中，并在渲染文章时使用这些数据。它的配置和使用都非常简单，下面我们就来一步步介绍。

安装

使用 npm 安装 metalsmith-page-data：

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

配置

在使用 metalsmith-page-data 之前，需要在 metalsmith 的配置中添加插件。以下是一个简单的例子：

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

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

metalsmith-page-data 的配置是一个对象，其中的每个键名表示匹配的文件路径，每个键值则表示对应文件需要注入的数据。在上面的示例中，我们假设 articles 文件夹下的所有文件都需要使用 source/data/articles.json 中的数据，key 则指定了用于匹配的键。

使用

在模板中可以通过 ejs、handlebars 或其他模板引擎来获取注入的数据。以下是一个简单的示例：

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

上面的模板中使用了 ejs 语法，利用注入的数据来渲染网页内容，<%= title %>，<%= description %> 和 <%= content %> 分别表示文章的标题、描述和正文，<% categories.forEach(category => { %> 和 <% }); %> 中的代码用来遍历文章的分类并渲染到网页中。

示例

以下是一个完整的示例：

目录结构

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

src/data/articles.json

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

src/articles/article-01.md

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

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

src/articles/article-02.md

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

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

src/templates/layout.ejs

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

src/templates/article.ejs

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

metalsmith.js

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

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

构建输出

运行 node metalsmith.js 后，生成的网站将被保存在 build 目录下，以下是部分输出（未做样式调整）：

build/articles/article-01.html

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

build/articles/article-02.html

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

小结

本文介绍了 metalsmith-page-data 的使用方法和示例，它可以让我们更方便地在 metalsmith 中注入数据并渲染网页。使用它，我们可以避免在每个文件中重复定义数据，而是集中管理数据，提高开发效率。

更多关于 metalsmith-page-data 的文档，可以查看 官方文档。

来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/60066f401d8e776d08040cb6

阅读全文

猜你喜欢

  • npm 包 nsliteral 使用教程

    在前端开发中，我们常常需要处理字符串，比如将一个字符串转化为数字、将一个字符串首字母大写等等。而 nsliteral 是一个专门处理字符串的 npm 包，它提供了一些方便的方法来处理字符串，使我们的开...

    4 年前
  • npm 包 nsl 使用教程

    什么是 nsl？ nsl 是一款基于 Node.js 的网络工具包，可以用于获取 IP 地址和域名信息。它和常见的网络工具类似，但是它的使用更加方便和简洁，适合在前端项目中使用。

    4 年前
  • npm 包 nsloader 使用教程

    什么是 nsloader nsloader 是一款强大的前端资源加载器，支持对 js、css、图片等资源的按需加载和缓存控制。它的作用是优化页面加载速度和提升用户体验。

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

    前言 在前端开发中，有些项目需要登录才能访问并进行操作，而为了方便登录流程，我们可能会使用自动化工具来模拟登录过程。在这里介绍一款能够帮助我们快速登录网站的 npm 包 —— nslogin-cli。

    4 年前
  • npm 包 npm_study 使用教程

    简介 npm 是 Node.js 的包管理器，它是世界上最大的软件注册表之一。它能为您的项目安装各种依赖、管理版本，并提供易于使用的接口。本文将详细介绍 npm 包 npm_study 的使用方法，包...

    4 年前
  • npm 包 npmtest0810 使用教程

    简介 npmtest0810 是一个 Node.js 包，提供了许多常用的前端函数和工具集，方便前端开发人员进行开发。本文将介绍如何使用 npmtest0810 包，并提供一些使用示例和指导意义。

    4 年前
  • npm 包 nslurm 使用教程

    介绍 nslurm 是一个用于管理 Slurm 集群任务与节点的 npm 包。Slurm 是一种较为常用的高性能计算应用程序，用于管理大规模、复杂的任务和节点的分布式系统。

    4 年前
  • npm 包 nsm 使用教程

    简介 nsm 全称是 Node.js script manager，是一个管理你的 Node.js 脚本的工具。它可以使你的脚本更好地组织、管理，提高开发效率。此外，nsm 还支持自动化测试、调试、重...

    4 年前
  • npm 包 nsm-js-footer 使用教程

    在前端开发中，经常会用到一些工具和库，其中就包括 npm 包。nsm-js-footer 可以帮助我们快速添加页脚到网页中，此文章将分享如何使用 nsm-js-footer。

    4 年前
  • npm 包 nsmockup 使用教程

    什么是 nsmockup nsmockup 是一个 Node.js 模块，用于在本地模拟 Netsuite 对象。它提供了一个类 Netsuite 环境，可以用来进行本地开发、测试和调试，而无需在 N...

    4 年前
  • npm 包 nsnjson-driver 使用教程

    在前端开发中，我们经常需要对 JSON 数据进行增删改查等操作。而 nsnjson-driver 是一款针对 JSON 数据处理的 npm 包，具有非常实用的功能和易于使用的接口。

    4 年前
  • npm 包 npmtest123456 使用教程

    简介 npm 是一款 Node.js 的包管理工具，可以很方便地分享、安装、更新和管理 Node.js 包。而 npmtest123456 则是一个在 npm 上非常流行的前端类的包。

    4 年前
  • npm 包 npmtest4 使用教程

    npm 是前端开发中不可或缺的一个工具，它可以帮助我们管理依赖、发布和分享代码。而 npm 包则是扩展 npm 功能的一种形式，是我们在开发和编写代码时需要用到的元素。

    4 年前
  • npm 包 number-random 使用教程

    在前端开发中，生成随机数是一个经常用到的操作。而使用 npm 包 number-random 可以更加方便地生成随机数。本文将介绍如何使用这个 npm 包。 安装 首先，需要在项目中安装 number...

    4 年前
  • npm 包 number-ranger 使用教程

    随着前端开发中各种复杂的业务逻辑的出现，处理和校验用户输入的数据变得越来越重要。在这方面，number-ranger 这个 npm 包被广泛应用于数字的校验和处理，它可以帮助我们更有效地处理各种数字数...

    4 年前
  • 在当前 shell 中以 sudo 权限执行 shell 脚本

    在前端开发中，我们常常需要在终端或命令行界面中执行一些脚本来完成特定的任务。有时候，这些脚本需要使用超级用户权限才能正确地运行，比如修改系统文件或安装某些软件。 但是，在使用 sudo 命令执行脚本时...

    4 年前
  • npm 包 number-round 使用教程

    简介 number-round 是一款基于 JavaScript 的 npm 包，能够实现数字的舍入功能。此包提供了四种舍入方法，包括四舍五入、向上取整、向下取整、去除尾数。

    4 年前
  • npm 包 number-scale 使用教程

    前言 在前端开发中，我们经常会处理数值，为了更好地展示和计算，我们需要将数字进行格式化。而 npm 包 number-scale 就是能够帮我们实现这一功能的工具。

    4 年前
  • npm 包 number-scales 使用教程

    在前端开发中，数字转换是一个常见的需求。比如将一个数字转化为不同进制的数字，或者将一个数字按照一定的规则格式化输出。使用 npm 包 number-scales 可以轻松地实现这些功能。

    4 年前
  • npm 包 number-theory 使用教程

    前言 number-theory 是一个在 npm 上非常流行的数论工具包，用于处理数论问题。它提供了一系列的函数，可以用来解决一些数论问题，并且使用方法也非常的简单。

    4 年前

相关推荐

    暂无文章