使用 PurifyCSS 和 Hugo - CSS

本文将介绍如何在 Hugo 中使用 PurifyCSS 来优化 CSS，以提高网站性能。我们将使用一个名为 Hugo - CSS 的主题来说明此过程。

什么是 PurifyCSS？

PurifyCSS 是一个用于减少 CSS 文件大小的工具，它通过从您的 CSS 文件中删除未使用的样式来实现这一点。

这可以帮助减少浏览器必须下载和解析的文件大小，从而提高网站的性能。

为什么使用 PurifyCSS？

在使用 CSS 框架或模板时，您通常会得到一个包含许多未使用样式的 CSS 文件。这些额外的样式可能会减慢您的网站，因为浏览器必须下载更多数据，解析更多样式规则。

使用 PurifyCSS 可以删除未使用的样式，从而减少这种情况的发生。这有助于您的网站更快地加载，提高用户体验和 SEO。

安装 PurifyCSS

使用 PurifyCSS 需要 Node.js 环境。如果您尚未安装，请先安装它们。接下来，我们将使用 npm（Node.js 包管理器）安装 PurifyCSS：

npm install -g purify-css

在 Hugo 中使用 PurifyCSS

我们将使用一个基于 Hugo 的主题 Hugo - CSS 作为示例，演示如何使用 PurifyCSS。

在 Hugo 中使用 PurifyCSS 分为两步：

1. 安装主题中已安装的依赖项（包括 PurifyCSS）。
2. 在构建过程中使用 PurifyCSS 来优化 CSS。

以下是将要更改的主题目录结构（省略了不必要的文件）：

hugo-css/
├── assets/
│   ├── css/
│   │   └── main.css
│   └── scss/
│       └── main.scss
├── layouts/
│   ├── _default/
│   │   ├── baseof.html
│   │   └── list.html
│   ├── partials/
│   │   ├── footer.html
│   │   └── header.html
│   └── index.html
├── static/
│   └── images/
│       └── image.jpg
└── config.toml

安装依赖项

在主题根目录运行以下命令：

npm install

这将安装主题中 package.json 中定义的依赖项，其中包括 PurifyCSS。

配置 PurifyCSS

接下来，我们将在构建命令中使用 PurifyCSS 来删除未使用的样式。为此，我们将在主题下的 package.json 中添加一个脚本命令。

"scripts": {
  "start": "hugo server -D",
  "build": "rm -rf public && hugo --gc --minify && purifycss assets/css/main.css -o assets/css/main.css --content public/**/*.html",
  "test": "echo \"Error: no test specified\" && exit 1"
},

本例中，我们在 build 脚本中添加了 purifycss assets/css/main.css -o assets/css/main.css --content public/**/*.html 用于删除未使用样式。

具体来说：

• assets/css/main.css 是我们要减少的 CSS 文件。
• -o assets/css/main.css 确保过滤器将减少的CSS保存回这个文件。
• --content public/**/*.html 用于指示我们的网站在 public/ 目录（当我们构建时生成）下的所有HTML文件，以便做出正确的判断。

保存 package.json 文件。

构建主题

最后，我们运行构建命令：

npm run build

这将运行 Hugo 构建并使用 PurifyCSS 优化 assets/css/main.css 文件的CSS。

现在您可以使用优化后的 CSS 文件来提高网站性能。

结论

在这篇文章中，我们演示了如何在 Hugo 中使用 PurifyCSS 来减少 CSS 文件大小，并使用一个名为 Hugo - CSS 的主题来说明此过程。

通过使用 PurifyCSS，您可以删除未使用的样式，减少浏览器必须下载和解析的数据量，提高网站性能和用户体验。