无意间看到了sakana-widget这个项目,想在我的主页的侧边栏中实现这一功能。
我使用的主题是hugo-theme-stack,其他主题会略有不同。
在/themes/hugo-theme-stack/layouts/partials/sidebar
目录下,找到right.html
,复制到/layouts
中。在<aside>
下添加以下代码:
<!-- https://cdn.jsdelivr.net/npm/sakana-widget@2.5.0/lib/sakana.min.css -->
<!-- https://cdn.jsdelivr.net/npm/sakana-widget@2.5.0/lib/sakana.min.js -->
<!-- https://cdnjs.cloudflare.com/ajax/libs/sakana-widget/2.5.0/sakana.min.css -->
<!-- https://cdnjs.cloudflare.com/ajax/libs/sakana-widget/2.5.0/sakana.min.js -->
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/sakana-widget@2.5.0/lib/sakana.min.css"
/>
<div id="sakana-widget"></div>
<script>
function initSakanaWidget() {
new SakanaWidget().mount('#sakana-widget');
}
</script>
<script
async
onload="initSakanaWidget()"
src="https://cdn.jsdelivr.net/npm/sakana-widget@2.5.0/lib/sakana.min.js"
></script>
</aside>
其他自定义可参考:https://github.com/dsrkafuu/sakana-widget/blob/main/README.zh.md