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

目录
相关文章
|
5月前
|
前端开发
wordpress主题导航菜单栏目增加角标
wordpress主题导航菜单栏目增加角标
83 1
|
6月前
|
安全 前端开发 Go
导航wordpress主题WebStack Pro
主题包含开源版所有功能,且数据库无缝升级(需重新设置主题设置项) 重构开源版主题,资源更轻巧 网址收藏添加三种类型:网站、公众号、下载资源 添加文章入口,单独博客模板页,可以做博客使用了 添加小工具,可自定义侧边栏。。。
47 0
|
JavaScript
Typecho - Joe主题给网站添加复制弹窗提醒
Typecho - Joe主题给网站添加复制弹窗提醒
163 0
|
PHP
Typecho-handsome主题——时间轴日志模板
本篇文章主要讲述了如何为Typecho中handsome主题添加一个新的独立页面模板——时间轴日志
720 2
Typecho-handsome主题——时间轴日志模板
|
前端开发 搜索推荐 开发者
Typecho-handsome主题页脚美化
handsome主题中页脚美化,如下图所示, 可以让主题的页脚更加具有个性化
309 1
Typecho-handsome主题页脚美化
|
前端开发 JavaScript 开发者
Typecho-handsome主题美化
本篇文章主要介绍一下handsome主题的美化教程
533 0
Typecho-handsome主题美化
|
JavaScript 前端开发 开发者
自定义typecho handsome主题标签云颜色
自定义typecho handsome主题标签云颜色
271 0
|
区块链
Nancy之给我们的网站添加自定义图标
原文:Nancy之给我们的网站添加自定义图标 当我们在做一个网站时,可能经常会有这样一个需求,要给我们做的网站添加一个自定义的图标。 在Nancy中,默认是的下面这样 一个妹子的头像,其实也是挺好看的!! 那么当我们想要替换这个默认的,应该要怎么做呢? 下面就来看看具体的实现 首先,准备一张名为 favicon.
787 0
|
Web App开发 前端开发 JavaScript
表格内编辑插件 · X-editable 使用实例教程
先上效果: image.png image.png 添加 js,css 依赖 JS代码: function doAjax(data) { $.
1313 0

热门文章

最新文章