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

如何将展开/折叠添加到mkdocs材质主题右栏?

展开/折叠功能是一种常见的需求,可以帮助用户更好地组织和浏览文档内容。在mkdocs材质主题中,你可以通过以下步骤将展开/折叠功能添加到右栏:

  1. 确保你已经安装了mkdocs和材质主题。如果没有安装,可以通过以下命令进行安装:
  2. 确保你已经安装了mkdocs和材质主题。如果没有安装,可以通过以下命令进行安装:
  3. 在你的项目目录中,创建一个docs文件夹(如果还没有),并在其中创建一个custom文件夹。
  4. custom文件夹中创建一个名为custom.js的JavaScript文件,并在其中添加以下代码:
  5. custom文件夹中创建一个名为custom.js的JavaScript文件,并在其中添加以下代码:
  6. 在你的mkdocs.yml配置文件中添加以下内容:
  7. 在你的mkdocs.yml配置文件中添加以下内容:
  8. 重新生成你的文档网站:
  9. 重新生成你的文档网站:
  10. 运行你的文档网站:
  11. 运行你的文档网站:

现在,你的mkdocs材质主题右栏应该具有展开/折叠功能了。你可以在docs文件夹中的Markdown文件中使用标题和列表来组织你的文档内容,展开/折叠功能将自动应用于标题下的内容。

请注意,以上代码是基于jQuery的,因此在使用之前,请确保你的项目中已经引入了jQuery库。

希望这个解答对你有帮助!如果你还有其他问题,请随时提问。

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

相关·内容

如何使用纯前端控件集 WijmoJS 中的可视化在线设计器

设计器的主菜单默认为全部折叠,并显示为垂直条形图标。单击页面左上角的WijmoJS徽标以展开菜单。...设计表面现在看起来像这样: 要折叠主菜单,请再次单击WijmoJS 徽标,或单击设计图面内部的任何位置(“编辑”工具下方的区域)。...您可以通过单击页面右边缘的箭头来折叠属性/事件侧。 设计表面支持具有顺序布局的多个纯前端控件。...用户可通过打开工具箱并将InputDateTime控件添加到设计图面,单击“编辑”工具上的“上移”按钮以交换两个控件的位置。...单击后退按钮返回FlexChart设置,然后像以前一样展开系列属性。 现在单击“添加项目”链接以将新图表系列添加到集合的末尾。

5.9K20

几款文档框架:Mkdocs、Sphinx、Teadocs、docsify

使用MkDocs 安装 MkDocs pip install mkdocs 创建项目 执行下面命令就在当前目录下,生成一个 testdocs 文件夹,就是创建的文档项目 mkdocs new testdocs...下载主题: pip **install** mkdocs-material mkdocs-windmill mkdocs.yml里添加: theme: name: 'material&apos...代表了在生成的html里默认展开这个菜单,需要注意的是,这不是markdown的语法,这是teadocs的规定,+一定要写在文本的前面,而不是[的前面 markdown模版 你编写的markdown文件可以使用内置的...你可以构建自己的主题文件,只要符合Teadocs的主题规范,具体可以自行参考默认主题。...可以嵌入和折叠代码块、提供组件在终端中的浏览效果等,Dumi 生成的网站很精简,而且封面支持自定义特性的展示,因此也很适合作为项目或产品的官方文档。

