首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

如何在docsify中扩展侧边栏?

在docsify中扩展侧边栏可以通过以下步骤实现:

  1. 配置侧边栏文件:在docsify的根目录下创建一个名为"_sidebar.md"的文件,该文件用于配置侧边栏的内容和结构。
  2. 编辑侧边栏文件:使用Markdown语法编辑"_sidebar.md"文件,按照需要的结构和内容编写侧边栏的链接和标题。可以使用相对路径或绝对路径来指定链接的目标页面。
  3. 配置docsify:在docsify的配置文件(通常是"index.html"或"index.md")中添加配置项,指定侧边栏文件的路径。例如:
代码语言:txt
复制
<script>
  window.$docsify = {
    loadSidebar: true,
    subMaxLevel: 2,
    loadNavbar: true,
    auto2top: true,
    alias: {
      '/.*/_sidebar.md': '/_sidebar.md'
    }
  }
</script>

在上述配置中,loadSidebar设置为true表示启用侧边栏,subMaxLevel指定侧边栏的最大层级,loadNavbar设置为true表示启用导航栏,auto2top设置为true表示每次页面切换时自动滚动到页面顶部。alias用于配置侧边栏文件的路径,这里将所有以"_sidebar.md"结尾的路径映射到根目录下的"_sidebar.md"文件。

  1. 运行docsify:启动docsify服务,访问网站即可看到扩展后的侧边栏。

扩展侧边栏可以帮助用户更好地浏览和导航文档内容,提高文档的可读性和易用性。

推荐的腾讯云相关产品:腾讯云对象存储(COS),腾讯云云服务器(CVM),腾讯云云数据库MySQL版(CDB),腾讯云云原生容器服务(TKE),腾讯云人工智能(AI),腾讯云物联网(IoT),腾讯云移动开发(移动推送、移动分析),腾讯云区块链服务(BCS),腾讯云元宇宙(Tencent XR)。您可以通过腾讯云官方网站了解更多相关产品和详细信息。

腾讯云官方网站:https://cloud.tencent.com/

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

Docsify+腾讯云对象存储 COS,一键搭建云上静态博客

定制侧边 为了获得侧边,您需要创建自己的_sidebar.md。...默认情况下侧边会通过该文件自动生成。 首先配置 loadSidebar 选项,具体配置规则见配置项#loadSidebar。 编辑 index.html 文件: window....-- docs/_sidebar.md --> * [首页](docs/) * [指南](docs/guide) 再刷新线上页面,即可看到侧边。...您可以使用其他工具的快捷键在屏幕里截图,截好的图会自动存在剪辑版。 当您在 COSBrowser 客户端用快捷键 CTRL+V 即可将截图上传到当前目录下。 3、如何在 .md 文档引用图片?.../images/test.png) 4、如何为上传的图片加上 COS 数据处理的一些功能(:水印) 如果是要为图片带上水印,可以直接在绝对路径/相对路径上加上 COS 数据处理的水印参数。

2.1K20

Docsify使用指南(打造最快捷、最轻量级的个人&团队文档)

前言   网上关于动态文档生成工具有很多Docsify、 VuePress、Docute 、Hexo这些都是一些非常优秀的文档生成工具,本章主要介绍如何快速使用Docsify搭建一个快捷、轻量级的个人...文件作用 文件 基础配置项(入口文件) index.html 封面配置文件 _coverpage.md 侧边配置文件 _sidebar.md 导航配置文件 _navbar.md 主页内容渲染文件 README.md...repo: 'https://github.com/YSGStudyHards', // 侧边支持,默认加载的是项目根目录下的_sidebar.md文件...,设置生成目录的最大层级(建议配置为2-4) subMaxLevel: 4, // 小屏设备下合并导航侧边 mergeNavbar...简单、轻便 (压缩后 ~21kB) - 无需生成 html 文件 - 众多主题 [开始使用 Let Go](/README.md) 侧边配置文件(_sidebar.md) Docsify官网配置侧边教程

2.7K10

《DDIA 逐章精读》小册

基本配置 下面是我的 docsify 配置,仅配置了文档名字、仓库、侧边侧边展开深度、文档主题颜色、自动回到顶部: window...., subMaxLevel: 2, themeColor: '#77AAC2', auto2top: true } 值得一提的是侧边,默认会使用 _sidebar.md 作为侧边,但你只需要在文档写各文档标题以及链接即可...: - [序](preface.md) - 第一部分:数据系统基础 * [第一章:可靠、可扩展、可维护](ch01.md) * [第二章:数据模型和查询语言](ch02.md)...章节:chxx.md,每一章具体内容,我使用了前面填 0 的方式命名, ch01.md,这样如果超过 10 章,且不大于 99 章的情况下,单词序即章节序。...其他:_sidebar.md 是侧边,上一节讲了,preface.md 就是序言啦,随便写点,看起来更像一本书:)。 docsify js 资源 使用 docsify init .

75020

答应大家的建站教程!

