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
|
'use strict'
const timetoggle = (args, content) => {
const tlBlock = /<!--\s*timetoggle\s*(?<title>.*?)\s*-->\n(?<content>[\s\S]*?)<!--\s*endtimetoggle\s*-->/g
const strip_html = hexo.extend.helper.get('strip_html').bind(hexo)
const renderMd = text => hexo.render.renderSync({ text, engine: 'markdown' })
const [text, bg = false, color = ''] = args.length ? args.join(' ').split(',') : []
const generateStyle = (bg, color) => {
let style = 'style="'
if (bg) style += `background-color: ${bg};`
if (color) style += `color: ${color}`
style += '"'
return style
}
const style = generateStyle(bg, color)
const border = bg ? `style="border: 1px solid ${bg}"` : ''
const headline = text
? `<div class='timeline-item headline'>
<div class='timeline-item-title'>
<div class='item-circle'>${renderMd(text)}</div>
</div>
</div>`
: ''
const items = Array.from(content.matchAll(tlBlock))
.map(({ groups: { title, content } }) => {
const renderedTitle = renderMd(title)
const cleanTitle = strip_html(renderedTitle).trim()
return `<div class='timeline-item'><div class='timeline-item-title'>
<div class='item-circle'>
<details class="toggle" ${border} >
<summary class="toggle-button" ${style} >${cleanTitle}</summary>
<div class="toggle-content">${renderMd(content)}</div>
</details></div></div></div>`
})
.join('')
return `<div class="timeline ${color}">${headline}${items}</div>`
}
hexo.extend.tag.register('timetoggle', timetoggle, { ends: true })
|
