建议目录树新增统计子文档数量

建议在目录树后面新增统计子文档数量,并且在子文档数量有变化时,及时更新统计数量。

我是知道停留在文档上是可以看到子文档数量,但我希望能够更直观一点。

有一位大神写了代码,代码如下,但是实现不了文档树变化及时更新数量,有大神会改吗?还有一个需求,我希望能够知道已经写了多少篇文章了,能否在目录树的根,显示数量

(() => { // 样式常量 const STYLE_CONFIG = { color: '#888', // 数字颜色 fontSize: '12px', // 字体大小 backgroundColor: '', // 背景色 borderRadius: '4px', // 圆角 padding: '0 4px', // 内边距 marginRight: '10px', // 右侧间距 fontWeight: 'normal', // 字体粗细 }; // 创建样式表 const createStyleSheet = () => { const style = document.createElement('style'); style.id = 'custom-folder-count-style'; style.textContent = ` .custom-folder-count { position: absolute; right: 0; top: 50%; transform: translateY(-50%); color: ${STYLE_CONFIG.color}; font-size: ${STYLE_CONFIG.fontSize}; background-color: ${STYLE_CONFIG.backgroundColor}; border-radius: ${STYLE_CONFIG.borderRadius}; padding: ${STYLE_CONFIG.padding}; margin-right: ${STYLE_CONFIG.marginRight}; font-weight: ${STYLE_CONFIG.fontWeight}; pointer-events: none; } .b3-list-item { position: relative; } `; document.head.appendChild(style); }; // 给笔记本添加文档数 const setBoxCount = () => { const boxes = document.querySelectorAll('ul[data-url]'); boxes.forEach(async box => { const response = await query(`SELECT count(*) as count FROM blocks where box = '${box.dataset.url}' and type = 'd';`); if(!response[0] || !response[0]['count']) return; const count = response[0]['count']; const li = box.querySelector('li[data-type="navigation-root"]'); if(!li) return; // 移除旧的计数元素 li.querySelector('.custom-folder-count')?.remove(); // 创建新的计数元素 const countEl = document.createElement('span'); countEl.className = 'custom-folder-count'; countEl.textContent = `${count}`; // 查找标题容器并添加计数元素 const titleContainer = li.querySelector('.b3-list-item__text')?.parentNode; if(titleContainer) { titleContainer.appendChild(countEl); } }); }; // 给文件夹添加文档数 const setFolderCount = () => { const folders = document.querySelectorAll('li[data-count]:not([data-count="0"])'); folders.forEach(folder => { const count = folder.dataset.count; // 移除旧的计数元素 folder.querySelector('.custom-folder-count')?.remove(); // 创建新的计数元素 const countEl = document.createElement('span'); countEl.className = 'custom-folder-count'; countEl.textContent = `${count}`; // 查找标题容器并添加计数元素 const titleContainer = folder.querySelector('.b3-list-item__text')?.parentNode; if(titleContainer) { titleContainer.appendChild(countEl); } }); }; // 初始化 whenElementExist('ul[data-url]').then(() => { createStyleSheet(); setBoxCount(); setFolderCount(); }); // 每小时更新一次笔记本文档数 setInterval(() => { setBoxCount(); setFolderCount(); }, 3600000); // 监听右键菜单,动态显示文件夹的文档数 const treeSelector = isMobile()? '#sidebar .b3-list--mobile' : '.sy__file'; whenElementExist(treeSelector).then((fileTree) => { const onMenuShow = (event) => { const currLi = event.target.closest('li.b3-list-item:not([data-type="navigation-root"],[data-count="0"])'); if(!currLi) return; // 关闭上次的菜单,防止2个菜单冲突 document.body.click(); whenElementExist('button[data-id="rename"]').then(renameBtn => { const html = `<button data-id="docNums" class="b3-menu__item"><svg class="b3-menu__icon " style=""><use xlink:href="#iconList"></use></svg><span class="b3-menu__label">显示文档数</span></button>`; renameBtn.insertAdjacentHTML('afterend', html); renameBtn.parentElement.querySelector('button[data-id="docNums"]').onclick = async () => { const response = await query(`SELECT count(*) as count FROM blocks where path like '%/${currLi.dataset.nodeId}%' and type = 'd' and id != '${currLi.dataset.nodeId}';`); if(!response[0] || !response[0]['count']) {document.body.click();return;} const count = response[0]['count']; // 移除旧的计数元素 currLi.querySelector('.custom-folder-count')?.remove(); // 创建新的计数元素 const countEl = document.createElement('span'); countEl.className = 'custom-folder-count'; countEl.textContent = `${count}`; // 查找标题容器并添加计数元素 const titleContainer = currLi.querySelector('.b3-list-item__text')?.parentNode; if(titleContainer) { titleContainer.appendChild(countEl); } document.body.click(); }; }); }; if(isMobile()) { // 监听手机版更多按钮被单击 fileTree.addEventListener('touchend', (event) => { if (event.target.closest('span[data-type="more-file"]')) { onMenuShow(event); } }); } else { // 监听更多按钮被单击 fileTree.addEventListener('mouseup', (event) => { if (event.target.closest('span[data-type="more-file"]')) { onMenuShow(event); } }); // 监听文档树右键事件 fileTree.addEventListener('contextmenu', onMenuShow); } }); // 工具函数保持不变... function whenElementExist(selector, node) { return new Promise(resolve => { const check = () => { const el = typeof selector==='function'?selector():(node||document).querySelector(selector); if (el) resolve(el); else requestAnimationFrame(check); }; check(); }); } async function query(sql) { const result = await fetchSyncPost('/api/query/sql', { "stmt": sql }); if (result.code !== 0) { console.error("查询数据库出错", result.msg); return []; } return result.data; } async function fetchSyncPost(url, data, returnType = 'json') { const init = { method: "POST", }; if (data) { if (data instanceof FormData) { init.body = data; } else { init.body = JSON.stringify(data); } } try { const res = await fetch(url, init); const res2 = returnType === 'json' ? await res.json() : await res.text(); return res2; } catch(e) { console.log(e); return returnType === 'json' ? {code:e.code||1, msg: e.message||"", data: null} : ""; } } function isMobile() { return !!document.getElementById("sidebar"); } })();
  • 思源笔记

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

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

    26506 引用 • 110247 回帖 • 1 关注

相关帖子

欢迎来到这里!

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

注册 关于
请输入回帖内容 ...

推荐标签 标签

  • jsoup

    jsoup 是一款 Java 的 HTML 解析器,可直接解析某个 URL 地址、HTML 文本内容。它提供了一套非常省力的 API,可通过 DOM,CSS 以及类似于 jQuery 的操作方法来取出和操作数据。

    6 引用 • 1 回帖 • 498 关注
  • Vim

    Vim 是类 UNIX 系统文本编辑器 Vi 的加强版本,加入了更多特性来帮助编辑源代码。Vim 的部分增强功能包括文件比较(vimdiff)、语法高亮、全面的帮助系统、本地脚本(Vimscript)和便于选择的可视化模式。

    29 引用 • 66 回帖 • 1 关注
  • DevOps

    DevOps(Development 和 Operations 的组合词)是一组过程、方法与系统的统称,用于促进开发(应用程序/软件工程)、技术运营和质量保障(QA)部门之间的沟通、协作与整合。

    59 引用 • 25 回帖 • 4 关注
  • Laravel

    Laravel 是一套简洁、优雅的 PHP Web 开发框架。它采用 MVC 设计,是一款崇尚开发效率的全栈框架。

    19 引用 • 23 回帖 • 742 关注
  • 链书

    链书(Chainbook)是 B3log 开源社区提供的区块链纸质书交易平台,通过 B3T 实现共享激励与价值链。可将你的闲置书籍上架到链书,我们共同构建这个全新的交易平台,让闲置书籍继续发挥它的价值。

    链书社

    链书目前已经下线,也许以后还有计划重制上线。

    14 引用 • 257 回帖
  • frp

    frp 是一个可用于内网穿透的高性能的反向代理应用,支持 TCP、UDP、 HTTP 和 HTTPS 协议。

    17 引用 • 7 回帖 • 3 关注
  • 人工智能

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

    117 引用 • 319 回帖
  • 爬虫

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

    106 引用 • 275 回帖 • 1 关注
  • Mobi.css

    Mobi.css is a lightweight, flexible CSS framework that focus on mobile.

    1 引用 • 6 回帖 • 766 关注
  • 深度学习

    深度学习(Deep Learning)是机器学习的分支,是一种试图使用包含复杂结构或由多重非线性变换构成的多个处理层对数据进行高层抽象的算法。

    43 引用 • 44 回帖
  • Gitea

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

    5 引用 • 16 回帖 • 1 关注
  • 百度

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

    63 引用 • 785 回帖 • 66 关注
  • jsDelivr

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

    5 引用 • 31 回帖 • 109 关注
  • WiFiDog

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

    1 引用 • 7 回帖 • 612 关注
  • 阿里巴巴

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

    43 引用 • 221 回帖 • 45 关注
  • RabbitMQ

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

    49 引用 • 60 回帖 • 350 关注
  • 开源

    Open Source, Open Mind, Open Sight, Open Future!

    415 引用 • 3598 回帖 • 1 关注
  • 互联网

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

    98 引用 • 367 回帖
  • OneNote
    1 引用 • 3 回帖 • 1 关注
  • 心情

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

    59 引用 • 369 回帖 • 1 关注
  • C++

    C++ 是在 C 语言的基础上开发的一种通用编程语言,应用广泛。C++ 支持多种编程范式,面向对象编程、泛型编程和过程化编程。

    108 引用 • 153 回帖
  • Sublime

    Sublime Text 是一款可以用来写代码、写文章的文本编辑器。支持代码高亮、自动完成,还支持通过插件进行扩展。

    10 引用 • 5 回帖
  • 小说

    小说是以刻画人物形象为中心,通过完整的故事情节和环境描写来反映社会生活的文学体裁。

    32 引用 • 108 回帖
  • 书籍

    宋真宗赵恒曾经说过:“书中自有黄金屋,书中自有颜如玉。”

    84 引用 • 414 回帖
  • Pipe

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

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

    134 引用 • 1127 回帖 • 111 关注
  • Ant-Design

    Ant Design 是服务于企业级产品的设计体系,基于确定和自然的设计价值观上的模块化解决方案,让设计者和开发者专注于更好的用户体验。

    17 引用 • 23 回帖 • 5 关注
  • GitLab

    GitLab 是利用 Ruby 一个开源的版本管理系统,实现一个自托管的 Git 项目仓库,可通过 Web 界面操作公开或私有项目。

    46 引用 • 72 回帖 • 1 关注