Typecho-handsome主题如何增加侧边导航栏

博主：三百斤的窜天猴
发布时间：2023 年 03 月 02 日
4004 次浏览
8 条评论
1787字数
分类： handsome美化博客优化

**转载自[ThunderWang](https://developer.aliyun.com/article/1114642)**

**简介：** handsome主题在使用的过程中导航栏初始时只有首页一个导航页面，本篇文章主要讲解一下应该如何修改源代码增加多个导航栏并且为其设置子导航

***handsome主题在使用的过程中导航栏初始时只有首页一个导航页面，本篇文章主要讲解一下应该如何修改源代码增加多个导航栏并且为其设置子导航***

---

# 源代码修改位置

在网站根目录中依次按以下路径进入——————“usr/themes/handsome/component”,找到文件aside.php进入

![3b5f597fcd1142fb85a0ff77115fdb0a.png](https://s1.locimg.com/2023/03/02/96ceace3df6fb.png)

找到源代码大约第122行左右，标志性代码为

![cd63cbb4b5914c92a20354a2c11e5493.png](https://s1.locimg.com/2023/03/02/114283e0b9f6b.png)

---

# 代码实现

在上面的注释下方增加以下代码，便可以实现左侧导航的增加了

```
<li>
<a data-no-instant class="auto" href="#">
 
 
 
 
 
 <?php _me("父导航栏名") ?>
</a>
<ul class="nav nav-sub dk">
 <li><a href="#">子导航栏名</a></li>
</ul> 
</li>
```

---

# 代码讲解

## 导航名称和iconfont图标

*如下图所示为父级导航名和子级导航名的代码修改处*

![eda9b9b1b85e4a099f316744a814a7de.png](https://s1.locimg.com/2023/03/02/d0ae4f95887da.png)

*下面是iconfont的代码修改处，其中iconfont处的作用是为父级导航添加图标，具体用法可参考百度*

![f8dcf8161694494b871b914df4d05901.png](https://s1.locimg.com/2023/03/02/42872a4cccee9.png)

*其中，具体的导航栏效果如下图*

![ec6b5174718a4709804e758153902692.png](https://s1.locimg.com/2023/03/02/671311abee9df.png)

*红色框内的为上述代码对应的父级导航名称，橙色框内对应的是子级导航名称，黄色框内对应的是iconfont图标，其中iconfont图标的颜色是可以修改的，修改代码块如下图所示，更改相应的颜色代码即可改变iconfont图标的颜色*

![0d7d179fab3346889ad99a1347ecee54.png](https://s1.locimg.com/2023/03/02/c4dafc9ef71df.png)

## 超链接

*如下图所示修改下面两个框中的代码即可令导航链接到相应页面，其中最上面的框中对应父级导航的超链接，下面框中对应子级导航的超链接*

![4d2703f16aa64f8c81be548082b63b3e.png](https://s1.locimg.com/2023/03/02/69071b8a0629f.png)

---

## 多级子导航

*假若为一个父级导航增加多个子级导航，则需要多少个子级导航复制以下橙色框中代码多少次并粘贴到下图箭头处*

![839613dd02eb455798de92dc2931540a.png](https://s1.locimg.com/2023/03/02/11bc78373e395.png)

不过目前主题已经支持侧边栏导航和子导航了，修改调整就行，想调整图标的话可以看这里

# [Typecho-handsome主题引入阿里矢量图标库自定义左侧导航栏图标](https://esxdidi.com/beautify/92.html)

最后修改：2023 年 03 月 02 日

如果觉得我的文章对你有用，请随意赞赏

发表评论取消回复
使用cookie技术保留您的个人信息以便您下次快速评论，继续评论表示您已同意该条款

评论 * （请使用真实邮箱地址，方便及时接收评论回复！）

打卡

私密评论

名称 *

🎲

邮箱 *

地址

8 条评论

🛠️ | Handsome主题修改 - Yunmeng's Blog
March 10th, 2024 at 09:05 am

[...]摘要： handsome v9 主题修改和美化。左侧边栏优化小角落-Handsome主题左边栏美化二师兄-Typecho-handsome主题如何增加侧边导航栏开发者设置猫不吃鱼 - Handsome主题美化记录自定义CSS文章页标题居中文章页标题居中[...]

回复
KaelvihN
August 9th, 2023 at 06:17 am

大佬，请问一下你这个笔记，日记栏是怎么写的，我弄的成功显示了，但是我去点击的时候他会重新刷新整个网站导致我的播放器重置( ง ᵒ̌皿ᵒ̌)ง⁼³₌₃

回复
1. KaelvihN
  August 9th, 2023 at 06:30 am
  
  @KaelvihN
  
  啊没事了⌇●﹏●⌇我有个地方写错了
  
  回复
  1. 三百斤的窜天猴
    August 9th, 2023 at 09:03 am
    
    @KaelvihN
    
    回复
猫叔
March 7th, 2023 at 09:45 pm

这个头像还一闪一闪的，挺好玩儿

回复
1. 三百斤的窜天猴
  March 7th, 2023 at 09:50 pm
  
  @猫叔
  
  是吧，哈哈哈😁
  
  回复
fairy
March 2nd, 2023 at 10:21 pm

大佬怎么用宝塔啊……

回复
1. 三百斤的窜天猴
  March 3rd, 2023 at 08:42 am
  
  @fairy
  
  😂只会宝塔安装，别的不会，太菜了
  
  回复