# 缘起
朋友早前注册的域名快到期了,有一定的纪念意义，丢弃了怪可惜的，所幸我用了份午饭钱给续了期。.com域名的年费似乎要贵上不少,也许是一份蛮丰盛的午餐，当然这是后话了。我自己是一名前端开发,技术栈是Vue.js.现在比较流行静态博客,不需要运行后台,恰好Vue官方推出了VuePress,不过VuePress生态的主题相对比较少,没找到即好看又适合自己的,所幸自己撸了一个(其实是从hexo圈子里移植过来的).因为这一份午餐,有了这个博客站点,也就有了这一份主题开发的记录整理。
# VuePress介绍
你现在看到的博客站点就是基于的这个主题。用的github pages部署,这是github提供的一项免费服务，我们可以在上边放些静态HTML页面组成一个站点。VuePress就是方便我们维护和生成这个静态站点的工具,类似的还有Hugo、hexo、jekyll等等 闻如其名,VuePress是由Vue.js驱动的,而且出自Vue官方团队之手。它的诞生初衷便是为了支持 Vue 及其子项目的文档需求，拥有完善的Markdown支持,并自带了一个专门为技术文档而优化的默认主题.
# VuePress背后的工作机制
事实上,一个开发阶段的VuePress站点是一个由Vue、Vue Router、Webpack共同驱动的单页应用,如果你熟悉用Vue-cli脚手架开发web前端应用,你会觉得这并无二样,甚至你仍然可以用Vue DevTools去调试你的自定义VuePress主题.在主题开发过程中这会给我们带来极大的方便--比如计算属性和routes。当构建发布站点时,VuePress会创建一个服务端渲染(ssr)版本,类似Nuxt,生成所有对应的HTML页面。
# 创建VuePress主题所需的工具和准备工作
- Node.js (opens new window)>= 8.6
- Github Pages (opens new window) 其它部署平台可参考 官方部署文档 (opens new window)
- 顺手的文本编辑器. e.g VSCode (opens new window)
# 主题源码下载
完整的主题源码都放在GitHub上了,可以随时Clone下来做为参照.
# 开启VuePress主题开发之旅
- 🐻 常用术语
- 🐰 主题介绍
- 🐑 主题目录结构
- 🐘 模板文件和布局
- 🐹 Home模板
- 🦄 Post文章详情页
- 🐸 NavBar导航模板
- 🐳 SideBar模板(一)--SubNav
- 🐳 SideBar模板(二)--FooterBar
- 🦈 Archive文章归档页
- 🐄 Category分类页
- 🐲 Tag标签页
- 🐢 Toc文章目录组件
- 🐌 FriendLink友情链接页
- 🦅 内置搜索
- 🐨 主题继承和插件
- 🐙 主题插件开发--悬浮球菜单
- 🐠 响应式主题
- 🦇 主题暗黑模式
- 🐬 主题优化篇