1980's Maker

一个出生于80年代的程序员 -- 喜爱创[客]、美[食]、动[画]、怀[旧]的新手艺人的博客


从零开始制作VuePress主题

# 缘起

朋友早前注册的域名快到期了,有一定的纪念意义,丢弃了怪可惜的,所幸我用了份午饭钱给续了期。.com域名的年费似乎要贵上不少,也许是一份蛮丰盛的午餐,当然这是后话了。我自己是一名前端开发,技术栈是Vue.js.现在比较流行静态博客,不需要运行后台,恰好Vue官方推出了VuePress,不过VuePress生态的主题相对比较少,没找到即好看又适合自己的,所幸自己撸了一个(其实是从hexo圈子里移植过来的).因为这一份午餐,有了这个博客站点,也就有了这一份主题开发的记录整理。

# VuePress介绍

你现在看到的博客站点就是基于的这个主题。用的github pages部署,这是github提供的一项免费服务,我们可以在上边放些静态HTML页面组成一个站点。VuePress就是方便我们维护和生成这个静态站点的工具,类似的还有Hugohexojekyll等等 闻如其名,VuePress是由Vue.js驱动的,而且出自Vue官方团队之手。它的诞生初衷便是为了支持 Vue 及其子项目的文档需求,拥有完善的Markdown支持,并自带了一个专门为技术文档而优化的默认主题.

# VuePress背后的工作机制

事实上,一个开发阶段的VuePress站点是一个由Vue、Vue Router、Webpack共同驱动的单页应用,如果你熟悉用Vue-cli脚手架开发web前端应用,你会觉得这并无二样,甚至你仍然可以用Vue DevTools去调试你的自定义VuePress主题.在主题开发过程中这会给我们带来极大的方便--比如计算属性routes。当构建发布站点时,VuePress会创建一个服务端渲染(ssr)版本,类似Nuxt,生成所有对应的HTML页面。

# 创建VuePress主题所需的工具和准备工作

# 主题源码下载


# 开启VuePress主题开发之旅


  • 🐻 常用术语
  • 🐰 主题介绍
  • 🐑 主题目录结构
  • 🐘 模板文件和布局
  • 🐹 Home模板
  • 🐸 NavBar导航模板
  • 🐳 SideBar模板
  • 🦈 Archive文章归档页
  • 🐄 Category分类页
  • 🐲 Tag标签页
  • 🦄 Post文章详情页
  • 🐢 Toc文章目录组件
  • 🐌 FriendLink友情链接页
  • 🦅 内置搜索
  • 🐨 主题继承和插件
  • 🐙 主题插件开发--悬浮球菜单
  • 🐠 响应式主题
  • 🦇 主题暗黑模式
  • 🐬 主题优化篇

Buy me a cup of coffee ☕.