Docs on 超光速

Alpine.js Essentials

0@ftls.xyz (恐咖兵糖) — Thu, 26 Mar 2026 00:00:00 +0000

概述

Alpine.js 是一个轻量级的 JavaScript 框架，它提供了响应式的数据绑定和声明式的 DOM 操作能力。与 Vue 或 React 等完整的 SPA 框架不同，Alpine.js 专注于渐进式增强，允许开发者在不编写大量 JavaScript 代码的情况下，为现有的 HTML 添加交互功能。它的设计理念是「jQuery 风格的简洁 + Vue 式的响应式」，通过在 HTML 元素上添加以 x- 为前缀的指令来实现各种功能。

0@ftls.xyz (恐咖兵糖) — Mon, 01 Jan 0001 00:00:00 +0000

编写 content/posts/Alpinejs Essentials.md。内容为 Alpinejs Essentials。
需要包含
Essentials
Installation
State
Templating
Events
Lifecycle
等小节。每个小节内容都要给出解释说明，适用范围，注意事项等。

1-1

0@ftls.xyz (恐咖兵糖) — Mon, 01 Jan 0001 00:00:00 +0000

杂物堆

text-autospace

https://developer.mozilla.org/zh-CN/docs/Web/CSS/Reference/Properties/text-autospace ↗

function detectTextAutospaceSimple() {
 const elem = document.createElement('div');
 elem.style.textAutospace = 'normal';
 return elem.style.textAutospace === 'normal';
}
detectTextAutospaceSimple()

:root {
 text-autospace: normal;
}

css

2

2.1

2.1.1

2.1.1.1

3

3.1 some

2-1

0@ftls.xyz (恐咖兵糖) — Mon, 01 Jan 0001 00:00:00 +0000

字体测试

Maple Mono 代码字体测试

官网 https://font.subf.dev/zh-cn/ ↗
测试 https://font.subf.dev/zh-cn/playground/ ↗

[TODO] !== <=>==<==>= Some text

----------------中英文2:1---------------
|ab|cd|ef|gh|ij|kl|mn|op|qr|st|uv|wx|yz|
|A0|1!|2@|3#|4$|5%|6^|7&|8*|9(|0)|=+|[]|
|这|应|该|是|中|英|文|完|美|的|2:|1等距|
(前提是加载了 Maple Mono 中文字体)

Maple Mono, smooth your coding flow

abcdefghijklmnopqrstuvwxyz

~!@#$%^&* {} [] () I1l O0o

!== \\ <= #{ -> ~@ |> 0x12

|=>==<==>=|======|===|===>

<---|--|--------|-<->--<-|

[INFO] todo)) fixme))

Input your text here.

txt

Alpine.js Advanced

0@ftls.xyz (恐咖兵糖) — Mon, 01 Jan 0001 00:00:00 +0000

本文档介绍 Alpine.js 的高级特性，包括 CSP 安全策略、响应式系统深度使用、扩展机制以及异步数据处理等内容。掌握这些特性可以帮助开发者构建更安全、更强大的 Alpine.js 应用。

Alpine.js Directives

0@ftls.xyz (恐咖兵糖) — Mon, 01 Jan 0001 00:00:00 +0000

概述

Alpine.js 的核心通过一系列指令（Directives）来实现响应式 DOM 操作。这些属性以 x- 为前缀，可以直接写在 HTML 元素上，无需编写任何 JavaScript 代码即可实现复杂的前端交互。

Alpine.js Globals

0@ftls.xyz (恐咖兵糖) — Mon, 01 Jan 0001 00:00:00 +0000

概述

Alpine.js 提供了一系列全局 API（Global Functions），这些函数可以直接通过 Alpine 对象访问，用于定义可复用组件、管理全局状态、绑定行为等。这些全局 API 是构建大型应用程序的基础设施，能够帮助开发者组织代码结构、实现状态共享和创建可复用的 UI 组件。

Alpine.js Magics

0@ftls.xyz (恐咖兵糖) — Mon, 01 Jan 0001 00:00:00 +0000

概述

Alpine.js 提供了一系列以 $ 开头的魔法属性（Magics），这些属性可以在任何 JavaScript 表达式中使用，用于访问组件内部状态、操作 DOM、调度事件等。魔法属性是 Alpine.js 响应式系统的核心组成部分，能够极大地增强组件的交互能力。