惯性聚合 高效追踪和阅读你感兴趣的博客、新闻、科技资讯
阅读原文 在惯性聚合中打开

推荐订阅源

奇客Solidot–传递最新科技情报
奇客Solidot–传递最新科技情报
C
CXSECURITY Database RSS Feed - CXSecurity.com
D
Docker
有赞技术团队
有赞技术团队
WordPress大学
WordPress大学
Jina AI
Jina AI
小众软件
小众软件
Last Week in AI
Last Week in AI
Hugging Face - Blog
Hugging Face - Blog
博客园 - 三生石上(FineUI控件)
宝玉的分享
宝玉的分享
美团技术团队
爱范儿
爱范儿
V
V2EX
大猫的无限游戏
大猫的无限游戏
人人都是产品经理
人人都是产品经理
J
Java Code Geeks
博客园 - 司徒正美
博客园 - 叶小钗
S
SegmentFault 最新的问题
量子位
S
Secure Thoughts
月光博客
月光博客
让小产品的独立变现更简单 - ezindie.com
让小产品的独立变现更简单 - ezindie.com
O
OpenAI News
L
LINUX DO - 最新话题
罗磊的独立博客
SecWiki News
SecWiki News
雷峰网
雷峰网
Recent Announcements
Recent Announcements
V2EX - 技术
V2EX - 技术
T
Tailwind CSS Blog
H
Hacker News: Front Page
Exploit-DB.com RSS Feed
Exploit-DB.com RSS Feed
云风的 BLOG
云风的 BLOG
Schneier on Security
Schneier on Security
T
The Blog of Author Tim Ferriss
IT之家
IT之家
博客园 - 聂微东
腾讯CDC
N
News | PayPal Newsroom
P
Proofpoint News Feed
CTFtime.org: upcoming CTF events
CTFtime.org: upcoming CTF events
The GitHub Blog
The GitHub Blog
Hacker News: Ask HN
Hacker News: Ask HN
aimingoo的专栏
aimingoo的专栏
Webroot Blog
Webroot Blog
Application and Cybersecurity Blog
Application and Cybersecurity Blog
Google DeepMind News
Google DeepMind News
K
Kaspersky official blog

爱吃肉的猫

那就,再相逢 Butterfly的魔改教程:最新评论页 离歌不夜天 前端分享 - 滑动阻尼效果 Butterfly的魔改教程:右键菜单 音乐分享 - doi微醺氛围 Butterfly的魔改教程:动态相册页 近况记事 - 11 微信公众号:Ai大模型让回复更具智能化 近况记事 - 10 PWA:让你的网站变成桌面应用APP Healthy Love Butterfly的魔改教程:关于本站 近况记事 - 9 TrollStore - 不掉签助手 近况记事 - 8 Twikoo评论回复邮件模版 过一个很特别的七夕 The Young Boy and the Sea
Butterfly的魔改教程:待办清单
亦小封 · 2023-10-07 · via 爱吃肉的猫

最后更新于 2023 年 10 月 06 日

231006 更新:适配本地静态数据部署

效果预览

引用站外地址,注意辨别

创建数据

  • 创建 [blogRoot]/source/project/index.md 页面
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
---
title: 清单
date: 2023-04-20 11:56:42
type: project
top_img: false
aside: false
top_page: true
top_bg: https://img.meuicat.com/banner
top_item: 待办
top_title: 生活清单
top_tips: 原来我有这么多想要做的事情
comments: false
---

<!-- 页面内容 -->
  • 修改 [blogRoot]/themes/butterfly/layout/page.pug 来使页面匹配
    + 号直接删除 即是正常缩进)
1
2
3
4
5
6
      when 'categories'
include includes/page/categories.pug
+ when 'project'
+ include includes/page/project.pug
default
include includes/page/default-page.pug
  • 新建 [blogRoot]/themes/butterfly/layout/includes/page/project.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
if page.memos_url
#todolist
.todolist-bottom
p Powered by
a(target="_blank" href="https://github.com/usememos/memos" rel="noopener external nofollow") Memos

else
if site.data.project
#todolist
- let result = ""
each i in site.data.project
- let className = i.class_name
- let listResult = ""
- let state = ""
- let strikethrough = ""

each j in i.project_list
-
if (j.state) {
state = `fa-circle-check`
strikethrough = `class="achieve"`
} else {
state = `fa-circle`
strikethrough = ``
}
listResult += `
<li ${strikethrough}>
<i style="margin-right: 5px;" class="fa-regular ${state}"></i>${j.content}
</li>`
-

- result += `<div class="list_item"><h3>${className}</h3><ul>${listResult}</ul></div>`
!= result

