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

一,日记模板

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

注意:

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

  • 思源笔记

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

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

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

相关帖子

欢迎来到这里!

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

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

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

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

    1 回复
  • 其他回帖
  • 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

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

    image.png

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

  • wilsons

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

    换到 v3.1.14 Windows 上可以。

    1 回复
  • 查看全部回帖
wilsons
正在努力开发 wilsons 工具箱中 🛠️ 目前已正式入驻爱发电啦!💖 想催更、提需求?欢迎访问 👉 https://afdian.com/a/wilsons

推荐标签 标签

  • RESTful

    一种软件架构设计风格而不是标准,提供了一组设计原则和约束条件,主要用于客户端和服务器交互类的软件。基于这个风格设计的软件可以更简洁,更有层次,更易于实现缓存等机制。

    30 引用 • 114 回帖 • 6 关注
  • 周末

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

    14 引用 • 297 回帖
  • RIP

    愿逝者安息!

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

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

    20 引用 • 18 回帖 • 29 关注
  • OkHttp

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

    16 引用 • 6 回帖 • 85 关注
  • Eclipse

    Eclipse 是一个开放源代码的、基于 Java 的可扩展开发平台。就其本身而言,它只是一个框架和一组服务,用于通过插件组件构建开发环境。

    76 引用 • 258 回帖 • 627 关注
  • CSDN

    CSDN (Chinese Software Developer Network) 创立于 1999 年,是中国的 IT 社区和服务平台,为中国的软件开发者和 IT 从业者提供知识传播、职业发展、软件开发等全生命周期服务,满足他们在职业发展中学习及共享知识和信息、建立职业发展社交圈、通过软件开发实现技术商业化等刚性需求。

    14 引用 • 155 回帖 • 1 关注
  • webpack

    webpack 是一个用于前端开发的模块加载器和打包工具,它能把各种资源,例如 JS、CSS(less/sass)、图片等都作为模块来使用和处理。

    42 引用 • 130 回帖 • 250 关注
  • Google

    Google(Google Inc.,NASDAQ:GOOG)是一家美国上市公司(公有股份公司),于 1998 年 9 月 7 日以私有股份公司的形式创立,设计并管理一个互联网搜索引擎。Google 公司的总部称作“Googleplex”,它位于加利福尼亚山景城。Google 目前被公认为是全球规模最大的搜索引擎,它提供了简单易用的免费服务。不作恶(Don't be evil)是谷歌公司的一项非正式的公司口号。

    49 引用 • 192 回帖
  • GraphQL

    GraphQL 是一个用于 API 的查询语言,是一个使用基于类型系统来执行查询的服务端运行时(类型系统由你的数据定义)。GraphQL 并没有和任何特定数据库或者存储引擎绑定,而是依靠你现有的代码和数据支撑。

    4 引用 • 3 回帖 • 12 关注
  • 服务器

    服务器,也称伺服器,是提供计算服务的设备。由于服务器需要响应服务请求,并进行处理,因此一般来说服务器应具备承担服务并且保障服务的能力。

    125 引用 • 585 回帖 • 2 关注
  • GAE

    Google App Engine(GAE)是 Google 管理的数据中心中用于 WEB 应用程序的开发和托管的平台。2008 年 4 月 发布第一个测试版本。目前支持 Python、Java 和 Go 开发部署。全球已有数十万的开发者在其上开发了众多的应用。

    14 引用 • 42 回帖 • 818 关注
  • 链书

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

    链书社

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

    14 引用 • 257 回帖
  • Shell

    Shell 脚本与 Windows/Dos 下的批处理相似,也就是用各类命令预先放入到一个文件中,方便一次性执行的一个程序文件,主要是方便管理员进行设置或者管理用的。但是它比 Windows 下的批处理更强大,比用其他编程程序编辑的程序效率更高,因为它使用了 Linux/Unix 下的命令。

    125 引用 • 74 回帖
  • 京东

    京东是中国最大的自营式电商企业,2015 年第一季度在中国自营式 B2C 电商市场的占有率为 56.3%。2014 年 5 月,京东在美国纳斯达克证券交易所正式挂牌上市(股票代码:JD),是中国第一个成功赴美上市的大型综合型电商平台,与腾讯、百度等中国互联网巨头共同跻身全球前十大互联网公司排行榜。

    14 引用 • 102 回帖 • 316 关注
  • Sublime

    Sublime Text 是一款可以用来写代码、写文章的文本编辑器。支持代码高亮、自动完成,还支持通过插件进行扩展。

    10 引用 • 5 回帖
  • MySQL

    MySQL 是一个关系型数据库管理系统,由瑞典 MySQL AB 公司开发,目前属于 Oracle 公司。MySQL 是最流行的关系型数据库管理系统之一。

    693 引用 • 537 回帖 • 1 关注
  • 快应用

    快应用 是基于手机硬件平台的新型应用形态;标准是由主流手机厂商组成的快应用联盟联合制定;快应用标准的诞生将在研发接口、能力接入、开发者服务等层面建设标准平台;以平台化的生态模式对个人开发者和企业开发者全品类开放。

    15 引用 • 127 回帖 • 2 关注
  • ZooKeeper

    ZooKeeper 是一个分布式的,开放源码的分布式应用程序协调服务,是 Google 的 Chubby 一个开源的实现,是 Hadoop 和 HBase 的重要组件。它是一个为分布式应用提供一致性服务的软件,提供的功能包括:配置维护、域名服务、分布式同步、组服务等。

    59 引用 • 29 回帖 • 1 关注
  • FlowUs

    FlowUs.息流 个人及团队的新一代生产力工具。

    让复杂的信息管理更轻松、自由、充满创意。

    1 引用 • 4 关注
  • Dubbo

    Dubbo 是一个分布式服务框架,致力于提供高性能和透明化的 RPC 远程服务调用方案,是 [阿里巴巴] SOA 服务化治理方案的核心框架,每天为 2,000+ 个服务提供 3,000,000,000+ 次访问量支持,并被广泛应用于阿里巴巴集团的各成员站点。

    60 引用 • 82 回帖 • 614 关注
  • Windows

    Microsoft Windows 是美国微软公司研发的一套操作系统,它问世于 1985 年,起初仅仅是 Microsoft-DOS 模拟环境,后续的系统版本由于微软不断的更新升级,不但易用,也慢慢的成为家家户户人们最喜爱的操作系统。

    227 引用 • 476 回帖 • 2 关注
  • Solo

    Solo 是一款小而美的开源博客系统,专为程序员设计。Solo 有着非常活跃的社区,可将文章作为帖子推送到社区,来自社区的回帖将作为博客评论进行联动(具体细节请浏览 B3log 构思 - 分布式社区网络)。

    这是一种全新的网络社区体验,让热爱记录和分享的你不再感到孤单!

    1441 引用 • 10069 回帖 • 497 关注
  • 游戏

    沉迷游戏伤身,强撸灰飞烟灭。

    181 引用 • 821 回帖
  • 程序员

    程序员是从事程序开发、程序维护的专业人员。

    588 引用 • 3528 回帖
  • Sym

    Sym 是一款用 Java 实现的现代化社区(论坛/BBS/社交网络/博客)系统平台。

    下一代的社区系统,为未来而构建

    524 引用 • 4601 回帖 • 707 关注
  • Jenkins

    Jenkins 是一套开源的持续集成工具。它提供了非常丰富的插件,让构建、部署、自动化集成项目变得简单易用。

    54 引用 • 37 回帖