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

如何从正面创建侧面导航中的Hugo多级菜单

Hugo是一个流行的静态网站生成器,它使用Go语言编写。通过Hugo,我们可以轻松地创建具有多级菜单的侧边导航。

要从正面创建侧面导航中的Hugo多级菜单,可以按照以下步骤进行操作:

  1. 在Hugo项目中创建一个新的菜单文件。可以在项目的content文件夹下创建一个名为menu.yml的文件。
  2. menu.yml文件中,按照以下格式定义菜单项和子菜单项的层次结构。每个菜单项都应该有一个唯一的标识符(identifier),一个可读的名称(name),以及一个链接(URL)。
  3. menu.yml文件中,按照以下格式定义菜单项和子菜单项的层次结构。每个菜单项都应该有一个唯一的标识符(identifier),一个可读的名称(name),以及一个链接(URL)。
  4. 在上面的示例中,我们创建了一个名为main的菜单,其中包含了两个一级菜单项:Home和About。About菜单项下还有两个二级菜单项:Our Team和History。
  5. 在Hugo的模板文件中,将菜单添加到侧边导航中。可以在适当的位置插入以下代码:
  6. 在Hugo的模板文件中,将菜单添加到侧边导航中。可以在适当的位置插入以下代码:
  7. 上述代码会遍历名为main的菜单,并将菜单项和子菜单项添加到侧边导航中。同时,它还会根据当前页面的URL判断是否需要添加active类,以便高亮显示当前页面所在的菜单项。

通过以上步骤,我们就可以在Hugo项目中创建一个具有多级菜单的侧边导航。根据实际需求,可以根据菜单项的数量和层次结构进行调整和扩展。

腾讯云相关产品和产品介绍链接地址:

请注意,以上仅为腾讯云的一些相关产品,其他云计算品牌商也提供类似的产品和服务。

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

相关·内容

玩转开源 |Hugo 使用实践

在上一篇博文中已经介绍了 Hugo 基本搭建步骤,那如何使用 Hugo 搭建符合自己需求主题页面?不妨还是以 Hugo-book主题作为 基础,一起探索如何将它塑造成我们需要网页。...因此,实际场景上往往需要针对网站内容对导航进行定制,以确保用户能轻松地找到他们感兴趣信息,并以最简单直观方式进行导航和浏览。 Hugo 中提供了方便导航自定义功能。...用户可以自主添加、编辑和删除导航菜单项,调整它们顺序和层级关系,以最适合网站内容和用户浏览习惯方式呈现导航。...Hugo-book 主题中多列布局示例: {{ }} ### 数组索引(Index) 索引是用于标识数组特定元素位置数字。通常0开始,依次递增。...在创建数组时,通常会定义其长度。

66321

Halo-Theme-Hao文档:如何设置导航栏?

本篇文章会教你如何配置导航栏,最终效果参考如下。 感谢 Lanbin、小孙同学 等同学贡献(语雀参与编辑)。...1标题 进入站点后台 点击左侧面主题 点击上方导航 修改标题字段即可 2主菜单菜单即网站导航栏中间部分菜单 进入站点后台 点击左侧面板中的菜单 点击主菜单 点击右上角新增 可以通过拖拽调整缩进...,从而创建菜单 填写相应表单即可 3标题左侧相关链接 进入站点后台 点击左侧面板中的菜单 新增一个菜单,如媒体 按照自己需求新增菜单项 点击左侧面主题 点击顶部导航导航栏左侧相关链接设置成你刚刚新建菜单即可...版本>=1.3.2起,顶部菜单理论支持无限级,并且可自由配置菜单显示方向 4如何取消左上角导航 暂时没有办法进行取消,这里与主题无关,如果需要取消,建议创建一个空菜单,然后选择空菜单即可。...使用方式 在创建菜单时,可以选择设置图标,图标格式为 haofont xxxxx,注意前缀为 haofont 自定义导航栏图标 自定义导航栏图标:https://www.yuque.com/liuzhihangs

47830

Material Design — Navigation drawerStandard drawer Modal drawer Bottom drawer

