当 VuePress 遇上 “语雀”
缘起
我是 ULIVZ,一名前端,社区里了解我的人可能会知道,过去一年,我的大多数业余精力都专注在维护和开发 VuePress 这个项目上。后来,我从前公司离职加入蚂蚁,我就认识了“语雀”。从那一天起,我就在想,他们能否结合起来,解决某些场景的实际问题。
大抵是去年9月份,我开始了 VuePress 1.x 的开发,前前后后,怀着对这个项目的热爱,并结合社区的反馈,加上了很多有意思的特性,其中,最值得一提的应该就是 Plugin API 。
恩,今天我向大家介绍的,就是一个 VuePress Plugin:
https://github.com/ulivz/vuepress-plugin-yuque
这个插件做的事情很简单——就是给 VuePress 用户提供了一键将语雀 Repo 转换为 VuePress 文档站点的能力。
噢,对了,本项目的文档:
https://vuepress-plugin-yuque.ulivz.com
也是用本项目生成的哦~
痛点
一个新轮子,我们必然关注其解决的实际问题。
语雀解决了人们在线编写、存储、整理和分享文档的痛点,而 VuePress 关注的是开发者快速建立文档类网站的需求。当两者结合起来:
- 对于语雀用户,你将能够轻松地将一个语雀仓库发布为 VuePress 站点,并部署到任何静态服务器上;
- 对于 VuePress 用户,由于语雀强大的可视化文档编辑器 和在线存储能力,你将无须将 markdown、 assets 存储于本地,也无须再书写 markdown 文件;同时,语雀的可视化目录编排已经做到了让你不用再关注目录的配置,这个强大的特性,完全可以让 VuePress 用户也收益。
案例
下面的视频介绍了一个实际的转换案例:
一个一键转换的案例
总结一下上述视频中的重点:
- 输入:一个语雀 Repo
- 输出:一个包含自动生成的 Homepage、侧边栏 的标准 VuePress 站点
你可以在这里(Site / 语雀 / 源码)找到上述实例的代码。
快速上手
说了这么多,让我们来实际操作一把。
下述教程假设你已经拥有语雀账号,并创建好了语雀仓库。
通过运行下述指令来新建一个项目:
mkdirmy-site&&cdmy-siteyarninit-yyarnaddvuepress@nextvuepress-plugin-yuque-D
接着,在 package.json 中新增两个 npm :
{"s":{"dev":"vuepress dev .","build":"vuepress build ."}
}
接着,新建 VuePress 的配置文件 .vuepress/config.js :
module.exports={plugins:[['vuepress-plugin-yuque',{// 这里可以使用你自己的语雀 ReporepoUrl:'https://www.yuque.com/ant-design/course',}]]
}
运行 yarn dev,你将能获得:
上述的 title 和 deion 都是从语雀仓库直接拉取的,当然,你也利用 VuePress 原生提供的能力修改它:
module.exports={title:'Ant Design 实战教程',deion:'基于 umi 的 Ant Design 实战教程',plugins:[['vuepress-plugin-yuque',{repoUrl:'https://www.yuque.com/ant-design/course',}]]}
是不是清爽很多了:
点击 Getting Started,你便能到达你的文档主页:
- 左侧:是严格遵循你的语雀目录生成的侧边栏;
- 右侧:是当前页面的内容;
- 右上角:是自带的搜索。
接着,你便能将你的站点部署到任何你想要的站点了。
其他
除此之外,我还为大家准备了下面的教程:
自动部署:https://vuepress-plugin-yuque.ulivz.com/deploy.html
站内跳转:https://vuepress-plugin-yuque.ulivz.com/station-jump.html
使用缓存:https://vuepress-plugin-yuque.ulivz.com/cache.html
私有仓库:https://vuepress-plugin-yuque.ulivz.com/private-repo.html
结语
总的来说,本项目给了 VuePress 用户提供了另一种书写文档的方式,同时,又给语雀用户开辟了一种新的站点生成方式。
作为新年创建的第一个仓库,希望能得到大家的喜欢~ 如果你有任何好的建议和问题,欢迎给本项目提 issue ~ 当然,作为作者最希望看到的,还是它确确实实能够解决某些人的实际问题~