图文

Halo 主题导航栏设置

Halo 主题导航栏设置正文示意图 2
文章目录7 节

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

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

Halo 主题导航栏设置正文示意图 1

标题

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

Halo 主题导航栏设置正文示意图 2

主菜单

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

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

Halo 主题导航栏设置正文示意图 3

Halo 主题导航栏设置正文示意图 4

标题左侧相关链接

Halo 主题导航栏设置正文示意图 5

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

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

Halo 主题导航栏设置正文示意图 6

Halo 主题导航栏设置正文示意图 7

Halo 主题导航栏设置正文示意图 8

如何取消左上角导航

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

导航栏图标

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

主题图标配置

图标地址

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

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

Halo 主题导航栏设置正文示意图 9

使用方式

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

Halo 主题导航栏设置正文示意图 10

自定义导航栏图标

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

打开原图

订阅更新,继续阅读新的实践记录

最近发布

评论

隐私提示

昵称、网址和评论内容会公开显示,邮箱不公开。请勿在评论中填写敏感信息。