1.6K20
  • 【Flutter 专题】52 图解可折叠状态

    顶部状态在日常中是必不可少的,今天和尚尝试一下可折叠状态的使用; 和尚以前在学习滑动冲突时曾用过 Sliver 系列的 Widget,和尚这次尝试用 SliverAppBar...expandedHeight:状态展开高度; flexibleSpace:状态展开 Widget; flexibleSpace: FlexibleSpaceBar( title: Text...}) 和尚主要实现 SliverPersistentHeaderDelegate;需要实现四个方法: build 是页面布局效果,其中 shrikOffset 为滑动距离,直到设置的折叠展开高度...; maxExtent 折叠状态展开的最大高度; minExtent 折叠状态收起的最小高度(pinned=true);当 maxExtent=minExtent 时,状态折叠; shouldRebuild...---- 和尚对折叠状态的认知还不够深入,如有问题请多多指教! 来源:阿策小和尚

    1.4K51

    Visual Studio Code 快捷键 Mac 版

    Option ⌃ == Control ↩ == Return/Enter ⌫ == Delete ⌦ == 向前删除键(Fn+Delete) ↑ == 上箭头 ↓ == 下箭头 ← == 左箭头 → == 箭头...⇞ == Page Up(Fn+↑) ⇟ == Page Down(Fn+↓) Home == Fn + ← End == Fn + → ⇥ == 制表符(Tab键) ⇤ == 左制表符(Shift.../展开区域 ⌘K ⌘[ / ⌘K ⌘] 折叠/展开所有子区域 ⌘K ⌘0 / ⌘K ⌘J 折叠/展开所有区域 ⌘K ⌘C 添加行注释 ⌘K ⌘U 删除行注释 ⌘/ 切换行注释 ⇧⌥A 切换块注释 ⌥Z...向上一页 ⇧⌥⌘PgDown 列(框)选择 向下一页 搜索和替换 Mac 快捷键 介绍 ⌘F 查找 ⌥⌘F 替换 ⌘G / ⇧⌘G 查找下一个/上一个 ⌥Enter 选择查找匹配的所有匹配项 ⌘D 将选择添加到下一个查找匹配...复制活动文件的路径 ⌘K R 在资源管理器中显示活动文件 ⌘K O 在新窗口/实例中显示活动文件 显示 Mac 快捷键 介绍 ⌃⌘F 切换全屏 ⌥⌘1 切换编辑器布局 ⌘= / ⇧⌘- 放大/缩小 ⌘B 切换侧可见性

    1.6K31

    Visual Studio Code快捷键

    Shift ⇪ Caps Lock ⌥ Option ⌃ Control ↩ Return/Enter ⌫ Delete ⌦ 向前删除键(Fn+Delete) ↑ 上箭头 ↓ 下箭头 ← 左箭头 → 箭头...⇞ Page Up(Fn+↑) ⇟ Page Down(Fn+↓) Home Fn + ← End Fn + → ⇥ 制表符(Tab键) ⇤ 左制表符(Shift+Tab) ⎋ Escape (Esc.../展开区域 ⌘K ⌘[ / ⌘K ⌘] 折叠/展开所有子区域 ⌘K ⌘0 / ⌘K ⌘J 折叠/展开所有区域 ⌘K ⌘C 添加行注释 ⌘K ⌘U 删除行注释 ⌘/ 切换行注释 ⇧⌥A 切换块注释 ⌥Z...⇧⌥⌘PgDown 列(框)选择 向下一页 搜索和替换 Mac 快捷键 说明 ⌘F 查找 ⌥⌘F 替换 ⌘G / ⇧⌘G 查找下一个/上一个 ⌥Enter 选择查找匹配的所有匹配项 ⌘D 将选择添加到下一个查找匹配...复制活动文件的路径 ⌘K R 在资源管理器中显示活动文件 ⌘K O 在新窗口/实例中显示活动文件 显示 Mac 快捷键 说明 ⌃⌘F 切换全屏 ⌥⌘1 切换编辑器布局 ⌘= / ⇧⌘- 放大/缩小 ⌘B 切换侧可见性

    8.7K20

    如何使用Fluent Design System (上)

    或者参考开发人员官网,这里详细介绍了FDS的五大核心主题(Material(材质)、Light(光照)、Depth(深度)、Motion(动态)和 Scale(伸缩性))相关功能及使用规范。...2.1 Material 材质是FDS最好玩的主题,以往主推的Metro强调去材质化,现在又重新提把材质捡回来。...不过目前FDS中材质的应用场景有明确规定,并不是和以前材质化泛滥时一样连所有按钮都材质化。从材质的回归可以看出UWP的承载主体已经从屏幕延伸到MR。 Acrylic是目前FDS主打的材质。...在Fall Creators Update中升级应用 在Fall Creators Update中只需要修改导航及标题,应用的UI即可有大幅提升。 ?...NavigationView是Fall Creators Update提供的新导航菜单,它应用了FDS最常用的两个特效:Acrylic和Reveal,可以折叠及最小化,使用简单: <NavigationView

    2.4K30

    玩转Github —— Octotree Chrome插件

    01 唤起目录 修改个性主题 调整展示布局 Chrome应用店搜索Octotree: 可以看到用户量还是很多的,安装好后,随便打开一个Github项目,比如我们的老伙伴——Blog.Core,就可以看到布局了...,可以调整到右侧,然后修改下图片的样式,也可以修改主题(本文都是登录状态的展示效果,也就是我们对它进行了授权后的效果,功能稍微多了些,这个看你具体的需求了): 最终的展示效果是这样的: 有没有很方便...除了文件,整个项目也可以进行标记,如果有一天你看到了一个不错的项目,又不想Star或者Fork,又怕以后找不到,就可以点击左上角的书签图标,添加到标签里: 然后就可以在工具里找到具体的项目了。...03 快速搜索 精准定位 Shift+S事件 在之前,如果你想在任意一个项目中,寻找一个文件,需要用官方的Go to file功能,还不是很好用,来看看Octotree插件的功能: 可以点击工具的放大镜图标...04 查看PR信息 展开折叠 查看更新详情 不仅是文件目录,如果有好心人提交了PR,也可以快速查看和定位PR的详情,如果提交的文件过多,也可以进行一键折叠展开: 05 查看源文件 更多精彩 有时候我们会遇到一个文件

    63910

    七个帮助你处理Web页面层布局的jQuery插件

    1.UI.Layout  jQuery UI布局插件 官方网站:http://layout.jquery-dev.com/index.cfm 使用大小可折叠的嵌套面板和大量选项创建高级UI布局。...布局可以创建任何你想要的UI外观; 从简单的标题或侧边到具有工具,菜单,帮助面板,状态,子表单等的复杂应用程序。集成并增强其他UI小部件,如选项卡,手风琴和对话框,以创建丰富的界面。 ?...jLayout库允许您专注于绘制各个组件,而不是如何将其排列在屏幕上。 GitHub:https://github.com/bramstein/jlayout/ ?...jQuery展开左右侧栏目插件PageSlide,pageslide插件功能实现现实隐藏侧边的功能。...Columnizer会将CSS类添加到它创建的列中。每列将有一个“列”类名。第一列将有“第一”,最后一列将有“最后”。这使您可以更轻松地定位CSS标记中的特定列。

    9.4K20

    CollapsingToolbarLayout使用

    CollapsingToolbarLayout 可以看到,Toolbar的标题放大并在下方显示,当我们向上滑动列表时,顶部Header部分的图片向上折叠隐藏,标题向上移动并缩小,同时以渐显式的方式显示蓝色主题...关于CollapsingToolbarLayout的属性在官网上可以查到,这里我只介绍案例中我们常用的几个属性:title标题,布局展开时放大显示在图片底部,布局折叠时缩小显示在Toolbar左侧。...注意,没有设置这个属性时,默认使用Toolbar的标题;statusBarScrim顶部视图折叠状态下,状态的遮罩色。通常这样设置:app:statusBarScrim="?...attr/colorPrimaryDark",即style样式中定义的沉浸式状态颜色。...attr/colorPrimary",即显示为Toolbar颜色,应用的主题色;layout_collapseMode折叠模式,设置其他控件滚动时自身的交互行为,有两种取值:parallax,折叠视差效果

    2.5K60

    【收藏】100 个 PyCharm For Mac 快捷键

    PageDown 跳转至当前屏幕页首 / 页尾 command+[] 跳转至代码块首 / 尾 command+Q Quit, 退出 PyCharm command+Z 撤回修改 command++/- 展开折叠代码...+F4 开启代码独立窗口 shift+Tab 反缩进 shift+Backspace 删除整行 Ctrl + ctrl+N 新建文件 ctrl+H Hierarchy 查看继承关系 ctrl+~ 切换主题...运行 ctrl+D Debug 调试 Alt + Alt+Enter 快速 Import 缺失的包, 单双引号转换, 测试正则表达式 Alt+F7 查看变量等使用情况 Alt+Home 进入顶部文件导航...同步 Workspace command+Alt+←/→ 跳转至上一次 / 下一次编辑的地方 command+Alt+J 用 Live Template 包围代码 command+Alt+A Add 添加到...展开收回代码块 command++/- 展开折叠代码 command+shift++/- 展开 / 折叠所有代码 command+shift+8 启用列选择模式 command+Alt+J 用 Live

    7K11

    原 Intellij idea2017编辑

    区域 左边提供了关于你代码的辅助信息,并展示识别出的各种各样的图标(代码结构,断点,书签,指示器,变动人,代码折叠)。当然你可以从左侧边改变其行为。...如果你按住alt来操作,会递归的展开折叠代码片段。 选择Code | Folding后,在子单中你能看到关于折叠的选项以及快捷键 -对于折叠的代码片段,点击 ? 即可展开。...折叠菜单命令 可以通过Code | Folding调出折叠菜单命令 命令 快捷键 描述 展开 ctrl+ + 展开当前代码块 折叠 ctrl+ - 折叠当前代码块 递归展开 ctrl+alt+ + 递归展开当前代码块...递归折叠 ctrl+alt+ - 递归折叠当前代码块 展开全部 ctrl+shift+ + 展开全部当前代码块 折叠全部 ctrl+shift+ - 折叠全部当前代码块 展开等级 ctrl+* 和1,2,3,4,5...展开等级(数字代表展开的层级,比如有两层折叠,如果按1则只展开最外一层,2则展开2层)当前代码块 折叠等级 ctrl+shift+* 和1,2,3,4,5 折叠等级(数字代表折叠的层级,如果按1则只折叠最外一层

    2.8K60

    三星Galaxy Z Fold4新品快闪店,解锁至臻科技体验!

    随着三星第四代Galaxy折叠屏新品在国内的正式发布,折叠屏手机无疑又掀起了新一波关注热潮,越发成为当下年轻人种草首选。...与此同时,三星全新打造的Galaxy折叠屏新品快闪体验店北京三里屯通盈中心店与蓝色港湾店已正式开业,拉开解锁标杆级折叠屏体验大幕!...产品的外屏和背板均配备Corning® Gorilla® Glass Victus®+玻璃,边框和铰链盖采用“装甲铝”材质,让耐用性持续增强。...凭借全新的任务布局、新增的手势快捷分屏等,还进一步展现了折叠屏移动办公的高效与便捷,再度升级生产力体验。还通过双击分屏书写、文本提取等实用功能,可尽情发挥灵感与创造力。...展开机身,三星Galaxy Z Fold4的7.6英寸主屏幕支持1-120Hz自适应刷新率,UDC屏下摄像头区域的像素排列也进行了升级,摄像头隐蔽性更好。

    40840

    Swift封装-滑出式导航

    效果图.gif 前言: 本文将会创建以下几个主类: DWContainerViewController:这包含了左视图,中视图和视图控制器的视图,并处理动画和滑动等操作。...bothCollapsed //侧容器折叠 case leftPanelExpanded //左容器展开 case rightPanelExpanded //容器展开 }...view.removeFromSuperview() self.leftViewController = nil }) } } //检查是否被告知展开折叠侧面板...如果它应该展开,那么它将设置当前状态以指示左侧面板展开,然后为中央面板设置动画,以便打开。否则,它将关闭中央面板,然后移除其视图,并设置当前状态以指示其关闭。...centerNavigationController.view.layer.shadowOpacity = 0.0 } } } 添加手势,更改DWCenterViewController的导航x

    2.3K80

    Android开发笔记(一百三十五)应用布局AppBarLayout

    2、AppBarLayout内部的高度也可能变化,比如它嵌套了可折叠工具布局CollapsingToolbarLayout,有关可折叠工具布局的详细介绍参见《Android开发笔记(一百三十六)可折叠工具布局...所以本文只做下面三个标志的概念解释,有关的效果图参见《Android开发笔记(一百三十六)可折叠工具布局CollapsingToolbarLayout》。...3、exitUntilCollapsed : 该标志保证页面上至少能看到最小化的工具,不会完全看不到工具。具体的滚动说明如下所示: 向上滚动:头部先往上收缩,一直滚到折叠的最小高度。...然后头部向下展开。 4、enterAlwaysCollapsed:该标志一般跟enterAlways一起使用,它与enterAlways区别在于有折叠操作,而单独的enterAlways没有折叠。...然后主体向下滚动,滚到位后头部继续向下展开。 5、snap : 在用户手指松开时,系统自行判断,接下来是全部向上滚到顶,还是全部向下展开

    2K40

    xman的思维导图快捷键_macz技巧分享:思维导图XMind快捷键汇总「建议收藏」

    可以在菜单【文件】 2....插入XMind: ZEN 支持添加丰富的主题元素,你可以添加标记、标签、超链接、附件、主题链接、笔记等丰富的主题元素来表达复杂的逻辑层次和丰富的想法。 二、插入 1....折叠/展开主题 快捷键:Command ⌘ + / (Mac)、Ctrl + / (Win) 用法:选中主题后键入 说明:折叠/展开主题功能可以用于思维展示也可以用于导图记忆。...在记忆导图内容时,将主题折叠起来,对自己进行提问,得出答案后再将内容进行展开。可以用回想的方式来加强你的记忆。...自定义快捷键 除了已有的快捷键外,XMind: ZEN 还支持快捷键的自定义,在菜单【XMind: ZEN】” /> 你可以对已有的快捷键进行自定义,也可以为插入本地图片、标签、标注等功能进行快捷键的自定义

    1.1K10

    一款拥有漂亮外表的Typecho简洁主题-Scarfskin

    另一个原因是这款主题我过于借鉴Mirages主题,出于对作者的尊重,我甚至考虑好久是否要将她发布出来,但其实这款主题仅仅是首页风格较似Mirages,而且其功能差其很远,所以我决定将她免费发布。...介绍 Scarfskin汉译为外皮,如你所见,这是一款拥有漂亮外表的主题,没有繁杂的侧,更没有不知所措的功能(已停止更新增加功能),就是直接而又漂亮的外表和纯粹的文章展示。...导航分类和页面的合并显示与折叠显示 内置编辑器文字统计等小功能 ......更新 Scarfskin主题更新记录 2022-4-23 修改短代码显示以及增加代码复制按钮。 2022-4-22 增加导航搜索框,增加打赏功能,修改赞赏按钮显示。...2022-4-21 更新导航分类和页面可折叠展开显示,优化一些小细节。 2022-4-20 修复网站背景色有出入问题,增加文章归档列表展开功能,优化手机端文章宽度,优化文章内页标题显示。

    2.3K31

    XMind快捷键汇总

    可以在菜单【文件】<【文件缓存】中找找自动备份的 XMind 文件。 2....插入XMind: ZEN 支持添加丰富的主题元素,你可以添加标记、标签、超链接、附件、主题链接、笔记等丰富的主题元素来表达复杂的逻辑层次和丰富的想法。 1....折叠/展开主题 快捷键:Command ⌘ + / (Mac)、Ctrl + / (Win) 用法:选中主题后键入 说明:折叠/展开主题功能可以用于思维展示也可以用于导图记忆。...在记忆导图内容时,将主题折叠起来,对自己进行提问,得出答案后再将内容进行展开。可以用回想的方式来加强你的记忆。...自定义快捷键 除了已有的快捷键外,XMind: ZEN 还支持快捷键的自定义,在菜单【XMind: ZEN】<【首选项】<【快捷键】中可以进行更改。

    2.4K20

    【Unity3D】使用 FBX 格式的外部模型 ( 向 Unity 中添加 FBX 模型 | 向 Scene 场景中添加 FBX 模型 | 3D 物体渲染 | 3D 物体材质设置 )

    文章目录 一、向 Unity 中添加 FBX 模型 二、向 Scene 场景中添加 FBX 模型 三、3D 物体渲染 四、3D 物体材质设置 一、向 Unity 中添加 FBX 模型 ---- Unity...下面是缩小到最小的状态 ; 在 Project 窗口选中模型 , 在右侧的 Inspector 检查器窗口 中可以查看该模型的属性 , 以及在下方可以预览该模型 ; 下方的预览窗口可能是隐藏的 , 可以点一下顶部展开该预览窗口...Scene 场景中添加 FBX 模型 ---- 使用鼠标左键按住 Project 文件窗口 中的 FBX 模型 , 可以将模型拖动到 Hierarchy 层级窗口 或 Scene 场景窗口 , 就可以将该模型添加到...渲染物体时背面不进行渲染 ; 游戏玩家观察物体 , 一般不从内部观察 , 只观察物体的外表面 , 因此背面不需要渲染 , 这样可以最大限度节约 GPU 设备性能 ; 在 Unity 编辑器 中 选择 " 菜单...---- Unity 为 新建的 3D 物体 都会设置一个 默认材质 Default-Material , 这是 Unity 的自带材质资源 , 其本质是默认白色材质 ; 在 Inspector 检查器窗口

    8.1K20
    领券