一、实现目的：
练习制作一个非常简单的挂件，作用仅仅只是显示一下当前文章是什么时候修改的。
二、实现方法：
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/
欢迎来到这里！
我们正在构建一个小众社区，大家在这里相互信任，以平等 • 自由 • 奔放的价值观进行分享交流。最终，希望大家能够找到与自己志同道合的伙伴，共同成长。
注册 关于