前言
metalsmith-paginate 是一个用于静态网站生成器 Metalsmith 中的 npm 包，用于网站的分页显示。尤其适用于博客和文章纵横的网站，同时也可以有效地增强网站的用户体验。本文将详细介绍如何安装和使用这个 npm 包。
环境与前提
- 安装了 Node.js 以及 npm 包管理器；
- 使用 Metalsmith 作为静态网站生成器；
- 在项目中添加了 metalsmith-paginate。
安装
metalsmith-paginate 可以直接从 npm 安装：
--- ------- ------ -------------------
请确保您已在 MetalSmith 的配置文件中添加了本插件。
配置
将以下代码添加到你的 metalsmith.json 文件中。
-
---------- -
---------------------- -
---------- ---
----------- -----------------------
------- ---------------------
--------------- -
--------- ------
-
-
-
-perPage: 每一页显示的文章数。template: 可选项，包含分页标记的模板文件的路径。如果不设置，则使用默认模板。path: 可选项，生成分页模板文件所在的目录。此范例生成得到的 pretty URLs 为www.example.com/pagination/page1.html，完整的目录将与 MetalSmith 的输出目录合并。如果不设置，则保存文件到 MetalSmith 的输出（即build）目录下。pageMetadata: 可选项，它是一个 object，包含了 Pagination 相关的所有信息。在pageMetadata对象下，我们只指定页面标题前缀。
模板代码
下面是一个使用 Handlebars 模板的范例。在此示例中，我们使用了 currentPage，first, prev，next，last 等变量，这些变量均由 metalsmith-paginate 插件生成。
---- -------------------
----- -----------
-- -------- --------- --- --------------- ------------ ------
-------
------- -------
----- -----------
-- -------- --------- --- --------- ---------- ------ -------- ------
--------
----- --------- ---------- ------ -------- ---------
-------
---------
----- -----------
-- -------- --------- --- --------------- ------------ ------
-------
------如何在代码中使用分页
请将 browsers 或 templates 渲染器中的代码分成分页。调用{{:: pagination()}}可以自动生成分页标记。在以下范例中，参考了 articles 变量以及 currentPage 变量。
网页
-------- -----------------
------- ----------
----- -------------- --- -------------
---- ------- ---- ------- ---
---------
------------------
------------------------
----------
-------
---------
----------
---- ------------ --邮件
------- ----------
----- -------------- --- -------------
-------- -----------------
------------------
------------------------
----------
---- ------------ --
-------
---------如果您是 Metalsmith 的新手，请查看 Metalsmith 的官方文档以更好地理解这个工具。
总结
通过使用 metalsmith-paginate，我们可以方便地把长篇文章或博客拆分为多个页面。它为网站提供了更好的用户体验和改善了网站的性能。如果你正在使用 Metalsmith 作为静态网站生成器，metalsmith-paginate 应该是你的必备插件。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/60066f401d8e776d08040cc0