预览

来源

在逛博客的过程中，发现几个小伙伴的标签\分类页面都有一个导航条，可以在标签\分类页面直接跳转到其他标签\分类

比如：HEO、Eurkon

思路

  • 对于页面结构，可以使用hexo&butterfly的函数进行生成
  • 当前分类\标签选中：这个可以根据当前的URL来判断是哪一个标签\分类，然后将其加上类checked
  • 最后给导航条添加一个滑动

魔改

结构与事件

  • 进入...theme/butterfly/layout/category.pug,修改如下
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
block content
  if theme.category_ui == 'index'
    include ./includes/mixins/post-ui.pug
    #recent-posts.recent-posts.category_ui
      +postUI
      include includes/pagination.pug
  else
    include ./includes/mixins/article-sort.pug
    #category
+      .category-list-bar
+        a.iconfont.icon-fenlei(href="/categories/")
+        .lists!=list_categories()
+        script.
+          document.querySelectorAll('.category-list .category-list-item').forEach(item=>{
+          if(decodeURI(window.location.href.split('/')[4])===item.querySelector('a').innerHTML){
+          item.className += ' checked'
+          }
+          })
+          window.addEventListener('load',function(){document.querySelector('.category-list .category-list-item.checked').scrollIntoView();document.querySelector('#category').scrollIntoView();});
+          document.querySelectorAll('#category .lists')[0].onmousewheel = function(e){
+          if(e.deltaY>0){
+          this.scrollLeft+=20;
+          }else{
+          this.scrollLeft-=20;
+          }return false;}
      .article-sort-title= _p('page.category') + ' - ' + page.category
      +articleSort(page.posts)
      include includes/pagination.pug
  • list_categories()会返回一个所有分类的列表
  • 脚本中为判断URL并添加checked & 绑定鼠标滚动事件
  • 进入...theme/butterfly/layout/tag.pug，修改如下
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
extends includes/layout.pug

block content
  if theme.tag_ui == 'index'
    include ./includes/mixins/post-ui.pug
    #recent-posts.recent-posts
      +postUI
      include includes/pagination.pug
  else
    include ./includes/mixins/article-sort.pug
+    #tag
+      .tag-list-bar
+        a.iconfont.icon-biaoqian(href="/tags/")
+        .lists
+          ul!=cloudTags({source: site.tags, minfontsize: 1, maxfontsize: 1, limit: 0, unit: 'rem'})
+        script.
+          document.querySelectorAll('#tag .lists a').forEach(item=>{
+          if(decodeURI(window.location.href.split('/')[4])===item.innerHTML){
+          item.className += 'checked';
+          }
+          })
+          window.addEventListener('load',function(){document.querySelector('.lists a.checked').scrollIntoView();document.querySelector('#tag').scrollIntoView();});
+          document.querySelectorAll('#tag .lists')[0].onmousewheel = function(e){
+          if(e.deltaY>0){
+          this.scrollLeft+=20;
+          }else{
+          this.scrollLeft-=20;
+          }return false;}
      .article-sort-title= _p('page.tag') + ' - ' + page.tag
      +articleSort(page.posts)
      include includes/pagination.pug
  • 各部分功能同上

样式参考

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
/*单个分类*/
.page #category .category-list-bar,
#tag .tag-list-bar{
	width: 100%;
	height: 3rem;
	background-color: var(--kk-card-bg);
	border-radius: 0.5rem;
	line-height: 3rem;
	display: flex;
}
.page #category .category-list-bar .iconfont,
#tag .tag-list-bar .iconfont{
	width: 3rem;
	height: 3rem;
	text-align: center;
	font-size: 1.25rem;
}
.page #category .category-list-bar .lists,
#tag .tag-list-bar .lists{
	width: calc(100% - 3rem);
	overflow: scroll;
}
.page #category .category-list-bar .lists::-webkit-scrollbar,
#tag .tag-list-bar .lists::-webkit-scrollbar{
	width: 0;
	height: 0;
}
.page #category .category-list-bar .lists ul,
#tag .tag-list-bar .lists ul{
	width: max-content;
	height: 3rem;
	display: flex;
	align-items: center;
}
.page #category .category-list-bar .lists .category-list .category-list-item,
#tag .tag-list-bar .lists ul a{
	padding: 0 0.4rem;
	margin: 0 0.3rem;
	height: 2rem;
	line-height: 2rem;
	/*background: #fff;*/
	border-radius: 0.4rem;
	transition: 0.2s;
}
.page #category .category-list-bar .lists .category-list .category-list-item:hover,
.page #category .category-list-bar .lists .category-list .category-list-item.checked,
#tag .tag-list-bar .lists ul a:hover,
#tag .tag-list-bar .lists ul a.checked{
	background-color: var(--kk-border-white);
}

.page #category .category-list-bar .lists .category-list .category-list-item span{
	display: none;
}