技术 on Somnia

Somnia

0@ftls.xyz (恐咖兵糖) — Wed, 01 Jan 2025 12:00:00 +0800

简介

一个现代化、优雅的 Hugo 主题，基于 Astro Theme Pure 移植而来。使用了 Alpine.js + UnoCSS 构建，支持现代化的网站开发体验。缘起 ↗

快速体验

git clone https://github.com/kkbt0/Somnia
cd Somnia
just

bash

参考 justfile 文件。如果你没有安装 just，也可以直接复制命令到命令行执行。

Components

0@ftls.xyz (恐咖兵糖) — Wed, 01 Jan 2025 11:30:00 +0800

Components

Containers

Card

Lorem ipsum

Lorem ipsum dolor sit amet, vidit suscipit at mei.

August 2021 - July 2025

Some Text

Collapse

Link History Book

2025-03-16
Is there a leakage?
2025-03-16
A leakage of what?
2025-03-16
I have a full seat of water, like, full of water!
2025-03-16
Must be the water.
2025-03-16
Let’s add that to the words of wisdom.

Callout

Custom Components

0@ftls.xyz (恐咖兵糖) — Wed, 01 Jan 2025 11:00:00 +0800

Custom Components

Somnia 使用了 UnoCSS + Alpine.js 。因此可以使用一些 Alpine + Tailwind 的 UI 组件库。例如

注意: 由于 Swup.js 的原因，使用 <script> 标签在 Swup 切换页面后不会自动执行。解决方法

Markdown

0@ftls.xyz (恐咖兵糖) — Wed, 01 Jan 2025 10:00:00 +0800

基本语法

Markdown 是一种轻量级且易于使用的语法，用于为您的写作设计风格。

标题

文章内容较多时，可以用标题分段：

# 标题 1

## 标题 2

## 大标题

### 小标题

markdown

标题预览会打乱文章的结构，所以在此不展示。

Alpine.js 从入门到精通 3 全局与其他

0@ftls.xyz (恐咖兵糖) — Wed, 01 Jan 2025 09:00:00 +0800

三、全局 Globals

Alpine.js 提供了一些全局方法和对象，可以在任何地方使用。

1. Alpine.data() 可复用数据逻辑

解读：Alpine.data() 用于定义可复用的数据逻辑，类似于 Vue 的 setup() 或 React 的自定义 Hook。

Alpine.js 从入门到精通 2 魔法属性

0@ftls.xyz (恐咖兵糖) — Wed, 01 Jan 2025 08:00:00 +0800

二、魔法属性 Magic Properties

Alpine.js 提供了一些以 $ 开头的魔法属性，可以在组件中直接访问。

1. $el 当前元素

解读：$el 指向当前 Alpine 组件的根 DOM 元素。

示例代码：

<div x-data="{}">
 <button @click="console.log($el)">查看根元素</button>
 <button @click="$el.style.backgroundColor = 'yellow'">改变背景</button>
</div>

html

适用范围：

Alpine.js 从入门到精通 1 指令

0@ftls.xyz (恐咖兵糖) — Wed, 01 Jan 2025 07:00:00 +0800

Alpine.js 是一个轻量级的 JavaScript 框架，它借鉴了 Vue.js 和 Angular 的思想，但更加精简，可以直接在 HTML 中通过指令来管理状态和行为，非常适合需要少量交互的静态网站或增强渐进式应用。