思源笔记折腾记录 - 简单挂件 - 文章修改时间

本贴最后更新于 709 天前,其中的信息可能已经沧海桑田

一、实现目的:

练习制作一个非常简单的挂件,作用仅仅只是显示一下当前文章是什么时候修改的。

二、实现方法:

1、创建挂件文件夹

思源的所有挂件都位于工作空间=》data=》widgets 这个文件夹下面。

为了创建一个新的挂件,首先我们需要在这个位置下面创建一个新的文件夹

就像这样

image

创建完之后我们就已经能够在斜杠菜单里面看到这个名字了,但是现在你插入它还什么都不会显示:

imageimage

因为挂件在文档中显示的其实是一个叫 index.html 的文件,至于为什么叫这个不用纠结,这是约定好的入口文件,我们的文件夹下面暂时没有这个文件所以什么也显示不出来。

在这个文件夹下面新建 index.html 之后,右键用记事本打开它(假设你只会用记事本,但是我自己比较习惯用 vscode,推荐你也试一下),然后在这个文件里面输入下面这些内容

<!DOCTYPE html>
<html>
<body>
    <div>
        当前文章修改于2022年11月20号.
    </div>
</body>
</html>

保存之后,不出意外的话,再插入挂件会显示下面这样的内容:

image

现在它已经可以显示出文字了,但是这个文字是我们手写的,还不能显示所在文档的修改时间,我们要想办法让它显示文档修改时间

首先我们要能够获取文档的属性,把 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>

这个时候你再插入这个挂件,显示的内容就是这样的,时间显示出来了

image

但是这样一串数字肯定不大好看,我们还需要修改一下文字显示的格式,

把 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>

再次插入之后,我们的挂件就显示成这样了。

image

但是现在这个挂件还不会动,每次你都需要刷新一下才能够显示,为了让它能够动起来,我们增加一个计时器来做这个事情:

   <!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>

这样每过一秒钟,它显示的时间就会变化一次,如果你只是要显示一下修改时间的话,这个挂件就完成了。

现在你已经有两个自己做的挂件了

image

本文使用思源笔记编辑生成,更新于:2022-11-20。

协议:CC BY-SA 4.0 https://creativecommons.org/licenses/by-sa/4.0/

  • 思源笔记

    思源笔记是一款隐私优先的个人知识管理系统,支持完全离线使用,同时也支持端到端加密同步。

    融合块、大纲和双向链接,重构你的思维。

    22017 引用 • 87794 回帖 • 2 关注

相关帖子

欢迎来到这里!

我们正在构建一个小众社区,大家在这里相互信任,以平等 • 自由 • 奔放的价值观进行分享交流。最终,希望大家能够找到与自己志同道合的伙伴,共同成长。

注册 关于
请输入回帖内容 ...