我认为自己需要一个页面记录自己想要挖的坑做的事,但是hexo渲染markdown checkbox的样式很难看,所以我花一个下午的时间火速摸了个照样很难看的小玩具

使用

  • 参数1:事项类型
  • 参数2:是否已完成
  • 参数3:标题

请按指定关键字及其顺序填参,如果需要未完成、带标题的事项,请至少给参数2填一个空格,具体见示例

示例

已完成的非重要事项

1
2
3
4
5
{% todo "relax" "complete" %}

已完成的非重要事项

{% endtodo %}

一般事项

1
2
3
4
5
{% todo "normal" %}

一般事项

{% endtodo %}

重要事项

已完成、有标题的重要事项

1
2
3
4
5
{% todo "important" "complete" "重要事项" %}

已完成、有标题的重要事项

{% endtodo %}
紧急事项

有标题的重要事项

1
2
3
4
5
{% todo "urgent" " " "紧急事项" %}

有标题的重要事项

{% endtodo %}

未分类事项

1
2
3
4
5
{% todo %}

未分类事项

{% endtodo %}

代码

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
/**
* JuicyCafe
* todo
* {% todo [level] [solve] [title] %}
* [content]
* {% endtodo %}
*/

'use strict'

function todo(args, content) {

let level = args[0]
const solve = args[1]
const title = args[2]

if (!['relax', 'normal', 'important', 'urgent'].includes(level)) {
level = 'default'
}

let tag
switch (level) {
case 'relax':
tag = '非重要事项'
break
case 'normal':
tag = '一般事项'
break
case 'important':
tag = '重要事项'
break
case 'urgent':
tag = '紧急事项'
break
case 'default':
tag = '未分类事项'
break
}
let isSolve = solve == 'complete'
if(isSolve) {
tag = '已完成事项'
}

return `
<div class="tag_todo ${level}" title="${tag}">
${title ? `<div class="title">${title}</div>` : ''}
<div class="content">
<p>${content}</p>
<div class="check">
${isSolve? '<div class="checked">√</div>' : ''}
</div>
</div>
</div>
`
}

hexo.extend.tag.register('todo', todo, { ends: true })
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
.tag_todo 
margin 10px auto;
width: 95%;
border-radius: 10px;
padding: 5px 10px;
transform: scale(1);
transition: all 0.3s;
.title
font-size: 20px;

.content
display: flex;
align-items: center;
justify-content: space-between;

p
font-size: 16px;
word-wrap: break-word;
margin: 10px 0 !important;

.check
width: 15px;
height: 15px;
border: 1px solid #666;
border-radius: 3px;
margin: 10px;
.checked
text-align: center;
font-size: 20px;
line-height: 10px;



&:hover
transform: scale(1.02);
// background-color: rgba(255, 0, 0, .15);
// border-left-color: rgba(255, 0, 0, .4);

&.relax
background-color: rgba(82, 189, 82, 0.1);
border-left: 10px solid rgba(82, 189, 82, .3);
&:hover
background-color: rgba(82, 189, 82, .15);
border-left-color: rgba(82, 189, 82, .4);

&.normal
background-color: rgba(34, 151, 177, 0.1);
border-left: 10px solid rgba(34, 151, 177, .3);
&:hover
background-color: rgba(34, 151, 177, .15);
border-left-color: rgba(34, 151, 177, .4);

&.important
background-color: rgba(247, 167, 18, 0.1);
border-left: 10px solid rgba(247, 167, 18, .3);
&:hover
background-color: rgba(247, 167, 18, .15);
border-left-color: rgba(247, 167, 18, .4);

&.urgent
background-color: rgba(255, 0, 0, 0.1);
border-left: 10px solid rgba(255, 0, 0, .3);
&:hover
background-color: rgba(255, 0, 0, .15);
border-left-color: rgba(255, 0, 0, .4);

&.default
background-color: rgba(127, 127, 127, 0.1);
border-left: 10px solid rgba(127, 127, 127, .3);
&:hover
background-color: rgba(127, 127, 127, .15);
border-left-color: rgba(127, 127, 127, .4);