abcjsというABC記譜法で書いたテキストから楽譜を描画するライブラリを使って、Hugoで作成するページで楽譜を表示できるようにする。
music-abcを指定したコードブロックに対して処理するようにレンダーフックを定義する。
layouts/_default/_markup/render-codeblock-music-abc.html
1
2
3
4
5
6
7
8
9
10
| {{- $src := .Inner | safeHTML }}
{{- $uuid := md5 $src }}
<div id="{{- $uuid }}"></div>
<script>
window.addEventListener('load', function(){
const src = `{{ $src}}`;
ABCJS.renderAbc("{{- $uuid }}", src, { responsive: "resize" });
});
</script>
{{ .Page.Store.Set "hasMusicAbc" true }}
|
楽譜を描画するエリア（<div id="{{- $uuid }}"></div>）のIDを決め打ちにしてしまうと、ノート内に複数のコードブロックを書けないのでMD5ハッシュを生成し、IDとして使用した。
layouts/partials/head.html
1
2
3
| {{ if .Page.Store.Get "hasMusicAbc" }}
<script src="https://cdnjs.cloudflare.com/ajax/libs/abcjs/6.1.7/abcjs-basic-min.js"></script>
{{ end }}
|
ヘッダにabcjsをロードする処理を追加。ページ内にmusic-abcを指定したコードブロックがある場合（hasMusicAbcがtrue）のみロードするようにした。
obsidian-plugin-abcjsに楽譜の表示例がある。
