前端技术文章：使用 typography-theme-anonymous npm 包教程-JavaScript中文网-JavaScript教程资源分享门户

在前端开发中，页面排版是非常重要的一环。为了方便排版，许多开发者使用 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 -v npm -v

如果你还没有安装，你可以到 Node.js 官网下载并安装。

安装完毕后，在终端中使用以下命令安装 typography-theme-anonymous：

npm install typography-theme-anonymous

安装完成后，我们就可以在项目中使用 typography-theme-anonymous 包了。

创建基础示例

在你的项目中，创建一个文件叫 index.js，并使用以下代码：

import Typography from 'typography'
import Theme from 'typography-theme-anonymous'

const typography = new Typography(Theme)

console.log(typography.toString())

然后在终端中使用以下命令运行这个文件：

node index.js

终端将会输出这个项目的样式参数，它是一个包含 CSS 样式的字符串。此处不再赘述其中的含义，有兴趣的读者可以查看 typography 文档。

在你的应用程序中使用 typography

我们已经在本地创建了一个基础示例，现在需要将样式参数应用到应用程序中。

首先，在应用程序中需要安装 typography npm 包。我们运行以下命令：

npm install typography

然后，在你的应用程序中使用以下代码：

import Typography from 'typography'
import Theme from 'typography-theme-anonymous'

const typography = new Typography(Theme)

typography.injectStyles()

这段代码将会把 typography-theme-anonymous 包中的 CSS 样式应用到你的应用程序中。现在，所有的内容都遵循了 typography-theme-anonymous 的设计风格。

自定义主题

typography-theme-anonymous 提供一些默认的选项，但通常你需要根据你的设计来修改样式。

你可以在 typography-theme-anonymous 的 GitHub 仓库上找到所有的样式参数。在本地创建一个 custom.js 文件，并添加如下代码：

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

在自定义主题中，我们创建了一个新的对象 myCustomTheme ，提供新的样式。

接下来，我们简单的修改了 bodyColor、bodyFontFamily和headerFontFamily 这三个参数，让它们符合我们的需求。

最后，我们需要将新的样式应用到应用程序中。我们可以修改之前的代码，如下所示：

import Typography from 'typography'
import myCustomTheme from './custom'
 
const typography = new Typography(myCustomTheme)
 
typography.injectStyles()

保存代码并重新运行你的应用程序，你应该可以看到页面已经应用了自定义样式。

总结

在本文中，我们介绍了如何使用 typography-theme-anonymous 包进行自动化排版。我们先安装了这个包，然后创建了一个基础示例，最后我们将自定义的样式应用到应用程序中。

使用 typography-theme-anonymous 包可以极大地方便页面排版，同时也可以让我们关注页面的其他部分。致此，我希望这篇文章能够帮助你更深入的了解和使用 typography 工具。

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