功能特性

ShokaX 主题提供了丰富的功能特性，帮助你打造独特的博客体验。

📝 MDX 组件扩展

主题扩展了 MDX 语法，提供 11 种开箱即用的组件，无需导入即可在文章中使用。

可用组件：

Note - 5 种颜色的提示框（信息/成功/警告/错误/帮助）
Spoiler - 剧透遮罩（!!内容!! 快捷语法）
文本装饰 - Label、Underline、Strike、Highlight、Text、Kbd
上下标 - Sup、Sub
折叠面板 - Collapse

示例：

<Note type="info">这是一条信息提示</Note>

水的化学式是 H<Sub>2</Sub>O，能量公式是 E=mc<Sup>2</Sup>。

<Collapse title="点击展开更多内容">隐藏的详细说明...</Collapse>

查看 MDX 组件文档 →

🔗 友链系统

内置友链页面，支持卡片式展示、站点预览图、自定义主题色。

核心特性：

卡片式友链展示，支持鼠标悬停效果
站点预览图（可选）
自定义主题色点缀
自动生成友链配置示例（方便交换友链）
可自定义友链规则说明

配置示例：

friends: {
  title: "友链",
  links: [
    {
      url: "https://example.com/",
      title: "示例站点",
      desc: "站点简介",
      author: "作者名",
      avatar: "https://example.com/avatar.png",
      color: "var(--color-pink)",  // 可选
      siteImage: "https://example.com/preview.png",  // 可选
    },
  ],
}

查看友链配置文档 →

🎨 字体自定义

主题支持自定义字体，并内置字体子集化优化功能，大幅减小字体文件体积。

核心特性：

快速更换字体（替换字体文件即可，无需修改代码）
字体子集化优化（自动提取使用的文字，10MB → 几百 KB）
TTF 格式支持（自动转换为 WOFF 用于生产环境）
单独配置正文字体和代码字体
支持多字体方案（标题/正文使用不同字体）

快速更换字体：

找到 src/assets/fonts/LXGWWenKai-Regular.ttf
用你的字体文件替换它（保持文件名不变）
重启开发服务器

默认字体：

正文：LXGW WenKai（霞鹜文楷）
代码：Maple Mono CN

查看字体配置文档 →

🔍 搜索功能

基于 Pagefind 的快速离线搜索，无需服务器即可实现全文搜索。

核心特性：

客户端搜索，快速响应
离线可用，无需外部服务
轻量级，按需加载
自动索引文章内容
自适应明暗模式

使用方式：

点击导航栏右上角 🔍 搜索图标即可打开搜索面板。构建时自动生成索引：

bun run build  # 构建站点 + 生成搜索索引

查看搜索功能文档 →

🔐 加密文章

使用 AES-GCM 加密保护敏感文章内容，构建时加密、浏览器端解密。

核心特性：

AES-GCM-256 军事级加密
密码仅在构建时使用，不会发送到服务器
解密在浏览器本地完成
侧边栏目录跟随解密状态自动显示

---
title: 私人笔记
encrypted: true
password: "my-secret-key"
---

查看加密文章文档 →

🧩 Tabs 选项卡与 Quiz 测验

除了基础 MDX 组件，ShokaX 还提供了交互式组件来组织内容。

Tabs 选项卡：多标签页切换，适合多版本代码对比。

<Tabs defaultValue="npm">
  <Tab label="npm" value="npm">npm install</Tab>
  <Tab label="bun" value="bun">bun add</Tab>
</Tabs>

Quiz 测验：支持单选题、多选题、判断题、填空题。

<QuizGroup>
  <Quiz type="single" question="...">
    <QuizOptions>
      <QuizOption correct>A</QuizOption>
    </QuizOptions>
  </Quiz>
</QuizGroup>

查看 Tabs 与 Quiz 文档 →

🌙 暗黑模式

内置完整的暗黑模式支持，CSS 变量驱动，一键切换。

核心特性：

自动检测系统主题偏好
手动一键切换
localStorage 持久化偏好
View Transition 平滑过渡动画
代码高亮自动适配

查看暗黑模式文档 →

📊 统计仪表盘

基于 ECharts 的博客数据可视化，访问 /statistics/ 查看。

包含图表：月度发文趋势、分类分布饼图、标签分布饼图。

查看统计仪表盘文档 →

🎵 音乐播放器

集成 nyx-player，支持网易云音乐和 QQ 音乐歌单。

nyxPlayer: {
  enable: true,
  urls: [{ name: "歌单", url: "..." }],
}

查看音乐播放器文档 →

🔢 数学公式

内置 KaTeX 渲染，支持 LaTeX 数学公式。

行内公式：$E = mc^2$

块级公式：
$$
\int_0^\infty e^{-x^2} dx = \frac{\sqrt{\pi}}{2}
$$

查看数学公式文档 →

💻 代码高亮增强

Shiki 代码高亮 + 6 个 Transformer 增强。

功能：彩色括号、差异对比、行高亮/聚焦、错误标注、复制按钮。

function add(a, b) {
  return a + b;         // [!code --]
  const result = a + b; // [!code ++]
  return result;        // [!code ++]
}

查看代码高亮文档 →

有功能建议？欢迎在 GitHub Issues 提出！