注:本文为转载,原文作者hushhw,原文链接:https://hushhw.cn/posts/tool/5e14d0e.html 感谢原作者提供的方法,文章版权归原作者所有。

博客使用的是maupassant主题, 原本设计的文章标签是放在右边侧边栏的,但是当文章写多了以后,标签也会很多,侧边栏的标签区域就显得很多很乱。为了美观些,对原主题修改一下,重新建立一个标签页面专门展示标签,然后把侧边栏的标签区域删掉。

在本地hexo目录的source文件夹下,新建tags文件夹,进入tags文件夹,并新建index.md文件

1
2
3
cd hexo/blog/source/
mkdir tags
touch index.md

打开index.md,在该文件中写入front-matter,内容如下:

1
2
3
4
5
6
---
layout: tagcloud
title: 标签列表
type: tags
comments: false
---

进入maupassant主题目录下的layout文件夹,新建tagcloud.pug

1
2
cd hexo/blog/themes/maupassant/layout/
touch tagcloud.pug

添加如下代码:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
extends base
block title
title= page.title + ' | ' + config.title
block content
.post
.post-content
.tagcloud
for tag in site.tags.toArray()
a( href='/tags/#' + tag.name title=tag.name rel= tag.length ) #{tag.name}

for tag in site.tags.toArray()
.one-tag-list
span(class='fa fa-tag tag-name' id=tag.name)
span(class="tag-text") #{tag.name}
for post in tag.posts.toArray()
.post-preview
a( href=config.root + post.path title=post.title ) #{post.title}

if page.donate
iframe(src='/donate/?AliPayQR=' + theme.donate.alipay_qr + '&WeChatQR=' + theme.donate.wechat_qr + '&GitHub=' + theme.donate.github + '&BTCQR=' + theme.donate.btc_qr + '&BTCKEY='+ theme.donate.btc_key + '&PayPal=' + theme.donate.paypal_url, style='overflow-x:hidden; overflow-y:hidden; border:0xp none #fff; min-height:240px; width:100%;', frameborder='0', scrolling='no')
if page.comments
include _partial/comments.pug

添加样式,在hexo/blog/themes/maupassant/source/css文件夹下找到style.scss, 在.post -> .post-content中,添加.tagcloud和.one-tag-list中的scss代码,如下:

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
.post {

.post-content {

.tagcloud {
margin: 0 0 30px 0;
a {
padding:0px 5px;
margin:3px;
display: inline-block;
border: 1px solid rgba(99, 96, 96, 0.8);
border-radius: 999em;
color: #aaa;
&:hover {
color: #fff;
border: 1px solid #1a8d76;
background: #1a8a76;
}
}
}
.one-tag-list {
margin: 30px 0;
.tag-name {
.tag-text{
margin-left: 5px;
font-size: 16px;
font-weight: bold;
}
}
}

}
}

打开主题的_config.yml文件,在menu菜单中,添加:

1
2
3
4
5
menu:

- page: tags
directory: tags/
icon: fa-tags

并且在widgets中,注释掉右边侧边栏的tags挂件:

widgets:
# - tag

现在全部修改完成了,用hexo g生成tags页面,然后用hexo s本地预览下,如果顺利修改完成,最后用hexo d发布。

原文作者:hushhw
原文链接:https://hushhw.cn/posts/tool/5e14d0e.html