【分享】html 内容块 +quicker 实现对嵌入块分页查询

本贴最后更新于 1044 天前,其中的信息可能已经时移俗易

因为嵌入块一般特别长,想分页进行浏览就不用一次性看完了。

结合思源的 html 块,块属性实现对嵌入块的分页查询。代码很烂,不喜轻轻喷。

用法

  1. 复制 html 代码到 html 块中,并修改 custom_id 为唯一标识。建议这个 id 使用 html 块 id。(html 代码去文末复制)
  2. 配置 html 块的属性。
    1. qrkid 表示 嵌入块 id
    2. quickeruri 指 这个动作的 uri 地址。quicker 动作
    3. sql :结尾不要用分号,不要用 limit ,不要用 || 拼接字符串 (嵌入块好像不支持)。
  3. 在 quicker 中配置 siyuan token。

注意 :目前还不完善。

  1. 建议同时只打开一个使用 html 块对嵌入块进行分页查询的文档。(js 写得很烂,打开多了可能 dom 会获取)
  2. 要 html 块里面的 custom_id 每个 html 中要使用不一样的。(推荐使用 html 块 id,这样就都不同了)
  3. 查询的 sql 请注意,不要查询到自身或者同样使用 html 块进行分页查询的文档,以防套娃,导致程序崩溃。

AEM9KCAR2PA81RBKEH.gif

html 代码如下:

<html> <head> <style> #page_nav{width:100%;height:50px;display: flex; justify-content: center;} .page_btn{width:60px;display: inline-block; text-align: center;height: 50px;line-height: 50px;} #page_nav a{color: #8ab4f8; cursor: pointer;} #pageNum{width:50px;} </style> </head> <body> <div id="page_nav"> <form onload="formLoad()" readonly></form> <a id="first" class="page_btn" href="javascript:first()">首页</a> <a id="pre" class="page_btn" href="javascript:pre()">上一页</a> <input id="pageNum" name="pageNum" value="0" readonly placeholder="第几页"/> <a id="next" class="page_btn" href="javascript:next()">下一页</a> <p>查询条数 <select id="querycount" onchange="changeCount()"> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> <option value="4">4</option> <option value="5" selected="selected">5</option> <option value="6">6</option> <option value="7">7</option> <option value="8">8</option> <option value="9">9</option> <option value="10">10</option> <option value="20">20</option> <option value="25">25</option> <option value="30">30</option> <option value="50">50</option> </select> </p> </div> </body> <script> { const customID = '这个id为用户自己设置,用来唯一标识这个块的,建议使用html块id';//如:20220507204221-l9rthtz let Me = This(customID); console.log(Me); // 初始化,自动加载 pageNum 和pageCount init(); function init(){ var embeddedBlockId = Me.block.getAttribute('custom-qrkid'); if(!embeddedBlockId){ alert("需要在HTML块的属性中配置 :qrkid ! ") return; } var pageNum = document.querySelector(`div[data-node-id="${embeddedBlockId}"`).getAttribute('custom-pagenum'); var querycount = document.querySelector(`div[data-node-id="${embeddedBlockId}"`).getAttribute('custom-querycount'); if(!pageNum || !querycount){ return; } Me.shadowRoot.querySelector("#pageNum").value = parseInt(pageNum); Me.shadowRoot.querySelector("#querycount").value = parseInt(querycount); } /** * HTML 块中的脚本获取当前块相关信息 * @params {string} customID 内部定义的 ID * @returns {string} id 当前 HTML 块 ID * @returns {HTMLElement} block 当前 HTML 块 * @returns {HTMLElement} shadowRoot 当前 HTML 块 shadowRoot */ function This(customID) { let protyle = document.querySelector(`protyle-html[data-content*="${customID}"]`); if (protyle) { let block = protyle.parentElement.parentElement; return { id: block.dataset.nodeId, block: block, shadowRoot: protyle.shadowRoot, }; } else return null; } function changeCount(){ first() } function first(){ Me.shadowRoot.querySelector("#pageNum").value = 0; refreshEmbeddedBlock(); } function pre(){ var pageNum = parseInt(Me.shadowRoot.querySelector("#pageNum").value || 0); if(pageNum <= 0){ return; } Me.shadowRoot.querySelector("#pageNum").value = pageNum -1; refreshEmbeddedBlock(); } function next(){ var pageNum = parseInt(Me.shadowRoot.querySelector("#pageNum").value || 0); Me.shadowRoot.querySelector("#pageNum").value = pageNum + 1; refreshEmbeddedBlock(); } function refreshEmbeddedBlock() { var embeddedBlockId = Me.block.getAttribute('custom-qrkid'); var sql = Me.block.getAttribute('custom-sql'); var quickeruri = Me.block.getAttribute('custom-quickeruri'); if(!embeddedBlockId || !sql || !quickeruri){ console.log("embeddedBlockId:" + embeddedBlockId) console.log("sql:" + sql) console.log("quickeruri:" + quickeruri) alert("需要在HTML块的属性中配置 :qrkid , sql , quickeruri 这几个属性!! ") } var pageNum = parseInt(Me.shadowRoot.querySelector("#pageNum").value || 0); var querycount = parseInt(Me.shadowRoot.querySelector("#querycount").value || 0); if(querycount <= 0){ alert("请重新设置查询条数!") } sql = `${sql} limit ${pageNum*querycount} , ${querycount}` // alert(`embeddedBlockId:${embeddedBlockId}\n pageNum:${pageNum}\n querycount:${querycount}\n `) var jsonStr = JSON.stringify({qrkid:embeddedBlockId,sql:sql,pagenum:pageNum,querycount:querycount}); // console.log(jsonStr) // var full_quickeruri = `${quickeruri}?qrkid=${embeddedBlockId}&sql=${sql}`; var full_quickeruri = `${quickeruri}?${jsonStr}`; console.log(full_quickeruri); location.href =full_quickeruri; } } </script> </html>
  • 思源笔记

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

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

    24602 引用 • 100854 回帖