推荐将 Navigation drawer 用于: ·具有五个或更多一级页面的 app ·具有两个或更多级导航层次结构 app ·快速导航不相关目的地 ? 超过5个一级页面时使用 ?...它们通常与 app 内容共面并影响屏幕布局网格。 Standard drawers 可以永久可见或通过点击导航菜单图标打开和关闭。 它们只能用于平板电脑和台式机。...为了点击 bottom app bar 菜单图标后提高可达性,它们屏幕底部打开而不是侧面打开。 ---- 分解 Navigation drawers 包含嵌入在 sheet 内 list。...可以使用 headers 和 dividers 来增强,以组织更长 lists。 ? Sheet Navigation drawer 内容包含在侧面或底部 sheet 。...侧面打开 navigation drawer 被放置在屏幕左侧以用于从左到右阅读顺序,放置在屏幕右侧以用于从右到左阅读顺序。 ?

3.8K40

【怒】PowerBI 报告设计思想 - 导航

纵向单层导航 顾名思义,就是纵向导航。例如: 当然也可以切换为其他颜色主题,如下: 本质来说,横向和纵向并没有大区别,不过在实践,还是有一些注意点,我们给出。...导航选择 虽然选择横向导航和纵向导航是一样,但在实际存在区别如下: 横向导航占据空间更小,文字标题长度相对较短,菜单项相对更少; 纵向导航占据空间更大,文字标题长度相对较长,菜单项相对更多。...多级导航多级菜单导航 多级导航,可以应对不设上限报表页数,完全做到按需定制。这里以下拉菜单方式多级导航来做一个说明。...总结 不管如何导航系统几乎是PowerBI报告中最重要部件,就像是一个引路员,导航结构设计得清晰,那整个报告都变得更加容易解读了。本文中所提到三种导航方法,总有一种适合您。...动态效果: 另外,导航或者叫菜单,还可以实现成更加美化和优化状态,这部分内容,我们在后续文章再专门优化与改进部分进行介绍。 系统化学习,认认真真对待。

2.2K00

波士顿动力公司:机器人实现无障碍慢跑,自行导航上下楼梯

Atlas在去年11月成功做了一次后空翻时,就已成为人们关注焦点。 下面来看一下视频:波士顿动力学机器人打开大门,翻转并穿过不平坦地形。 ?...视频我们可以看到一次倒退,但机器人能在开阔地形上不受限制地运行,并轻松地清除一个小障碍,这实在令人印象深刻。 此外,波士顿动力公司展示了更多关于SpotMini机器人技能。...在今天发布一个新视频,该公司演示了四足机器人如何在办公室和实验室设备周围导航,避开障碍物,甚至可以爬楼梯。...通过相机正面,背面和侧面,SpotMini可以映射一个区域,然后使用该信息在稍后进行导航。机器人在测试前路径上被手动驱动,从而允许它创建空间地图,然后使用摄像机将其自身定位在该地图内。...在下面的视频,可以看到SpotMini走了六分钟路程,在操作员给出了一个指令后,它自动进行了操作。 ?

29450

Hugo 30 分钟搭建静态博客

了解 Hugo 如何使构建网站变得有趣。 你是不是强烈地想搭建博客来将自己对软件框架等探索学习成果分享呢?你是不是面对缺乏指导文档而一团糟项目就有一种想去改变它冲动呢?...现在,如果我说不用花费大把时间去学习 CMS 系统、学习如何创建一个静态网站、更不用操心如何去强化网站以防止它受到黑客攻击问题,你就可以在 30 分钟之内创建一个博客?你信不信?...你已经创建了自己新博客。 5-10 分钟:为博客设置主题 Hugo 你可以自己构建博客主题或者使用网上已经有的一些主题。这里选择 Kiera 主题,因为它简洁漂亮。...如果你没有安装 Git 工具: Github 上下载 hugo .zip 格式文件; 解压该 .zip 文件到你博客主题 theme 路径; 重命名 hugo-kiera-master 为...不过,还少一个重要基础内容:主菜单。快速解决这个问题。

86820

使用 WordPress 导航菜单

