diff --git a/.gitignore b/.gitignore index 63f307b..4d4a703 100644 --- a/.gitignore +++ b/.gitignore @@ -5,4 +5,5 @@ db.json node_modules/ public/ .deploy*/ -_multiconfig.yml \ No newline at end of file +_multiconfig.yml +.hintrc \ No newline at end of file diff --git a/_config.butterfly.yml b/_config.butterfly.yml index 7cac8f2..2243b63 100644 --- a/_config.butterfly.yml +++ b/_config.butterfly.yml @@ -888,7 +888,7 @@ site_verification: # The user interface setting of category and tag page # Choose: index - same as Homepage UI / default - same as archives UI # leave it empty or index -category_ui: +category_ui: index tag_ui: # Rounded corners for UI elements diff --git a/source/_posts/custom-navbar.md b/source/_posts/custom-navbar.md index 0dfc914..aa45652 100644 --- a/source/_posts/custom-navbar.md +++ b/source/_posts/custom-navbar.md @@ -1,11 +1,11 @@ --- title: 自定义导航栏 categories: 建站手札 -series: 网站 +series: webcustom summary: 介绍如何修改导航栏 abbrlink: 3e61a389 date: 2025-08-13 16:12:25 -tags: +tags: 网站 --- 最近在查找怎样自定义导航栏，奈何没有对应版本的修改教程，本站使用最新版butterfly5.4。 diff --git a/themes/butterfly/layout/includes/categoryBar.pug b/themes/butterfly/layout/includes/categoryBar.pug new file mode 100644 index 0000000..9fadff8 --- /dev/null +++ b/themes/butterfly/layout/includes/categoryBar.pug @@ -0,0 +1,10 @@ +.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/'))= __('更多分类') diff --git a/themes/butterfly/layout/includes/mixins/indexPostUI.pug b/themes/butterfly/layout/includes/mixins/indexPostUI.pug index 4f2c3ee..6ae3ebf 100644 --- a/themes/butterfly/layout/includes/mixins/indexPostUI.pug +++ b/themes/butterfly/layout/includes/mixins/indexPostUI.pug @@ -2,6 +2,8 @@ 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 each article, index in page.posts.data .recent-post-item diff --git a/themes/butterfly/source/css/_layout/categroy-bar.styl b/themes/butterfly/source/css/_layout/categroy-bar.styl new file mode 100644 index 0000000..6172881 --- /dev/null +++ b/themes/butterfly/source/css/_layout/categroy-bar.styl @@ -0,0 +1,56 @@ +#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) diff --git a/themes/butterfly/source/css/style.css b/themes/butterfly/source/css/style.css index 0559bce..5ffe7d1 100644 --- a/themes/butterfly/source/css/style.css +++ b/themes/butterfly/source/css/style.css @@ -214,6 +214,25 @@ /* -webkit-backdrop-filter: blur(10px);兼容性前缀，适用于一些旧版本的浏览器 */ } +/*分类条*/ +#recent-posts>.category-bar { + background: linear-gradient(-45deg, rgba(255, 255, 255, .7), + rgba(255, 255, 255, .8), + rgba(255, 255, 255, .8), + rgba(255, 255, 255, .7))!important; + backdrop-filter: blur(10px)!important; + /* -webkit-backdrop-filter: blur(10px);兼容性前缀，适用于一些旧版本的浏览器 */ +} + +[data-theme=dark] #recent-posts>.category-bar { + background: linear-gradient(-45deg, rgba(24, 40, 72, .7), + rgba(35, 37, 58, .8), + rgba(35, 37, 58, .8), + rgba(24, 40, 72, .7))!important; + backdrop-filter: blur(10px)!important; + /* -webkit-backdrop-filter: blur(10px);兼容性前缀，适用于一些旧版本的浏览器 */ +} + /*主页文章预览页面*/ #recent-posts>.recent-post-items>.recent-post-item { background: linear-gradient(-45deg, rgba(255, 255, 255, .7), diff --git a/themes/butterfly/source/js/main.js b/themes/butterfly/source/js/main.js index 20f509a..7d61e23 100644 --- a/themes/butterfly/source/js/main.js +++ b/themes/butterfly/source/js/main.js @@ -893,6 +893,27 @@ document.addEventListener('DOMContentLoaded', () => { tabsFn() } + /** + * 自己写的，实现功能切换类别表 + */ + 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"); + } + } + }; + const refreshFn = () => { initAdjust() justifiedIndexPostUI() @@ -905,6 +926,7 @@ document.addEventListener('DOMContentLoaded', () => { GLOBAL_CONFIG.runtime && addRuntime() addLastPushDate() toggleCardCategory() + setCategoryBarActive() } GLOBAL_CONFIG_SITE.pageType === 'home' && scrollDownInIndex()