首页
学习
活动
专区
工具
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.3K20

    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官网配置侧边栏教程

    3.3K10

    《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 .

    84120

    docsify的配置+全插件列表

    ------补充一下侧边栏文件_sidebar.md的写法我们新建一个_sidebar.md之后在里面写上文字,都会在侧边以文字的形式展示出来,能正常的解析一些md语法与html的语法(如加粗,指定颜色等...此时侧边栏的会出现docs,并且点击即可查看渲染好的docs.md- [docs](docs/docs.md)如果想要多级目录,请参照底下侧边栏插件的详细用法------以上,index.html文件就是这些内容...-- 侧边栏扩展与折叠 --> docsify-sidebar-collapse/dist/docsify-sidebar-collapse.min.js...文件的排序是根据左侧的侧边栏来的。其中下一章节这几个字也可以进行自定义,变成下一卷、下一页之类的。...但是到了现在,其实侧边栏还没有出现页脚的信息,我们还需要在index.html的body标签里添加然后去_sidebar.md文件里面也添加上一行代码侧边栏插件

    8.1K82

    【如何使用Docsify即时将你的文档转换成一个美观且易用的博客网站】

    传统的静态站点生成器如 GitBook 和 Hexo 虽然功能强大,但在使用过程中往往会遇到一些繁琐的步骤,比如需要生成大量的 HTML 文件、配置复杂的服务器设置等。...接下来,讲解如何在本地部署 Docsify。1....我们只需要配置以下这几个基本文件就可以:文件作用 文件 基础配置项(入口文件)index.html 封面配置文件 _coverpage.md侧边栏配置文件...还有很多配置项可以参考docsify文档中的定制化-配置项—小节,定制的东西越多,维护的难度就越大。...侧边栏、导航栏和封面都建议采用默认的文件渲染:这里举例官网的封面配置文件封面配置文件(_coverpage.md)封面的生成同样是从 markdown 文件渲染来的。

    6100

    Windows系统使用Docsify文档编辑器搭建个人博客并一键发布公网

    前言 本文主要介绍如何在Windows环境本地部署 Docsify 这款以 markdown 为中心的文档编辑器,并即时生成您的文档博客网站,结合cpolar内网穿透还能将博客一键发布至公网允许所有人访问...设计自己的个人博客,修改标题,添加文章内容,并保存 制作一个个人文档,我们只需要配置以下这几个基本文件就可以: 文件作用 文件 基础配置项(入口文件) index.html 封面配置文件 _coverpage.md 侧边栏配置文件..._sidebar.md 导航栏配置文件 _navbar.md 主页内容渲染文件 README.md 浏览器图标 favicon.ico 还有很多配置项可以参考docsify文档中的定制化-配置项—小节...侧边栏、导航栏和封面都建议采用默认的文件渲染: 这里举例官网的封面配置文件 封面配置文件(_coverpage.md) 封面的生成同样是从 markdown 文件渲染来的。...以上就是如何在Windows系统电脑本地使用Docsify搭建一个博客网站,并结合cpolar内网穿透工具实现一键发布公网随时随地远程访问的全部流程。感谢您的观看,有任何问题欢迎留言交流。

    21010

    答应大家的建站教程!

    $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

    38410

    工具安利 | 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") 侧边栏...默认情况下,侧边栏会根据当前文章的标题生成目录。

    2.1K30

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

    /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 添加一个封面 第一步中,

    4.8K50

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

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

    2.1K20
    领券