mirror of
https://github.com/jerryc127/hexo-theme-butterfly.git
synced 2026-04-12 14:07:06 +08:00
feat(cloudTags): add custom colors support for cloudTags on tags page
This commit is contained in:
@@ -1,2 +1,2 @@
|
|||||||
.tag-cloud-list.text-center
|
.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'})
|
!=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})
|
||||||
|
|||||||
@@ -19,7 +19,7 @@ hexo.extend.helper.register('postDesc', data => {
|
|||||||
|
|
||||||
hexo.extend.helper.register('cloudTags', function (options = {}) {
|
hexo.extend.helper.register('cloudTags', function (options = {}) {
|
||||||
const env = this
|
const env = this
|
||||||
let { source, minfontsize, maxfontsize, limit, unit = 'px', orderby, order, page = 'tags' } = options
|
let { source, minfontsize, maxfontsize, limit, unit = 'px', orderby, order, page = 'tags', colormode, custom_colors } = options
|
||||||
|
|
||||||
if (limit > 0) {
|
if (limit > 0) {
|
||||||
source = source.limit(limit)
|
source = source.limit(limit)
|
||||||
@@ -36,15 +36,46 @@ hexo.extend.helper.register('cloudTags', function (options = {}) {
|
|||||||
return `rgb(${Math.max(r, 50)}, ${Math.max(g, 50)}, ${Math.max(b, 50)})`
|
return `rgb(${Math.max(r, 50)}, ${Math.max(g, 50)}, ${Math.max(b, 50)})`
|
||||||
}
|
}
|
||||||
|
|
||||||
const generateStyle = (size, unit, page) => {
|
const normalizeColors = input => {
|
||||||
const colorStyle = page === 'tags' ? `background-color: ${getRandomColor()};` : `color: ${getRandomColor()};`
|
if (!input) return null
|
||||||
|
if (typeof input === 'string') {
|
||||||
|
const color = input.trim()
|
||||||
|
return color ? [color] : null
|
||||||
|
}
|
||||||
|
if (Array.isArray(input)) {
|
||||||
|
const result = []
|
||||||
|
for (let i = 0; i < input.length; i++) {
|
||||||
|
const value = input[i]
|
||||||
|
if (value === null || value === undefined) continue
|
||||||
|
const color = String(value).trim()
|
||||||
|
if (!color) continue
|
||||||
|
result.push(color)
|
||||||
|
}
|
||||||
|
return result.length ? result : null
|
||||||
|
}
|
||||||
|
return null
|
||||||
|
}
|
||||||
|
|
||||||
|
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 generateStyle = (size, unit, page, color) => {
|
||||||
|
const colorStyle = page === 'tags' ? `background-color: ${color};` : `color: ${color};`
|
||||||
return `font-size: ${parseFloat(size.toFixed(2))}${unit}; ${colorStyle}`
|
return `font-size: ${parseFloat(size.toFixed(2))}${unit}; ${colorStyle}`
|
||||||
}
|
}
|
||||||
|
|
||||||
return source.sort(orderby, order).map(tag => {
|
return source.sort(orderby, order).map((tag, idx) => {
|
||||||
const ratio = length ? sizeMap.get(tag.length) / length : 0
|
const ratio = length ? sizeMap.get(tag.length) / length : 0
|
||||||
const size = minfontsize + ((maxfontsize - minfontsize) * ratio)
|
const size = minfontsize + ((maxfontsize - minfontsize) * ratio)
|
||||||
const style = generateStyle(size, unit, page)
|
const color = resolveColor(idx)
|
||||||
|
const style = generateStyle(size, unit, page, color)
|
||||||
return `<a href="${env.url_for(tag.path)}" style="${style}">${tag.name}</a>`
|
return `<a href="${env.url_for(tag.path)}" style="${style}">${tag.name}</a>`
|
||||||
}).join('')
|
}).join('')
|
||||||
})
|
})
|
||||||
|
|||||||
Reference in New Issue
Block a user