Web前端开发技术

Appearance

主题与插件：样式与行为从哪来 ​

你写 md 时从没写过颜色和字体，md 围栏也从没说过"可运行"——样式与行为并不在内容里。本任务是"内容 → 网站"流水线的第二段：引入主题注入样式，引入插件注入行为，体会内容、样式、行为的三层分离。

元信息 ​

  • 目标：通过覆盖主题 CSS 变量与接入 live demo 插件，理解"内容 / 主题（样式）/ 插件（行为）"三层，换皮、加件而不动内容
  • 关键概念：主题（theme）、插件（plugin）、CSS 变量、构建期注入
  • 关联阶段：cp1
  • 常见误区：以为样式和行为写进了 markdown（它们在主题层与构建层注入——正是结构与样式、行为分离）；以为插件在浏览器里生效（VitePress 插件动手的位置在构建期渲染管线，与 WordPress 插件的运行期相反）

引入主题：样式从哪来 ​

你写 md 时从没写过颜色和字体——它们来自主题。想调整默认主题的外观，最常见的办法是覆盖它的 CSS 变量。新建 .vitepress/theme/：

plain
.vitepress/theme/
├─ index.mts
└─ custom.css
javascript
// .vitepress/theme/index.mts
import DefaultTheme from 'vitepress/theme'
import './custom.css'
export default DefaultTheme
css
/* .vitepress/theme/custom.css */
:root {
  --vp-c-brand-1: #e05d23;   /* 全站链接与按钮的主色，改我试试 */
}

保存后整个站点换色。注意：你没有改动任何一篇 md——内容在 md，样式在主题，这与本周反复强调的"结构与样式分离"是同一件事在站点层面的重演。想换得更彻底，可以把 export default 换成整个第三方主题包，md 依旧一字不动。

引入插件：行为注入——live demo ​

本课程网站装了一个行为插件：文档里的 ```html / ```js 围栏不再只是带高亮的静态代码，而是变成可编辑、可运行的沙箱。本页下面这个围栏就是它渲染的（在课程网站上生效）：

<!DOCTYPE html>
<html>
<head>
  <title>Parcel Sandbox</title>
  <meta charset="UTF-8" />
  <link rel="stylesheet" href="/styles.css" />
</head>
<body>
  <h1>Hello world</h1>
</body>
</html>
Open on CodeSandboxOpen Sandbox

三段配合实现。先装依赖：

bash
npm add -D vitepress-plugin-sandpack
  1. 注册沙箱组件（在 theme/index.mts 里增加）：
javascript
import { Sandbox } from 'vitepress-plugin-sandpack'
import 'vitepress-plugin-sandpack/dist/style.css'
// enhanceApp({ app }) { app.component('Sandbox', Sandbox) }
  1. 改写 markdown 渲染管线（本站的真实插件，节选）——markdown-it 把每个围栏交给渲染器，插件拦下 html 围栏、包进 <Sandbox>：
javascript
export function liveDemo(md) {
  const defaultFence = md.renderer.rules.fence
  md.renderer.rules.fence = (tokens, idx, opts, env, self) => {
    const token = tokens[idx]
    if (token.info.trim().startsWith('html'))
      return `<Sandbox template="static">${defaultFence(tokens, idx, opts, env, self)}</Sandbox>`
    return defaultFence(tokens, idx, opts, env, self)
  }
}
  1. 在配置里启用：
javascript
// config.mts
markdown: { config: (md) => md.use(liveDemo) }

看清它动手的位置：不在浏览器里，而在构建/dev 的渲染管线里——插件是一种"构建期行为"，按规则增强写好的内容。这与 WordPress 插件（运行期）有本质区别，正是本实训收束里对比的主题之一。

验收标准 ​

  • [ ] 覆盖一个主题 CSS 变量并看到全站生效
  • [ ] 能说出 VitePress 插件与 WordPress 插件各自"动手的位置"
  • [ ] （选做）照上文接入 sandpack，让一个 ```html 围栏可运行