首页 on 爱则心痛 | azxt

幻梦主题开发总结与展望

Tue, 07 Apr 2026 05:00:00 +0800

开发总结

幻梦主题从设计到实现，始终以「梦幻美学」和「卓越体验」为核心目标。

技术栈

框架：Hugo 静态站点生成器
样式：CSS 自定义属性 + 模块化 CSS
脚本：原生 JavaScript（ES6+）
动画：Canvas API、CSS Animations、AOS
图标：Font Awesome 6
字体：Inter + Noto Sans SC

已实现功能

双主题自适应（浅色/深色）
Canvas 粒子特效
本地搜索
打字机效果
滚动动画
代码语法高亮
图片灯箱
完全响应式
多语言支持
SEO 优化
无障碍访问

未来规划

PWA 支持
评论系统集成
更多的卡片动画变体
暗黑模式下的更多星空效果
性能持续优化

致谢

感谢 Hugo 社区提供的优秀工具和文档。幻梦主题将持续进化，为每一位使用者带来更好的博客体验。

主题定制与扩展指南

Tue, 07 Apr 2026 04:00:00 +0800

定制指南

幻梦主题的设计充分考虑了可定制性，以下是一些常见的定制方法。

修改配色

通过覆盖 CSS 变量可以轻松修改主题配色：

:root {
 --c-primary-400: #YOUR_COLOR;
 --c-secondary-400: #YOUR_COLOR;
 --c-accent-400: #YOUR_COLOR;
}

自定义页面

数据驱动页面（首页、关于、友链、技能等）只需修改 data/ 目录下的 YAML 文件即可自定义内容。无需触碰任何模板文件。

添加新页面

在 content/ 目录下创建新的 Markdown 文件
在 layouts/ 目录下创建对应的模板文件
在 i18n/ 目录下添加翻译文本

扩展功能

主题的 JavaScript 采用模块化管理器模式：

ThemeManager → 主题切换
EffectsManager → 粒子特效
AnimationManager → 滚动动画
InteractionManager → 交互功能
EnhancementManager → 内容增强
UtilsManager → 工具功能

可以根据需要添加新的管理器来扩展功能。

SEO与结构化数据

Tue, 07 Apr 2026 03:00:00 +0800

SEO 优化

幻梦主题内置全面的 SEO 优化功能。

Open Graph

<meta property="og:title" content="{{ .Title }}">
<meta property="og:description" content="{{ .Description }}">
<meta property="og:type" content="website">
<meta property="og:image" content="{{ $avatar }}">

Twitter Cards

<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="{{ .Title }}">
<meta name="twitter:description" content="{{ .Description }}">

结构化数据

使用 JSON-LD 格式的 Schema.org 结构化数据：

<script type="application/ld+json">
{
 "@context": "https://schema.org",
 "@type": "WebSite",
 "name": "爱则心痛 | azxt",
 "url": "https://azxt.org/",
 "author": {
 "@type": "Person",
 "name": "爱则心痛"
 }
}
</script>

RSS

主题自动生成 RSS feed，并通过 <link> 标签在页面头部引用，确保内容聚合器可以轻松发现和订阅。

SEO 优化让幻梦主题的网站在搜索引擎中获得更好的可见性。

性能优化技巧

Tue, 07 Apr 2026 02:00:00 +0800

性能优化

幻梦主题在设计与开发过程中始终关注性能表现。

CSS 构建

CSS 文件通过 Hugo Pipes 进行合并和压缩：

{{- $css := slice
 (resources.Get "css/_variables.css")
 (resources.Get "css/_base.css")
 ...
 | resources.Concat "css/main.css" -}}
<link rel="stylesheet" href="{{ $css.RelPermalink }}">

图片优化

使用原生 loading="lazy" 实现懒加载
所有图片设置宽高避免布局偏移
支持现代图片格式

JavaScript

第三方库使用 defer 延迟加载
主脚本在 DOMContentLoaded 后初始化
低端设备自动降低特效复杂度

const isLowEnd = navigator.hardwareConcurrency <= 2;
this.performanceMultiplier = isLowEnd ? 0.5 : 1;

渲染性能

使用 will-change 提示浏览器即将变化的属性
动画使用 transform 和 opacity（可由 GPU 加速）
避免强制同步布局（布局抖动）

国际化多语言支持

Tue, 07 Apr 2026 01:00:00 +0800

国际化支持

幻梦主题内置完整的国际化支持，默认提供中文和英文翻译。

翻译文件

所有用户可见的文本都集中在 i18n/ 目录下的 YAML 文件中：

# i18n/zh-CN.yaml
sitetitle:
 other: "爱则心痛 · azxt"
hometitle:
 other: "首页"
searchtitle:
 other: "搜索"
readmore:
 other: "阅读全文"

在模板中使用

<button aria-label="{{ i18n "searchtitle" }}">
 <i class="fas fa-search"></i>
</button>

添加新语言

只需创建新的翻译文件即可添加语言支持。例如添加日语支持：

# i18n/ja-JP.yaml
sitetitle:
 other: "愛則心痛 · azxt"
searchtitle:
 other: "検索"

主题配置

defaultContentLanguage = 'zh'
defaultContentLanguageInSubdir = false

国际化设计让幻梦主题可以轻松服务于多语言受众。

自定义短代码系统

Tue, 07 Apr 2026 00:00:00 +0800

短代码

幻梦主题提供了多个实用的 Hugo 短代码，让文章内容更加丰富。

link-card 短代码

在文章中嵌入友链卡片：

{{< link-card
 name="示例博客"
 url="https://example.com"
 avatar="https://example.com/avatar.png"
 description="一个有趣的博客"
>}}

skills 短代码

在文章中展示技能进度条：

