? 任务清单

? 需求

最近有个新需求，想在博客程序里面显示任务清单功能，参考了Markdown写作软件Typora中See Yue主题的实现方式。

Tips / 提示

See Yue 主题是一个自定义样式极多、简约、充满细节的 Typora 明亮主题。（See Yue theme is a bright typora theme with many custom styles, simplicity and full of details.）

? 实现思路

有了想法接下来就是如何通过代码的方式进行实现。

首先原生态的md文件就是一个ul列表，然后列表的开头会以[x]标记为已完成任务，以[ ]标记未完成任务。

那么具体的思路就是：

  1. 使用JQuery判断ul列表的前三个字符是否为[x]或者[ ]，如果不是直接跳过，如果是说明是任务列表。
  2. 判断之后，记录原ul列表中的文本内容，对其进行重新组装，并配合CSS样式。

具体的JS代码为：

$("ul li").each(function (index, ele) {  // 获取页面所有ul中的li
    let cur_str = $(this).text()  // 获取li中的文本
    if (cur_str.startsWith('[x]')) {  // 说明是已完成列表
        $(this).addClass('task-list-item').empty().prepend('<input type="checkbox" checked>').append('<span class="task-list-done">'+cur_str.slice(3)+'</span>')  // 为li新增class类名用于css样式；清空li中的所有内容；在li中前面新增一个checkbook，后面新增一个span用于放置原来的文本。
    }else if (cur_str.startsWith('[ ]')) {  // 说明是未完成列表
        $(this).addClass('task-list-item').empty().prepend('<input type="checkbox">').append('<span>'+cur_str.slice(3)+'</span>')
    }
})

然后配合css样式为：

.articleBody .task-list-item {
    position: relative;
    list-style-type: none;
    padding-left: 24px;
}

.articleBody .task-list-item>input {
    appearance: initial;
    display: block;
    position: absolute;
    border: 1.5px solid #bfbcbc;
    border-radius: 0.2rem;
    height: 1.1rem;
    width: 1.1rem;
    top: 50%;
    transform: translateY(-50%);
    left: 3px;
    padding: 0 !important;
    box-shadow: 0px 0px 5px 0px rgb(0 0 0 / 10%);
    transition: all .3s ease;
}

/* 鼠标悬浮在任务列表框框样式 */
.articleBody .task-list-item>input:hover {
    background-color: rgb(129, 178, 154, 0.2) !important;
}

/* 任务列表打钩 */
.articleBody .task-list-item>input[checked]::before {
    content: "✔️";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-weight: bold;
    font-size: .9rem;
    color: #eb6240;
    font-family: 'iconfont';
}

.task-list-done {
    text-decoration: line-through;
    color: #aaa;
}

? 解析样式

- [ ]  网站内容统计；
- [x] ?️ 前端页面美化；
- [ ] ⌨️ 后端数据库结构优化；
- [x] ? 简历页面制作。

解析为：

  • [ ] ?️ 网站内容统计；
  • [x] ?️ 前端页面美化；
  • [ ] ⌨️ 后端数据库结构优化；
  • [x] ? 简历页面制作。

具体的实现效果可以看本站文章：2023农历新年纪实。

原生态md文档
原生态md文档
经过调整的任务列表
经过调整的任务列表

✒️ 引用样式块

⌨️ 代码实现

/*引用基础设置*/
blockquote:has(h3, h4, h5, h6) {
    border-left: 0.25em solid #8496b0 !important;
    padding: 10px 10px !important;
    color: #999 !important;
    background-color: #e3ebf0 !important;
    font-size: 17px;
    margin: 10px 0 !important;
}

blockquote>h3:first-child,
blockquote>h4:first-child,
blockquote>h5:first-child,
blockquote>h6:first-child {
    font-size: 1.1rem;
    margin: -10px -16px -5px -16px !important;
    padding: 12px 12px 0px !important;
    display: flex;
    align-items: center;
    letter-spacing: 1px;
    font-weight: 600;
}

/* Warning / 注意 */
blockquote>h3:first-child {
    color: #c00000 !important;
}

blockquote>h3:first-child::before,
blockquote>h3.md-focus::before {
    content: "\f0c3";
    font-family: "void-icon";
    font-size: 1.05rem !important;
    color: #c00000 !important;
    position: relative;
    top: 0px;
    left: 3px;
    margin-right: 10px;
    padding: 0;
}

/* Quote / 参考 */
blockquote>h4:first-child {
    color: #3b83c1 !important;
}

blockquote>h4:first-child::before,
blockquote>h4.md-focus::before {
    content: "\e812";
    font-family: "void-icon";
    font-size: 1.25rem !important;
    color: #3b83c1 !important;
    position: relative;
    top: 0px;
    left: 2px;
    margin-right: 10px;
    padding: 0;
}

/* Tips / 提示 */
blockquote>h5:first-child {
    color: #ffae00 !important;
}

blockquote>h5:first-child::before,
blockquote>h5.md-focus::before {
    content: "\e800";
    font-family: "void-icon";
    font-size: 1.25rem;
    color: #ffae00 !important;
    position: relative;
    top: 0px;
    left: 2px;
    margin-right: 10px;
    padding: 0;
}

/* Expand / 拓展 */
blockquote>h6:first-child {
    color: #3abd7e !important;
}

blockquote>h6:first-child::before,
blockquote>h6.md-focus::before {
    content: "\e805";
    font-family: "void-icon";
    font-size: 1.25rem;
    color: #3abd7e !important;
    position: relative;
    top: 0px;
    left: 1px;
    margin-right: 10px;
    padding: 0;
}

? 食用方法

> ### Warning / 注意
>
> 这是一个三级标题。


> #### Quote / 参考
>
> 这是一个四级标题。


> ##### Tips / 提示
>
> 这是一个五级标题。


> ###### Expand / 拓展
>
> 这是一个六级标题。

? 解析样式

Warning / 注意

这是一个三级标题。

Quote / 参考

这是一个四级标题。

Tips / 提示

这是一个五级标题。

Expand / 拓展

这是一个六级标题。

☑️ 折叠框

⌨️ 代码实现

/* 折叠标签 */
details {
    border: 2px solid #428bca;
    transition: all .5s ease;
}

details summary {
    cursor: pointer;
    padding: 10px;
    color: #135699;
    font-size: 0.9rem !important;
    font-weight: bolder;
    position: relative;
}

details[open]>summary {
    margin: 0 -10px;
    border: unset;
}

details>summary {
    background: #ebf9ed;
    color: #428bca;
}

/* 折叠块打开 */
details[open] {
    border: 3px solid #81b29a;
    padding: 0 10px;
}

summary::marker {
    color: #e07a5f;
}

/* 折叠框点击时,会出现黑色边框，极不美观，去除 */
summary:focus {
    outline: none !important;
}

? 食用方法

<details>
    <summary>折叠标签</summary>
    <ol><li> 测试一下吧！</li></ol><ul><li> 测试一下吧！</li></ul>
    <p>海客谈瀛洲，烟涛微茫信难求，越人语天姥，云霞明灭或可睹。天姥连天向天横，势拔五岳掩赤城。天台一万八千丈，对此欲倒东南倾。</p>
    <blockquote>
        测试一下吧！
    </blockquote>
    <strong>镜湖月</strong> <u>镜湖月</u> <i>镜湖月</i>
</details>

? 解析样式

折叠标签
  1. 测试一下吧！
  • 测试一下吧！

海客谈瀛洲，烟涛微茫信难求，越人语天姥，云霞明灭或可睹。天姥连天向天横，势拔五岳掩赤城。天台一万八千丈，对此欲倒东南倾。

测试一下吧！
镜湖月 镜湖月 镜湖月

✒️ 有序/无序列表

⌨️ 代码实现

.articleBody ol ol {
    list-style-type: upper-alpha;
}

.articleBody ol ol ol {
    list-style-type: lower-alpha;
}

.articleBody ol ol,
.articleBody ol ol ol {
    border-left: 1px solid red;
    padding-left: 25px;
}

.articleBody ol li::marker,
.articleBody ul li::marker {
    color: #e07a5f;
}

? 食用方法

1. 理科
   1. 数学
      1. 微积分
      2. 线性代数
      3. 概率论
   2. 物理
   3. 化学
2. 语文

? 解析样式

  1. 理科

    1. 数学

      1. 微积分
      2. 线性代数
      3. 概率论
    2. 物理
    3. 化学
  2. 语文