{"version":"https://jsonfeed.org/version/1.1","title":"Docs on 超光速","home_page_url":"https://www.ftls.xyz/docs/","feed_url":"https://www.ftls.xyz/docs/feed.json","authors":[{"name":{"about":"","avatar":"/avatar-128x128.webp","bio":"浮生若梦 为欢几何","email":"0@ftls.xyz","github":"https://github.com/kkbt0","gravataremail":"","link":"https://www.ftls.xyz/","location":"Earth","name":"恐咖兵糖"}}],"items":[{"title":"Alpine.js Essentials","id":"https://www.ftls.xyz/docs/alpine.js/alpinejs-1-essentials/","url":"https://www.ftls.xyz/docs/alpine.js/alpinejs-1-essentials/","content_text":"\u003ch2 id=\"概述\"\u003e概述\u003c/h2\u003e\n\u003cp\u003eAlpine.js 是一个轻量级的 JavaScript 框架，它提供了响应式的数据绑定和声明式的 DOM 操作能力。与 Vue 或 React 等完整的 SPA 框架不同，Alpine.js 专注于渐进式增强，允许开发者在不编写大量 JavaScript 代码的情况下，为现有的 HTML 添加交互功能。它的设计理念是「jQuery 风格的简洁 + Vue 式的响应式」，通过在 HTML 元素上添加以 \u003ccode\u003ex-\u003c/code\u003e 为前缀的指令来实现各种功能。\u003c/p\u003e","date_published":"2026-03-26T00:00:00Z","tags":[]},{"title":"","id":"https://www.ftls.xyz/docs/alpine.js/readme/","url":"https://www.ftls.xyz/docs/alpine.js/readme/","content_text":"\u003cp\u003e编写 content/posts/Alpinejs Essentials.md。内容为 Alpinejs Essentials。\u003cbr\u003e\n需要包含\u003cbr\u003e\nEssentials\u003cbr\u003e\nInstallation\u003cbr\u003e\nState\u003cbr\u003e\nTemplating\u003cbr\u003e\nEvents\u003cbr\u003e\nLifecycle\u003cbr\u003e\n等小节。每个小节内容都要给出解释说明，适用范围，注意事项等。\u003c/p\u003e","date_published":"0001-01-01T00:00:00Z","tags":[]},{"title":"1-1","id":"https://www.ftls.xyz/docs/demo/step1/step1-1/","url":"https://www.ftls.xyz/docs/demo/step1/step1-1/","content_text":"\u003ch1 id=\"杂物堆\"\u003e杂物堆\u003c/h1\u003e\n\u003ch2 id=\"text-autospace\"\u003etext-autospace\u003c/h2\u003e\n\u003cp\u003e\u003ca href=\"https://developer.mozilla.org/zh-CN/docs/Web/CSS/Reference/Properties/text-autospace\"\r\n  rel=\"external nofollow noopener noreferrer\" target=\"_blank\"\u003ehttps://developer.mozilla.org/zh-CN/docs/Web/CSS/Reference/Properties/text-autospace\u003cspan style=\"user-select:none\"\u003e ↗\u003c/span\u003e\u003c/a\u003e\u003c/p\u003e\n\r\n\r\n\r\n\u003cdiv class=\"astro-code astro-code-themes chroma \" style=\"overflow-x: auto;\"\r\n    data-language=\"js\"\u003e\r\n    \u003cpre\u003e\u003ccode\u003e\u003cspan class=\"line\"\u003e\u003cspan class=\"cl\"\u003e\u003cspan class=\"kd\"\u003efunction\u003c/span\u003e \u003cspan class=\"nx\"\u003edetectTextAutospaceSimple\u003c/span\u003e\u003cspan class=\"p\"\u003e()\u003c/span\u003e \u003cspan class=\"p\"\u003e{\u003c/span\u003e\n\u003c/span\u003e\u003c/span\u003e\u003cspan class=\"line\"\u003e\u003cspan class=\"cl\"\u003e    \u003cspan class=\"kr\"\u003econst\u003c/span\u003e \u003cspan class=\"nx\"\u003eelem\u003c/span\u003e \u003cspan class=\"o\"\u003e=\u003c/span\u003e \u003cspan class=\"nb\"\u003edocument\u003c/span\u003e\u003cspan class=\"p\"\u003e.\u003c/span\u003e\u003cspan class=\"nx\"\u003ecreateElement\u003c/span\u003e\u003cspan class=\"p\"\u003e(\u003c/span\u003e\u003cspan class=\"s1\"\u003e\u0026#39;div\u0026#39;\u003c/span\u003e\u003cspan class=\"p\"\u003e);\u003c/span\u003e\n\u003c/span\u003e\u003c/span\u003e\u003cspan class=\"line\"\u003e\u003cspan class=\"cl\"\u003e    \u003cspan class=\"nx\"\u003eelem\u003c/span\u003e\u003cspan class=\"p\"\u003e.\u003c/span\u003e\u003cspan class=\"nx\"\u003estyle\u003c/span\u003e\u003cspan class=\"p\"\u003e.\u003c/span\u003e\u003cspan class=\"nx\"\u003etextAutospace\u003c/span\u003e \u003cspan class=\"o\"\u003e=\u003c/span\u003e \u003cspan class=\"s1\"\u003e\u0026#39;normal\u0026#39;\u003c/span\u003e\u003cspan class=\"p\"\u003e;\u003c/span\u003e\n\u003c/span\u003e\u003c/span\u003e\u003cspan class=\"line\"\u003e\u003cspan class=\"cl\"\u003e    \u003cspan class=\"k\"\u003ereturn\u003c/span\u003e \u003cspan class=\"nx\"\u003eelem\u003c/span\u003e\u003cspan class=\"p\"\u003e.\u003c/span\u003e\u003cspan class=\"nx\"\u003estyle\u003c/span\u003e\u003cspan class=\"p\"\u003e.\u003c/span\u003e\u003cspan class=\"nx\"\u003etextAutospace\u003c/span\u003e \u003cspan class=\"o\"\u003e===\u003c/span\u003e \u003cspan class=\"s1\"\u003e\u0026#39;normal\u0026#39;\u003c/span\u003e\u003cspan class=\"p\"\u003e;\u003c/span\u003e\n\u003c/span\u003e\u003c/span\u003e\u003cspan class=\"line\"\u003e\u003cspan class=\"cl\"\u003e\u003cspan class=\"p\"\u003e}\u003c/span\u003e\n\u003c/span\u003e\u003c/span\u003e\u003cspan class=\"line\"\u003e\u003cspan class=\"cl\"\u003e\u003cspan class=\"nx\"\u003edetectTextAutospaceSimple\u003c/span\u003e\u003cspan class=\"p\"\u003e()\u003c/span\u003e\u003c/span\u003e\u003c/span\u003e\u003c/code\u003e\u003c/pre\u003e\r\n    \u003cspan class=\"language ps-1 pe-3 text-sm bg-muted text-muted-foreground rounded-bl\"\u003ejs\u003c/span\u003e\r\n    \u003cbutton class=\"copy text-muted-foreground p-1 box-content border rounded-lg bg-card\" aria-label=\"Copy code\"\r\n        data-code=\"function detectTextAutospaceSimple() {\n    const elem = document.createElement(\u0026#39;div\u0026#39;);\n    elem.style.textAutospace = \u0026#39;normal\u0026#39;;\n    return elem.style.textAutospace === \u0026#39;normal\u0026#39;;\n}\ndetectTextAutospaceSimple()\" onclick=\"\r\n          navigator.clipboard.writeText(this.dataset.code);\r\n          this.classList.add('copied');\r\n          setTimeout(() =\u003e this.classList.remove('copied'), 2000)\r\n        \"\u003e\r\n        \u003cdiv class=\"ready\"\u003e\r\n            \u003csvg class=\"size-5\"\u003e\r\n              \u003cuse href='/icons/main.svg#clipboard' /\u003e\r\n            \u003c/svg\u003e\r\n        \u003c/div\u003e\r\n        \u003cdiv class=\"success hidden\"\u003e\r\n            \u003csvg class=\"size-5\"\u003e\r\n                \u003cuse href='/icons/main.svg#file-check' /\u003e\r\n            \u003c/svg\u003e\r\n        \u003c/div\u003e\r\n    \u003c/button\u003e\r\n    \r\n\u003c/div\u003e\r\n\r\n\r\n\u003cdiv class=\"astro-code astro-code-themes chroma \" style=\"overflow-x: auto;\"\r\n    data-language=\"css\"\u003e\r\n    \u003cpre\u003e\u003ccode\u003e\u003cspan class=\"line\"\u003e\u003cspan class=\"cl\"\u003e\u003cspan class=\"p\"\u003e:\u003c/span\u003e\u003cspan class=\"nd\"\u003eroot\u003c/span\u003e \u003cspan class=\"p\"\u003e{\u003c/span\u003e\n\u003c/span\u003e\u003c/span\u003e\u003cspan class=\"line\"\u003e\u003cspan class=\"cl\"\u003e  \u003cspan class=\"n\"\u003etext-autospace\u003c/span\u003e\u003cspan class=\"p\"\u003e:\u003c/span\u003e \u003cspan class=\"kc\"\u003enormal\u003c/span\u003e\u003cspan class=\"p\"\u003e;\u003c/span\u003e\n\u003c/span\u003e\u003c/span\u003e\u003cspan class=\"line\"\u003e\u003cspan class=\"cl\"\u003e\u003cspan class=\"p\"\u003e}\u003c/span\u003e\u003c/span\u003e\u003c/span\u003e\u003c/code\u003e\u003c/pre\u003e\r\n    \u003cspan class=\"language ps-1 pe-3 text-sm bg-muted text-muted-foreground rounded-bl\"\u003ecss\u003c/span\u003e\r\n    \u003cbutton class=\"copy text-muted-foreground p-1 box-content border rounded-lg bg-card\" aria-label=\"Copy code\"\r\n        data-code=\":root {\n  text-autospace: normal;\n}\" onclick=\"\r\n          navigator.clipboard.writeText(this.dataset.code);\r\n          this.classList.add('copied');\r\n          setTimeout(() =\u003e this.classList.remove('copied'), 2000)\r\n        \"\u003e\r\n        \u003cdiv class=\"ready\"\u003e\r\n            \u003csvg class=\"size-5\"\u003e\r\n              \u003cuse href='/icons/main.svg#clipboard' /\u003e\r\n            \u003c/svg\u003e\r\n        \u003c/div\u003e\r\n        \u003cdiv class=\"success hidden\"\u003e\r\n            \u003csvg class=\"size-5\"\u003e\r\n                \u003cuse href='/icons/main.svg#file-check' /\u003e\r\n            \u003c/svg\u003e\r\n        \u003c/div\u003e\r\n    \u003c/button\u003e\r\n    \r\n\u003c/div\u003e\u003ch2 id=\"markdeep-goat\"\u003emarkdeep goat\u003c/h2\u003e\n\u003cp\u003e\u003ca href=\"https://gohugo.io/functions/diagrams/goat/\"\r\n  rel=\"external nofollow noopener noreferrer\" target=\"_blank\"\u003ehttps://gohugo.io/functions/diagrams/goat/\u003cspan style=\"user-select:none\"\u003e ↗\u003c/span\u003e\u003c/a\u003e\u003c/p\u003e","date_published":"0001-01-01T00:00:00Z","tags":[]},{"title":"2-1","id":"https://www.ftls.xyz/docs/demo/step2/step2-1/","url":"https://www.ftls.xyz/docs/demo/step2/step2-1/","content_text":"\u003ch2 id=\"字体测试\"\u003e字体测试\u003c/h2\u003e\n\u003cp\u003eMaple Mono 代码字体测试\u003c/p\u003e\n\u003cul\u003e\n\u003cli\u003e官网 \u003ca href=\"https://font.subf.dev/zh-cn/\"\r\n  rel=\"external nofollow noopener noreferrer\" target=\"_blank\"\u003ehttps://font.subf.dev/zh-cn/\u003cspan style=\"user-select:none\"\u003e ↗\u003c/span\u003e\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e测试 \u003ca href=\"https://font.subf.dev/zh-cn/playground/\"\r\n  rel=\"external nofollow noopener noreferrer\" target=\"_blank\"\u003ehttps://font.subf.dev/zh-cn/playground/\u003cspan style=\"user-select:none\"\u003e ↗\u003c/span\u003e\u003c/a\u003e\u003c/li\u003e\n\u003c/ul\u003e\n\u003cp\u003e\u003ccode\u003e[TODO]\u003c/code\u003e \u003ccode\u003e!==\u003c/code\u003e \u003ccode\u003e\u0026lt;=\u0026gt;==\u0026lt;==\u0026gt;=\u003c/code\u003e \u003ccode\u003eSome text\u003c/code\u003e\u003c/p\u003e\n\r\n\r\n\r\n\u003cdiv class=\"astro-code astro-code-themes chroma \" style=\"overflow-x: auto;\"\r\n    data-language=\"txt\"\u003e\r\n    \u003cpre\u003e\u003ccode\u003e\u003cspan class=\"line\"\u003e\u003cspan class=\"cl\"\u003e----------------中英文2:1---------------\n\u003c/span\u003e\u003c/span\u003e\u003cspan class=\"line\"\u003e\u003cspan class=\"cl\"\u003e|ab|cd|ef|gh|ij|kl|mn|op|qr|st|uv|wx|yz|\n\u003c/span\u003e\u003c/span\u003e\u003cspan class=\"line\"\u003e\u003cspan class=\"cl\"\u003e|A0|1!|2@|3#|4$|5%|6^|7\u0026amp;|8*|9(|0)|=+|[]|\n\u003c/span\u003e\u003c/span\u003e\u003cspan class=\"line\"\u003e\u003cspan class=\"cl\"\u003e|这|应|该|是|中|英|文|完|美|的|2:|1等距|\n\u003c/span\u003e\u003c/span\u003e\u003cspan class=\"line\"\u003e\u003cspan class=\"cl\"\u003e(前提是加载了 Maple Mono 中文字体)\n\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\"\u003eMaple Mono, smooth your coding flow\n\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\"\u003eabcdefghijklmnopqrstuvwxyz\n\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~!@#$%^\u0026amp;* {} [] () I1l O0o\n\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!== \\\\ \u0026lt;= #{ -\u0026gt; ~@ |\u0026gt; 0x12\n\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|=\u0026gt;==\u0026lt;==\u0026gt;=|======|===|===\u0026gt;\n\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\u0026lt;---|--|--------|-\u0026lt;-\u0026gt;--\u0026lt;-|\n\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[INFO] todo)) fixme))\n\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\"\u003eInput your text here.\u003c/span\u003e\u003c/span\u003e\u003c/code\u003e\u003c/pre\u003e\r\n    \u003cspan class=\"language ps-1 pe-3 text-sm bg-muted text-muted-foreground rounded-bl\"\u003etxt\u003c/span\u003e\r\n    \u003cbutton class=\"copy text-muted-foreground p-1 box-content border rounded-lg bg-card\" aria-label=\"Copy code\"\r\n        data-code=\"----------------中英文2:1---------------\n|ab|cd|ef|gh|ij|kl|mn|op|qr|st|uv|wx|yz|\n|A0|1!|2@|3#|4$|5%|6^|7\u0026amp;|8*|9(|0)|=\u0026#43;|[]|\n|这|应|该|是|中|英|文|完|美|的|2:|1等距|\n(前提是加载了 Maple Mono 中文字体)\n\nMaple Mono, smooth your coding flow\n\nabcdefghijklmnopqrstuvwxyz\n\n~!@#$%^\u0026amp;* {} [] () I1l O0o\n\n!== \\\\ \u0026lt;= #{ -\u0026gt; ~@ |\u0026gt; 0x12\n\n|=\u0026gt;==\u0026lt;==\u0026gt;=|======|===|===\u0026gt;\n\n\u0026lt;---|--|--------|-\u0026lt;-\u0026gt;--\u0026lt;-|\n\n[INFO] todo)) fixme))\n\nInput your text here.\" onclick=\"\r\n          navigator.clipboard.writeText(this.dataset.code);\r\n          this.classList.add('copied');\r\n          setTimeout(() =\u003e this.classList.remove('copied'), 2000)\r\n        \"\u003e\r\n        \u003cdiv class=\"ready\"\u003e\r\n            \u003csvg class=\"size-5\"\u003e\r\n              \u003cuse href='/icons/main.svg#clipboard' /\u003e\r\n            \u003c/svg\u003e\r\n        \u003c/div\u003e\r\n        \u003cdiv class=\"success hidden\"\u003e\r\n            \u003csvg class=\"size-5\"\u003e\r\n                \u003cuse href='/icons/main.svg#file-check' /\u003e\r\n            \u003c/svg\u003e\r\n        \u003c/div\u003e\r\n    \u003c/button\u003e\r\n    \r\n    \u003cbutton class=\"collapse-toggle bg-card text-muted-foreground rounded-lg m-2\" aria-label=\"Toggle collapse code block\"\r\n        onclick=\"this.parentElement.classList.toggle('collapsed')\"\u003e\r\n        \u003csvg class=\"size-5\"\u003e\r\n            \u003cuse href='/icons/main.svg#arrow-down' /\u003e\r\n        \u003c/svg\u003e\r\n        \u003cspan class=\"desc\"\u003e\u0026nbsp;code\u003c/span\u003e\u003c/button\u003e\r\n    \u003cdiv class=\"collapse-fade\"\u003e\u003c/div\u003e\r\n    \r\n\u003c/div\u003e\u003cdiv x-data=\"{ resize() { \n  $refs.textarea.style.height = 'auto';\n  $refs.textarea.style.height = $refs.textarea.scrollHeight + 'px';\n} }\" class=\"flex flex-col gap-2 border p-2 rounded\"\u003e\n  \u003ctextarea\n    name=\"message\"\n    x-ref=\"textarea\"\n    x-on:input=\"resize\"\n    x-init=\"resize()\"\n    rows=\"1\"\n    placeholder=\"Input your text here...\"\n    class=\"w-full rounded language bg-background\"\n    style=\"min-height: 100px;outline: none;\"\n  \u003e\u003c/textarea\u003e\n\u003c/div\u003e\n\u003ch2 id=\"midi\"\u003eMIDI\u003c/h2\u003e\n\r\n\u003cdiv x-data=\"{playing:'Nothing',time:0,length:0,loop:false,async init(){typeof MIDIjs==='undefined'\u0026\u0026await Somnia.loadResource({href:'//www.midijs.net/lib/midi.js',dataSomnia:'midi.js'});MIDIjs.player_callback=(msg)=\u003e{this.time=parseInt(msg.time);if(this.loop\u0026\u0026msg.status==='finished'){this.play(this.playing)}}},play(path){this.playing=path;MIDIjs.play(path);MIDIjs.get_duration(path,(duration)=\u003e{this.length=duration})},stop(){MIDIjs.stop()},pause(){console.log(this.time);MIDIjs.pause()},resume(){MIDIjs.resume()}}\" class=\"flex flex-col p-4 midi-player\"\u003e\r\n    \u003cdiv class=\"pb-4\"\u003e\r\n        Playing: \u003cspan x-text=\"playing\"\u003e\u003c/span\u003e\r\n        \u003cspan x-text=\"time\"\u003e\u003c/span\u003es\r\n        \u003cspan x-text=\"length\"\u003e\u003c/span\u003es\r\n        \u003cbr\u003e\r\n        \u003ca @click=\"stop();\"\u003eStop\u003c/a\u003e\r\n        \u003ca @click=\"pause();\"\u003ePause\u003c/a\u003e\r\n        \u003ca @click=\"resume();\"\u003eResume\u003c/a\u003e\r\n        \u003ca @click=\"loop = !loop\"\u003eLoop \u003cspan x-text=\"loop ? 'On' : 'Off'\"\u003e\u003c/span\u003e\u003c/a\u003e\r\n    \u003c/div\u003e\r\n    \u003ca @click=\"play('/midi/midi_某科学的超电磁炮 - only my railgun.mid');\"\u003ePlay midi_某科学的超电磁炮 - only my\r\n        railgun.mid\u003c/a\u003e\r\n    \u003ca @click=\"play('/midi/未闻花名secret-base.mid');\"\u003ePlay 未闻花名secret-base.mid\u003c/a\u003e\r\n    \u003ca @click=\"play('/midi/卡农.mid');\"\u003ePlay 卡农.mid\u003c/a\u003e\r\n    \u003ca @click=\"play('/midi/崩坏3「最后一课」插曲-Night Glow.mid');\"\u003ePlay 崩坏3「最后一课」插曲-Night Glow.mid\u003c/a\u003e\r\n    \u003ca @click=\"play('/midi/团子大家族.mid');\"\u003ePlay 团子大家族.mid\u003c/a\u003e\r\n    \u003ca @click=\"play('/midi/midi_久石让 - 天空之城.mid');\"\u003ePlay midi_久石让 - 天空之城.mid\u003c/a\u003e\r\n    \u003ca @click=\"play('/midi/原神-我们终将重逢.mid');\"\u003ePlay 原神-我们终将重逢.mid\u003c/a\u003e\r\n    \u003ca @click=\"play('/midi/千与千寻的神隐 - あの日の川「铃声版」.mid');\"\u003ePlay 千与千寻的神隐 - あの日の川「铃声版」.mid\u003c/a\u003e\r\n    \u003ca @click=\"play('/midi/[67018]【缘之空】Old Memory（完整版）.midi');\"\u003ePlay [67018]【缘之空】Old\r\n        Memory（完整版）.midi\u003c/a\u003e\r\n    \u003ca @click=\"play('/midi/midi_崩坏3rd - Rubia.mid');\"\u003ePlay midi_崩坏3rd - Rubia.mid\u003c/a\u003e\r\n    \u003ca @click=\"play('/midi/昔涟.mid');\"\u003ePlay 昔涟.mid\u003c/a\u003e\r\n\u003c/div\u003e\r\n\u003cstyle\u003e.midi-player a {cursor: pointer;}\u003c/style\u003e","date_published":"0001-01-01T00:00:00Z","tags":[]},{"title":"Alpine.js Advanced","id":"https://www.ftls.xyz/docs/alpine.js/alpinejs-5-advanced/","url":"https://www.ftls.xyz/docs/alpine.js/alpinejs-5-advanced/","content_text":"\u003cp\u003e本文档介绍 Alpine.js 的高级特性，包括 CSP 安全策略、响应式系统深度使用、扩展机制以及异步数据处理等内容。掌握这些特性可以帮助开发者构建更安全、更强大的 Alpine.js 应用。\u003c/p\u003e","date_published":"0001-01-01T00:00:00Z","tags":[]},{"title":"Alpine.js Directives","id":"https://www.ftls.xyz/docs/alpine.js/alpinejs-2-directives/","url":"https://www.ftls.xyz/docs/alpine.js/alpinejs-2-directives/","content_text":"\u003ch2 id=\"概述\"\u003e概述\u003c/h2\u003e\n\u003cp\u003eAlpine.js 的核心通过一系列指令（Directives）来实现响应式 DOM 操作。这些属性以 \u003ccode\u003ex-\u003c/code\u003e 为前缀，可以直接写在 HTML 元素上，无需编写任何 JavaScript 代码即可实现复杂的前端交互。\u003c/p\u003e","date_published":"0001-01-01T00:00:00Z","tags":[]},{"title":"Alpine.js Globals","id":"https://www.ftls.xyz/docs/alpine.js/alpinejs-4-globals/","url":"https://www.ftls.xyz/docs/alpine.js/alpinejs-4-globals/","content_text":"\u003ch2 id=\"概述\"\u003e概述\u003c/h2\u003e\n\u003cp\u003eAlpine.js 提供了一系列全局 API（Global Functions），这些函数可以直接通过 \u003ccode\u003eAlpine\u003c/code\u003e 对象访问，用于定义可复用组件、管理全局状态、绑定行为等。这些全局 API 是构建大型应用程序的基础设施，能够帮助开发者组织代码结构、实现状态共享和创建可复用的 UI 组件。\u003c/p\u003e","date_published":"0001-01-01T00:00:00Z","tags":[]},{"title":"Alpine.js Magics","id":"https://www.ftls.xyz/docs/alpine.js/alpinejs-3-magics/","url":"https://www.ftls.xyz/docs/alpine.js/alpinejs-3-magics/","content_text":"\u003ch2 id=\"概述\"\u003e概述\u003c/h2\u003e\n\u003cp\u003eAlpine.js 提供了一系列以 \u003ccode\u003e$\u003c/code\u003e 开头的魔法属性（Magics），这些属性可以在任何 JavaScript 表达式中使用，用于访问组件内部状态、操作 DOM、调度事件等。魔法属性是 Alpine.js 响应式系统的核心组成部分，能够极大地增强组件的交互能力。\u003c/p\u003e","date_published":"0001-01-01T00:00:00Z","tags":[]},{"title":"Somnia","id":"https://www.ftls.xyz/docs/somnia/somnia-1/","url":"https://www.ftls.xyz/docs/somnia/somnia-1/","content_text":"\u003cp\u003eSomnia 是一个 Alpine.js + Swup.js 的主题。下面是自定义主题的一些概述。\u003c/p\u003e","date_published":"0001-01-01T00:00:00Z","tags":[]},{"title":"Somnia 主题架构概述","id":"https://www.ftls.xyz/docs/somnia/somnia-ai/","url":"https://www.ftls.xyz/docs/somnia/somnia-ai/","content_text":"\u003cblockquote\u003e\n\u003cp\u003e提醒：本文档为 AI 生成，如需使用请自行验证其内容。\u003c/p\u003e\n\u003c/blockquote\u003e\n\u003cp\u003eSomnia 是一个基于 Hugo 的主题，适用于内容型网站（博客、文档、个人主页）。\u003cbr\u003e\n在保持 SEO 友好的同时借助 Swup.js 提供接近 SPA 的流畅体验。\u003c/p\u003e\n\u003cblockquote\u003e\n\u003cp\u003e技术栈：Hugo + Alpine.js + UnoCSS + Swup.js + Medium Zoom\u003c/p\u003e\n\u003c/blockquote\u003e","date_published":"0001-01-01T00:00:00Z","tags":[]}]}