{{< skills
 name="JavaScript"
 level="90"
 color="#F7DF1E"
>}}

links-grid 短代码

在文章中嵌入友链网格：

{{< links-grid >}}
{{< link-card name="..." url="..." avatar="..." description="..." >}}
{{< link-card name="..." url="..." avatar="..." description="..." >}}
{{< /links-grid >}}

短代码让文章内容的表现形式更加丰富多样，无需编写 HTML 即可嵌入精美组件。

404页面创意设计

Mon, 06 Apr 2026 05:00:00 +0800

404 页面

幻梦主题的 404 页面不是冷冰冰的错误提示，而是一次有趣的交互体验。

设计理念

当用户访问不存在的页面时，看到的是一只漂浮的幽灵图标和友好的提示信息，而不是枯燥的「404 Not Found」。

页面内容

 👻
 哎呀，迷路了？
 这里好像什么都没有

 [ 返回首页 ] [ 浏览文章 ]

数据配置

# data/404.yaml
icon: "fas fa-ghost"
title: "页面未找到"
message: "这里好像什么都没有……"
buttons:
 - label: "返回首页"
 link: "/"
 - label: "浏览文章"
 link: "/posts/"

幽灵动画

幽灵图标带有上下浮动的动画：

@keyframes float {
 0%, 100% { transform: translateY(0); }
 50% { transform: translateY(-12px); }
}

.error-icon {
 animation: float 3s ease-in-out infinite;
}

404 页面将错误转化为一次友好的互动，让访问者即使在出错时也能感受到主题的温度。

归档页面设计

Mon, 06 Apr 2026 04:00:00 +0800

归档页面

幻梦主题的归档页面按年月组织文章，方便读者按时间浏览所有内容。

分组逻辑

文章按年份分组，每年内再按月分组：

2026年
├── 4月（5篇文章）
│ ├── 文章标题 1
│ ├── 文章标题 2
│ └── ...
└── 3月（3篇文章）
 ├── 文章标题 1
 └── ...

2025年
└── ...

实现

{{ range .Site.RegularPages.GroupByDate "2006" }}
<div class="archive-year">
 <h2 class="archive-year-title">{{ .Key }}年</h2>
 <p class="archive-year-count">共 {{ len .Pages }} 篇文章</p>
 
 {{ range .Pages.GroupByDate "January" }}
 <div class="archive-month">
 <h3 class="archive-month-title">{{ .Key }}</h3>
 <ul class="archive-list">
 {{ range .Pages }}
 <li class="archive-item">
 <span class="archive-date">{{ .Date.Format "01-02" }}</span>
 <a href="{{ .RelPermalink }}" class="archive-link">{{ .Title }}</a>
 </li>
 {{ end }}
 </ul>
 </div>
 {{ end }}
</div>
{{ end }}

归档页面让大量文章的管理变得清晰有序。

技能页面展示

Mon, 06 Apr 2026 03:00:00 +0800

技能页面

幻梦主题的技能页面以可视化的方式展示技能水平，包含分类概览和详细技能列表。

分类概览

技能按类别分组展示，每类带有进度条：

# data/skills.yaml
categories:
 - name: "前端开发"
 icon: "fab fa-html5"
 level: 90
 description: "HTML / CSS / JavaScript"

进度条动画

进度条使用 IntersectionObserver 触发动画：

.progress-bar {
 height: 100%;
 background: var(--grad-primary);
 border-radius: var(--r-full);
 transition: width 1.2s var(--ease-slow);
 width: 0;
}

开发时间线

页面底部展示开发历程时间线，左侧为日期徽标，右侧为事件描述。时间线采用交替布局，奇数项靠左、偶数项靠右。

技能页面让访问者能够直观地了解博主的技术栈和专长领域。

友链页面实现

Mon, 06 Apr 2026 02:00:00 +0800

友链页面

幻梦主题的友链页面以精美的卡片网格展示友情链接，支持分类筛选。

网格布局

.links-grid {
 display: grid;
 grid-template-columns: 1fr;
 gap: var(--sp-5);
}

@media (min-width: 768px) {
 .links-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 992px) {
 .links-grid { grid-template-columns: repeat(3, 1fr); }
}

卡片设计

每张友链卡片包含头像、名称、描述、分类和访问链接。悬停时卡片上移并加深阴影。

# data/friends.yaml
friends:
 - name: "示例博客"
 url: "https://example.com"
 avatar: "https://example.com/avatar.png"
 description: "一个有趣的博客"
 category: "技术"

申请友链

页面底部设有「申请友链」区域，展示交换条件、站点信息和联系方式。所有内容均通过数据文件配置，无需修改模板。

关于页面设计

Mon, 06 Apr 2026 01:00:00 +0800

关于页面

幻梦主题的关于页面采用数据驱动设计，通过 YAML 文件配置所有内容。

页面结构

┌──────────────────────────────────┐
│ 关于我 │
│ 头像 + 姓名 + 标语 │
│ 引用语句 │
│ 统计：文章数 · 标签 · 技能 · 项目│
├──────────────────────────────────┤
│ 技术理念（4列网格） │
│ 💡 创新 🎨 设计 🛠️ 工程 🌱 成长│
├──────────────────────────────────┤
│ 联系方式（3列网格） │
│ GitHub · 邮箱 · 其它 │
└──────────────────────────────────┘

数据文件

# data/about.yaml
intro:
 name: "爱则心痛"
 title: "前端开发者 / 技术博主"
 quote: "用代码创造美好事物"
 avatar: "https://example.com/avatar.png"

统计计算

统计数字由 Hugo 自动计算：

首页英雄区域设计

Mon, 06 Apr 2026 00:00:00 +0800

英雄区域