$docsify = { name: '', repo: '', } name 代表网站内部名称,设置完成之后显示在网站侧边的上部。...$docsify 的常用属性进行详细介绍,并进行演示。 导航 我们通过设置 window.$docsify 的loadNavbar 属性来设置导航。 window....侧边 我们发现上述页面侧边,是根据 md 文件的标题生成,如果我们不想让其根据标题生成,而是通过自定义生成,则可以在指定的 md 文件添加 # {docsify-ignore-all} 并在...具体实现方式如下 侧边 1 侧边 2 侧边 3 此时发现侧边中标题导航已经消失,此时如果想要自定义侧边导航的话,则需要新建 _sidebar.md 并在该文件定义侧边栏内容,具体实现方式如下...侧边 4 侧边 5 侧边 6 此时我们发现,当我们点进好运来时,侧边并没有随着文件的改变而改变,所以搭建网站时,可以根据实际需求,选择根据标题等级自动生成侧边,还是自定义。

1.4K10

作为程序员,谁不想简单快捷地搭建一套属于自己的技术博客网站呢?

docsify serve docs 5、定制化。index.html,相当于项目的配置项,定义功能配置、插件的使用。可以按如下代码设置基本功能,具体运用可以查看官网定制化的配置项说明。 <!...$docsify = { name: '学习园地', // 文档标题,会显示在侧边顶部 repo: 'https://github.com/', // 右上角Github图标链接...loadNavbar: true, // 默认加载 _navbar.md,作为顶部导航 loadSidebar: true, // 默认加载 _sidebar.md,作为侧边...1/components/prism-http.min.js"> 在同级目录新建_navbar.md和_sidebar.md文件用于展示顶部导航侧边...同时在同级目录新建kl文件夹用于存放md内容文档,base.md、use.md文件,改写_sidebar.md内容如下: * Java * [特点](kl/base.md) * [应用](kl

14410

工具安利 | docsify 入坑指南与我放弃 Gitbook 的那些理由

快速开始 安装 初始化 预览 路由说明 导航与侧边配置 导航 侧边 插件 代码高亮 部署到 Github Pages 与 Gitbook 体验对比 leetcode-notebook[1] 的题解越来越多...快速开始 安装 首先全局安装 docsify-cli: npm i docsify-cli -g 初始化 假设我们要在 ./docs 子目录编写文档,将该目录初始化: docsify init ....zh-cn/README.md => http://domain.com/zh-cn/ docs/zh-cn/guide.md => http://domain.com/zh-cn/guide 导航与侧边配置...下创建一个 _navbar.md 文件,在该文件中使用 Markdown 格式书写导航: - 导航 1 - [子导航](nav1/child/ "子导航") - [导航 2](nav2/ "导航2") 侧边...默认情况下,侧边会根据当前文章的标题生成目录。

1.9K30

手把手教你搭建一个文档类型的网站!免费且高速!

/lib/docsify.min.js"> 3.2 添加侧边文件 在第一步,我们在已经开启了侧边选项: loadSidebar: true 但是...,仅仅这样还不行,我们需要定义一个名为 _sidebar.md的文件,文件的内容就是我们侧边的内容。...如下图所示,我们定义了一个侧边,并且为它添加了一些内容: 一般建议将文档放进 docs 文件下面,可以参考我的仓库:https://github.com/Snailclimb/docsify-demo...[i49cp9a161.png] 修改完成之后,你就会发现我们的文档网站多了侧边,你点击侧边对应的内容在右边显示。...zj0xrfi0sm.png] 3.3 修改主页内容 修改 REDME.md,内容如下: [3d689heojr.png] 然后我们的文档网站的主页就变成了这样: [3t0w55agsr.png] 3.4 添加一个封面 第一步

3.6K50

利用 docsify 免费搭建自己的文档类型网站

作为主页内容渲染; .nojekyll : 防止 Github Pages 忽略下划线开头的文件; 本地预览 当我们编辑好文档后,想要在本地预览时,可通过如下命令运行本地服务器,然后在浏览器访问...http://localhost:3000 进行实时预览(其中 3000 端口是 docsify 默认访问端口); docsify serve ./ 项目配置 配置文件 index.html 该文件主要配置了文档网站的名字以及开启一些配置选项...subMaxLevel: 3, homepage: 'README.md', coverpage: true, // 封面 loadSidebar: true, // 侧边...-- 字数统计 --> 侧边...上述配置侧边已经打开,即 loadSidebar: true,此时新建一个 _sidebar.md 文件,在其中加入你所要显示的内容; 封面 上述配置中封面已经打开,即 coverpage: true

2K20

如何用docsify在Github搭建自己的知识文档?

config list就可以看到自己的配置: 还需要增加 D:\nodejs\node_global\node_modules 5.然后如果使用npm安装了东西,但是找不到该命令,则还需要在Path,...把我们node的全局文件夹添加进去环境变量。...这样就可以在本地http://localhost:3000打开了,神奇~(修改内容后保存就可以,不需要重新启动) 美化一下 说实在话,挺丑的,那就美化一下:先加一个封面,需要在`index.html,...摸索之路 > 这是我自己的笔记啊啊啊啊 [CSDN](https://blog.csdn.net/Aphysia) [滚动鼠标](#introduction) 然后它就变成这样了: 我们还需要一个侧边...,再将侧边属性打开: loadSidebar: true 然后新建一个侧边的文件_sidebar.md: - Note - [第一章节](第一章节.md) - [第二章节](第二章节.md

78810
领券