.todolist-bottom
p Powered by
a(target="_blank" href="https://github.com/usememos/memos" rel="noopener external nofollow") Memos
  • 新建 [blogRoot]/source/css/project.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
#todolist {
display: flex;
flex-wrap: wrap;
margin-top: 1rem;
}
.list_item {
display: inline-block;
width: calc(33.333% - .5rem);
background: #ffe3dd;
border-radius: 12px;
border: var(--style-border-always);
box-shadow: var(--icat-shadow-border);
padding: 10px 1rem 1.2rem;
border: 2px dashed #f7a796;
--todo-border: 1px solid #f7a796;
margin-right: 1rem;
margin-bottom: 1rem;
}
.list_item h3 {
margin: 0;
color: #333;
border-bottom: var(--todo-border);
}
.list_item ul {
font-size: 17px;
padding: 0 !important;
margin: 0;
}
.list_item li{
margin: 0 !important;
color: #333;
border-bottom: var(--todo-border);
}
.list_item li::marker {
content: none;
}
li.achieve {
opacity: .8;
text-decoration: line-through;
}
.bottom {
line-height: 1.5;
text-align: right;
}
.bottom p {
margin: 0 !important;
}
.bottom a {
font-weight: 700;
color: var(--font-color) !important;
}
[data-theme="dark"] .list_item {
border: 2px solid var(--icat-card-border) !important;
}
@media screen and (max-width: 900px) {
div#todolist {
margin: 1rem 5px 0;
}
}
@media screen and (max-width: 768px) {
.list_item{
width: 100%;
}
.bottom {
text-align: center;
}
}


  • 创建 [blogRoot]/source/js/memos/waterfall.min.js 文件,并新增以下内容,用来处理Memos清单页的瀑布流
    (在前几节的即刻短文和上一节的Memos动态相册教程里都有此js步骤,如果有了那么这一步就可以跳过)
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
function waterfall(a) {
function b(a, b) {
var c = window.getComputedStyle(b);
return parseFloat(c["margin" + a]) || 0
}

function c(a) {
return a + "px"
}

function d(a) {
return parseFloat(a.style.top)
}

function e(a) {
return parseFloat(a.style.left)
}

function f(a) {
return a.clientWidth
}

function g(a) {
return a.clientHeight
}

function h(a) {
return d(a) + g(a) + b("Bottom", a)
}

function i(a) {
return e(a) + f(a) + b("Right", a)
}

function j(a) {
a = a.sort(function(a, b) {
return h(a) === h(b) ? e(b) - e(a) : h(b) - h(a)
})
}

function k(b) {
f(a) != t && (b.target.removeEventListener(b.type, arguments.callee), waterfall(a))
}
"string" == typeof a && (a = document.querySelector(a));
var l = [].map.call(a.children, function(a) {
return a.style.position = "absolute", a
});
a.style.position = "relative";
var m = [];
l.length && (l[0].style.top = "0px", l[0].style.left = c(b("Left", l[0])), m.push(l[0]));
for (var n = 1; n < l.length; n++) {
var o = l[n - 1],
p = l[n],
q = i(o) + f(p) <= f(a);
if (!q) break;
p.style.top = o.style.top, p.style.left = c(i(o) + b("Left", p)), m.push(p)
}
for (; n < l.length; n++) {
j(m);
var p = l[n],
r = m.pop();
p.style.top = c(h(r) + b("Top", p)), p.style.left = c(e(r)), m.push(p)
}
j(m);
var s = m[0];
a.style.height = c(h(s) + b("Bottom", s));
var t = f(a);
window.addEventListener ? window.addEventListener("resize", k) : document.body.onresize = k
}


  • _config.butterfly.yml 主题配置文件中 inject 下的 headbottom 分别引入 project.css waterfall.min.js
1
2
3
4
5
6
7
8
9
  ···

inject:
head:
- <link rel="stylesheet" href="/css/project.css">
bottom:
- <script type="text/javascript" src="/js/memos/waterfall.min.js"></script>

···

部署数据文件

  • 创建 [blogRoot]/source/_data/project.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
- class_name: 近期计划
project_list:
- content: 工作项目顺利收尾完工
state: true
- content: 返深
state: true
- content: 抽空处理分享describe
state: true
- content: 考虑转行
state: false

- class_name: 要处理的项目
project_list:
- content: 做一款阅读类博客主题
state: false
- content: 导航页
state: false
- content: 个人主页
state: false
- content: 简历页
state: false
- content: 重构 iCat 布柒糖FM
state: true
- content: 重构 iCat 卡布奇诺
state: true
- content: 二次重构优化 iCat爱吃肉的猫 V2.0
state: true
- content: 布柒糖FM 项目铺展
state: false

