注：本文为转载，原文作者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