幻梦主题的首页英雄区域是整个页面的视觉焦点，融合了多种设计元素。

视觉构成

┌─────────────────────────────────┐
│ 🏷️ 欢迎徽章 │
│ ✨ 你好，我是 │
│ 🌟 爱则心痛（渐变文字） │
│ ⌨️ 前端开发者（打字机效果） │
│ 📝 个人描述文字 │
│ [了解我] [开始阅读] 按钮 │
│ 🖱️ 滚动提示 │
└─────────────────────────────────┘

渐变标题

姓名使用渐变文字效果：

.hero-name {
 background: var(--grad-primary);
 -webkit-background-clip: text;
 -webkit-text-fill-color: transparent;
 background-clip: text;
}

装饰元素

背景中有缓慢浮动的装饰光晕：

.float-shape {
 position: absolute;
 border-radius: var(--r-full);
 opacity: 0.12;
 animation: floatAround 30s ease-in-out infinite;
}

数据驱动

英雄区域的内容通过 data/home.yaml 文件配置，无需修改模板即可自定义文字内容和按钮链接。这种设计让个性化定制变得异常简单。

键盘导航与无障碍设计

Sun, 05 Apr 2026 03:00:00 +0800

无障碍设计

幻梦主题遵循 Web 无障碍标准，确保所有用户都能获得良好的浏览体验。

键盘快捷键

主题支持以下键盘快捷键：

快捷键	功能
`Ctrl+K`	打开搜索
`Escape`	关闭搜索、菜单、灯箱
`Tab`	导航焦点切换

ARIA 属性

所有交互元素都配有适当的 ARIA 属性：

<button class="search-toggle"
 aria-label="搜索"
 aria-expanded="false">
 <i class="fas fa-search"></i>
</button>

<nav class="main-nav"
 aria-label="主导航"
 role="navigation">
</nav>

跳过导航

页面提供「跳转到主要内容」的跳过导航链接，方便键盘用户快速跳过重复内容：

.skip-link {
 position: absolute;
 top: -100%;
 left: var(--sp-4);
 padding: var(--sp-2) var(--sp-4);
 background: var(--grad-primary);
 color: white;
 border-radius: var(--r-sm);
 z-index: 10000;
}

.skip-link:focus { top: var(--sp-4); }

焦点样式

所有可聚焦元素都有清晰的焦点轮廓，确保键盘导航用户能清楚定位当前焦点位置。

图片懒加载策略

Sun, 05 Apr 2026 02:00:00 +0800

懒加载

幻梦主题支持图片懒加载，仅在图片进入视口时才开始加载，显著提升页面首屏速度。

原生懒加载

所有图片均使用 HTML5 原生的 loading="lazy" 属性：

<img src="image.jpg" loading="lazy" alt="description" />

JavaScript 增强

对于需要更精细控制的场景，主题还提供了 IntersectionObserver 方案：

initLazyLoad() {
 const images = document.querySelectorAll('img[data-src]');
 const imageObserver = new IntersectionObserver((entries) => {
 entries.forEach(entry => {
 if (entry.isIntersecting) {
 const img = entry.target;
 img.src = img.dataset.src;
 img.removeAttribute('data-src');
 imageObserver.unobserve(img);
 }
 });
 });
 images.forEach(img => imageObserver.observe(img));
}

性能收益

懒加载可以减少初始页面加载量 30%-50%，尤其对于包含大量图片的文章页面效果显著。访问者只看到需要的图片，带宽得到更有效的利用。

文章目录(TOC)系统

Sun, 05 Apr 2026 01:00:00 +0800

文章目录

幻梦主题为长篇文章自动生成目录，方便读者快速定位内容。

配置开启

[params]
 enableTOC = true

目录生成

目录使用 Hugo 内置的 .TableOfContents 函数生成，自动提取文章中的 h2 和 h3 标题：

{{ if and .Site.Params.enableTOC .TableOfContents }}
<div class="side-box">
 <div class="side-box-title"><i class="fas fa-list"></i> 目录</div>
 <div class="side-toc">{{ .TableOfContents }}</div>
</div>
{{ end }}

滚动高亮

通过 IntersectionObserver 实现滚动时当前标题的高亮跟随：

const tocObserver = new IntersectionObserver((entries) => {
 entries.forEach(entry => {
 const tocLink = document.querySelector(`.side-toc a[href="#${entry.target.id}"]`);
 if (entry.isIntersecting) {
 tocLink?.classList.add('active');
 } else {
 tocLink?.classList.remove('active');
 }
 });
});

目录系统让读者在长篇文章中也能轻松导航，提升阅读效率。

代码语法高亮系统

Sun, 05 Apr 2026 00:00:00 +0800

语法高亮

幻梦主题使用 Hugo 内置的 Chroma 语法高亮引擎，配合自定义 CSS 实现双主题自适应色彩。

配置

[markup]
 [markup.highlight]
 codeFences = true
 guessSyntax = true
 noClasses = false

色彩定义

通过 CSS 变量实现浅色/深色模式下的不同高亮色彩：

/* 浅色模式 */
:root {
 --c-code-keyword: #C026D3;
 --c-code-string: #059669;
 --c-code-number: #D97706;
}

/* 深色模式 */
[data-theme="dark"] {
 --c-code-keyword: #E879F9;
 --c-code-string: #34D399;
 --c-code-number: #FBBF24;
}

语言标签

代码块右上角会自动显示编程语言标签：

.highlight::before {
 content: attr(data-lang);
 position: absolute;
 top: 0;
 right: 0;
 padding: 0.35rem 0.75rem;
 border-radius: 0 var(--r-lg) 0 var(--r-md);
 background: var(--c-primary-100);
 color: var(--c-primary-500);
}

复制按钮

