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

本篇文章会教你如何配置导航栏,最终效果参考如下。

感谢 Lanbin小孙同学 等同学的贡献(语雀参与编辑)。

标题

  1. 进入站点后台
  2. 点击左侧面板中的主题
  3. 点击上方的导航
  4. 修改标题字段即可

主菜单

主菜单即网站导航栏中间部分的菜单

  1. 进入站点后台
  2. 点击左侧面板中的菜单
  3. 点击主菜单
  4. 点击右上角的新增
  5. 可以通过拖拽调整缩进,从而创建子菜单
  6. 填写相应表单即可

标题左侧相关链接

  1. 进入站点后台
  2. 点击左侧面板中的菜单
  3. 新增一个菜单,如媒体
  4. 按照自己的需求新增菜单项
  5. 点击左侧面板中的主题
  6. 点击顶部的导航
  7. 导航栏左侧相关链接设置成你刚刚新建的菜单即可

版本>=1.3.2起,顶部菜单理论支持无限级,并且可自由配置菜单的显示方向

如何取消左上角导航

暂时没有办法进行取消,这里与主题无关,如果需要取消,建议创建一个空菜单,然后选择空菜单即可。

导航栏图标

不仅仅可以对主菜单设置图标,还可以对左上角导航设置,可以参考下面教程进行配置。

主题图标配置

图标地址

npm.onmicrosoft.cn/hao-theme-s...

选择 Font class,找到自己喜欢的图标,复制名字即可,注意名字不带.

使用方式

在创建菜单时,可以选择设置图标,图标格式为 haofont xxxxx,注意前缀为 haofont

自定义导航栏图标

自定义导航栏图标www.yuque.com/liuzhihangs...

本文由mdnice多平台发布

相关推荐
间彧几秒前
在DDD架构中,如何设计Domain层与Entity层的关系?
后端
间彧1 分钟前
DTO和VO在实际项目中如何避免重复定义?有哪些自动化转换工具推荐?
后端
间彧1 分钟前
SpringBoot项目各层级的详细作用与区分
后端
00后程序员5 分钟前
Swoole HTTPS 实战,在生产环境部署、性能权衡与排查流程
后端
程序员爱钓鱼17 分钟前
Python编程实战 · 基础入门篇 | 什么是Python
后端·python
Mintopia21 分钟前
⚡当 Next.js 遇上实时通信:Socket.io 与 Pusher 双雄传
前端·后端·全栈
ZhengEnCi22 分钟前
ObjectUtils.isEmpty 完全指南-从入门到精通的 Java 空值判断利器
java·后端
凯哥197022 分钟前
Supabase Edge Functions 开发指南
后端
tangdou36909865524 分钟前
可怕!我的Nodejs系统因为日志打印了Error 对象就崩溃了😱 Node.js System Crashed Because of Logging
前端·javascript·后端
廖广杰25 分钟前
Oauth2.0 授权码模式认证流程
后端