在前端开发中，页面排版是非常重要的一环。为了方便排版，许多开发者使用 typography 工具实现自动化排版。对于需要快速排版且排版需求不是很高的开发者，推荐使用 typography-theme-anonymous npm 包。在本文中，我们将详细介绍如何使用此包完成自动化排版。
上手前，我们需要了解一些术语：
typography-theme-anonymous：一个基于typography的 npm 包，用来帮助你快速的进行自动化排版。typography：由 Kyle Mathews 开发的自动化排版工具。npm：是一个基于 Node.js 的包管理器，用于安装和管理 JavaScript 包。
接下来，我们将在本地安装 typography-theme-anonymous，并创建一个基础示例呈现其使用方法。
安装
首先，我们需要确保 Node.js 和 npm 包已经安装。你可以在终端里使用以下命令检查 Node.js 和 npm 版本：
---- -- --- --
如果你还没有安装，你可以到 Node.js 官网下载并安装。
安装完毕后，在终端中使用以下命令安装 typography-theme-anonymous：
--- ------- --------------------------
安装完成后，我们就可以在项目中使用 typography-theme-anonymous 包了。
创建基础示例
在你的项目中，创建一个文件叫 index.js，并使用以下代码：
------ ---------- ---- ------------ ------ ----- ---- ---------------------------- ----- ---------- - --- ----------------- ----------------------------------
然后在终端中使用以下命令运行这个文件：
---- --------
终端将会输出这个项目的样式参数，它是一个包含 CSS 样式的字符串。此处不再赘述其中的含义，有兴趣的读者可以查看 typography 文档。
在你的应用程序中使用 typography
我们已经在本地创建了一个基础示例，现在需要将样式参数应用到应用程序中。
首先，在应用程序中需要安装 typography npm 包。我们运行以下命令：
--- ------- ----------
然后，在你的应用程序中使用以下代码：
------ ---------- ---- ------------ ------ ----- ---- ---------------------------- ----- ---------- - --- ----------------- -------------------------
这段代码将会把 typography-theme-anonymous 包中的 CSS 样式应用到你的应用程序中。现在，所有的内容都遵循了 typography-theme-anonymous 的设计风格。
自定义主题
typography-theme-anonymous 提供一些默认的选项，但通常你需要根据你的设计来修改样式。
你可以在 typography-theme-anonymous 的 GitHub 仓库 上找到所有的样式参数。在本地创建一个 custom.js 文件，并添加如下代码：
------ -------------- ---- ----------------------------
----- ------------- - -
------------------
---------- --------------------
--------------- ------------- --------------
----------------- --------- -------------
-
------ ------- -------------在自定义主题中，我们创建了一个新的对象 myCustomTheme ，提供新的样式。
接下来，我们简单的修改了 bodyColor、bodyFontFamily和headerFontFamily 这三个参数，让它们符合我们的需求。
最后，我们需要将新的样式应用到应用程序中。我们可以修改之前的代码，如下所示：
------ ---------- ---- ------------ ------ ------------- ---- ---------- ----- ---------- - --- ------------------------- -------------------------
保存代码并重新运行你的应用程序，你应该可以看到页面已经应用了自定义样式。
总结
在本文中，我们介绍了如何使用 typography-theme-anonymous 包进行自动化排版。我们先安装了这个包，然后创建了一个基础示例，最后我们将自定义的样式应用到应用程序中。
使用 typography-theme-anonymous 包可以极大地方便页面排版，同时也可以让我们关注页面的其他部分。致此，我希望这篇文章能够帮助你更深入的了解和使用 typography 工具。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/5f2555bf3b0ab45f74a8b979