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

news2024/11/29 10:31:03

💂作者简介: THUNDER王,一名热爱财税和SAP ABAP编程以及热爱分享的博主。目前于江西师范大学会计学专业大二本科在读,同时任汉硕云(广东)科技有限公司ABAP开发顾问。在学习工作中,我通常使用偏后端的开发语言ABAP,SQL进行任务的完成,对SAP企业管理系统,SAP ABAP开发和数据库具有较深入的研究。


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


🤟每日一言:将来的你一定会感谢现在奋斗的自己。

目录

源代码修改位置

代码实现

代码讲解

超链接

多级子导航


源代码修改位置

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

找到源代码大约第122行左右,标志性代码为<!—-/主页—->

A8021A2D-80BC-424C-ADB3-D3670B469DC9.jpeg


代码实现

在上面<!—-/主页—->的注释下方增加以下代码,便可以实现左侧导航的增加了

<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图标

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

1792BB84-AF87-4BC5-A184-6BA93AB50888.jpeg


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

4965C0EB-B6FE-4D41-914E-F95F8DAA19C0.jpeg
其中,具体的导航栏效果如下图


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


超链接

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


多级子导航

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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/41537.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

【心电信号】小波阙值心电信号去噪【含Matlab源码 2188期】

⛄一、小波阈值法去噪概述 电能质量扰动信号的噪声大多以高斯白噪声的形式存在&#xff0c;利用小波变换对信号进行多分辨率分解&#xff0c;由于小波变换具有去除数据相关性的特点&#xff0c;故可以将有用信号与噪声的能量分离开来。信号中有效的信息主要集中在较大的小波系…

【Vue】Vuex-store

Vuex是什么&#xff1f; Vuex是实现组件全局状态(数据&#xff09;管理的一种机制&#xff0c;可以方便的实现组件之间数据的共享。 像一个仓库一样&#xff01; 使用Vuex统一管理状态的好处&#xff1f; 1.能够在vuex中集中管理共享的数据&#xff0c;易于开发和后期维护 2.能…

二叉查找树(1)-二叉树-数据结构和算法(Java)

文章目录1 前言1.1 二叉查找树定义1.2 二叉查找树的性质2 基本实现2.1 API2.2 实现代码2.2.1 数据表示2.2.2 查找2.2.3 插入3 分析4 有序性相关方法与删除操作4.1 最大键和最小键4.2 向上取整和向下取整4.2.1 向下取整floor()4.2.2 向上取整ceiling()4.3 选择select()4.4 排名r…

微服务框架 SpringCloud微服务架构 3 Eureka 3.1 提供者与消费者

微服务框架 【SpringCloudRabbitMQDockerRedis搜索分布式&#xff0c;系统详解springcloud微服务技术栈课程|黑马程序员Java微服务】 SpringCloud微服务架构 文章目录微服务框架SpringCloud微服务架构3 Eureka3.1 提供者与消费者3.1.1 一些概念3.1.2 一个问题3.1.3 总结3 Eur…

【Hack The Box】linux练习-- Pit

HTB 学习笔记 【Hack The Box】linux练习-- Pit &#x1f525;系列专栏&#xff1a;Hack The Box &#x1f389;欢迎关注&#x1f50e;点赞&#x1f44d;收藏⭐️留言&#x1f4dd; &#x1f4c6;首发时间&#xff1a;&#x1f334;2022年11月27日&#x1f334; &#x1f36d;…

单片机如何控制外设?

单片机如何控制外设&#xff1f; 单片机不是直接控制外设的&#xff0c;而是通过配置片上外设寄存器来控制其输出和检测高低电平&#xff0c;进而控制外围器件。 单片机如何配置寄存器的&#xff1f; 下图是单片机驱动 点亮发光二极管 内核从flash里面加载读取指令。内核根据指…

将DataFrame中符合指定条件的数据替换为指定的值:mask()函数

【小白从小学Python、C、Java】 【计算机等级考试500强双证书】 【Python-数据分析】 将DataFrame中符合指定条件的数据 替换为指定的值&#xff1a;mask()函数 选择题 下列说法错误的是? import pandas as pd myDF pd.DataFrame({"A":[1,2,3], "B":[4,…

java EE初阶 — 如何进行多线程编程

文章目录1.java如何进行多线程编程1.1 最基础的多线程代码1.2 线程的优势2.java中创建线程的方法2.1 继承Thread 重写run2.2 实现Runnable 接口2.3 使用匿名的内部类&#xff0c;继承 Thread2.4 使用匿名类。继承 Runnable2.5 使用 Lambda 表达式&#xff08;最简答、最推荐&am…

2000-2020年迪博上市公司内部控制指数

