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

一,日记模板

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

注意:

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

  • 思源笔记

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

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

    25282 引用 • 104302 回帖
2 操作
wilsons 在 2025-01-09 12:05:52 更新了该帖
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

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

    换到 v3.1.14 Windows 上可以。

    1 回复
  • lunan 1 赞同
    • 如何显示当前 ip 所在城市和天气,将 format 后数字改成 3 即可

    https://wttr.in/?format=3

    image.png

    • 如果获取到的是城市是 not found,那么你可以把网址改为这个

    https://wttr.in/城市名?format=3

    例如:https://wttr.in/郑州?format=3

    image.png

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

推荐标签 标签

  • 人工智能

    人工智能(Artificial Intelligence)是研究、开发用于模拟、延伸和扩展人的智能的理论、方法、技术及应用系统的一门技术科学。

    164 引用 • 312 回帖
  • 负能量

    上帝为你关上了一扇门,然后就去睡觉了....努力不一定能成功,但不努力一定很轻松 (° ー °〃)

    89 引用 • 1249 回帖 • 409 关注
  • NetBeans

    NetBeans 是一个始于 1997 年的 Xelfi 计划,本身是捷克布拉格查理大学的数学及物理学院的学生计划。此计划延伸而成立了一家公司进而发展这个商用版本的 NetBeans IDE,直到 1999 年 Sun 买下此公司。Sun 于次年(2000 年)六月将 NetBeans IDE 开源,直到现在 NetBeans 的社群依然持续增长。

    78 引用 • 102 回帖 • 703 关注
  • RESTful

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

    30 引用 • 114 回帖 • 7 关注
  • WiFiDog

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

    1 引用 • 7 回帖 • 611 关注
  • 架构

    我们平时所说的“架构”主要是指软件架构,这是有关软件整体结构与组件的抽象描述,用于指导软件系统各个方面的设计。另外还有“业务架构”、“网络架构”、“硬件架构”等细分领域。

    143 引用 • 442 回帖 • 4 关注
  • PostgreSQL

    PostgreSQL 是一款功能强大的企业级数据库系统,在 BSD 开源许可证下发布。

    22 引用 • 22 回帖
  • 心情

    心是产生任何想法的源泉,心本体会陷入到对自己本体不能理解的状态中,因为心能产生任何想法,不能分出对错,不能分出自己。

    59 引用 • 369 回帖
  • Gzip

    gzip (GNU zip)是 GNU 自由软件的文件压缩程序。我们在 Linux 中经常会用到后缀为 .gz 的文件,它们就是 Gzip 格式的。现今已经成为互联网上使用非常普遍的一种数据压缩格式,或者说一种文件格式。

    9 引用 • 12 回帖 • 164 关注
  • IBM

    IBM(国际商业机器公司)或万国商业机器公司,简称 IBM(International Business Machines Corporation),总公司在纽约州阿蒙克市。1911 年托马斯·沃森创立于美国,是全球最大的信息技术和业务解决方案公司,拥有全球雇员 30 多万人,业务遍及 160 多个国家和地区。

    17 引用 • 53 回帖 • 144 关注
  • HBase

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

    17 引用 • 6 回帖 • 57 关注
  • 生活

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

    230 引用 • 1454 回帖
  • ActiveMQ

    ActiveMQ 是 Apache 旗下的一款开源消息总线系统,它完整实现了 JMS 规范,是一个企业级的消息中间件。

    19 引用 • 13 回帖 • 678 关注
  • 小薇

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

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

    35 引用 • 468 回帖 • 760 关注
  • OAuth

    OAuth 协议为用户资源的授权提供了一个安全的、开放而又简易的标准。与以往的授权方式不同之处是 oAuth 的授权不会使第三方触及到用户的帐号信息(如用户名与密码),即第三方无需使用用户的用户名与密码就可以申请获得该用户资源的授权,因此 oAuth 是安全的。oAuth 是 Open Authorization 的简写。

    36 引用 • 103 回帖 • 30 关注
  • PHP

    PHP(Hypertext Preprocessor)是一种开源脚本语言。语法吸收了 C 语言、 Java 和 Perl 的特点,主要适用于 Web 开发领域,据说是世界上最好的编程语言。

    180 引用 • 408 回帖 • 488 关注
  • 百度

    百度(Nasdaq:BIDU)是全球最大的中文搜索引擎、最大的中文网站。2000 年 1 月由李彦宏创立于北京中关村,致力于向人们提供“简单,可依赖”的信息获取方式。“百度”二字源于中国宋朝词人辛弃疾的《青玉案·元夕》词句“众里寻他千百度”,象征着百度对中文信息检索技术的执著追求。

    63 引用 • 785 回帖 • 92 关注
  • ZeroNet

    ZeroNet 是一个基于比特币加密技术和 BT 网络技术的去中心化的、开放开源的网络和交流系统。

    1 引用 • 21 回帖 • 648 关注
  • Gitea

    Gitea 是一个开源社区驱动的轻量级代码托管解决方案,后端采用 Go 编写,采用 MIT 许可证。

    5 引用 • 16 回帖 • 2 关注
  • 创业

    你比 99% 的人都优秀么?

    82 引用 • 1395 回帖 • 1 关注
  • Python

    Python 是一种面向对象、直译式电脑编程语言,具有近二十年的发展历史,成熟且稳定。它包含了一组完善而且容易理解的标准库,能够轻松完成很多常见的任务。它的语法简捷和清晰,尽量使用无异义的英语单词,与其它大多数程序设计语言使用大括号不一样,它使用缩进来定义语句块。

    556 引用 • 675 回帖
  • 电影

    这是一个不能说的秘密。

    122 引用 • 608 回帖
  • Love2D

    Love2D 是一个开源的, 跨平台的 2D 游戏引擎。使用纯 Lua 脚本来进行游戏开发。目前支持的平台有 Windows, Mac OS X, Linux, Android 和 iOS。

    14 引用 • 53 回帖 • 553 关注
  • SMTP

    SMTP(Simple Mail Transfer Protocol)即简单邮件传输协议,它是一组用于由源地址到目的地址传送邮件的规则,由它来控制信件的中转方式。SMTP 协议属于 TCP/IP 协议簇,它帮助每台计算机在发送或中转信件时找到下一个目的地。

    4 引用 • 18 回帖 • 634 关注
  • VirtualBox

    VirtualBox 是一款开源虚拟机软件,最早由德国 Innotek 公司开发,由 Sun Microsystems 公司出品的软件,使用 Qt 编写,在 Sun 被 Oracle 收购后正式更名成 Oracle VM VirtualBox。

    10 引用 • 2 回帖 • 16 关注
  • PWA

    PWA(Progressive Web App)是 Google 在 2015 年提出、2016 年 6 月开始推广的项目。它结合了一系列现代 Web 技术,在网页应用中实现和原生应用相近的用户体验。

    14 引用 • 69 回帖 • 179 关注
  • 微服务

    微服务架构是一种架构模式,它提倡将单一应用划分成一组小的服务。服务之间互相协调,互相配合,为用户提供最终价值。每个服务运行在独立的进程中。服务于服务之间才用轻量级的通信机制互相沟通。每个服务都围绕着具体业务构建,能够被独立的部署。

    96 引用 • 155 回帖 • 2 关注