dosify 初始化项目后的文件如下,后面的配置都在index.html中修改

index.html 入口文件
README.md 会做为主页内容渲染
.nojekyll 用于阻止 GitHub Pages 忽略掉下划线开头的文件

Loading提示

初始化时会显示 Loading... 内容,我们可以自定义提示信息,修改index.html配置如下

<div data-app id="main">加载中</div>
<script>
    window.$docsify = {
      el: '#main'
    }
</script>

封面

官方文档 ,index.html配置

<script>
  window.$docsify = {
    coverpage: true
  }
</script>
<script src="//cdn.jsdelivr.net/npm/docsify/lib/docsify.min.js"></script>

docs目录下创建_coverpage.md文件

这是封面页

d32f8c5acebb245df6b24ab30d348a.png

侧边栏

官方文档 ,index.html配置

<script>
    window.$docsify = {
      loadSidebar: true,
    }
</script>

docs目录下创建_sidebar.md文件

<!-- docs/_sidebar.md -->

* [首页](zh-cn/)
* [指南](zh-cn/guide)

docs目录下创建zh-cn目录,创建guide.md文件

# 测试下
xx

87cc2a2f9538263e6a9be9289cc3d8.png

最佳实践

1、访问github地址https://github.com/docsifyjs/docsify,将里面docs文件夹里面的内容全部覆盖到,本地初始化好的docs下面。

2、访问github地址https://github.com/docsifyjs/docs-zh,将里面的文件全部复制到,本地初始化好的docs下面的zh-cn目录下面。

3、经过上面两个步骤,就把中英文的文档都同步到自己的项目中了,修改docs下的index.html大概第89、90行代码,注释掉。这里的代码是指如果切换中文语音文档时,会访问远程的地址。注释后就会访问本地的zh-cn目录,那么第2步放到zh-cn下的文件就可以正常访问了。

033f79383bdd725d16fe31270d5d49ac.png

4、最终效果如下,除中英文的文档是本地读取,其他都是读取远程文件。如果需要,可以把其他语言的文档也下载下来,地址都在https://github.com/docsifyjs下面,下载后放到对应的目录下,注释对应的代码目录即可。

13b3bc78e607b18cabd8e13748da3f61.png

最后修改:2024 年 10 月 29 日
如果觉得我的文章对你有用,请随意赞赏