2000-2020年迪博上市公司内部控制指数 1、时间&#xff1a;2000-2020年 2、指标包括&#xff1a; 证券代码、证券简称、辖区、证监会行业、申万行业、内部控制指数、报告期 3、指标解释&#xff1a; 上市公司内部控制指数是结合国内上市公司实施内部控制体系的现状&#x…

java——电商购物平台

1.java编译环境的创建&#xff0c;与所需要用到的插件 (1) 选择的编译器为2022版本的intellij idea 首先新建一个空项目 同时,创建完之后,我们点击 文件 -> 项目结构 进入项目结构,点击项目,选择好你想要的jdk版本,若没有,可以在idea中下载,这里我使用openjdk-19, 点击模…

Python适合0基础菜鸟学吗

前言 经常有小伙伴问&#xff1a;Python适合0基础初学编程的人学吗&#xff1f;今天我们就来从Python的功能和特性方面看一下&#xff0c;Python是否能让新人快速上手。 1、非常适合。我觉得刚开始学编程&#xff0c;负担越少越好&#xff0c;应该尽快能做出东西来。刚开始学…

day02 linux常用命令

day02 linux 第一章 Linux常用命令 第一节 进程相关命令 1. 查看进程状态 1.1 命令的使用 ps命令是用于查看进程状态的命令&#xff0c;它常和e参数(对应单词entire&#xff0c;表示全部。具体指显示系统中全部的进程信息。)&#xff0c;以及f参数(对应单词full-formate&a…

Node.js 入门教程 13 在 Node.js 中从命令行接收输入

Node.js 入门教程 Node.js官方入门教程 Node.js中文网 本文仅用于学习记录&#xff0c;不存在任何商业用途&#xff0c;如侵删 文章目录Node.js 入门教程13 在 Node.js 中从命令行接收输入13 在 Node.js 中从命令行接收输入 如何使 Node.js CLI 程序具有交互性&#xff1f; 从…

卡塔尔世界杯--程序员的诗和远方

&#x1f497;wei_shuo的个人主页 &#x1f4ab;wei_shuo的学习社区 &#x1f310;Hello World &#xff01; 卡塔尔世界杯–程序员的诗和远方 2022年卡塔尔世界杯&#xff08;FIFA World Cup Qatar 2022&#xff09;第二十二届世界杯足球赛&#xff0c;历史上首次在卡塔尔和中…

【学习笔记44】JavaScript的事件传播

JavaScript的事件传播一、事件传播1、事件传播的说明2、阻止事件传播二、目标冒泡捕获1、冒泡2、捕获三、事件委托1、事件委托的说明2、为什么要用事件委托四、阻止默认事件1、方法一2、方法二一、事件传播 在触发子元素的事件时, 会将行为传播给父级的同类型事件触发了子元素的…

机器学习1综述

文章目录一、综述学习环境&#xff1a;二、机器学习方法的分类1、监督学习&#xff1b;2、非监督学习&#xff1b;3、半监督学习&#xff1b;4、增强学习&#xff1b;三、机器学习方法分类2、批量学习&#xff08;离线学习&#xff09;Batch Learing&#xff1b;3、参数学习&am…

二叉树的递归问题

目录 一、相同的树 二、另一棵树的子树 三、翻转二叉树 四、平衡二叉树 五、对称二叉树 一、相同的树 给你两棵二叉树的根节点 p 和 q &#xff0c;编写一个函数来检验这两棵树是否相同。 如果两个树在结构上相同&#xff0c;并且节点具有相同的值&#xff0c;则认为它们是…

【毕业设计-课程设计】-超声波测距

资源链接在文章最后,订阅查看获取全部内容及资料,如需可私信提供硬件。 目 录 1 绪论 2 1.1 项目研究背景及意义 2 2 总体设计方案及论证 2 2.1 总体方案设计 2 3 硬件实现及单元电路设计 3 3.1 主控制模块 3 3.2 电源设计 4 3.3 超声波测试模块 4 3.3.1 超声波的特性 5 3.3…

【Python】顺序、条件、循环语句

文章目录一. 顺序语句二. 条件语句1. 什么是条件语句2. 缩进和代码块3. 空语句 pass4. 练习三. 循环语句1. while 循环2. for 循环一. 顺序语句 默认情况下&#xff0c;Python 的代码执行顺序&#xff0c;是从上到下依次执行的&#xff1a; 执行结果一定为 “123”&#xff0…

【工具门户】Backstage配置使用PostgreSQL(三)

先决条件 If the database is not hosted on the same server as the Backstage app, the PostgreSQL port needs to be accessible (the default is 5432 or 5433) PostgreSQL数据库默认端口为5432或5433,如果数据库与Backstage应用不在同一台机器上,需开放PostgreSQL端口…