biss/hexo-theme-butterfly
1
0
Fork 0
mirror of https://github.com/jerryc127/hexo-theme-butterfly.git synced 2026-04-08 12:07:06 +08:00
Code Issues Packages Projects Releases Wiki Activity

refactor(tagcloud): switch custom_colors from inline styles to CSS classes

Browse Source
This commit is contained in:
Void4m0n
2026-01-05 07:04:24 +01:00
parent d15620198c
commit 5878e3b7ee
3 changed files with 26 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
layout/includes/page/tags.pug
View File

@@ -1,2 +1,3 @@
- let { colormode, custom_colors } = theme.aside.card_tags
.tag-cloud-list.text-center
!=cloudTags({source: site.tags, orderby: page.orderby || 'random', order: page.order || 1, minfontsize: 1.2, maxfontsize: 1.5, limit: 0, unit: 'em', colormode: page.colormode, custom_colors: page.custom_colors})
!=cloudTags({source: site.tags, orderby: page.orderby || 'random', order: page.order || 1, minfontsize: 1.2, maxfontsize: 1.5, limit: 0, unit: 'em', colormode: colormode, custom_colors: custom_colors})

19
scripts/helpers/page.js
View File

@@ -58,13 +58,9 @@ hexo.extend.helper.register('cloudTags', function (options = {}) {
const userColors = normalizeColors(custom_colors)
const resolveColor = (idx) => {
if (colormode === 'custom' && userColors && userColors.length) {
if (userColors.length === 1) return userColors[0]
return userColors[idx % userColors.length]
}
return getRandomColor()
}
const resolveColorClass = (idx) => `tag-color-${idx % userColors.length}`
const generateSizeStyle = (size, unit) => `font-size: ${parseFloat(size.toFixed(2))}${unit};`
const generateStyle = (size, unit, page, color) => {
const colorStyle = page === 'tags' ? `background-color: ${color};` : `color: ${color};`
@@ -74,7 +70,14 @@ hexo.extend.helper.register('cloudTags', function (options = {}) {
return source.sort(orderby, order).map((tag, idx) => {
const ratio = length ? sizeMap.get(tag.length) / length : 0
const size = minfontsize + ((maxfontsize - minfontsize) * ratio)
const color = resolveColor(idx)
if (colormode === 'custom' && userColors && userColors.length) {
const colorClass = resolveColorClass(idx)
const style = generateSizeStyle(size, unit)
return `<a href="${env.url_for(tag.path)}" class="tag-cloud-item ${colorClass}" style="${style}">${tag.name}</a>`
}
const color = getRandomColor()
const style = generateStyle(size, unit, page, color)
return `<a href="${env.url_for(tag.path)}" style="${style}">${tag.name}</a>`
}).join('')

13
source/css/_page/tags.styl
View File

@@ -89,3 +89,16 @@
.page-title
& + .tag-cloud-list
text-align: left
tag_colors = hexo-config('aside.card_tags.custom_colors')
.tag-cloud-list .tag-cloud-item
background-color var(--tag-cloud-color)
.card-tag-cloud .tag-cloud-item
color var(--tag-cloud-color)
if tag_colors && length(tag_colors) > 0
for c, i in tag_colors
.tag-cloud-item.tag-color-{i}
--tag-cloud-color convert(c)