Skip to content

Commit c250e82

Browse files
windshadow233windshadow233
committed
Update blog
1 parent 9575502 commit c250e82

1 file changed

Lines changed: 127 additions & 40 deletions

File tree

  • themes/butterfly/scripts/helpers

‎themes/butterfly/scripts/helpers/page.js‎

Lines changed: 127 additions & 40 deletions
Original file line numberDiff line numberDiff line change
@@ -17,48 +17,135 @@ hexo.extend.helper.register('page_description', function () {
1717

1818
hexo.extend.helper.register('cloudTags', function (options = {}) {
1919
const env = this
20-
let { source, minfontsize, maxfontsize, limit, unit, orderby, order, fixSize, randomColor} = options
21-
unit = unit || 'px'
22-
23-
let result = ''
24-
if (limit > 0) {
25-
source = source.limit(limit)
26-
}
27-
28-
const sizes = []
29-
source.sort('length').forEach(tag => {
30-
const { length } = tag
31-
if (sizes.includes(length)) return
32-
sizes.push(length)
33-
})
34-
35-
const length = sizes.length - 1
36-
source.sort(orderby, order).forEach(tag => {
37-
const ratio = length ? sizes.indexOf(tag.length) / length : 0
38-
const size = minfontsize + ((maxfontsize - minfontsize) * ratio)
39-
let style;
40-
if (!fixSize) {
41-
style = `font-size: ${size}${unit};`
42-
} else {
43-
style = `font-size: 12px;`
44-
}
45-
let r, g, b;
46-
if (randomColor){
47-
r = Math.floor(Math.random() * 101) + 100
48-
g = Math.floor(Math.random() * 101) + 100
49-
b = Math.floor(Math.random() * 101) + 100
50-
} else {
51-
r = g = b = 144
52-
}
53-
const color = 'rgb(' + r + ', ' + g + ', ' + b + ')' // 0,0,0 -> 200,200,200
54-
const bg_color = 'rgb(' + r + ', ' + g + ', ' + b + ', 0.15' + ')'
55-
style += ` color: ${color};`
56-
style += ` background-color: ${bg_color}; margin: 0px 0px 5px 5px; border-radius: 10px;`
57-
result += `<a href="${env.url_for(tag.path)}" style="${style}">#${tag.name}</a>`
58-
})
59-
return result
20+
let {
21+
source,
22+
limit = 30,
23+
fixSize = false,
24+
randomColor = false,
25+
orderby = 'random',
26+
order = -1
27+
} = options
28+
29+
const tagList = source.map(tag => ({
30+
name: tag.name,
31+
path: env.url_for(tag.path),
32+
length: tag.length
33+
}))
34+
35+
return `
36+
<div id="cloud-tags"
37+
data-tags='${JSON.stringify(tagList)}'
38+
data-limit='${limit}'
39+
data-fix-size='${fixSize}'
40+
data-random-color='${randomColor}'
41+
data-orderby='${orderby}'
42+
data-order='${order}'>
43+
</div>
44+
<script>
45+
$(document).ready(function () {
46+
const container = document.getElementById("cloud-tags");
47+
if (!container) return;
48+
49+
const tags = JSON.parse(container.dataset.tags);
50+
const limit = parseInt(container.dataset.limit);
51+
const fixSize = container.dataset.fixSize === 'true';
52+
const randomColor = container.dataset.randomColor === 'true';
53+
const orderby = container.dataset.orderby || 'random';
54+
const order = parseInt(container.dataset.order) || -1;
55+
56+
const minFont = 12, maxFont = 24;
57+
let processed = tags.slice();
58+
59+
if (orderby === 'random') {
60+
processed = processed.sort(() => 0.5 - Math.random());
61+
} else if (orderby === 'name') {
62+
processed.sort((a, b) => order * a.name.localeCompare(b.name));
63+
} else if (orderby === 'length') {
64+
processed.sort((a, b) => order * (a.length - b.length));
65+
}
66+
67+
let sampled;
68+
if (limit !== 0) {
69+
sampled = processed.slice(0, limit);
70+
} else {
71+
sampled = processed;
72+
}
73+
74+
const sizes = [...new Set(sampled.map(tag => tag.length))];
75+
const len = sizes.length - 1;
76+
77+
sampled.forEach(tag => {
78+
const ratio = len ? sizes.indexOf(tag.length) / len : 0;
79+
const size = fixSize ? 12 : (minFont + ((maxFont - minFont) * ratio));
80+
81+
const r = randomColor ? Math.floor(Math.random() * 101) + 100 : 144;
82+
const g = randomColor ? Math.floor(Math.random() * 101) + 100 : 144;
83+
const b = randomColor ? Math.floor(Math.random() * 101) + 100 : 144;
84+
85+
const a = document.createElement("a");
86+
a.href = tag.path;
87+
a.textContent = "#" + tag.name;
88+
a.style = \`
89+
font-size: \${size}px;
90+
color: rgb(\${r}, \${g}, \${b});
91+
background-color: rgba(\${r}, \${g}, \${b}, 0.15);
92+
margin: 0 5px 5px 0;
93+
padding: 2px 6px;
94+
border-radius: 10px;
95+
text-decoration: none;
96+
display: inline-block;
97+
\`;
98+
container.appendChild(a);
99+
});
100+
});
101+
</script>
102+
`
60103
})
61104

105+
// hexo.extend.helper.register('cloudTags', function (options = {}) {
106+
// const env = this
107+
// let { source, minfontsize, maxfontsize, limit, unit, orderby, order, fixSize, randomColor} = options
108+
// unit = unit || 'px'
109+
110+
// let result = ''
111+
// if (limit > 0) {
112+
// source = source.limit(limit)
113+
// }
114+
115+
// const sizes = []
116+
// source.sort('length').forEach(tag => {
117+
// const { length } = tag
118+
// if (sizes.includes(length)) return
119+
// sizes.push(length)
120+
// })
121+
122+
// const length = sizes.length - 1
123+
// source.sort(orderby, order).forEach(tag => {
124+
// const ratio = length ? sizes.indexOf(tag.length) / length : 0
125+
// const size = minfontsize + ((maxfontsize - minfontsize) * ratio)
126+
// let style;
127+
// if (!fixSize) {
128+
// style = `font-size: ${size}${unit};`
129+
// } else {
130+
// style = `font-size: 12px;`
131+
// }
132+
// let r, g, b;
133+
// if (randomColor){
134+
// r = Math.floor(Math.random() * 101) + 100
135+
// g = Math.floor(Math.random() * 101) + 100
136+
// b = Math.floor(Math.random() * 101) + 100
137+
// } else {
138+
// r = g = b = 144
139+
// }
140+
// const color = 'rgb(' + r + ', ' + g + ', ' + b + ')' // 0,0,0 -> 200,200,200
141+
// const bg_color = 'rgb(' + r + ', ' + g + ', ' + b + ', 0.15' + ')'
142+
// style += ` color: ${color};`
143+
// style += ` background-color: ${bg_color}; margin: 0px 0px 5px 5px; border-radius: 10px;`
144+
// result += `<a href="${env.url_for(tag.path)}" style="${style}">#${tag.name}</a>`
145+
// })
146+
// return result
147+
// })
148+
62149
hexo.extend.helper.register('urlNoIndex', function (url = null, trailingIndex = false, trailingHtml = false) {
63150
return prettyUrls(url || this.url, { trailing_index: trailingIndex, trailing_html: trailingHtml })
64151
})

0 commit comments

Comments
 (0)