语雀当 VuePress 遇上 “语雀”

原因

我是ULIVZ，一个前端，在社区里认识我的人可能都知道，在过去的一年里，我的大部分业余时间都用来维护和开发VuePress项目。后来离开以前的公司加入蚂蚁的时候，遇到了“语言鸟”。从那天开始，我就在想，他们能不能结合起来，解决一些场景中的实际问题。

去年9月，我开始了Vue Press 1的开发。x .带着对这个项目的热爱和来自社区的反馈，我添加了很多有趣的特性，其中最值得注意的就是Plugin API。

今天我向你们介绍的是一个虚拟抑郁插件:

https://github.com/ulivz/vuepress-plugin-yuque

这个插件做的很简单——就是给vupress用户提供一键把一个bird Repo转换成vupress文档站点的能力。

哦，对了，这个项目的文档:

https://vuepress-plugin-yuque.ulivz.com

也是这个项目生成的~

痛点

作为一个新的车轮，我们必须重视它所解决的实际问题。

语言鸟解决了人们在线撰写、存储、整理、分享文档的痛点，而VuePress则专注于开发者快速建立文档网站的需求。当两者结合时:

对于语雀用户，你将能够轻松地将一个语雀仓库发布为 VuePress 站点，并部署到任何静态服务器上；对于 VuePress 用户，由于语雀强大的可视化文档编辑器和在线存储能力，你将无须将 markdown、 assets 存储于本地，也无须再书写 markdown 文件；同时，语雀的可视化目录编排已经做到了让你不用再关注目录的配置，这个强大的特性，完全可以让 VuePress 用户也收益。案例

以下视频介绍了一个实际的转换案例:

一键转换案例

总结以上视频中的要点:

输入：一个语雀 Repo输出：一个包含自动生成的 Homepage、侧边栏的标准 VuePress 站点

你可以在这里找到上面例子的代码(Site/language bird/源码)。

快速开始

话虽如此，还是付诸实践吧。

下述教程假设你已经拥有语雀账号，并创建好了语雀仓库。

通过运行以下命令创建新项目:

mkdirmy-站点&。& ampcdmy-siteyarninit-yyanarnadvupress @ nextvupress-plugin-yuque-D

然后，在package.json中添加两个NPM:

{ " s ":{ " dev ":" vu press dev，"，“构建”:“vuepress构建”}

}

然后，创建一个新的配置文件。vu press/config . js for vue press:

模块。exports = { plugins:[' vue press-plugin-yuque '，{//这里可以用自己的语言:' https://www . yuque . com/ant-design/course '，}]]

}

运行纱线开发，您将获得:

以上标题和deion都是直接从语鸟仓库拉出来的。当然，您也可以通过使用VuePress本身提供的功能来修改它:

the module . exports = { title:' Ant Design实战教程'，deion:' ant design实战教程基于umi '，插件:['vue press-plugin-yuque '，{ repo URL:' https://www . yuque . com/Ant-Design/course '，}]。

是不是清爽了很多: