Astro Gyoza 内容标签使用指南

Gyoza 主题内置了丰富的排版增强功能，远超标准 Markdown。本文档完整介绍所有功能，涵盖内联标签、数学公式、代码块、表格、MDX 组件等，适配亮色/暗黑模式。

文字特效

下划线

使用 ++文字++ 包裹即可生成红色下划线：

这是一段 含有下划线的文字，效果明显。

波浪下划线

在 <ins> 标签上加 class="wavy" 实现波浪线：

这是一段 含有波浪下划线的文字，像涟漪一样。

虚点下划线

在 <ins> 标签上加 class="dot" 实现虚点线：

这是一段 含有虚点下划线的文字，精致细腻。

彩色下划线

<ins> 支持多种颜色变体，通过 class 控制：

主要色下划线　 成功绿下划线　 警告黄下划线　 危险红下划线　 信息蓝下划线

荧光高亮

使用 ==高亮文字== 包裹产生荧光笔效果：

这是一段 荧光高亮 的文字，在亮色模式下为黄色，暗黑模式下为深琥珀色，护眼醒目。

上标与下标

使用 ^上标^ 和 ~下标~ 语法：

水的化学式是 H2O，地球表面积约为 510^{百万平方公里}。

键盘键

使用 <kbd> 标签模拟键盘按键的 3D 视觉效果：

使用快捷键 Ctrl + C 复制，Ctrl + V 粘贴。

黑幕（Spoiler）

使用 <span class="spoiler"> 隐藏敏感内容，鼠标悬停才显示：

下面这句话包含 这是隐藏的黑幕内容，鼠标滑过即可查看 黑幕效果。

模糊黑幕

加 blur 类实现模糊效果，鼠标悬停变清晰：

这段文字默认模糊处理，悬停后变清晰可见

彩色文字

使用 <span class="c-颜色名"> 快速变换字体颜色：

组合使用示例：

红色、蓝色 与 紫色 搭配使用，突出重点信息。

七彩渐变文字

使用 <span class="rainbow"> 让文字流动变色：

这是一段七彩渐变的动态文字，流光溢彩。

内联标签块

使用 <span class="label"> 配合颜色变体生成内联标签：

default　 primary　 success　 info　 warning　 danger

也可以与彩色文字组合：

主要操作　 ✓ 已完成　 ✗ 已失败

KaTeX 数学公式

主题通过 remark-math + rehype-katex 支持 LaTeX 数学公式渲染。

行内公式

用单个 $ 包裹：质能方程 $E = mc^2$ 是物理学中最著名的公式。

块级公式

用双 $$ 包裹：

多行对齐公式：

矩阵公式

KaTeX 支持大部分 LaTeX 数学环境，包括 \begin{aligned}、\begin{pmatrix}、\sum、\int 等。如果公式不渲染，请检查 LaTeX 语法是否正确。

代码块进阶

代码语言

在代码块开头指定语言即可激活语法高亮：

const greeting: string = 'Hello, Gyoza!'
console.log(greeting)

行高亮

使用花括号标记需要高亮的行：

```typescript {2,4-5}
function fibonacci(n: number): number {
  if (n <= 1) return n // 高亮行
  let a = 0,
    b = 1
  for (let i = 2; i <= n; i++) {
    // 高亮区域
    const c = a + b
    a = b
    b = c
  }
  return b
}
```

文件标题

使用 title 参数添加文件标签：

```typescript title="src/utils/math.ts"
export const add = (a: number, b: number): number => a + b
```

行号

代码块默认显示行号，方便引用：

// 第 1 行
const a = 1
// 第 2 行
const b = 2
// 第 3 行
console.log(a + b)

表格增强

主题通过 rehypeTableBlock 插件对表格进行美化：

表格支持左右对齐：

脚注

用于添加注释或参考资料：

这是一个带脚注的句子。¹ 这是另一个脚注引用。²

图片画廊

Gyoza 主题内置了相册系统。在 src/content/galleries/ 下创建目录并放置图片即可。

在文章中引用图片：

![图片描述](image-name.webp)

图片会自动包裹在 <figure> 标签中，支持懒加载和点击放大预览（lightbox）。

MDX 组件

使用 .mdx 扩展名即可在文章中直接导入 Astro 或 React 组件。

LinkCard

在 .mdx 文件顶部导入 LinkCard 生成友链风格的链接卡片：

import LinkCard from '@/components/LinkCard.astro'

<LinkCard
  title="GitHub"
  url="https://github.com"
  desc="全球最大的代码托管平台"
  image="https://github.githubassets.com/favicons/favicon.svg"
/>

<LinkCard title="Astro" url="https://astro.build" desc="现代化的 Web 框架" />

Highlight

用于强调关键文字的 Astro 组件：

<Highlight>这段文字会被高亮标记</Highlight>

AnimatedSignature

在文章末尾添加个性签名动画：

import { AnimatedSignature } from '@/components/AnimatedSignature.tsx'

<AnimatedSignature />

科技感文字特效

主题内置一批科技感排版特效，配合既有特效使用：

霓虹辉光文字

使用 <span class="neon"> 生成霓虹灯管效果，支持 4 种颜色变体：

CYAN 青色霓虹　 PINK 粉色霓虹　 BLUE 蓝色霓虹　 GREEN 绿色霓虹

故障抖动文字

使用 <span class="glitch" data-text="原文"> 生成赛博故障效果（data-text 必须与内容一致）：

SYSTEM BREACH

打字机光标

在文本后追加闪烁光标：

正在初始化系统…

扫描线

CRT 扫描高亮，适合强调关键词：

扫描中…

科技渐变文字

流动渐变 + 辉光，随主题强调色变化：

TECH GRADIENT 科技渐变

既有特效增强

• 彩色文字（c-red 等）增加霓虹辉光
• 彩虹文字（rainbow）增加彩色光晕
• 标签块（label）悬停时霓虹发光 + 上浮
• 键盘键（kbd）增加辉光，悬停变强调色
• 引用块（blockquote）左侧发光呼吸动画
• 行内代码改为编程玫粉色（亮色深玫粉 / 暗色浅玫粉）
• 代码块新增复制按钮（复制 / 已复制 ✓），Shiki 亮暗主题背景 + 圆角边框

总结

所有功能一览：