前言
在日常的前端开发中，我们经常需要介绍一些比较长的内容，例如博客文章、新闻报道、论述等，这时候就需要将内容分页来呈现。而对于静态网站生成器 Metalsmith，则有一个专门的 npm 包可以实现这个功能，它就是 metalsmith-pager。
本文将介绍 npm 包 metalsmith-pager 的使用方法，帮助大家轻松实现网页内容分页功能。
安装
使用 npm 在命令行中安装 metalsmith-pager：
npm install metalsmith-pager --save-dev
集成
在 Metalsmith 的配置文件中加入 pager 插件，例如：
var Metalsmith = require('metalsmith');
var pager = require('metalsmith-pager');
Metalsmith(__dirname)
.use(pager())
.build();上述代码中 use 方法的参数 pager() 是 metalsmith-pager 插件的实例化对象，构造函数可以接受一些参数。例如：
-- -------------------- ---- -------
---------------------
------------
---------------- --
----------------- --------
-------------- --------
-------------- ----- ---
-------------- -- ------
------------- -
------- ----- -------
------ -------------------------
-------- -----------------
--
------------- ----------
---
---------详细说明：
| 参数 | 描述 | 默认值 |
|---|---|---|
articlesPerPage |
每页文章的数量 | 5 |
paginationLayout |
分页链接的容器 HTML class 或 id | pagination |
paginationKey |
用于生成 HTML class 或 id 的 key 值 | pagination |
nextPageTitle |
下一页链接的文本 | Next → |
prevPageTitle |
上一页链接的文本 | ← Prev |
pageMetadata |
文章的元数据，将在分页链接处呈现，可以是字符串或函数 | undefined |
pageTemplate |
文章的模板文件，例如 page.hbs。模板文件应该放在顶层目录的 templates 文件夹中 |
undefined |
代码示例
为了演示 metalsmith-pager 的效果，我们在 ./src/articles 目录中增加了三篇博客文章 article1.md、article2.md 和 article3.md，内容分别如下：
-- -------------------- ---- ------- --- ------ ------- - ----- ---------- --- ----- ----- ----- --- ----- ----------- ---------- ----- --- ---- ------ ------ -- -- --- -------- ------- ----- --- -- ---- ---- ---- ------ ------ ---- ----- ----- ------------ ------ ------ ----- -- -- ---- --- -- ------ ---------- ---- ------- ----- ------ -- ------- ------ -------- --- ------ --- ------- ---- -------- ---------- ------ ----- -- ------ ---- -------- --- ----- ---- ------- ------- --- ---- ---- --- -------- --------- ------ -- --------- -------- ------- -- ------------ ----- --------- ----- -- ------ --- -- ------ -------- ----------- ------- ---- -- ----- ---------- -- --------- ---- ---------- ------ --- ---- -- -- -------- -------- -- -- ------ ------ --- ---- ------ ---------- --------- ------- ------- -- -------- ----- --------- --- ------- --- --------- ------ ---- ------- ----- --- ------- -------- -------- ------ --------- ----- --- ---- ------ ---------- ----- -------- ----- --- - --------- ----- ------ --- ------------ ------ ------ ---------- ------- ---- --- -------- ------- ----- ------ ----- ------ -- ------- ---- --------- --- ------ ----- -------- -------- --------- ----- ------- ------ ---- --- ------- ----- ------ ----- --- --------- ---------- ------ ----------- --------- ------ -- ----------- --- ----- ---- --- ----- --------- ------ -- - ------ ---- -------- --- ----- --- ---- -------- ---- -- ------ ---- ----- ------- -------- -- ----- ------- --- --------- --------- ------ ---- ------ ------ --------- --- ----- -- --------- ------ - ---- --------- --- ------- ----- ------------ ----- - ----------- ------ --- -------- ------ ------ -- ----- --- ----- --------- --------- --- ------- ------ ------- ----- ------- -- ------ -----
-- -------------------- ---- ------- --- ------ ------- - ----- ---------- --- ----- ----- ----- --- ----- ----------- ---------- ----- ---- -- --- ------ ------ --------- ----- ---- ----- --------- -------- ----- ----- ----- ---------- -------- ---- ----- ------ --- -------- ---- ----- -- ----- ------- ------- -------- -- --------- ----- -- ---- ----- ------ -- --------- -------- ------- ----------- ----- ---- --------- ----- ------- ----- ------ --- -------- ------- ------- -------- ---------- ----------- --- ---- ---- ------ ----- --- --- -- ---- ------- ------- ---- ----- ------- -------- ------- ----- -- ------ --------- -- -------- ---- --------- ----- --- ----- ----- ---- -- ----- -- ----- -------- ------- -- ---- --- ------- -------- --- -- ------- ----------- ----- ------ -------- ----- --- ----------- ----- ------ -- ------ ------------ ---- ---- ----- ---- -------- ------------ ---- ------- ----- ------ --- ------ ----- --------- --- ---- ------- ------ --- ------ ------ ---------- ----- --------- ----- --- ---- ----- -- ----- ------- ------- -- --- ----- ----------- -------- ---- --------- ---- --- --------- ---------- ---- ----- --------- ------- - --------- ------ -- --- ----- ------ ---- ----- --- ---- ------- -------- -- -- ----- ------- -------- ------ ----- ------- --------- ---------- ----- ---------- --- ---------- --------- ----- -- ------ ------- ------ ----- --------- ----- ----- --------- -- ---- --- ------ ------- ----------- ------ ------ -- -------- ---- -------- --
-- -------------------- ---- ------- --- ------ ------- - ----- ---------- --- ----- ----- ----- --- ----- ----------- ---------- ----- -- ------- --------- --- -- -------- ----------- -- ---- -------- ------ ------ ---- ---------- ----- ------ ------- ------- ---------- ----- ------ ----- --------- ---- ---- --- --------- ------- ------ ----- ------ ------ -------- -- ------ -------- --- ------- ------- --- -------- ---------- ----- --- --------- ----- ----- -- --------- ----- -------- ------- ----------- ------- --- --------- -- -------- ------ --- --- ----- -- ---- ------ ------ ----- --- ------ --- --------- ---- ---- -------- -------- ----- ------ ------- -------- ---- ------- ----- -------- -- ------ ----- --------- ------ -------- ------ --- ---- ----- -- ----- --------- --------- --- - ----- ----- --------- ---- --- -------- --------- ---- ----- ------ ----- -- --------- --- ---- --- ------ ----- -- --------- ----- ---- -------- ------ ------- ----- -- ------ ----- ----- --- ----- ---- ---- ---- -- --- ----- ------- ------- --- --- ------- ----------- -- ----- -- ----- --------- -------- ----- -- ------- --- -------- ----------- -------- ---------- ------ ------ -- ------ ------- --------- ---------- ---- ----- ------ -- -------- ---- ------ -- -------- ------- ------- ------ ------- ------- ----- -- ----- -------- ---- ------- ----- ---------- ---- --- ------ ------ -------- -- -- -- ----- -------- ------- ----- --- ------ ------- ------- --- ----- --- ---- --------- ------- ----- -- ------- ------ ---- --------- ------ - ---- ---------- -- ------ ----- ------------ ------- ---- ---- -- ----- --------- ------- ------- --- ----- ----------- ------ ------- ----- --- ---- --------- --- ------ --- --- -------- --- ----- ---- ------- ----- ---- --- -----
为了让演示页面更丰富，我们在 ./src 目录下创建了一个名为 index.hbs 的 Handlebars 模板文件，内容如下：
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
----------------- ----- ------------
-------
------
------------ ---------
------- ------------
----------------------------
-------------------
---------
--- ------------------------ ----------------------
---------
------ ------------------------------------------
--------
--- ------------------- -----------------------------------
---------
---------------
----- --------
--- ----------------- --------------------------------
--------
------ ---------------------------------------
-------
---------------
---------
------ ------------------------------------------
--------
--- ------------------- -----------------------------------
---------
-----
-------
-------在 ./src 文件夹中的 metalsmith.js 文件会读取以上目录结构，使用 Metalsmith 进行输出：
-- -------------------- ---- -------
--- ---------- - ----------------------
--- -------- - -------------------------------
--- ---------- - ----------------------
--- ------ - ------------------
--- ---------- - ---------------------------------
--- -------- - -------------------------------
--- --------------- - ----------------------------
--- ---------- - --------
--- -------- - -----------
-- ------ ---- ---------
--- ---- - ---------------------
-----------
----- -
------ ----------- ----- ------
---- -------------------------------------
------- ---------
-
--
-------------------
----------------------
----------------
-----------------
-------- -----------------
---
---------------
----------- - ----------------------------------
------------- ----------- ---
------ ------------------------------- - - - ---
--
--------- -------------- -
--- - - ------------------
- - ---------
-- ------- -- -- ----- --
----- - ---------- - --------------
------ -
------------ --
------------- ------------ --- - - --- - ----- - -----
--
-
---
----------------------
--------------- -------
---------------- --
----------- ------------
------------- ------------
--------------- -----------------
---------------- -------
---
------------------
-- -- --- --- ---- --- --------- ---- --- ---- ------ ------- -----
-------------------- ------ -
-- ----- - ----------------- -
---将以上所有文件复制到项目文件夹中，然后运行以下命令，即可在 ./public 目录下生成网站：
node ./src/metalsmith.js
效果展示
图片展示题面：传送门
在网站中访问 http://localhost:8080/articles/index.html，即可看到已经生成的带分页功能的文章列表页面：
总结
通过本文的介绍，您现在已经理解了如何使用 metalsmith-pager 实现网页内容分页功能。由于作者的能力有限，本文可能存在纰漏或不足之处，如果大家有更好的建议或补充，请随时在评论中提出。同时，我们也欢迎更多的前端开发者来参与 Metalsmith 及相关 npm 包的开发，共同推动静态网站生成器的发展。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60066f401d8e776d08040cb8