在 Hugo 中使用注音

HTML 中有天然的注音支持，使用ruby标签可以很容易的实现注音场景。

比如以下这段代码。

<ruby>
  大丈夫<rp>(</rp><rt>だいじょうぶ</rt><rp>)</rp>
</ruby>

大丈夫(だいじょうぶ)

也可以精准的为每个汉字标注，这样显示出来会更明确。

<ruby>
  大<rp>(</rp><rt>だい</rt><rp>)</rp>
  丈<rp>(</rp><rt>じょう</rt><rp>)</rp>
  夫<rp>(</rp><rt>ぶ</rt><rp>)</rp>
</ruby>

大(だい) 丈(じょう) 夫(ぶ)

但是在 hugo 中，我们不可能像上面这样在文章中使用，太麻烦而且也不好维护。一个解决办法是使用 hugo 提供的 Markdown render hooks 来对默认的渲染行为做自定义。

比如我想自定义 link 的渲染行为，当链接的值以^开始时，它不表示超链接，而是表示一个注音，而多个文字在链接中以/分割，比如上面例子的表达就是[大丈夫](^だい/じょう/ぶ)。

确定了设计后，进入到实现流程，在主题的layouts/_default/_markup目录中新增render-link.html文件，其内容如下。

{{ if strings.HasPrefix .Destination "^" }}
{{ $destination:=substr .Destination 1 }}
{{ $list:=split $destination "/" }}
<ruby>
{{ range $index, $rune :=split .Text ""}}
  {{$rune}}<rp>(</rp><rt><br/>{{index $list $index}}<br/></rt><rp>)</rp>
{{ end }}
</ruby>
{{ end }}

上面这段代码使用了 Go 的模版语法来实现设计，但是上面的代码还没有处理默认的 link 渲染行为，我们需要在 else 分支里补上，link 的渲染行为可以参考文档，完整的代码如下，

{{ if strings.HasPrefix .Destination "^" }}
{{ $destination:=substr .Destination 1 }}
{{ $list:=split $destination "/" }}
<ruby>
{{ range $index, $rune :=split .Text ""}}
  {{$rune}}<rp>(</rp><rt>{{index $list $index}}</rt><rp>)</rp>
{{ end }}
</ruby>
{{else}}
<a href="{{ .Destination | safeURL }}"{{ with .Title }} title="{{ . }}"{{ end }}{{ if strings.HasPrefix .Destination "http" }} target="_blank" rel="noopener"{{ end }}>{{ .Text | safeHTML }}</a>
{{ end }}