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

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

结合思源的 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>

相关帖子

欢迎来到这里!

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

注册 关于
请输入回帖内容 ...
  • kobi 1 赞同
    订阅者 作者

    现在发现可以直接调用 api,根本不需要用 quicker,可以将属性里面的 quickeruri 去掉。只使用以下 html 就行。我还不会写挂件,以后会了就可以不用 quicker 辅助了。

    新代码在这:html 内容块实现对思源嵌入块分页查询

推荐标签 标签

  • Pipe

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

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

    126 引用 • 1098 回帖 • 226 关注
  • Chrome

    Chrome 又称 Google 浏览器,是一个由谷歌公司开发的网页浏览器。该浏览器是基于其他开源软件所编写,包括 WebKit,目标是提升稳定性、速度和安全性,并创造出简单且有效率的使用者界面。

    55 引用 • 282 回帖 • 93 关注
  • RabbitMQ

    RabbitMQ 是一个开源的 AMQP 实现,服务器端用 Erlang 语言编写,支持多种语言客户端,如:Python、Ruby、.NET、Java、C、PHP、ActionScript 等。用于在分布式系统中存储转发消息,在易用性、扩展性、高可用性等方面表现不俗。

    49 引用 • 60 回帖 • 460 关注
  • Node.js

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

    135 引用 • 267 回帖 • 434 关注
  • Elasticsearch

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

    107 引用 • 99 回帖 • 415 关注
  • jsDelivr

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

    5 引用 • 30 回帖 • 9 关注
  • Gitea

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

    2 引用 • 15 回帖 • 3 关注
  • RIP

    愿逝者安息!

    9 引用 • 92 回帖 • 209 关注
  • 正则表达式

    正则表达式(Regular Expression)使用单个字符串来描述、匹配一系列遵循某个句法规则的字符串。

    29 引用 • 88 回帖 • 1 关注
  • 服务

    提供一个服务绝不仅仅是简单的把硬件和软件累加在一起,它包括了服务的可靠性、服务的标准化、以及对服务的监控、维护、技术支持等。

    42 引用 • 24 回帖 • 2 关注
  • 大疆创新

    深圳市大疆创新科技有限公司(DJI-Innovations,简称 DJI),成立于 2006 年,是全球领先的无人飞行器控制系统及无人机解决方案的研发和生产商,客户遍布全球 100 多个国家。通过持续的创新,大疆致力于为无人机工业、行业用户以及专业航拍应用提供性能最强、体验最佳的革命性智能飞控产品和解决方案。

    2 引用 • 14 回帖 • 5 关注
  • Kubernetes

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

    101 引用 • 52 回帖
  • PWA

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

    12 引用 • 68 回帖 • 57 关注
  • React

    React 是 Facebook 开源的一个用于构建 UI 的 JavaScript 库。

    184 引用 • 282 回帖 • 515 关注
  • Openfire

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

    6 引用 • 7 回帖 • 50 关注
  • Ngui

    Ngui 是一个 GUI 的排版显示引擎和跨平台的 GUI 应用程序开发框架,基于
    Node.js / OpenGL。目标是在此基础上开发 GUI 应用程序可拥有开发 WEB 应用般简单与速度同时兼顾 Native 应用程序的性能与体验。

    7 引用 • 9 回帖 • 287 关注
  • App

    App(应用程序,Application 的缩写)一般指手机软件。

    84 引用 • 366 回帖
  • NGINX

    NGINX 是一个高性能的 HTTP 和反向代理服务器,也是一个 IMAP/POP3/SMTP 代理服务器。 NGINX 是由 Igor Sysoev 为俄罗斯访问量第二的 Rambler.ru 站点开发的,第一个公开版本 0.1.0 发布于 2004 年 10 月 4 日。

    296 引用 • 539 回帖 • 349 关注
  • 阿里巴巴

    阿里巴巴网络技术有限公司(简称:阿里巴巴集团)是以曾担任英语教师的马云为首的 18 人,于 1999 年在中国杭州创立,他们相信互联网能够创造公平的竞争环境,让小企业通过创新与科技扩展业务,并在参与国内或全球市场竞争时处于更有利的位置。

    43 引用 • 221 回帖 • 411 关注
  • Typecho

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

    11 引用 • 52 回帖 • 492 关注
  • golang

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

    479 引用 • 1383 回帖 • 559 关注
  • SQLServer

    SQL Server 是由 [微软] 开发和推广的关系数据库管理系统(DBMS),它最初是由 微软、Sybase 和 Ashton-Tate 三家公司共同开发的,并于 1988 年推出了第一个 OS/2 版本。

    19 引用 • 31 回帖 • 4 关注
  • Ruby

    Ruby 是一种开源的面向对象程序设计的服务器端脚本语言,在 20 世纪 90 年代中期由日本的松本行弘(まつもとゆきひろ/Yukihiro Matsumoto)设计并开发。在 Ruby 社区,松本也被称为马茨(Matz)。

    7 引用 • 31 回帖 • 99 关注
  • SOHO

    为成为自由职业者在家办公而努力吧!

    7 引用 • 55 回帖 • 198 关注
  • 职场

    找到自己的位置,萌新烦恼少。

    124 引用 • 1696 回帖 • 1 关注
  • 百度

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

    60 引用 • 784 回帖 • 408 关注
  • 程序员

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

    498 引用 • 3597 回帖