3D环梦工坊编程竞赛组

    Appearance

    项目 Slidev 主题使用 ​

    本仓库已经内置一套本地 Slidev 主题：slides/theme-ain/。

    它的目标不是替代 Slidev 全部默认能力，而是做三件事：

    1. 让封面、分节页和普通内容页更接近文档站的视觉风格。
    2. 复用与 VitePress 一致的颜色、字体和背景变量。
    3. 保持 deck 仍然可以像普通 Slidev 项目一样开发和构建。

    主题目录 ​

    • slides
      • theme-ain
        • package.json
        • global-bottom.vue
        • layouts
          • cover.vue
          • default.vue
          • section.vue
        • styles
          • index.ts
          • layouts.css

    每个文件的职责 ​

    文件作用
    package.json声明这是一个 Slidev 主题，并给出默认字体和主题变量。
    styles/index.ts引入 Slidev 基础布局样式，再接入本主题的 layouts.css。
    styles/layouts.css主题主样式文件，负责背景、排版、代码块、表格和页脚样式。
    layouts/cover.vue自定义封面布局。
    layouts/default.vue自定义普通页面布局。
    layouts/section.vue自定义章节分割页布局。
    global-bottom.vue所有非封面页共享的底部页脚，显示标题和页码。

    如何启用 ​

    在 deck 文件头部的 frontmatter 里把 theme 指向本地主题目录。

    YAML
    ---
theme: ./theme-ain
title: 我的课程
download: false
fonts:
  provider: none
---

    现有示例 ​

    当前仓库里已经切换到这套主题的 deck 包括：

    • slides/demo.md
    • slides/2025-guide.md

    如果你要新建一个 deck，最简单的方式就是复制其中一个文件的头部配置，再替换标题和内容。

    为什么要复用文档站变量 ​

    本项目把品牌变量抽到了 docs/.vitepress/theme/brand-tokens.css。

    这样做的好处是：

    • 文档站和幻灯片不会出现两套接近但不一致的蓝色系
    • 字体栈只维护一份，不会一边改了另一边忘记跟进
    • 后续如果要整体调整品牌风格，只需要改一份 token

    新增布局时的建议 ​

    如果你后续还想补更多主题布局，优先遵守这几个约定：

    • 先看当前 deck 是否真的需要新布局，不要为一个页面单独造主题。
    • 新布局尽量只解决“结构”问题，把颜色和排版留在 styles/layouts.css。
    • 能复用 Slidev 内置布局时就复用，不要重复实现。

    下一步 ​