代码块悬停时右下角会出现复制按钮，点击即可复制代码内容。`

幻梦主题让技术文章的代码展示既专业又美观。

滚动动画与AOS集成

Sat, 04 Apr 2026 05:00:00 +0800

滚动动画

幻梦主题集成 AOS（Animate On Scroll）库，实现元素进入视口时的流畅动画。

使用方法

在 HTML 元素上添加 data-aos 属性即可启用动画：

<div data-aos="fade-up">
 滚动时我会优雅出现
</div>
<div data-aos="zoom-in" data-aos-delay="200">
 我会延迟200毫秒出现
</div>

初始化

AOS.init({
 duration: 800,
 easing: 'ease-in-out',
 once: true,
 offset: 100
});

回退方案

主题还实现了 IntersectionObserver 回退方案，确保在不支持 AOS 的环境下依然有基本的滚动动画效果：

const observer = new IntersectionObserver((entries) => {
 entries.forEach(entry => {
 if (entry.isIntersecting) {
 entry.target.classList.add('aos-animate');
 }
 });
});

滚动动画让页面浏览更具节奏感，内容呈现更加优雅自然。

打字机效果实现

Sat, 04 Apr 2026 04:00:00 +0800

打字机效果

幻梦主题首页的英雄区域使用 Typed.js 库实现打字机效果，展示多行动态标语。

配置

const typed = new Typed('#typed-text', {
 strings: [
 '前端开发者',
 '技术博主',
 '开源爱好者',
 '热爱生活的人'
 ],
 typeSpeed: 60,
 backSpeed: 40,
 loop: true,
 showCursor: true
});

视觉集成

打字机效果区域设有占位样式，确保 JavaScript 加载完成前页面不会闪烁：

.typed-text {
 display: inline-block;
 min-height: 1.5em;
}

打字机效果为首页增添了动态感和互动性，让访问者在第一时间感受到主题的活力。

暗黑模式切换实现

Sat, 04 Apr 2026 03:00:00 +0800

三模式切换

幻梦主题支持三种主题模式：浅色、深色和系统跟随。

实现原理

通过 CSS 自定义属性和 data-theme 属性实现主题切换：

const ThemeManager = {
 setTheme(theme) {
 this.currentTheme = theme;
 localStorage.setItem('theme', theme);
 this.applyTheme(theme);
 },

 applyTheme(theme) {
 let themeToApply = theme;
 if (theme === 'system') {
 const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
 themeToApply = prefersDark ? 'dark' : 'light';
 }
 document.documentElement.setAttribute('data-theme', themeToApply);
 }
};

CSS 变量驱动

所有颜色值都通过 CSS 变量定义，切换主题只需改变变量的值：

:root { --c-bg-main: #F8F6FC; }
[data-theme="dark"] { --c-bg-main: #0C0B12; }

系统监听

当选择「系统跟随」模式时，主题会监听系统主题变化并自动切换：

watchSystemTheme() {
 window.matchMedia('(prefers-color-scheme: dark)')
 .addEventListener('change', () => {
 if (this.currentTheme === 'system') {
 this.applyTheme('system');
 }
 });
}

暗黑模式切换按钮带有缩放动画，交互反馈细腻生动。

Canvas粒子特效系统

Sat, 04 Apr 2026 02:00:00 +0800

粒子系统

幻梦主题的 Canvas 粒子特效系统根据时间自动切换模式。

日间模式：糖果彩带雨

白天模式下，页面会飘落彩带、糖果、爱心和星星粒子，营造欢快的氛围。

const candyConfig = {
 ribbonCount: 20,
 candyCount: 12,
 heartCount: 5,
 starCount: 8,
 colors: ['#B3A0FF', '#9B84FF', '#FF9CB8', '#FF7A9E']
};

夜间模式：星光与萤火虫

夜间模式下，粒子系统切换为闪烁的星星和飘动的萤火虫：

const starConfig = {
 count: 60,
 colors: ['#E8E4F5', '#E8C880', '#FFF0A0'],
 minSize: 1,
 maxSize: 4
};

性能适配

系统会自动检测设备性能，在低端设备上降低粒子数量：

const isLowEnd = navigator.hardwareConcurrency <= 2 ||
 navigator.deviceMemory <= 2;
this.performanceMultiplier = isLowEnd ? 0.5 : 1;

粒子系统为页面带来了生动的视觉反馈，让浏览体验更加沉浸。

图片灯箱组件

Sat, 04 Apr 2026 01:00:00 +0800

图片灯箱

幻梦主题自带图片灯箱功能，点击文章中的图片即可放大查看。

实现逻辑

const UtilsManager = {
 initImageLightbox() {
 const images = document.querySelectorAll('.article-text img');
 images.forEach(img => {
 img.addEventListener('click', () => this.openLightbox(img.src));
 });
 },

 openLightbox(src) {
 const lightbox = document.getElementById('img-lightbox');
 const lightboxImg = document.getElementById('img-lightbox-img');
 lightboxImg.src = src;
 lightbox.classList.add('active');
 }
};

视觉设计

灯箱采用全屏遮罩 + 背景模糊，让图片成为视觉焦点：

.img-lightbox {
 position: fixed;
 inset: 0;
 backdrop-filter: blur(12px);
 display: flex;
 align-items: center;
 justify-content: center;
}

.img-lightbox img {
 max-width: 90vw;
 max-height: 85vh;
 border-radius: var(--r-lg);
 box-shadow: 0 0 60px rgba(0, 0, 0, 0.5);
}

操作方式

点击图片打开灯箱
点击关闭按钮或灯箱背景关闭
按下 Escape 键关闭
关闭按钮带有 90 度旋转动画

全站搜索功能实现

Sat, 04 Apr 2026 00:00:00 +0800

本地搜索

幻梦主题内置本地搜索功能，无需第三方服务即可实现全文检索。

工作原理

搜索功能通过构建 JSON 索引文件实现：

[
 {
 "title": "文章标题",
 "permalink": "/posts/article/",
 "date": "2026-04-01",
 "content": "文章内容（前500字符）",
 "tags": ["tag1", "tag2"]
 }
]

搜索体验

用户按下 Ctrl+K 或点击搜索按钮即可唤出搜索面板。搜索支持实时过滤，输入即搜：

function performSearch(query) {
 const normalizedQuery = query.toLowerCase();
 const results = searchIndex.filter(item => {
 return item.title.includes(normalizedQuery) ||
 item.content.includes(normalizedQuery);
 });
 displayResults(results, query);
}

结果展示

搜索结果以列表形式展示，包含标题、内容摘要、日期和标签，匹配关键词会高亮显示：

.search-highlight {
 background-color: var(--c-primary-200);
 color: var(--c-primary-700);
 border-radius: 2px;
}

搜索面板采用磨砂玻璃效果，与主题整体视觉保持一致。

分页组件设计

Fri, 03 Apr 2026 05:00:00 +0800

分页设计

幻梦主题的分页组件采用圆角胶囊按钮风格，与整体梦幻设计语言一致。

样式实现

.page-link {
 display: inline-flex;
 align-items: center;
 justify-content: center;
 min-width: 40px;
 height: 40px;
 padding: 0 1rem;
 border-radius: var(--r-full);
 border: 1px solid var(--c-border-main);
 transition: all var(--t-fast);
}

当前页码

当前页码使用渐变背景突出显示：

.page-link.current {
 background: var(--grad-primary);
 border-color: transparent;
 color: white;
}

响应式

在移动端，分页按钮适当缩小间距，确保在小屏幕上依然可用。分页组件支持上一页/下一页按钮和直接点击页码跳转，让长列表的浏览变得轻松自如。

标签云与分类系统

Fri, 03 Apr 2026 04:00:00 +0800

标签系统

幻梦主题的标签页面采用响应式网格布局，文章卡片以 4×4 排列（最多每行 4 篇），每页显示 16 篇文章。

网格布局

.term-posts-grid {
 display: grid;
 grid-template-columns: 1fr;
 gap: var(--sp-6);
}

@media (min-width: 992px) {
 .term-posts-grid {
 grid-template-columns: repeat(4, 1fr);
 }
}

标签云

标签云页面将所有标签以标签云形式展示，每个标签带有数量标识：

<a href="/tags/css" class="cloud-tag" data-weight="3">
 CSS <span class="tag-count">(3)</span>
</a>

分页系统

当文章超过 16 篇时自动启用分页，提供上一页/下一页和页码导航：

.pagination {
 display: flex;
 align-items: center;
 justify-content: center;
 gap: 0.5rem;
 margin-top: 3rem;
}

.page-link.current {
 background: var(--grad-primary);
 color: white;
}

标签页面让浏览特定主题的文章变得轻松而高效。

文章内容排版之美

Fri, 03 Apr 2026 03:00:00 +0800

阅读体验优先

幻梦主题将文章内容的阅读体验放在首位。每一处排版细节都经过精心打磨。

字体系统

正文采用 1.0625rem 字号和 1.85 行高，确保长时间阅读的舒适度：

.article-text {
 font-size: 1.0625rem;
 line-height: 1.85;
 color: var(--c-text-main);
}

标题层级

.article-text h2 {
 font-size: 1.625rem;
 margin: 2.5rem 0 1rem;
 border-bottom: 2px solid var(--c-border-light);
}
.article-text h3 {
 font-size: 1.375rem;
 margin: 2rem 0 0.75rem;
}

引用样式

引用块采用左侧彩色边框 + 底色，突出显示：

.article-text blockquote {
 border-left: 4px solid var(--c-primary-400);
 padding: 1.25rem 1.5rem;
 background: var(--c-primary-100);
 font-style: italic;
}

代码块

代码块采用语法高亮，支持行号、语言标签和复制按钮，让技术文章更加专业：

.highlight pre {
 padding: 1.25rem;
 font-size: 0.875rem;
 line-height: 1.65;
}

幻梦主题让每一篇文章都像一本精装书，阅读成为一种享受。

页面布局系统

Fri, 03 Apr 2026 02:00:00 +0800

布局体系

幻梦主题采用统一的页面布局系统，确保所有页面具有一致的视觉节奏。

容器系统

.container {
 width: 100%;
 max-width: var(--container-xl);
 margin: 0 auto;
 padding: 0 var(--sp-5);
}

文章详情页 — 品字形布局

文章详情页采用独特的「品字形」布局：

┌──── 文章头部 ────────────────┐
│ 封面图 + 标题 + 元信息 │
└──────────────────────────────┘
┌── 正文内容 ──┬── 侧边栏 ──┐
│ │ 目录 │
│ │ 文章信息 │
│ │ 标签 │
└──────────────┴────────────┘
┌── 底部导航 ────────────────┐
│ 上一篇 · 推荐 · 下一篇 │
└────────────────────────────┘

侧边栏粘性定位

右侧边栏采用 position: sticky 实现跟随滚动：

.article-right {
 position: sticky;
 top: calc(var(--header-h) + var(--sp-4));
 align-self: flex-start;
}

列表页布局

文章列表页采用左右分栏布局：左侧文章列表 + 右侧侧边栏。侧边栏包含日历、最新文章和标签云。

导航菜单设计与实现

Fri, 03 Apr 2026 01:00:00 +0800

双模式导航

幻梦主题根据屏幕尺寸提供两种导航模式：

桌面端：水平导航栏
移动端：滑出式菜单

头部设计

导航栏采用磨砂玻璃效果，滚动时增加阴影：

.site-header {
 background: var(--color-surface-glass);
 backdrop-filter: blur(20px) saturate(180%);
 position: sticky;
 top: 0;
 z-index: 1000;
}

.site-header.scrolled {
 background: var(--c-surface-main);
 box-shadow: var(--shadow-medium);
}

移动端菜单

在移动端，导航菜单从右侧滑出，带有磨砂玻璃背景：

.mobile-menu {
 position: fixed;
 top: 0;
 right: -280px;
 width: min(280px, 82vw);
 height: 100%;
 transition: right var(--t-base);
}

.mobile-menu.active { right: 0; }

图标集成

每个导航项都支持 Font Awesome 图标，通过菜单配置中的 params.icon 指定，让导航更加直观生动。

卡片组件系统详解

Fri, 03 Apr 2026 00:00:00 +0800

卡片设计哲学

卡片是幻梦主题中最核心的 UI 组件。每张卡片都是一个独立的内容容器，带有磨砂玻璃背景、柔和阴影和精致的圆角。

基础卡片

.card {
 border-radius: var(--r-xl);
 padding: var(--sp-5);
 box-shadow: var(--color-shadow-medium);
 border: 1px solid var(--color-border-main);
 transition: transform var(--t-base), box-shadow var(--t-base);
}

顶部分隔线

卡片悬停时会显示一条渐变色顶部分隔线，增加精致感：

.card::before {
 content: '';
 position: absolute;
 top: 0; left: 0; right: 0;
 height: 3px;
 background: var(--color-grad-primary);
 opacity: 0;
 transition: opacity var(--t-base);
}

.card:hover::before { opacity: 1; }

卡片类型

幻梦主题包含多种卡片变体：

文章卡片（.post-card）：用于首页和标签页的文章展示
列表卡片（.post-item）：用于文章列表页
侧边栏卡片（.sidebar-card）：侧边栏小部件容器
友链卡片（.link-card）：友链页面
技能卡片（.skill-item）：技能展示

所有卡片共享统一的设计语言，确保视觉一致性。

响应式设计适配策略

Thu, 02 Apr 2026 04:00:00 +0800

响应式策略

幻梦主题采用 Mobile-First 的设计策略，从最小屏幕开始逐步增强。

断点系统

--bp-sm: 576px; /* 手机横屏 */
--bp-md: 768px; /* 平板 */
--bp-lg: 992px; /* 桌面 */
--bp-xl: 1200px; /* 宽屏 */

布局自适应

文章列表

桌面端采用左右分栏布局，左侧文章列表 + 右侧边栏。移动端自动切换为单栏：

@media (min-width: 768px) {
 .posts-layout {
 flex-direction: row;
 }
 .posts-sidebar {
 display: block;
 width: var(--sidebar-w);
 }
}

卡片网格

文章卡片网格根据屏幕宽度自动调整列数：

.posts-grid {
 grid-template-columns: 1fr;
}
@media (min-width: 768px) {
 .posts-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 992px) {
 .posts-grid { grid-template-columns: repeat(3, 1fr); }
}

导航适配

桌面端显示完整导航菜单，移动端自动折叠为滑出式菜单，并通过 aria-expanded 等属性确保无障碍访问。

幻梦主题在所有屏幕尺寸上都能提供一致的梦幻视觉体验。

深色模式：夜色幻梦

Thu, 02 Apr 2026 03:00:00 +0800

夜色幻梦

深色模式以「夜色幻梦」为设计主题，灵感来自深邃夜空中的星光。

色彩方案

深色模式采用深邃、富有层次感的色彩：

主背景：#0C0B12 — 深空黑色
卡片背景：#14121C — 稍亮的深紫
文字主色：#E0DCF0 — 柔和的亮紫色

星空特效

深色模式下，英雄区域会呈现动态星空效果：

[data-theme="dark"] .hero::before {
 background:
 radial-gradient(1px 1px at 10% 20%, var(--c-star-1) 0%, transparent 100%),
 radial-gradient(2px 2px at 45% 45%, var(--c-star-5) 0%, transparent 100%);
 animation: starTwinkle 8s ease-in-out infinite;
}

星云光晕

页面背景带有星云般的渐变光晕，并伴有缓慢的脉动动画。

萤火虫粒子

深色模式下，Canvas 粒子系统会渲染萤火虫效果。萤火虫呈柔和的绿色光点，在页面中缓慢飘动，营造出夏夜森林的氛围。

[data-theme="dark"] .firefly {
 background: radial-gradient(circle, var(--c-accent-400) 0%, transparent 100%);
 box-shadow: 0 0 20px var(--c-accent-300);
}

深色模式的每一个细节都经过精心设计，让夜间阅读成为一种沉浸式的梦幻体验。

浅色模式：朦胧幻梦

Thu, 02 Apr 2026 02:00:00 +0800

朦胧幻梦

浅色模式以「朦胧幻梦」为设计主题，灵感来自晨雾中的紫藤花园。

色彩氛围

浅色模式采用柔和、低饱和度的色彩方案：

主背景：#F8F6FC — 极淡的紫色底色
卡片背景：#FFFFFF — 纯白，确保内容可读性
文字主色：#3A3650 — 柔和的深紫灰色

梦幻光晕

页面背景带有微妙的渐变光晕效果：

[data-theme="light"] body::before {
 background:
 radial-gradient(ellipse at 20% 20%, rgba(166, 150, 192, 0.12) 0%, transparent 50%),
 radial-gradient(ellipse at 80% 80%, rgba(204, 160, 181, 0.1) 0%, transparent 50%);
 animation: dreamyPulse 15s ease-in-out infinite alternate;
}

卡片光泽

浅色模式下的卡片带有柔和的光泽阴影：

[data-theme="light"] .card {
 box-shadow:
 var(--shadow-card),
 0 0 0 1px rgba(166, 150, 192, 0.08);
}

这种细腻的光影处理让界面在浅色背景下依然富有层次感和立体感。

磨砂玻璃效果实现

Thu, 02 Apr 2026 01:00:00 +0800

毛玻璃效果的核心

幻梦主题大量使用了磨砂玻璃（Glassmorphism）效果，其核心是 CSS 的 backdrop-filter 属性。

实现原理

.glass {
 background: rgba(255, 255, 255, 0.72);
 backdrop-filter: blur(16px);
}

backdrop-filter: blur(16px) 对元素背后的内容应用 16 像素的高斯模糊，配合半透明背景色，形成毛玻璃的视觉效果。

双主题适应

主题通过 CSS 变量让玻璃效果自动适应浅色和深色模式：

:root {
 --c-surface-glass: rgba(255, 255, 255, 0.72);
}

[data-theme="dark"] {
 --c-surface-glass: rgba(20, 18, 28, 0.72);
}

应用场景

幻梦主题将磨砂玻璃应用于所有卡片类元素，营造统一的视觉语言：

文章卡片（.post-card）
侧边栏（.sidebar-card）
导航栏（.site-header）
页脚（.site-footer）
菜单面板（.mobile-menu）

玻璃效果带来了通透、轻盈的视觉感受，让内容层次更加分明。

梦幻色彩系统设计

Thu, 02 Apr 2026 00:00:00 +0800

色彩哲学

幻梦主题的色彩设计围绕「梦幻」这一核心理念展开。紫色代表神秘与浪漫，粉色增添温柔感，绿色则带来自然的清新气息。

CSS 变量体系

通过 CSS 自定义属性实现双主题色彩自适应：

[data-theme="light"] {
 --c-primary-400: #786C8A;
 --c-bg-main: #F8F6FC;
}

[data-theme="dark"] {
 --c-primary-400: #827AA2;
 --c-bg-main: #0C0B12;
}

9 色阶系统

每种颜色都包含 9 个色阶（100-900），从浅到深覆盖所有使用场景：

100: 最浅，用于背景
300: 中等浅，用于边框
500: 基准色，用于主要元素
700: 较深，用于文字
900: 最深，用于强调

语义化映射

主题还定义了语义化色彩变量，将设计令牌映射到具体用途：

--color-text-primary: var(--c-text-main);
--color-accent: var(--c-primary-500);
--color-border-main: var(--c-border-main);

这种分层设计让色彩管理变得清晰而灵活。

主题目录结构解析

Wed, 01 Apr 2026 03:00:00 +0800

幻梦主题的目录结构清晰、模块化程度高，方便开发者理解和定制。

核心目录

themes/illusion/
├── assets/
│ ├── css/ # 模块化CSS文件
│ └── js/ # JavaScript文件
├── layouts/ # 模板文件
│ ├── _default/ # 默认模板
│ └── partials/ # 组件模板
├── content/ # 示例内容
├── data/ # 数据文件
└── i18n/ # 国际化文件

CSS 模块化设计

CSS 被拆分为 11 个模块化文件，按功能划分：

assets/css/
├── _variables.css # 设计令牌与色彩变量
├── _base.css # 基础重置与排版
├── _layout.css # 布局系统
├── _components.css # 组件样式
├── _home.css # 首页专属
├── _list.css # 列表与分页
├── _pages.css # 页面样式
├── _search.css # 搜索组件
├── _theme.css # 主题覆盖
├── _animations.css # 动画
├── _chroma.css # 语法高亮
└── _responsive.css # 响应式

这种模块化设计使得维护和定制变得异常简单。

主题配置文件详解

Wed, 01 Apr 2026 02:00:00 +0800

幻梦主题提供了大量配置项，让你可以灵活控制主题的行为。

功能开关

[params]
 enableDarkMode = true # 暗黑模式切换
 enableSearch = true # 搜索功能
 enableParticles = true # 粒子背景动画
 enable3DEffects = true # 3D卡片效果
 enableScrollAnimations = true
 enableTypewriter = true # 打字机效果
 enableTOC = true # 文章目录
 lazyLoadImages = true # 图片懒加载

导航菜单

[menus]
 [[menus.main]]
 name = '主页'
 pageRef = '/'
 weight = 5
 [menus.main.params]
 icon = 'fas fa-home'

SEO 配置

[params]
 enableSchema = true # 结构化数据
 enableOpenGraph = true # Open Graph
 enableTwitterCards = true # Twitter Cards

国际化

主题内置中英文双语支持，通过 i18n/ 目录下的 YAML 文件管理所有文本内容，方便维护和多语言扩展。

主题安装与快速开始

Wed, 01 Apr 2026 01:00:00 +0800

环境要求

幻梦主题需要 Hugo 0.146.0 或更高版本。

安装步骤

第一步：下载主题

cd your-site
git submodule add https://github.com/yourname/illusion.git themes/illusion

第二步：配置

在站点根目录的 hugo.toml 中设置主题：

theme = "illusion"

第三步：运行

hugo server

访问 http://localhost:1313 即可看到效果。

基础配置

幻梦主题提供了丰富的配置项：

[params]
 enableDarkMode = true
 enableSearch = true
 enableParticles = true
 enableTOC = true

目录结构

content/
├── _index.md # 首页
├── about.md # 关于
├── archives.md # 归档
├── links.md # 友链
├── posts/ # 文章目录
└── skills.md # 技能

幻梦主题采用数据驱动模式，大部分页面内容通过 data/ 目录下的 YAML 文件配置，无需修改模板即可自定义页面内容。

幻梦主题介绍——梦幻与优雅的Hugo主题

Wed, 01 Apr 2026 00:00:00 +0800

幻梦（Illusion）是一款为追求极致视觉体验而生的 Hugo 博客主题。它不仅仅是一个主题，更是一场关于数字美学的探索。

设计理念

幻梦主题的设计灵感来源于自然界中的梦幻景象——晨雾中的紫藤花、夜空中的繁星、林间的萤火虫。我们试图将这些自然之美转化为数字世界的视觉语言。

梦幻色彩

主题采用紫色为主色调，搭配粉色和绿色作为辅助色，营造出柔和、梦幻的视觉氛围。浅色模式下呈现「朦胧幻梦」的淡雅气质，深色模式下则展现「夜色幻梦」的深邃神秘。

:root {
 --c-primary-400: #786C8A;
 --c-secondary-400: #856876;
 --c-accent-400: #4D7A60;
}

磨砂玻璃美学

卡片、侧边栏、导航等 UI 元素统一采用磨砂玻璃效果，带来通透、轻盈的视觉感受。

.card {
 background: var(--c-surface-glass);
 backdrop-filter: blur(16px);
}

核心特性

双主题切换（浅色/深色）
Canvas 粒子特效（白天糖果彩带 / 夜间星光萤火虫）
本地搜索
响应式设计
SEO 优化
多语言支持
完整的数据驱动页面

幻梦主题让每一篇博文都像是一件艺术品，阅读变成了一种享受。

归档

Mon, 01 Jan 0001 00:00:00 +0000

技能

Mon, 01 Jan 0001 00:00:00 +0000

使用条款

Mon, 01 Jan 0001 00:00:00 +0000

使用条款

最后更新日期：2026年4月11日

1. 接受条款

通过使用幻梦主题（Illusion），您同意遵守本使用条款。如果您不同意这些条款，请不要使用本主题。

2. 许可证

幻梦主题根据 GNU General Public License v3.0 许可证发布。您可以在遵守许可证条款的前提下自由使用、修改和分发本主题。

3. 使用限制

您同意不：

将主题用于非法目的
试图破坏或干扰主题的正常运行
未经授权复制、修改或分发主题
使用主题侵犯他人权利

4. 免责声明

本主题按"原样"提供，不提供任何明示或暗示的保证，包括但不限于适销性、特定用途适用性和非侵权性的保证。

5. 责任限制

在任何情况下，主题作者均不对因使用或无法使用主题而引起的任何损害承担责任。

6. 修改条款

我们保留随时修改这些条款的权利。修改后的条款将在网站上发布。

7. 适用法律

这些条款受中华人民共和国法律管辖。

8. 联系我们

如果您对这些条款有任何疑问，请通过以下方式联系我们：

邮箱: admin@azxt.org
网站: azxt.org

隐私政策

Mon, 01 Jan 0001 00:00:00 +0000

隐私政策

最后更新日期：2026年4月11日

1. 引言

欢迎使用幻梦主题（Illusion）。我们重视您的隐私，并致力于保护您的个人信息。本隐私政策说明了我们如何收集、使用、存储和保护您的信息。

2. 信息收集

2.1 自动收集的信息

当您访问使用幻梦主题的网站时，我们可能会自动收集以下信息：

技术信息：IP地址、浏览器类型、操作系统、设备信息
使用数据：访问时间、浏览页面、点击行为
性能数据：页面加载时间、错误日志

2.2 您提供的信息

如果您在网站上提交表单或留言，我们可能会收集：

联系信息：姓名、电子邮件地址
内容信息：评论内容、留言内容
其他信息：您选择提供的任何其他信息

3. 信息使用

我们使用收集的信息用于以下目的：

提供服务：确保网站正常运行
改进体验：优化网站性能和用户体验
安全保障：防止欺诈和滥用
沟通：回复您的询问和请求
分析：了解用户行为和改进服务

4. 信息共享

我们不会出售、交易或出租您的个人信息。在以下情况下，我们可能会分享信息：

法律要求：遵守法律、法规或政府要求
服务提供商：与帮助我们运营网站的服务提供商分享
业务转移：在公司合并、收购或资产出售时
保护权利：保护我们的权利、财产或安全

5. 数据安全

我们采取合理的安全措施保护您的信息，包括：

技术措施：加密、防火墙、访问控制
组织措施：员工培训、隐私政策
物理措施：安全的数据中心

6. 数据保留

我们仅在实现本政策所述目的所需的时间内保留您的信息，除非法律要求更长的保留期。

7. 您的权利

根据适用法律，您可能拥有以下权利：

访问权：请求访问您的个人信息
更正权：请求更正不准确的信息
删除权：请求删除您的信息
限制处理权：请求限制处理您的信息
数据可携权：请求以结构化格式获取您的信息
反对权：反对处理您的信息

8. 第三方服务

我们的网站可能包含指向第三方网站的链接。本隐私政策不适用于这些第三方网站，建议您查看其隐私政策。

9. Cookie和跟踪技术

我们可能使用Cookie和类似技术来：

记住偏好：保存您的语言选择和其他设置
分析使用：了解用户如何与网站互动
安全保障：检测和防止安全威胁

您可以通过浏览器设置控制Cookie的使用。

10. 儿童隐私

我们的服务不面向13岁以下的儿童。如果我们发现收集了儿童的信息，将立即删除。

11. 国际数据传输

您的信息可能在您所在国家/地区之外进行处理。我们将采取适当措施保护您的信息。

12. 隐私政策变更

我们可能会不时更新本隐私政策。重大变更将在网站上发布通知。

友链

Mon, 01 Jan 0001 00:00:00 +0000