思源如何给日记模板添加天气

一,日记模板

由于思源模板中无法执行 js,也就无法调用天气 api 了。

所以这里可以利用 sql 查询模板变相执行 js 实现。

比如这个示例模板,只需要把这段 js 放到模板里,然后模板加载时就可以显示天气了。

//!js
return (async () => {
    // 获取天气
    getWeather();
    async function getWeather () {
        // 天气api
        const weather = await fetch('https://wttr.in/?format=1');
        const text = await weather.text();

        // 显示当时的天气
        render(text);

        // 始终显示今天的天气
        //render(text, 2);
    };
    // 渲染结果
    // type 1: 显示当时的天气,2:始终显示今天的天气
    async function render(text, type = 1) {
        if(type === 1) {
            await fetchSyncPost('/api/block/updateBlock', {
                "dataType": "markdown",
                "data": text,
                "id": item.dataset.nodeId
            });
        } else {
            item.innerHTML = Lute.New().Md2BlockDOM(text);
            item.style.backgroundColor = 'transparent';
            item.style.borderLeft = 'none';
            item.style.cursor = 'text';
            item.querySelector('[contenteditable="true"]').setAttribute('contenteditable', false);
        }
    }
    // 渲染时显示正在加载
    whenRender().then(el => {
        el.outerHTML = 'loading...';
    });
    function whenRender(selector = '.b3-form__space--small') {
        return new Promise(resolve => {
            const check = () => {
                let el = item.querySelector(selector);
                if (el) resolve(el); else requestAnimationFrame(check);
            };
            check();
        });
    }
    return [];
})();

render(text, 1) 是显示当时的天气,即你创建文档时的天气,之后再打开文档这个天气值不会变。

render(text, 2) 是今天的天气,始终显示今天的天气。

这里有个为做好的模板 天气.md.zip ,大家可以下载下来体验下。

r102.gif

二、数据库模板

数据库模板其实可以利用 img 标签实现。

比如:

<img src="" onerror="
    // 天气api
    (async () => {
        const weather = await fetch('https://wttr.in/?format=1');
        const text = await weather.text();
        this.outerHTML = text;
    })();
" />

image.png

但这种只能始终显示今天的天气,因为模板是动态显示的,是不能把数据写死的。

不过,应该可以新建一列,然后把当时的天气值写入到新列中实现。

可使用 api /api/av/setAttributeViewBlockAttr 实现更新单元格, 感谢 @Achuan-2 提供的方法!

示例如下:

await fetchSyncPost("/api/av/setAttributeViewBlockAttr", {
    "avID": "20241212211017-0dioyhn",
    "keyID": "20241212211017-ikfpy7j",
    "rowID": "20241212211031-1xzy4wl",
    value: {
        "text": {
            "content": "当时的天气数据"
        }
    },
});

不过,我在 v3.1.10 mac 上测试该 api 无效,v3.1.14 Windows 上可以,实际以测试为准。

注意:

这里仅仅是探讨和提供一种思路,并非完善的产品,如果你需要更多功能,需要自行修改代码。

  • 思源笔记

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

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

    23575 引用 • 95622 回帖 • 2 关注
2 操作
wilsons 在 2025-01-09 12:05:52 更新了该帖
wilsons 在 2024-12-12 21:34:50 更新了该帖

相关帖子

欢迎来到这里!

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

