点开查看参考教程
引用站外地址
博客添加待办清单页
https://www.qcqx.cn/article/9875347c.html

预览

引用站外地址
ToDoList
https://www.creammint.cn/todolist/

代码实现

新建\layout\includes\page\todolist.pug

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
#todolist-box
    .page-top-card(style='background-image: url(https://cdn.creammint.cn/basicdata_img/todo.webp);')
        .content-item-tips 梦想清单
        span.content-item-title ToDoList
        .content-bottom
            .tips 要做的事还有很多，想做的事源源不断！
    #todolist-main
        #todolist-left
            each i in site.data.todolist
                if i.seat == 'left'
                    .todolist-item
                        h3.todolist-title=i.class_name
                        ul.todolist-ul
                            each item in i.todo_list
                                li.todolist-li
                                    if item.completed
                                        i.fa-regular.fa-circle-check
                                    else 
                                        i.fa-regular.fa-circle
                                    span=item.content
        #todolist-right
            each i in site.data.todolist
                if i.seat == 'right'
                    .todolist-item
                        h3.todolist-title=i.class_name
                        ul.todolist-ul
                            each item in i.todo_list
                                li.todolist-li
                                    if item.completed
                                        i.fa-regular.fa-circle-check
                                    else 
                                        i.fa-regular.fa-circle
                                    span=item.content

修改\layout\page.pug

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
case page.type
    when 'tags'
        include includes/page/tags.pug
        include includes/page/default-page.pug
    when 'link'
        include includes/page/flink.pug
    when 'categories'
        include includes/page/categories.pug
        include includes/page/default-page.pug
    when 'essay'
        include includes/page/essay.pug
+    when 'todolist'
+        include includes/page/todolist.pug
    default
        include includes/page/default-page.pug

新建\source\_data\todolist.yml

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
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
- class_name: 学习技能
  seat: left
  todo_list:
    - content: Java
      completed: false
    - content: Python
      completed: false
    - content: 个人博客
      completed: true
    - content: 前端开发
      completed: false   
    - content: 英语
      completed: false 

- class_name: 家庭关系
  seat: left
  todo_list:
    - content: 结婚和心爱的人组成家庭
      completed: false
    - content: 给家里人配置保险
      completed: false
    - content: 要带家人出去旅行
      completed: false

- class_name: 想去的城市
  seat: left
  todo_list:
    - content: 北京
      completed: false
    - content: 上海
      completed: false
    - content: 广州
      completed: true
    - content: 深圳
      completed: true
    - content: 厦门
      completed: true
    - content: 长沙
      completed: true
    - content: 肇庆
      completed: true
    - content: 东莞
      completed: true
    - content: 中山
      completed: true
    - content: 珠海
      completed: true
    - content: 出国
      completed: false
    - content: 香港
      completed: false

- class_name: 生活记录
  seat: right
  todo_list:
    - content: 坚持记账
      completed: true
    - content: 记录梦想清单
      completed: true
    - content: 记录有意义的事情
      completed: true

- class_name: 想去的地方
  seat: right
  todo_list:
    - content: 西藏布达拉宫
      completed: false
    - content: 珠穆朗玛峰
      completed: false
    - content: 新疆塔克拉玛大沙漠
      completed: false
    - content: 内蒙古大草原
      completed: false
    - content: 吉林长白山天池
      completed: false
    - content: 武汉樱花
      completed: false
    - content: 桂林
      completed: false

- class_name: 写作
  seat: right
  todo_list:
    - content: 写影评、书评
      completed: false
    - content: 我的成功日记
      completed: true
    - content: 写随笔
      completed: true
    - content: 写日记
      completed: true

- class_name: 影视
  seat: right
  todo_list:
    - content: BBC纪录片
      completed: false
    - content: 国内经典剧
      completed: true
    - content: 科普系列剧
      completed: false
    - content: 美剧
      completed: false
    - content: 豆瓣TOP250
      completed: false
    - content: TED讲座
      completed: false

- class_name: 美食
  seat: left 
  todo_list:
    - content: 精进基础厨艺
      completed: false
    - content: 解锁100道美食
      completed: true

- class_name: 开源
  seat: left 
  todo_list:
    - content: 个人博客
      completed: true
    - content: 推出一门课程
      completed: false
    - content: 影视剪辑
      completed: false
    - content: 发展公众号、头条号、百家号、知乎、小红书
      completed: false

- class_name: 社交
  seat: right 
  todo_list:
    - content: 换位思考
      completed: false
    - content: 认识国外朋友
      completed: false
    - content: 志同道合的朋友
      completed: true

- class_name: 精力管理
  seat: right 
  todo_list:
    - content: 避免大脑空想
      completed: false
    - content: 练习最佳状态
      completed: false
    - content: 注意力集中
      completed: false
    - content: 练习心流
      completed: false
    - content: 时间管理
      completed: false

添加CSS:

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
79
80
81
82
83
84
85
#todolist-box{
    margin: 0 10px;
}
#todolist-main{
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    margin: 16px 0 10px;
}
#todolist-main li{
    list-style:none;
    font-size: 17px;
}
#todolist-main ul{
    margin: 0;
    padding: 0;
}
#todolist-left{
    width: 50%;
    padding: 0 8px 0 0;
}
#todolist-right{
    width: 50%;
    padding: 0 0 0 8px;
}
.todolist-item{
    position: relative;
    background: #fae4df;
    border-radius: 12px;
    padding: 10px 1rem 1.2rem;
    border: 2px dashed #f7a796;
    margin-bottom: 1rem;
}
[data-theme=dark]
.todolist-item{
    background: #242424;
    border: 2px dashed #51908b;
}
li.todolist-li i{
    margin-left: 10px;
}
h3.todolist-title{
    margin: 0!important;
    border-bottom: var(--todo-border);
}
li.todolist-li{
    border-bottom: var(--todo-border);
    font-weight: normal;
}
.todolist-li span{
    margin-left: 5px;
}
@media screen and (max-width:700px){
    #todolist-left,#todolist-right{
        width: 100%;
        padding: 0;
    }
  }
.page-top-card{
  background-size: cover;
  background-position: center;
  height: 20.5rem;
  padding: 10px 2.7rem;
  border-radius: 20px;
  color: white;
  position: relative;
}
.page-top-card span.content-item-title{
  font-size: 2.3em;
  font-weight: bold;
  line-height: 1.2;
  font-family: STZhongsong,'Microsoft YaHei';
}
.page-top-card .content-bottom{
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: absolute;
  width: calc(100% - 5.4rem);
  bottom: 1rem;
}
[data-theme='dark'] .page-top-card{
  opacity: .92;
}

新建页面

使用: hexo new page "todolist" 命令新建一个todo页面

1
2
3
4
5
6
7
---
title: ToDoList
date: 2023-03-18 14:07:13
comments: false
aside: false
type: todolist
---