- class_name: 自我提升
project_list:
- content: 每月至少阅读一本书
state: true
- content: 养成定点喝水的习惯
state: true
- content: 每日刮胡子
state: true
- content: 定期护肤
state: false
- content: 专升本
state: false
- content: 坚持健身
state: false

- class_name: 想学的技术
project_list:
- content: CSS进阶
state: true
- content: Javascript进阶
state: false
- content: 微信小程序
state: true
- content: 单片机
state: false
- content: Node
state: true
- content: Docker
state: true
- content: Webpack
state: false
- content: Photoshop
state: true
- content: Illustrator
state: false
- content: EJS
state: true

- class_name: 想买的东西
project_list:
- content: 奥林巴斯 EM-5 III
state: false
- content: SONY A7R3A
state: false
- content: DJI Mini 3 Pro
state: false
- content: MacBook Pro
state: true
- content: Apple Watch Series 7
state: true
- content: 换WD 移动硬盘 2TB
state: false
  • 创建 [blogRoot]/source/js/memos/project.js 文件,并新增以下内容,用来处理本地清单的瀑布流响应布局
    (或写在自建的公共 js 中也可以)
1
2
3
4
5
6
7
8
9
function whenDOMReady() {
window.addEventListener('load', function() {
if (location.pathname == '/project/') waterfall('#todolist');
});
}
whenDOMReady()
document.addEventListener("pjax:complete", whenDOMReady)


  • _config.butterfly.yml 主题配置文件中 inject 下的 bottom 引入 project.js 文件
1
2
3
4
5
6
7
8
9
  ···

inject:
head:
···
bottom:
- <script type="text/javascript" src="/js/memos/project.js"></script>

···

如果没有服务器可以搭建memos,可以使用iCat自用的memos服务:iCat - Memos

  • 新增 [blogRoot]/source/project/index.md 页面的 Post Front-matter 配置项 memos_urltrue
1
2
3
4
5
6
7
---
···

memos_url: true
---

<!-- 文章内容 -->
  • 创建 [blogRoot]/source/js/memos/project.js 文件,并新增以下内容,用来处理Memos清单的函数
    (或写在自建的公共 js 中也可以)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
todolist();
function todolist() {
fetch('你的memos地址/api/v1/memo?creatorId=用户ID&tag=清单').then(res => res.json()).then(data => {

data.forEach(item => {

let content = item.content,
title = content.match(/\[(.*?)\]/g)[0].replace(/\[(.*?)\]/, '$1');

content = content.replace(/#.*\s/g, '').replace(/(-\s\[\s\]\s)(.*)/g, `<li><i style="margin-right: 5px;" class="fa-regular fa-circle"></i>$2</li>`).replace(/(-\s\[x\]\s)(.*)/g, `<li class="achieve"><i style="margin-right: 5px;" class="fa-regular fa-circle-check"></i>$2</li>`);

let div = document.createElement('div');
div.className = 'list_item';
div.innerHTML = `<h3>${title}</h3><ul>${content}</ul>`;
document.getElementById('todolist').appendChild(div);
});
waterfall('#todolist');
}).catch()
}


Memos1.4.0以上版本,bg,color
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
todolist();
function todolist() {
fetch('你的memos地址/api/memo?creatorId=用户ID&tag=清单').then(res => res.json()).then(data => {

data = data.data
let box = document.getElementById('todolist')
data.forEach(item => {

let content = item.content,
title = content.match(/\[(.*?)\]/g)[0].replace(/\[(.*?)\]/,'$1');

content = content.replace(/#.*\s/g, '').replace(/(-\s\[\s\]\s)(.*)/g, `<li><i style="margin-right: 5px;" class="fa-regular fa-circle"></i>$2</li>`).replace(/(-\s\[x\]\s)(.*)/g, `<li class="achieve"><i style="margin-right: 5px;" class="fa-regular fa-circle-check"></i>$2</li>`);

let div = document.createElement('div');
div.className = 'list_item';
div.innerHTML = `<h3>${title}</h3><ul>${content}</ul>`;
box.appendChild(div);
});
waterfall('#todolist');
}).catch()
}


  • _config.butterfly.yml 主题配置文件中 inject 下的 bottom 引入 project.js 文件
1
2
3
4
5
6
7
8
9
  ···

inject:
head:
···
bottom:
- <script type="text/javascript" src="/js/memos/project.js"></script>

···
  • Memos用法:
1
2
3
#清单 [我是标题栏]
- [ ] 我是内容1
- [x] 我是内容2

注意:
前面的 #清单 是固定的
标题用中括号包起来
已完成的将括号内的空格改成 x 即可

Butterfly的魔改教程:待办清单

此文章版权归 MeuiCat 所有,完整转载,请注明来源!