注册 关于
请输入回帖内容 ...
  • Achuan-2 1

    可以参考我日记添加数据库,并设置数据库属性值的代码,创建日记的时候,获取当天天气,更新数据库的单元格

    不用数据库,就在日记文档开头添加一行天气信息

    1 回复
  • wilsons

    请教下,设置属性是什么意思?我调用这个 api 并没有更新单元格的值

    await fetchSyncPost("/api/av/setAttributeViewBlockAttr", {
                    avID: '20241212175817-502902j',
                    keyID: '20241212182334-ae0f7g7',
                    rowID: '20241212175833-ex2z3st',
                    value: {
                        "text": {
                            "content": 'demo2'
                        }
                    },
                });
    
    1 回复
  • 就是更新单元格的值,要确保 keyid 和 rowid 正确,对于绑定块 rowid 就是文档 id,id 正确应该是能用的

    2 回复
  • wilsons

    感谢,我是通过官方更新单元格的 api 抓包获取的,又与 dom 里的 id 对比了下,应该没错,我等会再试试吧

    image.png

  • wilsons

    好奇怪,这段代码我在 v3.1.10 mac 上无效,新空间也不行,多次测试都不行。

    换到 v3.1.14 Windows 上可以。

    1 回复
  • 旧版本不一定能用吧,数据库 api 还在完善中呢

    1 回复
  • wilsons

    有可能,但我翻看了 git blame 记录,这个接口被添加于 6 个月前,而 3.1.10 是 10 月 22 号发布的。

    image.png

    也可能兼容问题吧,不管了,暂时用不到,说不定用到时就好了 😄 。

  • wilsons

    补充:

    数据库模板其实可以利用 img 标签实现。

    利用这个特性可以在数据库中实现 js 与 Sprig 模板的交互,利用 js 来处理数据,就更方便了。

    比如:

    .action{$blocks := queryBlocks "select * from blocks limit 1"}
    <span><img src="about:blank" data-result='.action{toJson $blocks}' style="display:none;" onerror="
        (async () => {
            // 天气api
            const weather = await fetch('https://wttr.in/?format=1');
            const text = await weather.text();
      
            // 解析数据
            const result = JSON.parse(this.dataset.result);
            const first = result[0];
            const created = first.Created.replace(/^(\d{4})(\d\d)(\d\d)(\d\d)(\d\d)(\d\d)$/, '$1-$2-$3 $4:$5:$6');
      
            // 输出数据
            this.parentElement.outerHTML = `天气:${text}<br>ID:${first.ID}<br>创建时间:${created}`;
        })();
    " />Loading</span>
    

    这里添加 style="display:none",防止加载时出现默认图片。

    添加 span 标签包裹,为了在加载时显示 Loading 提示。

    把数据模板查询到的数据存储到 img 标签的 data-result 属性里。

    然后就可以方便的用 js 处理数据了,甚至可以请求 api 等。

    效果:

    r103.gif

  • 如何在数据库一次更新两个以上的列(自动填充 一些模板?)

    1 回复
  • wilsons

    没太明白你的意思,可否举例说明下。

  • 就是我想把天气变成文字自动添加到数据库里,在新文档建立的时候。 但是同时新文档里有别的列有固定文字也需要填充。

    1 回复
  • wilsons

    把天气信息添加到行内元素中示例

    日、周、月记录模板分享 - wilsons 的回帖

    image.png

    1 操作
    wilsons 在 2024-12-19 07:50:05 更新了该回帖
请输入回帖内容 ...
wilsons
人生最大的敌人是自己,战胜自己,才能超越一切。

