安安今天這篇文章是關於修改 Butterfly 的默認標籤雲外觀
本篇使用的參考文章會放在文末~
會將原本 Butterfly 默認的標籤樣式改成以下這樣:

修改後畫面預覽

修改前 - 標籤頁
修改前1
修改前 - 首頁標籤
修改前2

修改後 - 標籤頁
修改後1
修改後 - 首頁標籤
修改後2

修改 page.js

路徑:

  • themes\butterfly\scripts\helpers\page.js

  • 你可以直接複製以下的代碼並直接貼上&取代你的 page.js

    • 如果你之前沒對 page.js 做什麼更改的話
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
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
/**
* Butterfly
* @example
* page_description()
* cloudTags(source, minfontsize, maxfontsize, limit)
*/

'use strict'

const { stripHTML, escapeHTML, prettyUrls } = require('hexo-util')
const crypto = require('crypto')

hexo.extend.helper.register('page_description', function () {
const { config, page } = this
let description = page.description || page.content || page.title || config.description

if (description) {
description = escapeHTML(stripHTML(description).substring(0, 150)
.trim()
).replace(/\n/g, ' ')
return description
}
})

hexo.extend.helper.register('cloudTags', function (options = {}) {
const env = this
let source = options.source
const limit = options.limit

let result = ''
if (limit > 0) {
source = source.limit(limit)
}

source.forEach(tag => {
const color = 'rgb(' + Math.floor(Math.random() * 201) + ', ' + Math.floor(Math.random() * 201) + ', ' + Math.floor(Math.random() * 201) + ')' // 0,0,0 -> 200,200,200
let style = ` color: ${color}`
result += `<a href="${env.url_for(tag.path)}" style="${style}">${tag.name}</a>`
})
return result
})

hexo.extend.helper.register('cloudTags', function(options = {}) {
const env = this
let source = options.source
const limit = options.limit
source = source.sort('length').reverse()
let result = ''
if (limit > 0) source = source.limit(limit)

source.forEach(tag => {
const color = 'rgb(' + Math.floor(Math.random() * 201) + ', ' + Math.floor(Math.random() * 201) + ', ' + Math.floor(Math.random() * 201) + ')' // 0,0,0 -> 200,200,200
result += `<a href="${env.url_for(tag.path)}" style="color: ${color}">${tag.name} (${tag.length})</a>`
})
return result
})
hexo.extend.helper.register('urlNoIndex', function (url = null) {
return prettyUrls(url || this.url, { trailing_index: false, trailing_html: false })
})

hexo.extend.helper.register('md5', function (path) {
return crypto.createHash('md5').update(decodeURI(this.url_for(path))).digest('hex')
})

hexo.extend.helper.register('injectHtml', function (data) {
let result = ''
if (!data) return ''
for (let i = 0; i < data.length; i++) {
result += data[i]
}
return result
})

hexo.extend.helper.register('findArchivesTitle', function (page, menu, date) {
if (page.year) {
const dateStr = page.month ? `${page.year}-${page.month}` : `${page.year}`
const date_format = page.month ? hexo.theme.config.aside.card_archives.format : 'YYYY'
return date(dateStr, date_format)
}

const defaultTitle = this._p('page.archives')
if (!menu) return defaultTitle

const loop = (m) => {
for (const key in m) {
if (typeof m[key] === 'object') {
loop(m[key])
}

if (/\/archives\//.test(m[key])) {
return key
}
}
}

return loop(menu) || defaultTitle
})

新增 css

  • 你可以將以下的代碼貼上任意以插入的 css 檔案裡面
  • 或是建立新的 css 檔案並插入你的主題的 _config.yml 檔案

插入位置:

1
2
3
4
5
# Inject
# Insert the code to head (before '</head>' tag) and the bottom (before '</body>' tag)
# 插入代码到头部 </head> 之前 和 底部 </body> 之前
inject:
head:

範例:

  • 先在 themes\butterfly\source\css\ 資料夾下添加名為 myTag.css 的檔案
  • 然後返回_config.yml 並新增 <link rel="stylesheet" href="/css/myTag.css">
1
2
3
4
5
6
# Inject
# Insert the code to head (before '</head>' tag) and the bottom (before '</body>' tag)
# 插入代码到头部 </head> 之前 和 底部 </body> 之前
inject:
head:
- <link rel="stylesheet" href="/css/myTag.css">

CSS樣式:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
#aside-content .card-tag-cloud a {
border: 1px solid;
line-height: 1.5;
border-radius: 6px;
margin: 3px;
padding: 0 5px;
}

.tag-cloud-list a {
border: 1px solid;
line-height: 1.5;
border-radius: 6px;
padding: 5px 15px;
font-size: 1.2rem;
margin: 5px;
}
  • 此篇的參考文章:
    • Hexo博客标签的魔改