思源笔记折腾记录 - 任务列表的序号

今天看到知乎上有人说了一嘴这个

(3 封私信) 思源和 Obsidian 哪个更适合做笔记? - 知乎 (zhihu.com)

然后想了一下，好像可以做一下试试

生成任务列表序号()
setTimeout(生成任务列表序号,1000)
document.head.insertAdjacentHTML(
    "beforeEnd",
    `<style>
    .protyle-wysiwyg [data-node-id].li[data-subtype="t"] .protyle-action.protyle-action--task:before {
        content:var(--custom-index) ;  
    }
    </style>`
  );
  
async function 生成任务列表序号(){
    let 任务列表元素数组 = document.querySelectorAll('.protyle-wysiwyg [data-type="NodeList"]:has([data-subtype="t"])')
    任务列表元素数组.forEach(
        (任务列表元素)=>{
            同步生成序号(任务列表元素)
        }
    )
    let 聚焦任务列表项元素数组 = document.querySelectorAll('.protyle-wysiwyg [data-subtype="t"]:not(.list .li)')
    聚焦任务列表项元素数组.forEach(
        任务列表项元素=>{
            异步生成序号(任务列表项元素)
        }
    ) 
    setTimeout(生成任务列表序号,1000)

}
function 同步生成序号(任务列表元素){
    let 元素id= 任务列表元素.getAttribute('data-node-id')

    let 任务选框数组 = 任务列表元素.querySelectorAll(`[data-node-id="${元素id}"]>div>.protyle-action.protyle-action--task`)
    任务选框数组.forEach(
        (任务选框,下标)=>{
            任务选框.setAttribute("style", `--custom-index :"${下标+1}."`)
        }
    )
}
async function 异步生成序号(任务列表项元素){
    let 元素id= 任务列表项元素.getAttribute('data-node-id')
    let 响应 = await fetch('/api/query/sql',{
        method:'post',
        body:JSON.stringify({
            stmt:`select * from blocks where id = (select parent_id from blocks where id ='${元素id}') `
        })
    })
    let data = await 响应.json()
    let 父块内容 = await(await fetch('/api/filetree/getDoc',{
        method:'post',
        body:JSON.stringify({
            id:data.data[0].id,
            size:102400
        })
    })).json()
    let div = document.createElement('div')
    div.innerHTML=父块内容.data.content
    div.querySelectorAll('.li').forEach(
        (元素,下标)=>{
            if(元素.getAttribute('data-node-id')===元素id){
                任务列表项元素.querySelector('.protyle-action.protyle-action--task').setAttribute("style", `--custom-index :"${下标+1}."`)
            }
        }
    )
}
​

可能有些奇怪为什么不用 css 的计数器来做，其实是因为聚焦还有动态加载的时候用纯 css 来做编号会有问题，算了先就这样把，其实这个不自动刷新的话弄个按钮性能会更好。

效果就像这样：

第一个元素的编号是 2 是因为它确实是第二个，只不过是聚焦了。

上面 sql 之类绕了一大圈就是解决这个问题的。