js预览本地word文档_有了docsify神器，从此爱上看文档

js预览本地word⽂档_有了docsify神器，从此爱上看⽂档

锡渣分离机简介

⼀个神奇的⽂档⽹站⽣成⼯具

我们在做完项⽬的时候经常会写⼀些项⽬⼿册，来记录我们在项⽬开发过程中的⼀些开发流程、使⽤⽅式以及注意事项，分享给将会使⽤到这个项⽬的⼈，⽅便⼤家快速上⼿，让程序顺利运⾏。

高频预热机⽬前⽐较好的⽅式就是写成Markdown格式的技术⽂档，⽅便我们发布在github上，同时也可以发布到博客分享平台。除此之外我们还可以借助docsify这个⼯具，来帮助我们快速的搭建⼀个⼩型的⽂档⽹站，它可以⾃动将我们写在Markdown中的标题⽣成⽬录，整个页⾯的配⾊和布局也⼗分舒适易读，让整个阅读体验提升了好⼏个level，有了docsify这个神器，再也不害怕看长长的技术⽂档了。

docsify 是⼀个动态⽣成⽂档⽹站的⼯具。不同于 GitBook、Hexo 的地⽅是它不会将 .md 转成 .html ⽂件，所有转换⼯作都是在运⾏时进⾏。这将⾮常实⽤，如果只是需要快速的搭建⼀个⼩型的⽂档⽹站，或者不想因为⽣成的⼀堆 .html ⽂件“污染” commit 记录，只需要创建⼀个 index.html 就可以开始写⽂档⽽且直接部署在GitHub Pages。

先看⼀些使⽤docsify⽣成的技术⽂档：

Markdown Preview Enhanced

操作系统

Awesome Mac

它的docsify中⽂官⽅⽂档就是利⽤docsify⽣成的，展⽰效果⼀⽬了然。

特性

⽆需构建，写完⽂档直接发布

容易使⽤并且轻量 (~19kB gzipped)

智能的全⽂搜索

提供多套主题

丰富的 API

⽀持 Emoji

兼容 IE10+

⽀持 SSR (example)

快速安装

1. 全局安装docsify

npm i docsify-cli -g

安装成功后显⽰paas系统

image

2. 初始化项⽬

docsify init ./docs复合挤塑聚苯板

初始化成功后，可以看到 ./docs ⽬录下创建的⼏个⽂件

index.html ⼊⼝⽂件

README.md 会做为主页内容渲染

.nojekyll ⽤于阻⽌ GitHub Pages 会忽略掉下划线开头的⽂件

直接编辑 docs/README.md 就能更新⽹站内容，当然也可以写多个页⾯。

image

3. 本地预览⽹站

docsify serve docs

image

常⽤配置项

Github Corner

通过设置index.html中window.$docsify的 repo 参数配置仓库地址或者 username/repo 的字符串，会在页⾯右上⾓渲染⼀个 GitHub Corner 挂件，点击即可跳转到Github中对应的项⽬地址。

image

封⾯

通过设置index.html中window.$docsify的 coverpage 参数，即可开启渲染封⾯的功能。

光纤电话机封⾯的⽣成同样是从 markdown ⽂件渲染来的。开启渲染封⾯功能后在⽂档根⽬录创建 _coverpage.md ⽂件，在⽂档中编写需要展⽰在

封⾯的内容。

![logo](/_media/icon.svg)# ⾖瓣影⾳> 使⽤Vue全家桶+Node.js搭建的⼩型全栈项⽬.* 前端框架：vue-cli、vue-router、axios、vuex* UI类库：Min 展⽰效果如图：

image

⽬前的背景是随机⽣成的渐变⾊，我们⾃定义背景⾊或者背景图。可以参考官⽹⽂档封⾯这⼀章节⾃⾏设置。

主题

直接打开 index.html 修改替换 css 地址即可切换主题，官⽅⽬前提供五套主题可供选择，模仿 Vue 和 buble 官⽹订制的主题样式。还有

@liril-net 贡献的⿊⾊风格的主题。

其他主题docsify-themeable⼜提供了三种样式可供选择：

docsify-themeable是⼀个⽤于docsify的，简单到令⼈愉悦的主题系统.

Defaults

image

Simple

image

Simple Dark

image

另外还有⼀种在⽹上看到的样式：

多页⾯

⽬前我创建的⽂档是单页⾯的，上下滚动即可浏览全部内容。如果想创建多个页⾯，即点击左侧侧边栏导航跳转到不同url，就需要配置多级路由，这⼀功能在docsify中也很容易实现，我们需要在index.html⽂件中的window.$docsify中开启loadSidebar选项：

然后在根⽬录创建⾃⼰的_sidebar.md⽂件，配置我们需要显⽰的页⾯。详细操作步骤参考官⽅多页⽂档教程。

注：配置了loadSidebar后就不会⽣成默认的侧边栏了。

unmsg插件

官⽅还提供了⾮常多实⽤的插件，⽐如说全⽂搜索、解析emoji表情、⼀键复制代码等等，完整版请参考官⽅插件列表。Github Pages

和 GitBook ⽣成的⽂档⼀样，我们可以直接把⽂档⽹站部署到 GitHub Pages 或者 VPS 上。

GitHub Pages ⽀持从三个地⽅读取⽂件

docs/ ⽬录

master 分⽀

gh-pages 分⽀

我们推荐直接将⽂档放在 docs/ ⽬录下，到仓库的Settings设置页⾯

image

开启 GitHub Pages 功能并选择 master branch /docs folder 选项。

image

发布成功后会显⽰⽹站地址，通过这个地址即可在线访问你编写的技术⽂档了。

本文发布于:2024-09-25 06:29:03，感谢您对本站的认可！

本文链接：https://www.17tex.com/tex/4/135431.html

上一篇：马长生三维电生理标测与导管导航

下一篇：关于母爱的导航句

标签：主题地址需要渲染创建

留言与评论（共有 0 条评论）