前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >Halo-Theme-Hao文档:如何设置导航栏?

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

作者头像
程序员小航
发布2023-10-22 17:45:07
5360
发布2023-10-22 17:45:07
举报
文章被收录于专栏:程序员小航

本篇文章会教你如何配置导航栏,最终效果参考如下。 感谢 Lanbin小孙同学 等同学的贡献(语雀参与编辑)。

1标题

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

2主菜单

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

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

3标题左侧相关链接

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

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

4如何取消左上角导航

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

5导航栏图标

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

主题图标配置

图标地址

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

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

使用方式

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

自定义导航栏图标

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

本文参与 腾讯云自媒体同步曝光计划,分享自微信公众号。
原始发表:2023-10-16,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 程序员小航 微信公众号,前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 1标题
  • 2主菜单
  • 3标题左侧相关链接
  • 4如何取消左上角导航
  • 5导航栏图标
    • 主题图标配置
      • 图标地址
      • 使用方式
    • 自定义导航栏图标
    领券
    问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档