前言

最初是在 Leonus 的 基于Memos实现说说和清单功能 文章上了解到，该功能是需要依赖 Memos 来发布新的清单，而我这个 Memos 是 小N同学 的纯公益代部署服务

在用了一段时间后，我发现我也没有经常发布这个清单，也就想可不可以将这个静态部署呢。在看到 铭心石刻 的 为你的博客添加待办清单页 后就根据教程进行了部署，只不过发现在我小米10的手机上顶部图左右移动会很卡，遂觉得需要解决掉

最后在某一天逛自已博客的朋友圈时，发现 冰梦 发布了 待办清单页(本地整改版) 这篇文章，也是对清单页的静态部署，既然这样就根据教程部署吧，最后发现手机卡顿问题解决了

部署

执行如下命令创建一个页面

1
hexo new page todolist

在 /themes/anzhiyu/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
#todolist-box
  .page-top-card(style='background-image: url(https://pic.imgdb.cn/item/64fc80bd661c6c8e5403c5d9.webp) top / cover no-repeat;')
    .content-item-tips 待办
    span.content-item-title 记录清单
    .content-bottom
      .tips 想要记录的事还有很多，想要做的事源源不断

  #todolist-container
    each i in site.data.todolist
      #todolist-main
        h3= i.class_name
        .todolist-content
          ul
            each item in i.todo_list
              li
                if item.completed
                  i.fa-regular.fa-check-circle
                else
                  i.fa-regular.fa-circle
                if item.link
                  a(href=item.link)= item.content
                else
                  span= item.content

在 /themes/anzhiyu/layout 目录下找到 page.pug 文件，添加文件路径：

1
2
+ when 'todolist'
+   include includes/page/todolist.pug

在 /source/_data 新建 todolist.yml 文件，添加如下代码：

1
2
3
4
5
6
7
8
9
10
- class_name: 我的博客
  todo_list:
    - content: 冰刻无痕
      completed: false
    - content: 冰梦の博客
      link: https://icemyst.github.io/
      completed: true
    - content: Github支线
      link: https://icemyst.github.io/
      completed: false

在 /source/css 新建 todolist.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
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
:root {
    --todo-border: 1px solid #f7a796;
}

[data-theme=dark] {
    --todo-border: 1px solid #51908b;
}

/* 处理单页背景 */
body[data-type="todolist"] #page {
    border: 0;
    box-shadow: none !important;
    padding: 0 !important;
    background: 0 0 !important;
}

body[data-type="todolist"] #page .page-title {
    display: none;
}

/* 顶部显示 */
.page-top-card {
    /* background-size: cover;
    background-position: center; */
    height: 20.5rem;
    padding: 10px 2.7rem;
    border-radius: 20px;
    color: #fff;
    position: relative;
}

.page-top-card span.content-item-title {
    font-size: 2.3em;
    font-weight: bold;
    line-height: 1.2;
    font-family: '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;
}

/* 清单 */

#todolist-container {
    margin: 16px 0 10px;
    column-count: 2;
}

#todolist-main {
    break-inside: avoid-column;
    background: #fae4df;
    padding: 10px;
    border: 2px dashed #f7a796;
    margin-bottom: 20px;
    border-radius: 12px;
    box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.5);
}

[data-theme=dark] #todolist-main {
    background: #242424;
    border: 2px dashed #51908b;
}

#todolist-main h3 {
    margin: 0 !important;
    border-bottom: var(--todo-border);
}

#todolist-main ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

#todolist-main li {
    font-size: 18px;
    text-indent: 5px;
    border-bottom: var(--todo-border);
    margin: 0 !important;
    font-weight: normal;
}

#todolist-main i {
    padding: 0 5px;
}

@media screen and (max-width: 768px) {
    #todolist-container {
        column-count: 1;
    }
}

在主题配置文件 _config.anzhiyu.yml 添加如下代码：

1
2
3
4
inject:
  head:
    # 清单
    - <link rel="stylesheet" href="/css/todolist.css">

接下来执行hexo三连就可以成功访问 清单 了