编写分类按钮
-
在博客园的父级分类下有多个子级分类
-
鼠标放上去效果如下，点击后跳转到对应的子级分类
-
去阿里巴巴矢量图标库下载文件夹图标
-
将下载的图标上传到聚合图床
-
打开博客园后台，分类列表，在父级分类的描述中编写如下
<style>
.light{
width: fit-content;
cursor: pointer;
.red{ display: none;}
.yellow{ display: block;}
&:hover{
.red{ display: block;}
.yellow{ display: none;}
}
}
.aa{
font-size: 15px;
position: relative;
left: 26px;
top: -21px;
}
</style>
<body>
<div class="light">
<img class="yellow" src="https://pic.imgdb.cn/item/65349447c458853aefc5c7cd.png" alt="黄色灯泡" style="width:22px;height:22px">
<img class="red" src="https://pic.imgdb.cn/item/6534ac3dc458853aef13e733.png" alt="红色灯泡" style="width:22px;height:22px">
<span class="aa"><a href="https://www.cnblogs.com/dogleftover/category/2348239.html" target="_self">运维</a></span>
</div>
</body>
- 当我想添加第2个子分类时会提示
描述不能超过1000个字 - 新建middleware.html文件
<style>
.box{
display: flex;
flex-direction: row;
flex-wrap: wrap;
}
.light{
margin-right:40px;
width: fit-content;
cursor: pointer;
.red{ display: none;}
.yellow{ display: block;}
&:hover{
.red{ display: block;}
.yellow{ display: none;}
}
}
.aa{
font-size: 15px;
position: relative;
left: 26px;
top: -21px;
}
a:link {
color: black;
background-color: transparent;
text-decoration: none;
}
a:visited {
color: black;
background-color: transparent;
text-decoration: none;
}
a:hover {
color: red;
background-color: transparent;
text-decoration: none;
}
a:active {
color: red;
background-color: transparent;
text-decoration: none;
}
</style>
<body>
<div class="box">
<div class="light">
<img class="yellow" src="https://pic.imgdb.cn/item/65349447c458853aefc5c7cd.png" alt="黄色灯泡" style="width:22px;height:22px">
<img class="red" src="https://pic.imgdb.cn/item/6534ac3dc458853aef13e733.png" alt="红色灯泡" style="width:22px;height:22px">
<span class="aa"><a href="https://www.cnblogs.com/dogleftover/category/2348250.html" target="_parent">web服务器中间件</a></span>
</div>
<div class="light">
<img class="yellow" src="https://pic.imgdb.cn/item/65349447c458853aefc5c7cd.png" alt="黄色灯泡" style="width:22px;height:22px">
<img class="red" src="https://pic.imgdb.cn/item/6534ac3dc458853aef13e733.png" alt="红色灯泡" style="width:22px;height:22px">
<span class="aa"><a href="https://www.cnblogs.com/dogleftover/category/2348252.html" target="_parent">消息(队列|代理)中间件</a></span>
</div>
<div class="light">
<img class="yellow" src="https://pic.imgdb.cn/item/65349447c458853aefc5c7cd.png" alt="黄色灯泡" style="width:22px;height:22px">
<img class="red" src="https://pic.imgdb.cn/item/6534ac3dc458853aef13e733.png" alt="红色灯泡" style="width:22px;height:22px">
<span class="aa"><a href="https://www.cnblogs.com/dogleftover/category/2351412.html" target="_parent">缓存中间件</a></span>
</div>
<div class="light">
<img class="yellow" src="https://pic.imgdb.cn/item/65349447c458853aefc5c7cd.png" alt="黄色灯泡" style="width:22px;height:22px">
<img class="red" src="https://pic.imgdb.cn/item/6534ac3dc458853aef13e733.png" alt="红色灯泡" style="width:22px;height:22px">
<span class="aa"><a href="https://www.cnblogs.com/dogleftover/category/2351413.html" target="_parent">应用服务器中间件</a></span>
</div>
</div>
</body>
-
将静态页面托管到github，也可以使用其他托管平台
-
github新建1个仓库，名称任意，设置为public，新建文件夹category，将html文件上传到该文件夹
-
Setting，Pages，Branch设置为main分支并保存，点击Visit site跳转到静态页面，地址后面拼接html文件名称
-
打开博客园后台，分类列表，父级分类的描述中填写如下，使用iframe标签，src中填写静态页面地址
<iframe src="https://dogleftover.github.io/blog-beautify/category/middleware.html" width="900" height="30" frameborder="0" scrolling="no" seamless></iframe>
- 标签图标也可以使用同样的方式添加