相关帖子

欢迎来到这里!

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

注册 关于
请输入回帖内容 ...
kobi
❤️❤️快速整理笔记,最重要的功能应当是什么呢❗❓

推荐标签 标签

  • 笔记

    好记性不如烂笔头。

    311 引用 • 796 回帖
  • 设计模式

    设计模式(Design pattern)代表了最佳的实践,通常被有经验的面向对象的软件开发人员所采用。设计模式是软件开发人员在软件开发过程中面临的一般问题的解决方案。这些解决方案是众多软件开发人员经过相当长的一段时间的试验和错误总结出来的。

    200 引用 • 120 回帖 • 4 关注
  • Visio
    1 引用 • 2 回帖 • 1 关注
  • InfluxDB

    InfluxDB 是一个开源的没有外部依赖的时间序列数据库。适用于记录度量,事件及实时分析。

    2 引用 • 87 关注
  • Typecho

    Typecho 是一款博客程序,它在 GPLv2 许可证下发行,基于 PHP 构建,可以运行在各种平台上,支持多种数据库(MySQL、PostgreSQL、SQLite)。

    12 引用 • 67 回帖 • 442 关注
  • V2Ray
    1 引用 • 15 回帖 • 1 关注
  • RYMCU

    RYMCU 致力于打造一个即严谨又活泼、专业又不失有趣,为数百万人服务的开源嵌入式知识学习交流平台。

    4 引用 • 6 回帖 • 52 关注
  • 互联网

    互联网(Internet),又称网际网络,或音译因特网、英特网。互联网始于 1969 年美国的阿帕网,是网络与网络之间所串连成的庞大网络,这些网络以一组通用的协议相连,形成逻辑上的单一巨大国际网络。

    99 引用 • 367 回帖 • 4 关注
  • IBM

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

    17 引用 • 53 回帖 • 145 关注
  • 微信

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

    132 引用 • 796 回帖
  • OkHttp

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

    16 引用 • 6 回帖 • 83 关注
  • Jenkins

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

    54 引用 • 37 回帖
  • 爬虫

    网络爬虫(Spider、Crawler),是一种按照一定的规则,自动地抓取万维网信息的程序。

    106 引用 • 275 回帖 • 1 关注
  • OpenResty

    OpenResty 是一个基于 NGINX 与 Lua 的高性能 Web 平台,其内部集成了大量精良的 Lua 库、第三方模块以及大多数的依赖项。用于方便地搭建能够处理超高并发、扩展性极高的动态 Web 应用、Web 服务和动态网关。

    17 引用 • 51 关注
  • LaTeX

    LaTeX(音译“拉泰赫”)是一种基于 ΤΕΧ 的排版系统,由美国计算机学家莱斯利·兰伯特(Leslie Lamport)在 20 世纪 80 年代初期开发,利用这种格式,即使使用者没有排版和程序设计的知识也可以充分发挥由 TeX 所提供的强大功能,能在几天,甚至几小时内生成很多具有书籍质量的印刷品。对于生成复杂表格和数学公式,这一点表现得尤为突出。因此它非常适用于生成高印刷质量的科技和数学类文档。

    12 引用 • 54 回帖 • 18 关注
  • Elasticsearch

    Elasticsearch 是一个基于 Lucene 的搜索服务器。它提供了一个分布式多用户能力的全文搜索引擎,基于 RESTful 接口。Elasticsearch 是用 Java 开发的,并作为 Apache 许可条款下的开放源码发布,是当前流行的企业级搜索引擎。设计用于云计算中,能够达到实时搜索,稳定,可靠,快速,安装使用方便。

    117 引用 • 99 回帖 • 209 关注
  • PostgreSQL

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

    22 引用 • 22 回帖 • 1 关注
  • 链滴

    链滴是一个记录生活的地方。

    记录生活,连接点滴

    168 引用 • 3834 回帖
  • JavaScript

    JavaScript 一种动态类型、弱类型、基于原型的直译式脚本语言,内置支持类型。它的解释器被称为 JavaScript 引擎,为浏览器的一部分,广泛用于客户端的脚本语言,最早是在 HTML 网页上使用,用来给 HTML 网页增加动态功能。

    729 引用 • 1278 回帖 • 1 关注
  • 创造

    你创造的作品可能会帮助到很多人,如果是开源项目的话就更赞了!

    182 引用 • 1007 回帖 • 1 关注
  • Ubuntu

    Ubuntu(友帮拓、优般图、乌班图)是一个以桌面应用为主的 Linux 操作系统,其名称来自非洲南部祖鲁语或豪萨语的“ubuntu”一词,意思是“人性”、“我的存在是因为大家的存在”,是非洲传统的一种价值观,类似华人社会的“仁爱”思想。Ubuntu 的目标在于为一般用户提供一个最新的、同时又相当稳定的主要由自由软件构建而成的操作系统。

    127 引用 • 169 回帖
  • Hprose

    Hprose 是一款先进的轻量级、跨语言、跨平台、无侵入式、高性能动态远程对象调用引擎库。它不仅简单易用,而且功能强大。你无需专门学习,只需看上几眼,就能用它轻松构建分布式应用系统。

    9 引用 • 17 回帖 • 617 关注
  • uTools

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

    7 引用 • 27 回帖
  • API

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

    78 引用 • 430 回帖 • 1 关注
  • FreeMarker

    FreeMarker 是一款好用且功能强大的 Java 模版引擎。

    23 引用 • 20 回帖 • 462 关注
  • Openfire

    Openfire 是开源的、基于可拓展通讯和表示协议 (XMPP)、采用 Java 编程语言开发的实时协作服务器。Openfire 的效率很高,单台服务器可支持上万并发用户。

    6 引用 • 7 回帖 • 98 关注
  • danl
    164 关注