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

推荐订阅源

宝玉的分享
宝玉的分享
NISL@THU
NISL@THU
E
Exploit-DB.com RSS Feed
L
LINUX DO - 热门话题
L
Lohrmann on Cybersecurity
K
Kaspersky official blog
Project Zero
Project Zero
Cisco Talos Blog
Cisco Talos Blog
T
The Exploit Database - CXSecurity.com
P
Palo Alto Networks Blog
C
CXSECURITY Database RSS Feed - CXSecurity.com
T
Threatpost
S
Schneier on Security
G
GRAHAM CLULEY
The Hacker News
The Hacker News
T
Threat Research - Cisco Blogs
Scott Helme
Scott Helme
Threat Intelligence Blog | Flashpoint
Threat Intelligence Blog | Flashpoint
P
Privacy & Cybersecurity Law Blog
C
Cyber Attacks, Cyber Crime and Cyber Security
Cyberwarzone
Cyberwarzone
C
CERT Recently Published Vulnerability Notes
T
Tor Project blog
AWS News Blog
AWS News Blog
Simon Willison's Weblog
Simon Willison's Weblog
cs.CL updates on arXiv.org
cs.CL updates on arXiv.org
爱范儿
爱范儿
P
Privacy International News Feed
云风的 BLOG
云风的 BLOG
P
Proofpoint News Feed
S
Securelist
G
Google Developers Blog
The Last Watchdog
The Last Watchdog
Google Online Security Blog
Google Online Security Blog
美团技术团队
F
Fortinet All Blogs
小众软件
小众软件
Recorded Future
Recorded Future
V
Visual Studio Blog
B
Blog RSS Feed
H
Help Net Security
CTFtime.org: upcoming CTF events
CTFtime.org: upcoming CTF events
Google DeepMind News
Google DeepMind News
Blog — PlanetScale
Blog — PlanetScale
博客园 - 聂微东
Stack Overflow Blog
Stack Overflow Blog
Martin Fowler
Martin Fowler
Latest news
Latest news
Spread Privacy
Spread Privacy
H
Heimdal Security Blog

爱吃肉的猫

那就,再相逢 Butterfly的魔改教程:最新评论页 离歌不夜天 前端分享 - 滑动阻尼效果 Butterfly的魔改教程:右键菜单 音乐分享 - doi微醺氛围 Butterfly的魔改教程:动态相册页 近况记事 - 11 微信公众号:Ai大模型让回复更具智能化 近况记事 - 10 PWA:让你的网站变成桌面应用APP Healthy Love Butterfly的魔改教程:关于本站 近况记事 - 9 TrollStore - 不掉签助手 近况记事 - 8 Twikoo评论回复邮件模版 过一个很特别的七夕 The Young Boy and the Sea Butterfly的魔改教程:文章订阅页 思考题目:混乱是阶梯 近况记事 - 7 Butterfly的魔改教程:即刻短文页 Butterfly的魔改教程:loading加载动画 差旅游记 再见,不惑之年:二十又一 近况记事 - 6 Butterfly的魔改教程:自定页数跳转 堆友AI作图:3D资源设计平台,堆出你的未来 【QD-Today】自建私有自动签到服务 Long time no see Butterfly的魔改教程:聊天记录页 Butterfly的魔改教程:个性定位信息 近况记事 - 5 Butterfly的魔改教程:好物推荐页 CDN加速 二刷《想见你》 网络言论不是法外之地 近况记事 - 4 深夜训斥 近况记事 - 3 近况记事 - 2 日常打理的那些事 Butterfly的魔改教程:随机阅读一篇文章 随笔 · 封 布柒糖FM项目进展报告 清明路雨纷纷 TA - 仲夏夜的荒原 重构记录 - 4 近况记事 Butterfly的魔改教程:评论弹窗 2021款 Model Y 近两年用车总结 重构记录 - 3 百日祭 避风的港湾 Emoji表情大全 iCat-APP 开源记录 Butterfly的调整教程:文章外挂标签美化 iOS修改 - 万铲铲的致富之路 Markdown 基础教程 从你的全世界路过 小米摄像头!避!雷! VuePress 搭建教程 Hexo跳过指定文件渲染 百度贴吧每日自动签到 重构记录 - 1 GitHub Desktop提交报错 快速批量处理重命名 Git连接仓库常用命令 Ubuntu处理deb命令 掘金自动签到并挖矿 一个简洁的橙色调个人简介 我的猫以前也是流浪猫 布柒糖FM 最新指北 初学写个了油猴脚本 幽灵404页面 PC游戏 · 植物大战僵尸 语言包 · 越狱篇 砸壳多开 · 越狱篇 HuiRan Cursors 手动关闭Win10自动更新 iPhone XR 完美越狱 成功实例 三年的跌撞 关于《小橘妈妈》 魔改前置教程:添加自定义css和js文件 Hexo 博客添加RSS插件 Butterfly的魔改教程:导航栏魔改美化
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 所有,完整转载,请注明来源!