因为嵌入块一般特别长，想分页进行浏览就不用一次性看完了。
结合思源的 html 块，块属性实现对嵌入块的分页查询。代码很烂，不喜轻轻喷。
用法 ：
- 复制 html 代码到 html 块中，并修改 custom_id 为唯一标识。建议这个 id 使用 html 块 id。（html 代码去文末复制）
- 配置 html 块的属性。
- qrkid 表示 嵌入块 id
- quickeruri 指 这个动作的 uri 地址。quicker 动作
- sql ：结尾不要用分号，不要用 limit ，不要用 || 拼接字符串 （嵌入块好像不支持）。
- 在 quicker 中配置 siyuan token。
注意 ：目前还不完善。
- 建议同时只打开一个使用 html 块对嵌入块进行分页查询的文档。（js 写得很烂，打开多了可能 dom 会获取）
- 要 html 块里面的 custom_id 每个 html 中要使用不一样的。（推荐使用 html 块 id，这样就都不同了）
- 查询的 sql 请注意，不要查询到自身或者同样使用 html 块进行分页查询的文档，以防套娃，导致程序崩溃。
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>
欢迎来到这里！
我们正在构建一个小众社区，大家在这里相互信任，以平等 • 自由 • 奔放的价值观进行分享交流。最终，希望大家能够找到与自己志同道合的伙伴，共同成长。
注册 关于