element离线文档是怎么制作的?有没有高手知道,问了一圈没有人知道

element离线文档是怎么制作的?有没有高手知道,问了一圈没有人知道

网上下载的效果

image.png

打开文件以后直接点击index就能访问手册的本地静态界面

image.png

就是一个简单的文件

image.png

有没有高手知道这是怎么做的?

阅读 3.5k
2 个回答

就是正常的 build 后的结果……注意替换掉一些网络路径就好了。


首先 clone 项目:

> git clone https://github.com/ElemeFE/element --depth=1

然后安装依赖(实际上这个项目用的是 yarn,我手头没 yarn 环境,就用 npm 搞一下):

> npm install

再然后看下 package.json,发现有 deploy:build 这么个命令跟 example(就是文档所在目录)有关,那执行一下:

image.png

> npm run deploy:build

在 examples/element-ui 目录下已经能看到构建结果了,我们试着本地启动个 liveServer 跑跑看:

image.png

image.png

完美!

接着我们试试看直接双击打开,通过 file:// 访问,会发现打不开了。原因是页面中引入了一些网络资源,在 file:// 协议下是访问不到的:

image.png

那么我们手动把这些文件下载下来,放到目录底下,然后修改一下路径:

image.png

然后再双击打开看看:

image.png

结束。现在你可以把 examples/element-ui 这个目录下的所有东西打个压缩包发送给别人,解压缩后双击 index.html 就是所谓的“离线”文档了。

P.S. 还有一些网络资源我没更换完整,你自己也可以手动都给改了。

修改下答案:对于完全开源的官方文档楼下大佬说的一样,直接拉源码就对了。对于非开源的,本质上是利用网络资源抓包,把当前网站的所有资源下载下来,肯定是有一些开源的项目可以做到。
也可以使用一些浏览器插件来完成,你可以去插件商城搜索“网页下载”关键字,推荐一个插件:

梦想网页资源下载器

不过很难做到一步到位,大部分你都需要在要下载的页面去执行一下,比如首页、API页面等,最后自己汇总一下整理一下就行了。

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题