Custom Components
Somnia 使用了 UnoCSS + Alpine.js 。因此可以使用一些 Alpine + Tailwind 的 UI 组件库。例如
注意: 由于 Swup.js 的原因，使用 <script> 标签在 Swup 切换页面后不会自动执行。解决方法
- 使用 Swup.js 插件解决。
- 将
<script>标签内容放到assets/js/custom.js中，新增例如xxxxComponent()，然后通过<div x-data="xxxxComponent()"></div>使用。 - 直接写
<div x-data="{ foo: 'bar' , func1() { ... }}"></div>。
例如：
{{<html>}}
<div x-data="{ foo: 'bar' , func1(){ somnia.showToast(this.foo); }}"
class="flex justify-center p-2">
<button @click="func1" class="border p-2 rounded">按钮</button>
</div>
{{</html>}}一个复杂些的例子：https://devdojo.com/pines/docs/text-animation
Pines UI Library
markdown 中使用原子化类不会被 UnoCSS cli 扫描到。可以将 html 放在 shortcode 避免这个问题。