WordPress 原来默认导航菜单只能是页面,或者分类,或者两者,如果想自己加入一个自定义链接都需要修改主题,非常不方便,所以一个完全可定制化自定义 WordPress 导航菜单成了所有人需求...而 WordPress 3.0 其中一个非常重要功能是一个全新菜单管理系统,这个系统可以让我们创建包含由日志,页面,分类,标签和其他链接组成完全自定义菜单,并且还支持多级菜单,非常方便和强大,今天就谈谈如果使用...WordPress 导航菜单系统概述 首先我们简单解释下这个导航系统几个概念: 主题位置:就是定义导航菜单在当前主题位置名称,比如你在导航位置定义了一个菜单,名字就叫做导航菜单,那么这里就显示...使用 WordPress 导航菜单 如何激活 WordPress 自带导航菜单 要使用 WordPress 导航菜单功能,首先要给当前主题注册导航菜单,从上面我们知道,我们可以注册一个或者多个导航菜单主题位置...这里我们只注册一个导航菜单主题位置: register_nav_menu( 'nav-menu', '导航菜单'); nav-menu 是这个导航菜单名字,用来在函数定义身份,而“导航菜单”则是名称

1.9K10

成精了!波士顿动力机器人会跑了!机器狗学会上下楼!(视频)

导读:近日,波士顿动力(Boston Dynamics)接连公开两个新视频,分别展示了SpotMini在布满障碍物办公室自由穿行、爬楼梯,Atlas机器人在田野间自由慢跑身姿,其反应之迅速、敏捷令人惊叹...其中一个视频,波士顿动力演示了SpotMini小狗机器人如何通过自动导航在办公室和实验室自由穿行,它能够以非常快速反应速度避开障碍物,甚至会爬楼梯。 ?...根据官方介绍,SpotMini正面、背面和侧面安装有摄像机。在测试之前,机器人先被手动驱动在设置路线上走过一遍,这是为了让机器人自己创建空间地图。...在自主运行期间,SpotMini使用摄像机数据将其自身在空间地图中定位,同时检测并避开障碍物。 ? 更令人赞叹是,SpotMini毫无障碍地走下了楼梯,如真实小狗一般。...这条路线总步行时间只需6分钟。视频开头,操作员按下了“GO”,机器人马上自行启动。视频显示QR码用于衡量效果,而不是导航。 ? 另一个视频展示了波士顿动力最新版Atlas机器人在田野间慢跑。

50210

超详细论文排版秘籍,宜收藏!

很多小伙伴在进行论文排版时,总会遇到各种各样问题,本文就来手把手教大家如何从头开始给自己论文排一个好看版式! 排版思维及页面设置 论文排版顺序和书写顺序不完全相同。...若想要删除标题样式,则可以在【样式】组,鼠标右击想要删除标题样式,在弹出快捷菜单中选择【样式库删除】命令,即可删除标题样式。...在【开始】选项卡,单击【多级列表】图标 ,在下拉列表中选择【定义新多级列表】。...小贴士 因为多级列表是子级继承父级,所以重新添加时,要先添加前面的所有编号, 最后才选择本级别的编号样式。 导航窗格 Word 导航窗格能够帮助用户快速找到每个章节,清晰地看到每个章节分类。...①选中图片/表格/公式,在【引用】选项卡,单击【插入题注】命令, 在弹出【题注】对话框,修改题注名称、创建和选择标签、选择题注位置、设置编号等,如图8所示。

4.4K10

hugo搭建博客笔记

