安安今天這篇文章是關於修改 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博客标签的魔改