添加一个待办清单页

注意，该内容需修改主题文件，本文操作步骤为 anzhiyu 主题

本文提供为hexo博客新建一个清单页的教程。
内容转载自铭心石刻

一、样式预览

前往预览页面：待办清单

二、实现步骤

1、修改文件

在\themes\anzhiyu\layout\page.pug中新增以下内容,记得删除+

1
2
3
4
5
6
      when 'music'
        include includes/page/music.pug
+     when 'todolist'
+       include includes/page/todolist.pug
      default
        include includes/page/default-page.pug

2、新建文件

  • 新建pug文件
  • 在\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
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    #todolist-box
        - let todo_background = page.top_background
        .author-content.author-content-item.todolist.single(style=`${todo_background ? `background: url(${todo_background}) top / cover no-repeat;` : ""}`)
            .card-content
                .author-content-item-tips Todo
                span.author-content-item-title 待办清单
                .content-bottom
                .tips 耽误太多时间，事情可就做不完了
                .banner-button-group
                  a.banner-button(onclick='pjax.loadUrl("/about/")')
                    i.anzhiyufont.anzhiyu-icon-arrow-circle-right(style='font-size: 1.5rem')
                    span.banner-button-text 我的更多
        #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
                                     - var listItemClass = item.completed ? 'todolist-li-done' : 'todolist-li'
                                     li(class=listItemClass)
                                        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
                                     - var listItemClass = item.completed ? 'todolist-li-done' : 'todolist-li'
                                     li(class=listItemClass)
                                        if item.completed
                                            i.fa-regular.fa-circle-check
                                        else 
                                            i.fa-regular.fa-circle
                                        span=item.content
  • 新建yml文件
  • 新建\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
    # seat控制清单在左栏还是右栏显示，completed控制是否已完成
    - class_name: 想做的项目
      seat: left
      todo_list:
        - content: 主页
          completed: false
        - content: 小程序
          completed: false

    - class_name: 想看的书
      seat: left
      todo_list:
        - content: 《骆驼祥子》
          completed: false
        - content: 《活着》
          completed: false

    - class_name: 想买的东西
      seat: left
      todo_list:
        - content: 东西
          completed: true
        - content: 机械硬盘盒
          completed: true

    - class_name: 想学的技术
      seat: right
      todo_list:
        - content: 骑自行车
          completed: false
        - content: 修自行车
          completed: false

    - class_name: 想去的地方
      seat: right
      todo_list:
        - content: 桂林
          completed: true
        - content: 心里
          completed: false
  • 新建md页面文件
  • 新建文件\source\todolist\index.md并按以下格式填写
  • top_background也就是顶部图，自行填写 
    1
    2
    3
    4
    5
    6
    ---
    title: todolist
    date: 2023-06-18 14:07:13
    type: todolist
    top_background: 
    ---

引入css

新增css内容

  • 页面已经有了，现在缺少css内容装饰它
  • 新建文件\source\css\todolist.css或在已引入的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

    body[data-type="todolist"] #web_bg {
      background: var(--anzhiyu-background);
    }
    body[data-type="todolist"] #page {
      border: 0;
      -webkit-box-shadow: none !important;
      box-shadow: none !important;
      padding: 0 !important;
      background: 0 0 !important;
    }
    body[data-type="todolist"] #page .page-title {
      display: none;
    }
    /* Todolist */
    #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;
      margin-left: -10px;
    }
    li.todolist-li-done{
      border-bottom: var(--todo-border);
      font-weight: normal;
      text-decoration: line-through;
    }
    .todolist-li span{
      margin-left: 5px;
    }
    .todolist-li-done span{
      margin-left: 5px;
    }
    @media screen and (max-width:700px){
      #todolist-left,#todolist-right{
          width: 100%;
          padding: 0;
      }
    }
  • 在_config.anzhiyu.yml主题配置文件下inject配置项中head处
  • 引入todolist.css文件
    1
    2
    3
    4

    inject:
      head:
        - <link rel="stylesheet" href="/css/todolist.css"> # 待办清单页

三、大功告成

执行hexo预览三连查看效果吧~

1
hexo clean; hexo g; hexo s