,即安装成功 创建站点 hugo new site Hugo_blog !...在Hugo_blog目录下,终端里,输入一下命令(当然你也可以不用宝塔,直接在终端通过cd指令也行,直接手动创建也是可以hugo new post/some-content.md 站点目录下此时会出现一个...默认情况下,输出内容位于 站点目录/public/ 目录(可以通过-d/--destination参数修改输出位置,或者在配置文件设置publishdir参数) hugo -D 然后,我是有个测试站点...2、在Hugo_Blog目录下创建一个content文件夹,content文件夹下再创建一个post文件夹。post文件夹里才是真正放md文档地方。如果路径放错了,文章显示不出来。...直接创建md文档编写即可,文档里title就是菜单名 5、报错error: failed to transform resource: SCSS Building sites … ERROR 2019

57830

Hexo迁移到Hugo-送漂亮Hugo Theme主题

Hugo上并没有类似一主题,再加上Hexo迁移到Hugo还有好多要修改,所以一直迟迟没有行动。...有菜单,但是不是Hugo菜单功能,灵活性不足。 不支持友情链接。 没有文档归档功能。 GA统计分析不支持。 没有代码高亮。...Hugo本身有菜单支持,扩展性更好,所以我改为基于Hugo原生菜单方式实现,可以无限级扩展、支持菜单排序。...Hexo到HugoHexo到Hugo踩了一些坑,这里主要介绍一些主要。 第一个坑就是URL链接。...在新Hugo系统,我也想这么做,但是Hugopermalink是不能配置html后缀,即可你配置了,也只会生成如下URL/year/month/day/title.html/还是一个目录,无法以

2.1K10

Bootstrap 4.6.0 发布,前端开发框架

v4.6.0 最大变化是官方对开发环境进行了大调整以匹配即将正式发布 v5 版本。...官方表示,目前 v4.x 版本文档改为基于 Hugo 框架提供支持,与之前使用静态站点生成框架 Jekyll 相比,这意味着 v4.x 不再依赖 Ruby,主要版本之间可维护性得到改善,开发速度更快...添加了用于在移动设备上滚动扩展导航栏内容新类.navbar-nav-scroll。 为了改善访问能力,prefers-reduced-motion启用微调器时现在会放慢速度。...v4.x 文档现在建立在 Hugo 框架上,以便于维护和 v5.x 回溯。...Popover 2 更新一些问题,该更新花费时间比预期要长,这会影响项目的下拉菜单,弹出窗口和工具提示。

1.7K20

本周先行者课程--多级下拉菜单回顾

今天要讲二个主题: 多级菜单业务流程和需要分析; 基于React最简单实现。...现在我在白板上,画一下使用多级下拉菜单几种典型方式, 1,顶部,用户登录之后用户权限下拉菜单; 2,左边,例如京东产品列表; 3,底部,仿win开始菜单; 4,nav导航栏; 当然还有更多应用方式...但无论你使用哪个框架,实现思路都是获取JSON数据,使用递归方式,来for循环整个json数据,生成整个dom后,添加到页面 3,哪开始着手写?...那么它“入口”,就是以下二种情况, 1、当页面刷新时,这是京东和页面主导航类型; 2、当用户登录时,这是用户权限类 当这二种情况发生时,菜单会调用getData方法,获取数据。...当你点击菜单时候,实际是在提交或获取新数据。接下来不管是重绘窗口,还是页面跳转,其实都是调用了新页面组件。 例如,你点击了多级菜单某个选项,然后网页某个窗口发生重绘,实际重绘是什么?

1.4K80

【说站】修改WordPress知更鸟导航菜单 分类字体颜色、大小

知更鸟主题导航文字、大小和颜色其实都可以进行自定义,下面就介绍一下如何单独修改导航菜单分类和整体修改导航菜单分类字体、颜色、大小具体方法。...如何单独修改导航菜单字体颜色、大小 首先在WordPress后台,找到外观,选择“菜单”, 我们找到需要单独设置导航分类,点击打开,找到“css类”,在这里输入给这个菜单栏目定义css类。...我们看下效果: 如何整体修改导航菜单字体颜色、大小 上面说单独修改导航菜单稍微复杂一些,如果要整体修改就比较简单。...: 20px;控制字体大小,根据需要进行修改 #site-nav .down-menu li a {     font-weight: bold;     font-size: 20px; } 如果有多级菜单...,只对一级菜单颜色、字体大小进行更改的话按照下面的代码:     #site-nav .down-menu a {         font-weight: bold;         font-size

2K30

【摸鱼神器】一次搞定 vue3 路由 + 菜单 + tabs

做一个管理后台,首先要设置路由,然后配置菜单(有时候还需要导航),再来一个动态tabs,最后加上权限判断。 这个是不是有点繁琐?尤其是路由设置和菜单配置,是不是很雷同?那么能不能简单一点呢?...home:默认显示组件,比如大屏。 menus:路由、菜单集合。 naviId:导航ID。 menuId:相当于路由 name。 path:相当于 路由 path。...菜单多级,url 也是多级菜单对应,但是路由是单级,不嵌套。 也就是说,点击任意一级(树叶)菜单,加载都是同级组件。 另外暂时不考虑加载组件后路由设置。.../views/xxx.vue') // 要加载组件,可以不设置 * * * childrens: [ // 子菜单,可以多级 * * * * { * * * * * menuId: '菜单...this.menus = reactive(info.menus) // 菜单集合,数组形式,支持多级,可以设置导航ID this.menuList = {} // 变成单层树,便于用key查找

4.4K32
领券