当前位置: 首页>后端>正文

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

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

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

Halo-Theme-Hao文档:如何设置导航栏?,第1张

标题

  1. 进入站点后台
  2. 点击左侧面板中的主题
  3. 点击上方的导航
  4. 修改标题字段即可
Halo-Theme-Hao文档:如何设置导航栏?,第2张

主菜单

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

  1. 进入站点后台
  2. 点击左侧面板中的菜单
  3. 点击主菜单
  4. 点击右上角的新增
  5. 可以通过拖拽调整缩进,从而创建子菜单
  6. 填写相应表单即可
Halo-Theme-Hao文档:如何设置导航栏?,第3张
Halo-Theme-Hao文档:如何设置导航栏?,第4张

标题左侧相关链接

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

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

Halo-Theme-Hao文档:如何设置导航栏?,第6张
Halo-Theme-Hao文档:如何设置导航栏?,第7张
Halo-Theme-Hao文档:如何设置导航栏?,第8张

如何取消左上角导航

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

导航栏图标

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

主题图标配置

图标地址

https://npm.onmicrosoft.cn/hao-theme-static@1.3.7/icon/demo_index.html

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

Halo-Theme-Hao文档:如何设置导航栏?,第9张

使用方式

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

Halo-Theme-Hao文档:如何设置导航栏?,第10张

自定义导航栏图标

自定义导航栏图标:https://www.yuque.com/liuzhihangs/halo-theme-hao/ggo7mvpfssaxfa35

本文由mdnice多平台发布


https://www.xamrdz.com/backend/3zg1940561.html

相关文章: