汉字标准格式
汉字标准格式 「 是一套支援各种印刷效果的 」 Sass + JavaScript 排版框架 包含相邻文字装饰线跳脱 , 、 汉 ㄏㄢ ˋ 字 ㄗ ˋ 标 ㄅㄧㄠ 音 ㄧㄣ 着重号 、 标点符号修正 、 中文四大印刷体 、 汉字 、 - 西文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">
<!-- 如果为本地汇入 -->
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
文件下载下来是没有缩进的,你可以通过一些工具标准化,看得会清楚一点。 一般来说,解决冲突最方便的方式是:哪里看不顺眼就注释掉哪里。
测试范例
测试省略号:……
文章引用区块内的重点:
不做则中心与的说很笔分士:校此诉平是里春家善客总外公;做南多中。 足酒脸理特指第常三紧资现工们家化民,公政我热良,中以家是。
字级语意类:
超连结元素
注记元素
注记元素甲注记元素乙一般文字节点注记元素丙一般文字节点注记元素丁
来源元素
重点元素
术语元素
关键字元素
强调元素
变音文字元素
变数元素引用元素
子引用
讹讯元素讹讯元素甲讹讯元素乙一般文字节点讹讯元素丙一般文字节点讹讯元素丁代码元素
输入键元素
计算机输出示例元素
行间注元素示例
复合式
直角
缩写元素
凸显元素
批注元素
文字范围元素
下标元素
上标元素
修订类:
增订元素
增订元素甲增订元素乙一般文字节点增订元素丙一般文字节点增订元素丁删订元素删订元素甲删订元素乙一般文字节点删订元素丙一般文字节点删订元素丁