Metalsmith-Typography 是一个 npm 包，它可以帮助你将 markup 文件转化为带有美观排版的页面。

什么是 Metalsmith-Typography？

Metalsmith-Typography 是一个管理文本排版的插件。它基于 Typography.js 和 Metalsmith 引擎。Typography.js 是一个 JavaScript 工具，用于帮助你将文本排版为美观、可读的样式。

Metalsmith 是一个基于流的静态网站生成器。它可以帮助开发者把一系列文件转化为 HTML 静态网站。Metalsmith-Typography 利用 Metalsmith 引擎，将 markup 文件转化为美观的页面。

安装和配置 Metalsmith-Typography

首先，需要安装 Metalsmith 和 Metalsmith-Typography。通过以下命令在终端窗口中安装。

npm install metalsmith metalsmith-typography

在安装过程中，所有相关的依赖也会被一并安装。

如果还没有准备好源文件，请先准备好源文件。Metalsmith-Typography 可以对 HTML、Markdown 和其他种类的 markup 文件进行处理。你只需要按照 Metalsmith 格式组织源文件，然后 Metalsmith-Typography 会根据你的设置生成网站。

接下来，建立一个 metalsmith.json 文件用于说明 MetalSmith 的配置信息。文件内容如下：

{
  "source": "content",
  "destination": "build",
  "plugins": {
    "metalsmith-typography": {}
  }
}

代码解析：

source: 源文件路径
destination: 目标文件路径
plugins：插件集合
metalsmith-typography: typography 插件的配置项

以上配置意味着把源文件夹 content 中的文件转换后输出到文件夹 build。

Metalsmith 可以通过运行以下命令进行转换：

node_modules/metalsmith/bin./metalsmith

如果你希望 Metalsmith 检测文件的变化并自动更新文件，可以使用 nodemon 工具。通过以下命令将 nodemon 安装：

npm install nodemon

然后，使用以下命令监视源文件夹 content 中的变化并自动更新：

nodemon node_modules/metalsmith/bin/metalsmith

使用 Metalsmith-Typography

在完成以上配置之后，就可以开始使用 Metalsmith-Typography 了。

Metalsmith-Typography 有一些默认设置，但如果你想要定制你的网站排版，就需要进行一些配置。

默认情况下， Metalsmith-Typography 使用 Bootstrap 样式做为网站的排版样式。如果你想修改样式，可以编辑 metalsmith.json 文件，将以下代码添加到 metalsmith-typography 属性下：

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

以上代码设置了一个新的排版样式。

baseFontSize: 基础字体大小
baseLineHeight: 基础行高
headerFontFamily: 标题字体
bodyFontFamily: 正文字体
blockMarginBottom: 段落底部间距
headerWeight: 标题加粗程度
bodyWeight: 正文字体加粗程度

示例代码

下面是一个示例代码，用于将 markdown 文件转换为 HTML 页面：

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

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

总结

Metalsmith-Typography 可以帮助你很简单地对 markup 文件进行排版。通过修改 Metalsmith 的配置文件，你可以进行排版的定制。同时，开发者还可以使用 JavaScript API 调用 Metalsmith-Typography 的功能。

此外，还可以使用插件和其他工具，例如 Metalsmith-Permalinks 和 Metalsmith-Assets，来扩展 Metalsmith-Typography 的功能，以实现更加强大的静态网站生成器功能。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/60066f421d8e776d08040e02

npm 包 Metalsmith-Typography 使用教程

什么是 Metalsmith-Typography？

安装和配置 Metalsmith-Typography

使用 Metalsmith-Typography

示例代码

总结

纠错反馈