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 组件
使用很简单,在项目中安装 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 在前也便于置顶文章等场景。