推荐标签 标签

  • AWS
    11 引用 • 28 回帖 • 2 关注
  • Kotlin

    Kotlin 是一种在 Java 虚拟机上运行的静态类型编程语言,由 JetBrains 设计开发并开源。Kotlin 可以编译成 Java 字节码,也可以编译成 JavaScript,方便在没有 JVM 的设备上运行。在 Google I/O 2017 中,Google 宣布 Kotlin 成为 Android 官方开发语言。

    19 引用 • 33 回帖 • 67 关注
  • 机器学习

    机器学习(Machine Learning)是一门多领域交叉学科,涉及概率论、统计学、逼近论、凸分析、算法复杂度理论等多门学科。专门研究计算机怎样模拟或实现人类的学习行为,以获取新的知识或技能,重新组织已有的知识结构使之不断改善自身的性能。

    83 引用 • 37 回帖
  • Node.js

    Node.js 是一个基于 Chrome JavaScript 运行时建立的平台, 用于方便地搭建响应速度快、易于扩展的网络应用。Node.js 使用事件驱动, 非阻塞 I/O 模型而得以轻量和高效。

    139 引用 • 269 回帖 • 14 关注
  • 微信

    腾讯公司 2011 年 1 月 21 日推出的一款手机通讯软件。用户可以通过摇一摇、搜索号码、扫描二维码等添加好友和关注公众平台,同时可以将自己看到的精彩内容分享到微信朋友圈。

    132 引用 • 796 回帖
  • RIP

    愿逝者安息!

    8 引用 • 92 回帖 • 369 关注
  • Log4j

    Log4j 是 Apache 开源的一款使用广泛的 Java 日志组件。

    20 引用 • 18 回帖 • 30 关注
  • 智能合约

    智能合约(Smart contract)是一种旨在以信息化方式传播、验证或执行合同的计算机协议。智能合约允许在没有第三方的情况下进行可信交易,这些交易可追踪且不可逆转。智能合约概念于 1994 年由 Nick Szabo 首次提出。

    1 引用 • 11 回帖 • 1 关注
  • 印象笔记
    3 引用 • 16 回帖 • 1 关注
  • 生活

    生活是指人类生存过程中的各项活动的总和,范畴较广,一般指为幸福的意义而存在。生活实际上是对人生的一种诠释。生活包括人类在社会中与自己息息相关的日常活动和心理影射。

    230 引用 • 1454 回帖 • 2 关注
  • 安全

    安全永远都不是一个小问题。

    201 引用 • 816 回帖 • 3 关注
  • OkHttp

    OkHttp 是一款 HTTP & HTTP/2 客户端库,专为 Android 和 Java 应用打造。

    16 引用 • 6 回帖 • 75 关注
  • Scala

    Scala 是一门多范式的编程语言,集成面向对象编程和函数式编程的各种特性。

    13 引用 • 11 回帖 • 149 关注
  • 新人

    让我们欢迎这对新人。哦,不好意思说错了,让我们欢迎这位新人!
    新手上路,请谨慎驾驶!

    52 引用 • 228 回帖
  • 黑曜石

    黑曜石是一款强大的知识库工具,支持本地 Markdown 文件编辑,支持双向链接和关系图。

    A second brain, for you, forever.

    16 引用 • 131 回帖
  • 小薇

    小薇是一个用 Java 写的 QQ 聊天机器人 Web 服务,可以用于社群互动。

    由于 Smart QQ 从 2019 年 1 月 1 日起停止服务,所以该项目也已经停止维护了!

    34 引用 • 467 回帖 • 752 关注
  • WiFiDog

    WiFiDog 是一套开源的无线热点认证管理工具,主要功能包括:位置相关的内容递送;用户认证和授权;集中式网络监控。

    1 引用 • 7 回帖 • 601 关注
  • MyBatis

    MyBatis 本是 Apache 软件基金会 的一个开源项目 iBatis,2010 年这个项目由 Apache 软件基金会迁移到了 google code,并且改名为 MyBatis ,2013 年 11 月再次迁移到了 GitHub。

    170 引用 • 414 回帖 • 378 关注
  • 酷鸟浏览器

    安全 · 稳定 · 快速
    为跨境从业人员提供专业的跨境浏览器

    3 引用 • 59 回帖 • 28 关注
  • TextBundle

    TextBundle 文件格式旨在应用程序之间交换 Markdown 或 Fountain 之类的纯文本文件时,提供更无缝的用户体验。

    1 引用 • 2 回帖 • 56 关注
  • 钉钉

    钉钉,专为中国企业打造的免费沟通协同多端平台, 阿里巴巴出品。

    15 引用 • 67 回帖 • 320 关注
  • jsDelivr

    jsDelivr 是一个开源的 CDN 服务,可为 npm 包、GitHub 仓库提供免费、快速并且可靠的全球 CDN 加速服务。

    5 引用 • 31 回帖 • 75 关注
  • Visio
    1 引用 • 2 回帖 • 2 关注
  • 旅游

    希望你我能在旅途中找到人生的下一站。

    93 引用 • 899 回帖
  • Kubernetes

    Kubernetes 是 Google 开源的一个容器编排引擎,它支持自动化部署、大规模可伸缩、应用容器化管理。

    110 引用 • 54 回帖 • 4 关注
  • Sandbox

    如果帖子标签含有 Sandbox ,则该帖子会被视为“测试帖”,主要用于测试社区功能,排查 bug 等,该标签下内容不定期进行清理。

    414 引用 • 1246 回帖 • 590 关注
  • 强迫症

    强迫症(OCD)属于焦虑障碍的一种类型,是一组以强迫思维和强迫行为为主要临床表现的神经精神疾病,其特点为有意识的强迫和反强迫并存,一些毫无意义、甚至违背自己意愿的想法或冲动反反复复侵入患者的日常生活。

    15 引用 • 161 回帖