本篇文章会教你如何配置
导航栏
,最终效果参考如下。感谢
Lanbin
、小孙同学
等同学的贡献(语雀参与编辑)。
![alt](https://img-blog.csdnimg.cn/img_convert/ab991a602836a0e640c10550b73098c7.png)
1标题
-
进入站点后台 -
点击左侧面板中的 主题
-
点击上方的 导航
-
修改 标题
字段即可
![alt](https://img-blog.csdnimg.cn/img_convert/aa8223900a768a09a4682851fcc72eaf.png)
2主菜单
主菜单即网站导航栏中间部分的菜单
-
进入站点后台 -
点击左侧面板中的 菜单
-
点击 主菜单
-
点击右上角的 新增
-
可以通过拖拽调整缩进,从而创建子菜单 -
填写相应表单即可
![alt](https://img-blog.csdnimg.cn/img_convert/b27b61bb9e912a9aec68df9f88f47c99.png)
![alt](https://img-blog.csdnimg.cn/img_convert/b570f5c69cfdacf159475a4349354c85.png)
3标题左侧相关链接
![alt](https://img-blog.csdnimg.cn/img_convert/7c54ae32cd929aa3ed52ec6d2e740026.png)
-
进入站点后台 -
点击左侧面板中的 菜单
-
新增一个菜单,如 媒体
-
按照自己的需求 新增菜单项
-
点击左侧面板中的 主题
-
点击顶部的 导航
-
将 导航栏左侧相关链接
设置成你刚刚新建的菜单即可
版本>=1.3.2起,顶部菜单理论支持无限级,并且可自由配置菜单的显示方向
![alt](https://img-blog.csdnimg.cn/img_convert/ffd2f2947651bcae515008693a5d6f1a.png)
![alt](https://img-blog.csdnimg.cn/img_convert/9cb896f5f82975e8e769d56367d9afdd.png)
![alt](https://img-blog.csdnimg.cn/img_convert/035befa35706d0e95aaabeaa2e35c153.png)
4如何取消左上角导航
暂时没有办法进行取消,这里与主题无关,如果需要取消,建议创建一个空菜单,然后选择空菜单即可。
5导航栏图标
不仅仅可以对主菜单设置图标,还可以对左上角导航设置,可以参考下面教程进行配置。
主题图标配置
图标地址
https://npm.onmicrosoft.cn/hao-theme-static@1.3.7/icon/demo_index.html
选择 Font class,找到自己喜欢的图标,复制名字即可,注意名字不带.
![alt](https://img-blog.csdnimg.cn/img_convert/7d0f625d0d3f92a5bb7c0b701f0d367d.png)
使用方式
在创建菜单时,可以选择设置图标,图标格式为 haofont xxxxx
,注意前缀为 haofont
![alt](https://img-blog.csdnimg.cn/img_convert/b0dd3b368f19c726709a6bc71e36835b.png)
自定义导航栏图标
自定义导航栏图标:https://www.yuque.com/liuzhihangs/halo-theme-hao/ggo7mvpfssaxfa35
本文由 mdnice 多平台发布