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

一,日记模板

由于思源模板中无法执行 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="about:blank" 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 上可以,实际以测试为准。

注意:

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

  • 思源笔记

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

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

    23006 引用 • 92537 回帖
1 操作
wilsons 在 2024-12-12 21:34:50 更新了该帖

相关帖子

欢迎来到这里!

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

注册 关于
请输入回帖内容 ...
  • 其他回帖
  • wilsons

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

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

    image.png

    1 操作
    wilsons 在 2024-12-19 07:50:05 更新了该回帖
  • 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

  • wilsons

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

    image.png

  • 查看全部回帖
wilsons
人生最大的敌人是自己,战胜自己,才能超越一切。

推荐标签 标签

  • GitHub

    GitHub 于 2008 年上线,目前,除了 Git 代码仓库托管及基本的 Web 管理界面以外,还提供了订阅、讨论组、文本渲染、在线文件编辑器、协作图谱(报表)、代码片段分享(Gist)等功能。正因为这些功能所提供的便利,又经过长期的积累,GitHub 的用户活跃度很高,在开源世界里享有深远的声望,并形成了社交化编程文化(Social Coding)。

    210 引用 • 2036 回帖
  • IDEA

    IDEA 全称 IntelliJ IDEA,是一款 Java 语言开发的集成环境,在业界被公认为最好的 Java 开发工具之一。IDEA 是 JetBrains 公司的产品,这家公司总部位于捷克共和国的首都布拉格,开发人员以严谨著称的东欧程序员为主。

    181 引用 • 400 回帖
  • uTools

    uTools 是一个极简、插件化、跨平台的现代桌面软件。通过自由选配丰富的插件,打造你得心应手的工具集合。

    6 引用 • 14 回帖
  • Q&A

    提问之前请先看《提问的智慧》,好的问题比好的答案更有价值。

    8444 引用 • 38459 回帖 • 154 关注
  • 数据库

    据说 99% 的性能瓶颈都在数据库。

    343 引用 • 723 回帖
  • golang

    Go 语言是 Google 推出的一种全新的编程语言,可以在不损失应用程序性能的情况下降低代码的复杂性。谷歌首席软件工程师罗布派克(Rob Pike)说:我们之所以开发 Go,是因为过去 10 多年间软件开发的难度令人沮丧。Go 是谷歌 2009 发布的第二款编程语言。

    497 引用 • 1388 回帖 • 279 关注
  • 30Seconds

    📙 前端知识精选集,包含 HTML、CSS、JavaScript、React、Node、安全等方面,每天仅需 30 秒。

    • 精选常见面试题,帮助您准备下一次面试
    • 精选常见交互,帮助您拥有简洁酷炫的站点
    • 精选有用的 React 片段,帮助你获取最佳实践
    • 精选常见代码集,帮助您提高打码效率
    • 整理前端界的最新资讯,邀您一同探索新世界
    488 引用 • 384 回帖
  • jsDelivr

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

    5 引用 • 31 回帖 • 72 关注
  • 周末

    星期六到星期天晚,实行五天工作制后,指每周的最后两天。再过几年可能就是三天了。

    14 引用 • 297 回帖
  • API

    应用程序编程接口(Application Programming Interface)是一些预先定义的函数,目的是提供应用程序与开发人员基于某软件或硬件得以访问一组例程的能力,而又无需访问源码,或理解内部工作机制的细节。

    77 引用 • 430 回帖 • 2 关注
  • Firefox

    Mozilla Firefox 中文俗称“火狐”(正式缩写为 Fx 或 fx,非正式缩写为 FF),是一个开源的网页浏览器,使用 Gecko 排版引擎,支持多种操作系统,如 Windows、OSX 及 Linux 等。

    8 引用 • 30 回帖 • 409 关注
  • 持续集成

    持续集成(Continuous Integration)是一种软件开发实践,即团队开发成员经常集成他们的工作,通过每个成员每天至少集成一次,也就意味着每天可能会发生多次集成。每次集成都通过自动化的构建(包括编译,发布,自动化测试)来验证,从而尽早地发现集成错误。

    15 引用 • 7 回帖
  • FFmpeg

    FFmpeg 是一套可以用来记录、转换数字音频、视频,并能将其转化为流的开源计算机程序。

    23 引用 • 32 回帖 • 1 关注
  • 资讯

    资讯是用户因为及时地获得它并利用它而能够在相对短的时间内给自己带来价值的信息,资讯有时效性和地域性。

    55 引用 • 85 回帖
  • Mac

    Mac 是苹果公司自 1984 年起以“Macintosh”开始开发的个人消费型计算机,如:iMac、Mac mini、Macbook Air、Macbook Pro、Macbook、Mac Pro 等计算机。

    166 引用 • 595 回帖
  • abitmean

    有点意思就行了

    27 关注
  • LeetCode

    LeetCode(力扣)是一个全球极客挚爱的高质量技术成长平台,想要学习和提升专业能力从这里开始,充足技术干货等你来啃,轻松拿下 Dream Offer!

    209 引用 • 72 回帖
  • 支付宝

    支付宝是全球领先的独立第三方支付平台,致力于为广大用户提供安全快速的电子支付/网上支付/安全支付/手机支付体验,及转账收款/水电煤缴费/信用卡还款/AA 收款等生活服务应用。

    29 引用 • 347 回帖 • 5 关注
  • sts
    2 引用 • 2 回帖 • 197 关注
  • HBase

    HBase 是一个分布式的、面向列的开源数据库,该技术来源于 Fay Chang 所撰写的 Google 论文 “Bigtable:一个结构化数据的分布式存储系统”。就像 Bigtable 利用了 Google 文件系统所提供的分布式数据存储一样,HBase 在 Hadoop 之上提供了类似于 Bigtable 的能力。

    17 引用 • 6 回帖 • 75 关注
  • 宕机

    宕机,多指一些网站、游戏、网络应用等服务器一种区别于正常运行的状态,也叫“Down 机”、“当机”或“死机”。宕机状态不仅仅是指服务器“挂掉了”、“死机了”状态,也包括服务器假死、停用、关闭等一些原因而导致出现的不能够正常运行的状态。

    13 引用 • 82 回帖 • 59 关注
  • CloudFoundry

    Cloud Foundry 是 VMware 推出的业界第一个开源 PaaS 云平台,它支持多种框架、语言、运行时环境、云平台及应用服务,使开发人员能够在几秒钟内进行应用程序的部署和扩展,无需担心任何基础架构的问题。

    5 引用 • 18 回帖 • 172 关注
  • Vue.js

    Vue.js(读音 /vju ː/,类似于 view)是一个构建数据驱动的 Web 界面库。Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。

    265 引用 • 666 回帖 • 1 关注
  • Kotlin

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

    19 引用 • 33 回帖 • 63 关注
  • Telegram

    Telegram 是一个非盈利性、基于云端的即时消息服务。它提供了支持各大操作系统平台的开源的客户端,也提供了很多强大的 APIs 给开发者创建自己的客户端和机器人。

    5 引用 • 35 回帖
  • 链书

    链书(Chainbook)是 B3log 开源社区提供的区块链纸质书交易平台,通过 B3T 实现共享激励与价值链。可将你的闲置书籍上架到链书,我们共同构建这个全新的交易平台,让闲置书籍继续发挥它的价值。

    链书社

    链书目前已经下线,也许以后还有计划重制上线。

    14 引用 • 257 回帖
  • 大数据

    大数据(big data)是指无法在一定时间范围内用常规软件工具进行捕捉、管理和处理的数据集合,是需要新处理模式才能具有更强的决策力、洞察发现力和流程优化能力的海量、高增长率和多样化的信息资产。

    93 引用 • 113 回帖 • 1 关注