在 Hugo 引入汉字标准格式

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

汉字标准格式

首先要引入两个源文件:han.min.csshan.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">
<!-- 如果为本地汇入 -->

2. 添加han.min.js #

/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>
<!-- 如果为本地汇入 -->

3. 启动脚本渲染 #

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

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

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

Respond on Mastodon, webmention this post, or contact me directly.

You can use Hypothes.is to select texts and highlight.

You've copied this page url!

Search it in your Mastodon server, and reply that toot by @fanrongbin.com@fanrongbin.com.