在 Hugo 引入汉字标准格式

「汉字标准格式」是一套支援各种印刷效果的Sass + JavaScript排版框架，包含相邻文字装饰线跳脱、汉ㄏㄢˋ字ㄗˋhànzì标ㄅㄧㄠ音ㄧㄣbiāoyīn、着重号、标点符号修正、中文四大印刷体、汉字－西文mixed间隙、「标点『挤压』与『悬挂』」、章节边界调整……

汉字标准格式

首先要引入两个源文件：han.min.css与han.min.js，最简便的方式，可以通过CDN或直接下载后（访问两条代码中的对应链接，另存至本地）放入Hugo博客系统下的/static文件夹中。建议使用后者，以方便我们在本地调整样式上的冲突。

这两种方式，都需要在HTML对应处汇入。为了让Hugo在生成页面时自动汇入，以我所使用的hugo-tufte主题为例：

1. 添加`han.min.css` #

修改/themes/hugo-tufte主题文件夹内的/layouts/partials/header.includes.html（核心即找到/layouts中哪个.html对应<head>的生成），在末尾对应加入：

<link rel="stylesheet" media="all" href="//cdnjs.cloudflare.com/ajax/libs/Han/3.2.7/han.min.css">
<!-- 如果使用 CDN，直接复制官网给出的那条 link rel... -->

<link rel="stylesheet" href="/han.min.css">
<!-- 如果为本地汇入 -->

在/layouts/_default/baseof.html中</body>到</html>的中间，对应加入：

<script src="//cdnjs.cloudflare.com/ajax/libs/Han/3.2.7/han.min.js"></script>
<!-- 如果使用 CDN，直接复制官网给出的那条 link rel... -->

<script src="/han.min.js"></script>
<!-- 如果为本地汇入 -->

如果你只希望对于文章内容进行渲染，不影响菜单栏等，在/layouts/_default/single.html中找到对应你文章内容部分的label，如<article id="main">，加入class="han-init-context"属性即可。

到此我们已完成两个文件的汇入和启动渲染，hugo server查看，大部分情况下你会发现页面许多处的错乱，以及原<em>的强调样式变成了陌生的着重号等。同时，你也会惊讶地发现在中英文混排时，中英文之间自动加上了间距，且标点符号的显示有明显的优化。

接下来，你需要根据自身需要调整han.min.css或override冲突的地方，这是我们最关键的工作。css文件下载下来是没有缩进的，你可以通过一些工具标准化，看得会清楚一点。一般来说，解决冲突最方便的方式是：哪里看不顺眼就注释掉哪里。