记录

进行一次优化，让待办清单页更简洁使用，根据自己的情况修改，这里在数据下添加手动添加左右判断感觉很不好，这里就进行了一次整改，使代码更简洁，使用 CSS 实现，减少代码量。

过程

这里根据『轻笑Chuckle』的清单改编的，如果有使用的，把todolist.pug、自定义CSS文件和todolist.yml更改即可。

  1. 在【Blogroot】/themes/butterfly/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);')
        .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

  2. 在【Blogroot】/themes/butterfly/layout目录下找到 page.pug 文件，添加文件路径：

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

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

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    - class_name: 我的博客
      todo_list:
        - content: 冰刻无痕
          completed: false
        - content: 冰梦の博客
          link: https://icemyst.github.io/
          completed: true
        - content: Github支线
          link: https://icemyst.github.io/
          completed: true
        - content: Netlify支线
          link: https://icemyst.netlify.app/
          completed: true
        - content: Vercel支线
          link: https://icemyst.vercel.app/
          completed: true

  4. 执行hexo new post todolist会创建【Blogroot】/source/todolist/index.md文件，也可以自行创建，添加如下代码：

    1
    2
    3
    4
    5
    6
    7
    ---
    title: ToDoList
    date: 2023-10-13 19:07:08
    comments: false
    aside: false
    type: todolist
    ---

  5. 自定义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
    :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: white;
        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;
        }
    }