{"version":"https://jsonfeed.org/version/1.1","title":"技术 on Somnia","home_page_url":"https://kkbt0.github.io/Somnia/categories/%E6%8A%80%E6%9C%AF/","feed_url":"https://kkbt0.github.io/Somnia/categories/%E6%8A%80%E6%9C%AF/feed.json","authors":[{"name":{"about":"","avatar":"https://ftls.xyz/img/avatar.webp","bio":"浮生若梦 为欢几何","email":"0@ftls.xyz","github":"https://github.com/kkbt0","gravataremail":"","link":"https://www.ftls.xyz","location":"China","name":"恐咖兵糖"}}],"items":[{"title":"Somnia","id":"https://kkbt0.github.io/Somnia/posts/somnia/","url":"https://kkbt0.github.io/Somnia/posts/somnia/","content_text":"\u003ch2 id=\"简介\"\u003e简介\u003c/h2\u003e\n\u003cp\u003e一个现代化、优雅的 Hugo 主题，基于 Astro Theme Pure 移植而来。使用了 Alpine.js + UnoCSS 构建，支持现代化的网站开发体验。\u003ca href=\"https://www.ftls.xyz/posts/2026-03-22-hugo-theme-somnia/\"\n  rel=\"external nofollow noopener noreferrer\" target=\"_blank\"\u003e缘起\u003cspan style=\"user-select:none\"\u003e ↗\u003c/span\u003e\u003c/a\u003e\u003c/p\u003e\n\u003ch2 id=\"快速体验\"\u003e快速体验\u003c/h2\u003e\n\n\n\n\u003cdiv class=\"astro-code astro-code-themes chroma \" style=\"overflow-x: auto;\"\n    data-language=\"bash\"\u003e\n    \u003cpre\u003e\u003ccode\u003e\u003cspan class=\"line\"\u003e\u003cspan class=\"cl\"\u003egit clone https://github.com/kkbt0/Somnia\n\u003c/span\u003e\u003c/span\u003e\u003cspan class=\"line\"\u003e\u003cspan class=\"cl\"\u003e\u003cspan class=\"nb\"\u003ecd\u003c/span\u003e Somnia\n\u003c/span\u003e\u003c/span\u003e\u003cspan class=\"line\"\u003e\u003cspan class=\"cl\"\u003ejust\u003c/span\u003e\u003c/span\u003e\u003c/code\u003e\u003c/pre\u003e\n    \u003cspan class=\"language ps-1 pe-3 text-sm bg-muted text-muted-foreground rounded-bl\"\u003ebash\u003c/span\u003e\n    \u003cbutton class=\"copy text-muted-foreground p-1 box-content border rounded-lg bg-card\" aria-label=\"Copy code\"\n        data-code=\"git clone https://github.com/kkbt0/Somnia\ncd Somnia\njust\" onclick=\"\n          navigator.clipboard.writeText(this.dataset.code);\n          this.classList.add('copied');\n          setTimeout(() =\u003e this.classList.remove('copied'), 2000)\n        \"\u003e\n        \u003cdiv class=\"ready\"\u003e\n            \u003csvg class=\"size-5\"\u003e\n              \u003cuse href='/Somnia/icons/main.svg#clipboard' /\u003e\n            \u003c/svg\u003e\n        \u003c/div\u003e\n        \u003cdiv class=\"success hidden\"\u003e\n            \u003csvg class=\"size-5\"\u003e\n                \u003cuse href='/Somnia/icons/main.svg#file-check' /\u003e\n            \u003c/svg\u003e\n        \u003c/div\u003e\n    \u003c/button\u003e\n    \n\u003c/div\u003e\u003cp\u003e参考 justfile 文件。如果你没有安装 just，也可以直接复制命令到命令行执行。\u003c/p\u003e","date_published":"2025-01-01T12:00:00+08:00","tags":[]},{"title":"Components","id":"https://kkbt0.github.io/Somnia/posts/components/","url":"https://kkbt0.github.io/Somnia/posts/components/","content_text":"\u003ch1 id=\"components\"\u003eComponents\u003c/h1\u003e\n\u003ch2 id=\"containers\"\u003eContainers\u003c/h2\u003e\n\u003ch3 id=\"card\"\u003eCard\u003c/h3\u003e\n\n\n\n\n\n\n\n\n\n\n\n\u003cdiv\n  class=\"not-prose block relative rounded-2xl border bg-muted px-5 py-3 transition-all hover:border-foreground/25 hover:shadow-sm\"\u003e\n  \u003ca href=\"#card\"\u003e\n    \u003cdiv class='flex flex-col gap-y-1.5'\u003e\n      \u003cdiv class='flex flex-col gap-y-0.5'\u003e\n        \u003cspan class='text-lg font-medium font-bold'\u003eLorem ipsum\u003c/span\u003e\n        \u003cp class='text-muted-foreground'\u003eLorem ipsum dolor sit amet, vidit suscipit at mei.\u003c/p\u003e\n        \u003cp class='text-muted-foreground'\u003eAugust 2021 - July 2025\u003c/p\u003e\n      \u003c/div\u003e\n      \nSome Text\n\n    \u003c/div\u003e\n  \u003c/a\u003e\n\u003c/div\u003e\n\u003ch3 id=\"collapse\"\u003eCollapse\u003c/h3\u003e\n\n\u003ccollapse-component x-data=\"{contentExpanded: false}\" :class=\"{'expanded':contentExpanded}\" class='group/expand'\u003e\n    \u003cdiv class=\"rounded-xl border px-3 my-4 sm:px-4 group-[.expanded]/expand:bg-muted\"\u003e\n        \n        \u003cdiv @click=\"contentExpanded = !contentExpanded\"\n            class='group/highlight expand-title sticky top-0 z-20 flex cursor-pointer items-center justify-between py-1.5 group-[.expanded]/expand:bg-muted sm:py-2'\u003e\n            \u003cp class='m-0 transition-colors group-hover/highlight:text-primary'\u003eLink History Book\u003c/p\u003e\n            \u003cdiv class='expand-button'\u003e\n                \u003csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none'\n                    stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'\n                    class='my-1 stroke-muted-foreground transition-all duration-300 group-hover/highlight:stroke-primary group-[.expanded]/expand:-rotate-90'\u003e\n                    \u003cline x1='5' y1='12' x2='19' y2='12'\n                        class='translate-x-1 scale-x-100 duration-300 ease-in-out group-[.expanded]/expand:translate-x-4 group-[.expanded]/expand:scale-x-0'\u003e\n                    \u003c/line\u003e\n                    \u003cpolyline points='12 5 19 12 12 19'\n                        class='translate-x-1 duration-300 ease-in-out group-[.expanded]/expand:translate-x-0'\u003e\n                    \u003c/polyline\u003e\n                \u003c/svg\u003e\n            \u003c/div\u003e\n        \u003c/div\u003e\n        \u003cdiv\n            class='expand-content grid opacity-0 transition-all duration-300 ease-in-out group-[.expanded]/expand:mb-3 group-[.expanded]/expand:opacity-100 sm:group-[.expanded]/expand:mb-4'\u003e\n            \u003cdiv class='overflow-hidden'\u003e\n                \n                \n    \n\u003cdiv\u003e\n    \u003cul class='ps-0 sm:ps-2'\u003e\n        \u003cli class='group relative flex list-none gap-x-3 rounded-full ps-0 sm:gap-x-2'\u003e\n            \n            \u003cspan\n                class='z-10 my-2 ms-2 h-3 w-3 min-w-3 rounded-full border-2 border-muted-foreground transition-transform group-hover:scale-125'\u003e\u003c/span\u003e\n            \n            \n            \u003cspan class=\"absolute start-[12px] top-[20px] w-1 bg-border\" style=\"height:calc(100% - 4px)\"\u003e \u003c/span\u003e\n            \n            \u003cdiv class='flex gap-2 max-sm:flex-col'\u003e\n                \u003csamp\n                    class='w-fit grow-0 rounded-md py-1 text-sm max-sm:bg-card max-sm:px-2 sm:min-w-[82px] sm:text-right'\u003e\n                    2025-03-16\n                \u003c/samp\u003e\n                \u003cdiv\u003e\n                    Is there a leakage?\n                \u003c/div\u003e\n            \u003c/div\u003e\n        \u003c/li\u003e\n        \u003cli class='group relative flex list-none gap-x-3 rounded-full ps-0 sm:gap-x-2'\u003e\n            \n            \u003cspan\n                class='z-10 my-2 ms-2 h-3 w-3 min-w-3 rounded-full border-2 border-muted-foreground transition-transform group-hover:scale-125'\u003e\u003c/span\u003e\n            \n            \n            \u003cspan class=\"absolute start-[12px] top-[20px] w-1 bg-border\" style=\"height:calc(100% - 4px)\"\u003e \u003c/span\u003e\n            \n            \u003cdiv class='flex gap-2 max-sm:flex-col'\u003e\n                \u003csamp\n                    class='w-fit grow-0 rounded-md py-1 text-sm max-sm:bg-card max-sm:px-2 sm:min-w-[82px] sm:text-right'\u003e\n                    2025-03-16\n                \u003c/samp\u003e\n                \u003cdiv\u003e\n                    A leakage of what?\n                \u003c/div\u003e\n            \u003c/div\u003e\n        \u003c/li\u003e\n        \u003cli class='group relative flex list-none gap-x-3 rounded-full ps-0 sm:gap-x-2'\u003e\n            \n            \u003cspan\n                class='z-10 my-2 ms-2 h-3 w-3 min-w-3 rounded-full border-2 border-muted-foreground transition-transform group-hover:scale-125'\u003e\u003c/span\u003e\n            \n            \n            \u003cspan class=\"absolute start-[12px] top-[20px] w-1 bg-border\" style=\"height:calc(100% - 4px)\"\u003e \u003c/span\u003e\n            \n            \u003cdiv class='flex gap-2 max-sm:flex-col'\u003e\n                \u003csamp\n                    class='w-fit grow-0 rounded-md py-1 text-sm max-sm:bg-card max-sm:px-2 sm:min-w-[82px] sm:text-right'\u003e\n                    2025-03-16\n                \u003c/samp\u003e\n                \u003cdiv\u003e\n                    I have a full seat of water, like, full of water!\n                \u003c/div\u003e\n            \u003c/div\u003e\n        \u003c/li\u003e\n        \u003cli class='group relative flex list-none gap-x-3 rounded-full ps-0 sm:gap-x-2'\u003e\n            \n            \u003cspan\n                class='z-10 my-2 ms-2 h-3 w-3 min-w-3 rounded-full border-2 border-muted-foreground transition-transform group-hover:scale-125'\u003e\u003c/span\u003e\n            \n            \n            \u003cspan class=\"absolute start-[12px] top-[20px] w-1 bg-border\" style=\"height:calc(100% - 4px)\"\u003e \u003c/span\u003e\n            \n            \u003cdiv class='flex gap-2 max-sm:flex-col'\u003e\n                \u003csamp\n                    class='w-fit grow-0 rounded-md py-1 text-sm max-sm:bg-card max-sm:px-2 sm:min-w-[82px] sm:text-right'\u003e\n                    2025-03-16\n                \u003c/samp\u003e\n                \u003cdiv\u003e\n                    Must be the water.\n                \u003c/div\u003e\n            \u003c/div\u003e\n        \u003c/li\u003e\n        \u003cli class='group relative flex list-none gap-x-3 rounded-full ps-0 sm:gap-x-2'\u003e\n            \n            \u003cspan\n                class='z-10 my-2 ms-2 h-3 w-3 min-w-3 rounded-full border-2 border-muted-foreground transition-transform group-hover:scale-125'\u003e\u003c/span\u003e\n            \n            \n            \u003cdiv class='flex gap-2 max-sm:flex-col'\u003e\n                \u003csamp\n                    class='w-fit grow-0 rounded-md py-1 text-sm max-sm:bg-card max-sm:px-2 sm:min-w-[82px] sm:text-right'\u003e\n                    2025-03-16\n                \u003c/samp\u003e\n                \u003cdiv\u003e\n                    Let\u0026rsquo;s add that to the words of wisdom.\n                \u003c/div\u003e\n            \u003c/div\u003e\n        \u003c/li\u003e\n        \n    \u003c/ul\u003e\n\u003c/div\u003e\n\n            \u003c/div\u003e\n        \u003c/div\u003e\n    \u003c/div\u003e\n\u003c/collapse-component\u003e\n\u003cstyle\u003e\n    .expand-content {\n        grid-template-rows: 0fr;\n    }\n\n    .expanded .expand-content {\n        grid-template-rows: 1fr;\n    }\n\u003c/style\u003e\n\u003ch3 id=\"callout\"\u003eCallout\u003c/h3\u003e\n\n\n\n\u003cdiv aria-label=\"Lorem ipsum\" class='callout my-3 overflow-hidden rounded-xl border'\u003e\n    \u003cdiv class=\"callout-container border-l-8 border-primary px-4 py-3 bg-primary callout-note\"\u003e\n        \u003cp class='not-prose flex items-center gap-x-2 font-medium text-primary' aria-hidden='true'\u003e\n            \n            \u003csvg aria-hidden=\"true\" class=\"\" width=\"22\" height=\"22\" viewBox=\"0 0 24 24\" fill=\"currentColor\"\n                style=\"--sl-icon-size: 1em;\"\u003e\n                \u003cg fill=\"none\"\u003e\n                    \u003cpath fill=\"currentColor\"\n                        d=\"M12 2c5.523 0 10 4.477 10 10s-4.477 10-10 10S2 17.523 2 12S6.477 2 12 2m0 2a8 8 0 1 0 0 16a8 8 0 0 0 0-16m-.01 6c.558 0 1.01.452 1.01 1.01v5.124A1 1 0 0 1 12.5 18h-.49A1.01 1.01 0 0 1 11 16.99V12a1 1 0 1 1 0-2zM12 7a1 1 0 1 1 0 2a1 1 0 0 1 0-2\"\u003e\n                    \u003c/path\u003e\n                \u003c/g\u003e\n            \u003c/svg\u003e\n            \n            Lorem ipsum\n        \u003c/p\u003e","date_published":"2025-01-01T11:30:00+08:00","tags":[]},{"title":"Custom Components","id":"https://kkbt0.github.io/Somnia/posts/custom-components/","url":"https://kkbt0.github.io/Somnia/posts/custom-components/","content_text":"\u003ch3 id=\"custom-components\"\u003eCustom Components\u003c/h3\u003e\n\u003cp\u003eSomnia 使用了 UnoCSS + Alpine.js 。因此可以使用一些 \u003ccode\u003eAlpine + Tailwind\u003c/code\u003e 的 UI 组件库。例如\u003c/p\u003e\n\u003cul\u003e\n\u003cli\u003e\u003ca href=\"https://devdojo.com/pines/\"\n  rel=\"external nofollow noopener noreferrer\" target=\"_blank\"\u003ehttps://devdojo.com/pines/\u003cspan style=\"user-select:none\"\u003e ↗\u003c/span\u003e\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"https://github.com/thedevdojo/pines\"\n  rel=\"external nofollow noopener noreferrer\" target=\"_blank\"\u003ehttps://github.com/thedevdojo/pines\u003cspan style=\"user-select:none\"\u003e ↗\u003c/span\u003e\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"https://pinemix.com/\"\n  rel=\"external nofollow noopener noreferrer\" target=\"_blank\"\u003ehttps://pinemix.com/\u003cspan style=\"user-select:none\"\u003e ↗\u003c/span\u003e\u003c/a\u003e\u003c/li\u003e\n\u003c/ul\u003e\n\u003cp\u003e\u003cstrong\u003e注意\u003c/strong\u003e: 由于 Swup.js 的原因，使用 \u003ccode\u003e\u0026lt;script\u0026gt;\u003c/code\u003e 标签在 Swup 切换页面后不会自动执行。解决方法\u003c/p\u003e","date_published":"2025-01-01T11:00:00+08:00","tags":[]},{"title":"Markdown","id":"https://kkbt0.github.io/Somnia/posts/markdown/","url":"https://kkbt0.github.io/Somnia/posts/markdown/","content_text":"\u003ch2 id=\"基本语法\"\u003e基本语法\u003c/h2\u003e\n\u003cp\u003eMarkdown 是一种轻量级且易于使用的语法，用于为您的写作设计风格。\u003c/p\u003e\n\u003ch3 id=\"标题\"\u003e标题\u003c/h3\u003e\n\u003cp\u003e文章内容较多时，可以用标题分段：\u003c/p\u003e\n\n\n\n\u003cdiv class=\"astro-code astro-code-themes chroma \" style=\"overflow-x: auto;\"\n    data-language=\"markdown\"\u003e\n    \u003cpre\u003e\u003ccode\u003e\u003cspan class=\"line\"\u003e\u003cspan class=\"cl\"\u003e\u003cspan class=\"gh\"\u003e# 标题 1\n\u003c/span\u003e\u003c/span\u003e\u003c/span\u003e\u003cspan class=\"line\"\u003e\u003cspan class=\"cl\"\u003e\n\u003c/span\u003e\u003c/span\u003e\u003cspan class=\"line\"\u003e\u003cspan class=\"cl\"\u003e\u003cspan class=\"gu\"\u003e## 标题 2\n\u003c/span\u003e\u003c/span\u003e\u003c/span\u003e\u003cspan class=\"line\"\u003e\u003cspan class=\"cl\"\u003e\n\u003c/span\u003e\u003c/span\u003e\u003cspan class=\"line\"\u003e\u003cspan class=\"cl\"\u003e\u003cspan class=\"gu\"\u003e## 大标题\n\u003c/span\u003e\u003c/span\u003e\u003c/span\u003e\u003cspan class=\"line\"\u003e\u003cspan class=\"cl\"\u003e\n\u003c/span\u003e\u003c/span\u003e\u003cspan class=\"line\"\u003e\u003cspan class=\"cl\"\u003e### 小标题\u003c/span\u003e\u003c/span\u003e\u003c/code\u003e\u003c/pre\u003e\n    \u003cspan class=\"language ps-1 pe-3 text-sm bg-muted text-muted-foreground rounded-bl\"\u003emarkdown\u003c/span\u003e\n    \u003cbutton class=\"copy text-muted-foreground p-1 box-content border rounded-lg bg-card\" aria-label=\"Copy code\"\n        data-code=\"# 标题 1\n\n## 标题 2\n\n## 大标题\n\n### 小标题\" onclick=\"\n          navigator.clipboard.writeText(this.dataset.code);\n          this.classList.add('copied');\n          setTimeout(() =\u003e this.classList.remove('copied'), 2000)\n        \"\u003e\n        \u003cdiv class=\"ready\"\u003e\n            \u003csvg class=\"size-5\"\u003e\n              \u003cuse href='/Somnia/icons/main.svg#clipboard' /\u003e\n            \u003c/svg\u003e\n        \u003c/div\u003e\n        \u003cdiv class=\"success hidden\"\u003e\n            \u003csvg class=\"size-5\"\u003e\n                \u003cuse href='/Somnia/icons/main.svg#file-check' /\u003e\n            \u003c/svg\u003e\n        \u003c/div\u003e\n    \u003c/button\u003e\n    \n\u003c/div\u003e\u003cp\u003e标题预览会打乱文章的结构，所以在此不展示。\u003c/p\u003e","date_published":"2025-01-01T10:00:00+08:00","tags":[]},{"title":"Alpine.js 从入门到精通 3 全局与其他","id":"https://kkbt0.github.io/Somnia/docs/alpine.js/alpinejs3/","url":"https://kkbt0.github.io/Somnia/docs/alpine.js/alpinejs3/","content_text":"\u003ch2 id=\"三全局-globals\"\u003e三、全局 Globals\u003c/h2\u003e\n\u003cp\u003eAlpine.js 提供了一些全局方法和对象，可以在任何地方使用。\u003c/p\u003e\n\u003ch3 id=\"1-alpinedata-可复用数据逻辑\"\u003e1. Alpine.data() 可复用数据逻辑\u003c/h3\u003e\n\u003cp\u003e\u003cstrong\u003e解读\u003c/strong\u003e：\u003ccode\u003eAlpine.data()\u003c/code\u003e 用于定义可复用的数据逻辑，类似于 Vue 的 \u003ccode\u003esetup()\u003c/code\u003e 或 React 的自定义 Hook。\u003c/p\u003e","date_published":"2025-01-01T09:00:00+08:00","tags":["Alpine.js","前端","JavaScript"]},{"title":"Alpine.js 从入门到精通 2 魔法属性","id":"https://kkbt0.github.io/Somnia/docs/alpine.js/alpinejs2/","url":"https://kkbt0.github.io/Somnia/docs/alpine.js/alpinejs2/","content_text":"\u003ch2 id=\"二魔法属性-magic-properties\"\u003e二、魔法属性 Magic Properties\u003c/h2\u003e\n\u003cp\u003eAlpine.js 提供了一些以 \u003ccode\u003e$\u003c/code\u003e 开头的魔法属性，可以在组件中直接访问。\u003c/p\u003e\n\u003ch3 id=\"1-el-当前元素\"\u003e1. $el 当前元素\u003c/h3\u003e\n\u003cp\u003e\u003cstrong\u003e解读\u003c/strong\u003e：\u003ccode\u003e$el\u003c/code\u003e 指向当前 Alpine 组件的根 DOM 元素。\u003c/p\u003e\n\u003cp\u003e\u003cstrong\u003e示例代码\u003c/strong\u003e：\u003c/p\u003e\n\n\n\n\u003cdiv class=\"astro-code astro-code-themes chroma \" style=\"overflow-x: auto;\"\n    data-language=\"html\"\u003e\n    \u003cpre\u003e\u003ccode\u003e\u003cspan class=\"line\"\u003e\u003cspan class=\"cl\"\u003e\u003cspan class=\"p\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\"nt\"\u003ediv\u003c/span\u003e \u003cspan class=\"na\"\u003ex-data\u003c/span\u003e\u003cspan class=\"o\"\u003e=\u003c/span\u003e\u003cspan class=\"s\"\u003e\u0026#34;{}\u0026#34;\u003c/span\u003e\u003cspan class=\"p\"\u003e\u0026gt;\u003c/span\u003e\n\u003c/span\u003e\u003c/span\u003e\u003cspan class=\"line\"\u003e\u003cspan class=\"cl\"\u003e    \u003cspan class=\"p\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\"nt\"\u003ebutton\u003c/span\u003e \u003cspan class=\"err\"\u003e@\u003c/span\u003e\u003cspan class=\"na\"\u003eclick\u003c/span\u003e\u003cspan class=\"o\"\u003e=\u003c/span\u003e\u003cspan class=\"s\"\u003e\u0026#34;console.log($el)\u0026#34;\u003c/span\u003e\u003cspan class=\"p\"\u003e\u0026gt;\u003c/span\u003e查看根元素\u003cspan class=\"p\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\"nt\"\u003ebutton\u003c/span\u003e\u003cspan class=\"p\"\u003e\u0026gt;\u003c/span\u003e\n\u003c/span\u003e\u003c/span\u003e\u003cspan class=\"line\"\u003e\u003cspan class=\"cl\"\u003e    \u003cspan class=\"p\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\"nt\"\u003ebutton\u003c/span\u003e \u003cspan class=\"err\"\u003e@\u003c/span\u003e\u003cspan class=\"na\"\u003eclick\u003c/span\u003e\u003cspan class=\"o\"\u003e=\u003c/span\u003e\u003cspan class=\"s\"\u003e\u0026#34;$el.style.backgroundColor = \u0026#39;yellow\u0026#39;\u0026#34;\u003c/span\u003e\u003cspan class=\"p\"\u003e\u0026gt;\u003c/span\u003e改变背景\u003cspan class=\"p\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\"nt\"\u003ebutton\u003c/span\u003e\u003cspan class=\"p\"\u003e\u0026gt;\u003c/span\u003e\n\u003c/span\u003e\u003c/span\u003e\u003cspan class=\"line\"\u003e\u003cspan class=\"cl\"\u003e\u003cspan class=\"p\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\"nt\"\u003ediv\u003c/span\u003e\u003cspan class=\"p\"\u003e\u0026gt;\u003c/span\u003e\u003c/span\u003e\u003c/span\u003e\u003c/code\u003e\u003c/pre\u003e\n    \u003cspan class=\"language ps-1 pe-3 text-sm bg-muted text-muted-foreground rounded-bl\"\u003ehtml\u003c/span\u003e\n    \u003cbutton class=\"copy text-muted-foreground p-1 box-content border rounded-lg bg-card\" aria-label=\"Copy code\"\n        data-code=\"\u0026lt;div x-data=\u0026#34;{}\u0026#34;\u0026gt;\n    \u0026lt;button @click=\u0026#34;console.log($el)\u0026#34;\u0026gt;查看根元素\u0026lt;/button\u0026gt;\n    \u0026lt;button @click=\u0026#34;$el.style.backgroundColor = \u0026#39;yellow\u0026#39;\u0026#34;\u0026gt;改变背景\u0026lt;/button\u0026gt;\n\u0026lt;/div\u0026gt;\" onclick=\"\n          navigator.clipboard.writeText(this.dataset.code);\n          this.classList.add('copied');\n          setTimeout(() =\u003e this.classList.remove('copied'), 2000)\n        \"\u003e\n        \u003cdiv class=\"ready\"\u003e\n            \u003csvg class=\"size-5\"\u003e\n              \u003cuse href='/Somnia/icons/main.svg#clipboard' /\u003e\n            \u003c/svg\u003e\n        \u003c/div\u003e\n        \u003cdiv class=\"success hidden\"\u003e\n            \u003csvg class=\"size-5\"\u003e\n                \u003cuse href='/Somnia/icons/main.svg#file-check' /\u003e\n            \u003c/svg\u003e\n        \u003c/div\u003e\n    \u003c/button\u003e\n    \n\u003c/div\u003e\u003cp\u003e\u003cstrong\u003e适用范围\u003c/strong\u003e：\u003c/p\u003e","date_published":"2025-01-01T08:00:00+08:00","tags":["Alpine.js","前端","JavaScript"]},{"title":"Alpine.js 从入门到精通 1 指令","id":"https://kkbt0.github.io/Somnia/docs/alpine.js/alpinejs1/","url":"https://kkbt0.github.io/Somnia/docs/alpine.js/alpinejs1/","content_text":"\u003cp\u003eAlpine.js 是一个轻量级的 JavaScript 框架，它借鉴了 Vue.js 和 Angular 的思想，但更加精简，可以直接在 HTML 中通过指令来管理状态和行为，非常适合需要少量交互的静态网站或增强渐进式应用。\u003c/p\u003e","date_published":"2025-01-01T07:00:00+08:00","tags":["Alpine.js","前端","JavaScript"]}]}