一、实现目的：
在
思源笔记折腾记录-简单挂件-文章修改时间 - 知乎 (zhihu.com)
思源笔记折腾记录 - 简单挂件 - 文章修改时间 - 链滴 (ld246.com)
的基础上，显示更多的文章属性。
二、实现方法
1、思源笔记的块属性有哪些
我们之前实现的那个挂件可以显示 updated 属性，但是思源的每一个块（不只是文档），其实都有更多的属性。
把之前的文章修改时间挂件里 index.html 内容改成这样：
<!DOCTYPE html>
<html>
<head>
<script id = "获取属性并修改文档内容">
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]
console.log(data)
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)+"秒"
}
)
获取修改时间()
</script>
</head>
<body>
<div id="content">
当前文章修改于2022年11月20号.
</div>
</body>
</html>
这时插入挂件之后， 在右下角找到
问号图标，然后
点击开发者工具，你应该可以在控制台一栏里面看到这样的输出
点击前面的小三角，就可以看到所有的属性了
挨个解释一下
{
//别名
"alias": "",
//笔记本的id
"box": "20221119002557-ge4j9d8",
//内容，对于文档块来说，就是文档的标题
"content": "思源笔记折腾记录-简单挂件-显示更多的属性",
//创建时间，不是文件的，而是块的。
"created": "20221120015012",
//聚焦内容，暂时可以不用管
"fcontent": "思源笔记折腾记录-简单挂件-显示更多的属性",
//哈希值，暂时可以不用管
"hash": "7ab346b",
//可读路径，就是用人能看得懂的形式表达这个笔记在哪里
"hpath": "/思源笔记折腾记录-简单挂件-显示更多的属性",
//kramdown格式的内联属性表，暂时不用管，用另一种格式显示的属性
"ial": "{: id=\"20221120015012-nhycifh\" title=\"思源笔记折腾记录-简单挂件-显示更多的属性\" updated=\"20221120015505\"}",
//每个块都独一无二的 属性，可以用来找到任何一个具体的块
"id": "20221120015012-nhycifh",
//内容长度
"length": 21,
//markdown内容，文档块会是空的
"markdown": "",
//块备注内容，没备注所以没有
"memo": "",
//块命名内容，没命名所以没有
"name": "",
//父块id，没命名所以没有
"parent_id": "",
//路径，id形式的，这个你绝对看不懂
"path": "/20221120015012-nhycifh.sy",
//根块id，其实就是文档id，对于文档块来说，几个id都一样
"root_id": "20221120015012-nhycifh",
//排序用的，暂时不用管
"sort": 0,
//子类型，很多块的大类下还有子类，暂时不用管
"subtype": "",
//标签，暂时不用管
"tag": "",
//类型，对于文档块来说，暂时不用管
"type": "d",
//修改时间
"updated": "20221120015505"
}
把属性显示到挂件并且自动刷新
复制一份文档修改时间那个文件夹，改名叫文档属性
然后把它里面的 index.html 改成这样：
<!DOCTYPE html>
<html>
<head>
<script id = "获取属性并修改文档内容">
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]
if(data){
document.getElementById('content').innerHTML=JSON.stringify(data,null,2)
}
}
)
setInterval(获取修改时间,1000)
</script>
</head>
<body>
<pre id="content">
</pre>
</body>
</html>
这个时候，它就会显示出文档的所有属性
而且每隔一秒钟，他就会自己刷新。
让属性显示得更好看一点
上面我们直接使用了 pre 标签来原样显示属性，但是我们一般都会让属性显示得更美观一点，所以我们再修改一下 html，就像这样
<!DOCTYPE html>
<html>
<head>
<script id="获取属性并修改文档内容">
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]
if (data) {
(Object.keys(data)).forEach(
属性名 => {
let 容器 = document.getElementById(属性名)
if(容器){
容器.innerHTML = data[属性名]
}
}
)
}
}
)
setInterval(获取修改时间, 1000)
</script>
<style>
label{
min-width: 100px;
display: inline-block;
}
</style>
</head>
<body>
<div class="custom-attr__add">
<div>
<label >命 名</label><span id="name"></span>
</div>
<div>
<label>别 名</label><span id="alias"></span>
</div>
<div>
<label>备 注</label><span id="memo"></span>
</div>
<div>
<label>标 签</label><span id="tag"></span>
</div>
<div>
<label>路 径</label><span id="hpath"></span>
</div>
<div>
<label>修改时间</label><span id="updated"></span>
</div>
<div>
<label>创建时间</label><span id="created"></span>
</div>
</div>
</body>
</html>
这样它就能够显示你想要的属性了。
或者你可以使用 tabel 来让它显示成表格。
有关 table 标签的用法参考：
HTML <table> 标签 | 菜鸟教程 (runoob.com)
<!DOCTYPE html>
<html>
<head>
<script id="获取属性并修改文档内容">
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]
if (data) {
(Object.keys(data)).forEach(
属性名 => {
let 容器 = document.getElementById(属性名)
if(容器){
容器.innerHTML = data[属性名]
}
}
)
}
}
)
setInterval(获取修改时间, 1000)
</script>
<style>
label{
min-width: 100px;
display: inline-block;
}
</style>
</head>
<body>
<table border="1">
<tr>
<th >属性名</th><th>属性值</th>
</tr>
<tr>
<td >命 名</td><td ><span id="name"></span></td>
</tr>
<tr>
<td>别 名</td><td ><span id="alias"></span></td>
</tr>
<tr>
<td>备 注</td><td ><span id="memo"></span></td>
</tr>
<tr>
<td>标 签</td><td ><span id="tag"></span></td>
</tr>
<tr>
<td>路 径</td><td ><span id="hpath"></span></td>
</tr>
<tr>
<td>修改时间</td><td ><span id="updated"></span></td>
</tr>
<tr>
<td>创建时间</td><td ><span id="created"></span></td>
</tr>
</div>
</body>
</html>
本文使用思源笔记编辑生成，更新于：2022-11-20。
协议：CC BY-SA 4.0 https://creativecommons.org/licenses/by-sa/4.0/
欢迎来到这里！
我们正在构建一个小众社区，大家在这里相互信任，以平等 • 自由 • 奔放的价值观进行分享交流。最终，希望大家能够找到与自己志同道合的伙伴，共同成长。
注册 关于