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

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

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


源代码修改位置

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

dd6d2c4967bf0c33e66dc85a05df635.png

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

7c5ca8de956b746dce9bd84cd7a7766.png


代码实现

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

<li>
<a data-no-instant class="auto" href="#">
    <span class="pull-right  text-muted">
        <i class="fa icon-fw fa-angle-right text"></i>
        <i class="fa icon-fw fa-angle-down text-active"></i>
    </span>
    <i style="color:#63E4F0;" class="iconfont icon-md-albums"></i>
      <span><?php _me("父导航栏名") ?></span>
</a>
<ul class="nav nav-sub dk">
    <li><a href="#"><span>子导航栏名</span></a></li>
</ul>    
</li>


代码讲解

导航名称和iconfont图标

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

e47a3ab69891f3eb4ce8e0c9f95e8c6.png

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

3dfb12a3f90226c7e92e398da2b1de9.png

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

fabd72641cb6f43aa6eb1fdc61abb22.png

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

a138f14e513a93911e678eacfcd4b88.png


超链接

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

276062ad278c0cc59edbcec546f8481.png


多级子导航

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

4b4dec9dc3e9e107a2f8e12bc4c8890.png

目录
相关文章
|
Linux 网络安全
linux服务器中如何卸载宝塔
linux服务器中如何卸载宝塔
5242 0
|
7月前
简约的域名主页HTML源码带暗黑模式
简约的域名主页HTML源码带暗黑模式
178 17
|
Docker 容器
Docker服务启动失败报错:Job for docker.service failed because the control process exited with error code.
Docker服务启动失败报错:Job for docker.service failed because the control process exited with error code.
|
9月前
|
Web App开发 存储 传感器
大模型编程(4)- 大白话 agent
本文介绍了大模型中的`agent`概念及其作用。通过类比日常使用的浏览器作为访问网页的代理,解释了`agent`在大模型中的角色:简化复杂操作、增强功能性。文中提到,即使是简单的功能实现(如查询天气),也可以视为`agent`的应用。进一步探讨了一个典型的智能家庭助理`agent`的工作流程,包括感知环境、思考决策和执行行动三个主要阶段。这不仅帮助理解`agent`的功能,也为开发更复杂的`agent`提供了参考。
224 3
|
安全 Linux 网络安全
【工具使用】几款优秀的SSH连接客户端软件工具推荐FinalShell、Xshell、MobaXterm、OpenSSH、PUTTY、Terminus、mRemoteNG、Terminals等
【工具使用】几款优秀的SSH连接客户端软件工具推荐FinalShell、Xshell、MobaXterm、OpenSSH、PUTTY、Terminus、mRemoteNG、Terminals等
117489 0
|
9月前
|
缓存 Ubuntu 网络安全
使用 Docker 快速搭建最新版 Flarum 论坛
本文分享了使用Docker在4核4GB的Ubuntu 20.04云服务器上搭建Flarum轻论坛的经验。通过Nginx-Proxy和ACME伴侣自动配置SSL,并使用Docker Compose部署Flarum及MariaDB容器。关键步骤包括:创建Nginx-Proxy容器、配置Flarum容器及其环境变量、设置桥网络连接以及更新Flarum版本。文中提供了详细的Docker Compose配置示例和必要的环境变量设置,帮助读者顺利搭建并运行Flarum论坛。
|
Web App开发 数据可视化 搜索推荐
博士科研最好用的科研绘图工具有哪些?
该博客介绍了几种博士科研中最好用的科研绘图工具,包括ChiPlot、Veusz、Echarts、MeedPeer和Python可视化库,并提供了它们的优缺点分析。
535 2
博士科研最好用的科研绘图工具有哪些?
|
12月前
|
NoSQL PHP Redis
SSRF一篇文章实战举例全面学懂
SSRF一篇文章实战举例全面学懂
122 0
|
应用服务中间件 nginx
centos7.6安装Nginx解决403
centos7.6安装Nginx解决403
256 0
|
存储 开发框架 API
LangChain
LangChain is an open-source framework that simplifies the development of applications using large language models (LLMs).
315 3