一、实现目的:
练习制作一个非常简单的挂件,作用仅仅只是显示一下当前文章是什么时候修改的。
二、实现方法:
1、创建挂件文件夹
思源的所有挂件都位于工作空间=》data=》widgets 这个文件夹下面。
为了创建一个新的挂件,首先我们需要在这个位置下面创建一个新的文件夹
就像这样
创建完之后我们就已经能够在斜杠菜单里面看到这个名字了,但是现在你插入它还什么都不会显示:
因为挂件在文档中显示的其实是一个叫 index.html
的文件,至于为什么叫这个不用纠结,这是约定好的入口文件,我们的文件夹下面暂时没有这个文件所以什么也显示不出来。
在这个文件夹下面新建 index.html 之后,右键用记事本打开它(假设你只会用记事本,但是我自己比较习惯用 vscode,推荐你也试一下),然后在这个文件里面输入下面这些内容
<!DOCTYPE html>
<html>
<body>
<div>
当前文章修改于2022年11月20号.
</div>
</body>
</html>
保存之后,不出意外的话,再插入挂件会显示下面这样的内容:
现在它已经可以显示出文字了,但是这个文字是我们手写的,还不能显示所在文档的修改时间,我们要想办法让它显示文档修改时间
首先我们要能够获取文档的属性,把 index.html 的内容修改成这样:
<!DOCTYPE html>
<!DOCTYPE html>
<html>
<head>
<script>
let 块id = window.frameElement.parentElement.parentElement.dataset.nodeId
console.log(块id)
fetch("/api/query/sql",{
method:"post",
body:JSON.stringify({
stmt:`select * from blocks where id in (select root_id from blocks where id = "${块id}")`
})
}).then(
res=>{
return res.json()
}
).then(
json=>{
let data = json.data[0]
document.getElementById('content').innerHTML=data.updated
}
)
</script>
</head>
<body>
<div id="content">
当前文章修改于2022年11月20号.
</div>
</body>
</html>
</html>
这个时候你再插入这个挂件,显示的内容就是这样的,时间显示出来了
但是这样一串数字肯定不大好看,我们还需要修改一下文字显示的格式,
把 index.html 修改成这样:
<!DOCTYPE html>
<html>
<head>
<script>
let 块id = window.frameElement.parentElement.parentElement.dataset.nodeId
console.log(块id)
fetch("/api/query/sql",{
method:"post",
body:JSON.stringify({
stmt:`select * from blocks where id in (select root_id from blocks where id = "${块id}")`
})
}).then(
res=>{
return res.json()
}
).then(
json=>{
let data = json.data[0]
document.getElementById('content').innerHTML="当前文章修改于"+
data.updated.substring(0,4)+"年"+
data.updated.substring(5,7)+"月"+
data.updated.substring(8,10)+"日"+
data.updated.substring(11,13)+"时"+
data.updated.substring(14,16)+"分"+
data.updated.substring(17,19)+"秒"
}
)
</script>
</head>
<body>
<div id="content">
当前文章修改于2022年11月20号.
</div>
</body>
</html>
再次插入之后,我们的挂件就显示成这样了。
但是现在这个挂件还不会动,每次你都需要刷新一下才能够显示,为了让它能够动起来,我们增加一个计时器来做这个事情:
<!DOCTYPE html>
<html>
<head>
<script>
let 块id = window.frameElement.parentElement.parentElement.dataset.nodeId
let 获取修改时间 = ()=> fetch("/api/query/sql",{
method:"post",
body:JSON.stringify({
stmt:`select * from blocks where id in (select root_id from blocks where id = "${块id}")`
})
}).then(
res=>{
return res.json()
}
).then(
json=>{
let data = json.data[0]
document.getElementById('content').innerHTML="当前文章修改于"+
data.updated.substring(0,4)+"年"+
data.updated.substring(4,6)+"月"+
data.updated.substring(6,8)+"日"+
data.updated.substring(8,10)+"时"+
data.updated.substring(10,12)+"分"+
data.updated.substring(12,14)+"秒"
}
)
setInterval(获取修改时间,1000)
</script>
</head>
<body>
<div id="content">
当前文章修改于2022年11月20号.
</div>
</body>
</html>
这样每过一秒钟,它显示的时间就会变化一次,如果你只是要显示一下修改时间的话,这个挂件就完成了。
现在你已经有两个自己做的挂件了
本文使用思源笔记编辑生成,更新于:2022-11-20。
协议:CC BY-SA 4.0 https://creativecommons.org/licenses/by-sa/4.0/
欢迎来到这里!
我们正在构建一个小众社区,大家在这里相互信任,以平等 • 自由 • 奔放的价值观进行分享交流。最终,希望大家能够找到与自己志同道合的伙伴,共同成长。
注册 关于