给Hugo主题添加看板娘

自定义Hugo主题样式

无意间看到了sakana-widget这个项目,想在我的主页的侧边栏中实现这一功能。

我使用的主题是hugo-theme-stack,其他主题会略有不同。

/themes/hugo-theme-stack/layouts/partials/sidebar目录下,找到right.html,复制到/layouts中。在<aside>下添加以下代码:

<!-- https://cdn.jsdelivr.net/npm/[email protected]/lib/sakana.min.css -->
<!-- https://cdn.jsdelivr.net/npm/[email protected]/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/[email protected]/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/[email protected]/lib/sakana.min.js"
></script>
</aside>

其他自定义可参考:https://github.com/dsrkafuu/sakana-widget/blob/main/README.zh.md

Licensed under CC BY-NC-SA 4.0