140 lines
4.7 KiB
Markdown
140 lines
4.7 KiB
Markdown
---
|
|
title: 自定义分类条
|
|
categories: 建站手札
|
|
tags: 网站
|
|
series: webcustom
|
|
abbrlink: '33249733'
|
|
summary: >-
|
|
这篇文章介绍了如何在博客系统中自定义分类栏的设计和实现过程。首先，通过Pug模板语言创建了一个名为categoryBar.pug的文件，用于定义分类栏的结构和样式。接着，在Stylus样式文件category-bar.styl中详细定义了分类栏的样式，包括内边距、背景颜色、边框圆角等，并设置了滚动条的样式。最后，在JavaScript文件main.js中添加了一个setCategoryBarActive函数，用于根据当前页面路径自动激活相应的分类项。此外，还讨论了如何将自定义的分类栏集成到主题中，并提供了相关的Pug混入代码。整个过程确保了分类栏的可定制性和易维护性。
|
|
date: 2025-08-14 16:25:49
|
|
---
|
|
|
|
{% note warning 1 %}
|
|
修改有风险，请注意备份
|
|
{% endnote %}
|
|
今天来自定义分类条
|
|
# 添加pug
|
|
新建文件`[BlogRoot]\themes\butterfly\layout\includes\categoryBar.pug`文件，写入：
|
|
```pug
|
|
.category-bar-items#category-bar-items(class=is_home() ? 'home' : '')
|
|
.category-bar-item(class=is_home() ? 'select' : '', id="category-bar-home")
|
|
a(href=url_for('/'))= __('博客首页')
|
|
each item in site.categories.find({ parent: { $exists: false } }).data
|
|
.category-bar-item(class=select ? (select === item.name ? 'select' : '') : '', id=item.name)
|
|
a(href=url_for(item.path))= item.name
|
|
.category-bar-item
|
|
a(href=url_for('/archives/'))= __('文章存档')
|
|
div.category-bar-right
|
|
a.category-bar-more(href=url_for('/categories/'))= __('更多分类')
|
|
```
|
|
# 样式文件
|
|
以上就是该滚动条的结构，下面我们开始实现样式的定义，新建文件`[BlogRoot]\themes\butterfly\source\css\_layout\category-bar.styl`写入以下文件：
|
|
|
|
```scss
|
|
#category-bar
|
|
padding 7px 11px
|
|
background var(--card-bg)
|
|
border-radius 8px
|
|
display flex
|
|
white-space nowrap
|
|
overflow hidden
|
|
transition 0.3s
|
|
height 50px
|
|
width 100%
|
|
justify-content space-between
|
|
user-select none
|
|
align-items center
|
|
margin-bottom 20px
|
|
|
|
.category-bar-right
|
|
display flex
|
|
border-radius 8px
|
|
align-items center
|
|
|
|
.category-bar-more
|
|
margin-left 4px
|
|
margin-right 4px
|
|
font-weight 700
|
|
border-radius 8px
|
|
padding 0 8px
|
|
|
|
.category-bar-items
|
|
width 100%
|
|
white-space nowrap
|
|
overflow-x scroll
|
|
scrollbar-width: none
|
|
-ms-overflow-style: none
|
|
overflow-y hidden
|
|
display flex
|
|
border-radius 8px
|
|
align-items center
|
|
height 30px
|
|
|
|
&::-webkit-scrollbar
|
|
display: none
|
|
|
|
.category-bar-item
|
|
a
|
|
padding .1rem .5rem
|
|
margin-right 6px
|
|
font-weight 700
|
|
border-radius 8px
|
|
display flex
|
|
align-items center
|
|
height 30px
|
|
|
|
&.select
|
|
a
|
|
background #3eb8be
|
|
color var(--btn-color)
|
|
```
|
|
# 添加js
|
|
打开`[BlogRoot]\themes\butterfly\source\js\main.js`，添加js函数，`refreshFn`函数的上面：
|
|
```js
|
|
const setCategoryBarActive = () => {
|
|
const categoryBar = document.querySelector("#category-bar");
|
|
const currentPath = decodeURIComponent(window.location.pathname);
|
|
const isHomePage = currentPath === GLOBAL_CONFIG.root;
|
|
|
|
if (categoryBar) {
|
|
const categoryItems = categoryBar.querySelectorAll(".category-bar-item");
|
|
categoryItems.forEach(item => item.classList.remove("select"));
|
|
|
|
const activeItemId = isHomePage ? "category-bar-home" : currentPath.split("/").slice(-2, -1)[0];
|
|
const activeItem = document.getElementById(activeItemId);
|
|
|
|
if (activeItem) {
|
|
activeItem.classList.add("select");
|
|
}
|
|
}
|
|
};
|
|
```
|
|
引用函数
|
|
```js
|
|
window.refreshFn = function () {
|
|
initAdjust()
|
|
|
|
if (GLOBAL_CONFIG_SITE.isPost) {
|
|
GLOBAL_CONFIG.noticeOutdate !== undefined && addPostOutdateNotice()
|
|
GLOBAL_CONFIG.relativeDate.post && relativeDate(document.querySelectorAll('#post-meta time'))
|
|
} else {
|
|
GLOBAL_CONFIG.relativeDate.homepage && relativeDate(document.querySelectorAll('#recent-posts time'))
|
|
GLOBAL_CONFIG.runtime && addRuntime()
|
|
addLastPushDate()
|
|
toggleCardCategory()
|
|
setCategoryBarActive() // 自己加的，用于切换类别栏目
|
|
}
|
|
```
|
|
# 添加到主题
|
|
修改`[BlogRoot]\themes\butterfly\layout\includes\mixins\indexPostUI.pug`，添加
|
|
```diff
|
|
mixin indexPostUI()
|
|
- const indexLayout = theme.index_layout
|
|
- const masonryLayoutClass = (indexLayout === 6 || indexLayout === 7) ? 'masonry' : ''
|
|
#recent-posts.recent-posts.nc(class=masonryLayoutClass)
|
|
+ #category-bar.category-bar
|
|
+ include ../categoryBar.pug
|
|
.recent-post-items
|
|
```
|
|
# 参考
|
|
{% link liushen博客,Liushen,https://blog.liushen.fun/posts/a64defb4/ %} |