Hope 主题细节（踩坑）小记

单独开一篇不定期更新的文章，杂乱记录一下一些使用 VuePress Theme Hope 的细节日志和踩坑记录。

前言

环境：直接使用 Hope 主题，安装时配置为博客站点，版本 2.0.0-rc.67。VuePress 版本 2.0.0-rc.19。使用 WebStorm 开发。

正文

自定义 404 页

Hope 主题的设计中，404页面的主体 Layout 实际是由两部分组成的：

• NotFoundHint 组件，展示提示信息
• 两个按钮，返回上页和首页

我只需要简单的自定义外观，就选择 组件替换 的方式，保留页面 Layout，仅仅自定义 NotFoundHint 组件。

// config.ts
// 别忘了在 theme 传入 custom: true 这个 behavior option
export default defineUserConfig({
    // ... 其他内容

    alias: {
        "@theme-hope/components/NotFoundHint": path.resolve(
            __dirname,
            "./components/NotFound.vue",
        ),
    },
});

使用 Element Plus 组件

ElText 组件

使用很简单，在项目中安装 Element Plus，然后在需要的位置（Markdown 或 Vue 组件）引入使用的组件即可 （不推荐全包引入，臃肿且大部分组件实际用不上） 。其他 Vue 组件同理，Hope 主题支持在 Markdown 中直接使用 Vue 组件。转用 SSG 似乎就是因为自己从 Vue 写文章太麻烦了，怎么好像又回到写 Vue 了啊

npm install element-plus --save

// client.ts
// 别忘了在客户端配置引入样式表
import "element-plus/dist/index.css";

自定义 JS（例如点击特效）

在 config.ts 中配置 head 选项，在这里引入自定义的 JS 文件就可以对所有页面生效了。

// config.ts
export default defineUserConfig({
    // ... 其他内容

    head: [["script", {src: "./scripts/click_effect.js"}]],
});

侧边栏配置

侧边栏配置在官方文档中看似复杂，其实也复杂……吗？

// sidebar.ts
export default sidebar({
    "/posts/": "structure",
    "/rkgk/": "structure",
});

我的站点结构简单，也不需要过多自定义每个页面/分类的外观，因此直接配置为两个文章大类的 structure 即可。如果需要更多自定义，可以参考 官方文档。

额外记录一点：默认情况下侧边栏自动生成的排序规则是 README <- 文章 Order <- 文章标题 <- 文件名。对于我这种习惯按时间倒序的博客来说显得有点乱。此时可以在主题配置修改一下 SidebarSorter。

// theme.ts
export default hopeTheme({
    // ... 其他内容

    sidebarSorter: ["readme", "order", "date-desc", "title", "filename"],
});

这样就能按照 README <- 文章 Order <- 文章日期倒序 <- 文章标题 <- 文件名 的顺序排列了。保留 Order 在前也便于置顶文章等场景。