abcjs库是用于呈现音乐乐谱的JavaScript库，是开源的js库。你可以把它的js代码用于网页。因为hugo blog的短代码是一大优点，所以我们可以通过jsdelivr的公共CDN链接以及命名为abcjs的短代码来实现abc乐谱在博客上显示。
1.开始准备
1.1添加abcjs的cdn
去jsdelivr找到abcjs，找到abcjs的链接，在layouts/partials/header.html中引入如下：
<script src="https://cdn.jsdelivr.net/npm/abcjs@6.4.4/dist/abcjs-basic-min.min.js"></script>
1.2创建命名为abcjs的shortcode
创建layouts/shortcodes/abcjs.html，并引入短代码：
<div class="container">
<div id="{{ .Get "id" }}" class="abcjs-container"></div>
<script>
document.addEventListener("DOMContentLoaded", function () {
if (typeof ABCJS !== 'undefined') {
var abcString = `{{ .Inner | safeHTML }}`;
ABCJS.renderAbc("{{ .Get "id" }}", abcString, {
responsive: true,
scale: 1.0
});
} else {
console.error("ABCJS is not loaded or defined.");
}
});
</script>
<style>
.abcjs-container {
width: 100%;
max-width: 100%;
margin: 0 auto;
}
@media (max-width: 768px) {
.abcjs-container {
width: 100%;
}
}
@media (max-width: 480px) {
.abcjs-container {
width: 100%;
}
}
</style>
</div>
1.3美化自定义CSS
在static/css/abcjs中引入样式：
.abcjs-container {
margin: 20px auto;
text-align: center;
max-width: 800px;
padding: 10px;
box-sizing: border-box;
}
@media (max-width: 768px) {
.abcjs-container {
max-width: 100%;
margin: 10px;
font-size: 14px;
}
}
@media (max-width: 480px) {
.abcjs-container {
font-size: 12px;
padding: 5px;
}
}
在header.html引入CSS:
<link rel="stylesheet" href="{{ "/css/abcjs.css" | absURL }}">
2.尝试一下
{/{< abcjs id="Cooley's" >}\}
X: 1
T: Cooley's
M: 4/4
L: 1/8
K: Emin
|:D2|"Em"EBBA B2 EB|\
~B2 AB dBAG|\
"D"FDAD BDAD|\
FDAD dAFD|
"Em"EBBA B2 EB|\
B2 AB defg|\
"D"afe^c dBAF|\
"Em"DEFD E2:|
|:gf|"Em"eB B2 efge|\
eB B2 gedB|\
"D"A2 FA DAFA|\
A2 FA defg|
"Em"eB B2 eBgB|\
eB B2 defg|\
"D"afe^c dBAF|\
"Em"DEFD E2:|
{/{< /abcjs >}\}(因为会转义，把左右花括号内“/\”去掉即可)
参考1.jsdlivr上abcjs2.abcjs官网
