VuePress + Hope 主题搭建指南

技术栈概览[^1]

组件	说明
VuePress 2	静态站点生成器，基于 Vue 3
Hope Theme	功能丰富的主题，支持博客、文档
Vite	构建工具，开发体验极佳
Vercel	部署平台，自动 CI/CD

核心目录结构

src/
├── .vuepress/
│   ├── config.ts      # 主配置
│   ├── theme.ts       # 主题配置
│   ├── navbar.ts      # 导航栏
│   ├── sidebar.ts     # 侧边栏
│   └── styles/        # 自定义样式
├── posts/             # 博客文章
└── README.md          # 首页

高亮示例

VuePress 支持在代码围栏上标注需要高亮的行：

`ts {2,4-5} line-numbers

const app = createApp(); const theme = createTheme(); // 这行会被高亮 app.use(theme); const router = useRouter(); // 这两行也会被高亮 router.push("/posts/");


## 写作流程

1. 在 `src/posts/` 下新建 `.md` 文件
2. 编写 Front Matter（标题、日期、分类、标签）
3. 用 Markdown 写正文（语法速查见 [[markdown-cheatsheet]]）
4. 推送到 Git，Vercel 自动构建部署

## 自定义样式

在 `src/.vuepress/styles/palette.scss` 中修改主题色：

```scss
$theme-color: #0d9488;

在 src/.vuepress/styles/index.scss 中添加自定义 CSS 覆盖。

[^1]: 本站后来迁移到了完全自定义的主题，Hope 只作为起步时的参考。