并夕夕版 文档树制卡 v0.5 支持直接获取路径和分屏

本贴最后更新于 875 天前,其中的信息可能已经时移世改

前情提要:pdd 版文档树制卡 v0.3,支持超级块和标记块制卡 - 链滴

目前的版本没什么好说的,点了等一下就完了。

// 一键制卡 v0.5 // 请求函数 function request(url, data = null, method = "POST") { return new Promise((resolve, reject) => { if (method.toUpperCase() == "POST") { fetch(url, { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify(data), }) .then( (data) => resolve(data.json()), (error) => { reject(error); } ) .catch((err) => { console.error("请求失败:", err); }); } }); } // 弹出提示信息 async function showMessage(msg) { await request("/api/notification/pushMsg", { msg, timeout: 3000 }); } // 获取当前文档id function getFileID() { //获取当前屏幕 const currentScreen = document.querySelector(".layout__wnd--active") //获取当前页面 const currentPage = currentScreen.querySelector( ".fn__flex-1.protyle:not(.fn__none)" ); //获取当前页面id const currentPageID = currentPage.querySelector( "span.protyle-breadcrumb__item--active" ).getAttribute("data-node-id"); return currentPageID; } // 获取当前文档路径 async function getHpath() { currentPageID = getFileID() body = { "id": currentPageID } let res = await request("/api/filetree/getHPathByID", body); //检测返回值 if (res.code === 0) { let currentPagePath = res.data; return currentPagePath; } return null; } // 添加多个卡片 async function addCards() { //获取全部deck let res = await request("/api/riff/getRiffDecks", {}); //获取当前打开文档的路径 focusItemPath = await getHpath() if (focusItemPath === null) { showMessage(`未能当前文档读取路径`); return; } //获取deck.id, 其deck.name 包含在 focusItemPath 中 let customDeckIdArr = []; Array.from(res.data).forEach((item) => { let name = item.name; if (focusItemPath.search(name) != -1) { customDeckIdArr.push(item.id); } }) if (customDeckIdArr.length === 0) { showMessage(`未能获取到:${focusItemPath} 的卡包`); return; } // 获取需要被制成卡片的块的ID const currentPage = document.querySelector( ".fn__flex-1.protyle:not(.fn__none)" ); //标记块 const markList = currentPage.querySelectorAll("span[data-type='mark']") //超级块 const superBlockList = currentPage.querySelectorAll("div[class='sb']") let arr = []; if (markList && markList.length > 0) { Array.from(markList).forEach((item) => { let id = item.parentElement.parentElement.getAttribute("data-node-id"); if (id) { arr.push(id); } }) } if (superBlockList && superBlockList.length > 0) { Array.from(superBlockList).forEach((item) => { let id = item.getAttribute("data-node-id"); if (id) { arr.push(id); } }) } if (arr.length === 0) { showMessage(`未能获取到:${focusItemPath} 页面的卡片`); return; } // 去重 arr = [... new Set(arr)]; for (deckIndex in customDeckIdArr) { // 把标记所在块全部制成卡片 let body = { deckID: customDeckIdArr[deckIndex], blockIDs: arr, }; let res = await request("/api/riff/addRiffCards", body); if (res.code === 0) { showMessage(`${res.data.name}卡包的总卡片数:${res.data.size}`); } } } // 添加一个按钮 const barMode = document.getElementById("barMode"); barMode.insertAdjacentHTML( "beforebegin", '<div id="addCards" class="toolbar__item b3-tooltips b3-tooltips__se" aria-label="制作卡片" ></div>' ); const addCardsBtn = document.getElementById("addCards"); addCardsBtn.style.width = "auto"; const addCardsBtnIcon = `<svg t="1674130669751" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4526" width="200" height="200"><path d="M928 160H96a32 32 0 0 0-32 32v672a32 32 0 0 0 32 32h832a32 32 0 0 0 32-32V192a32 32 0 0 0-32-32z m-32 672H128V224h768v608z" p-id="4527" fill="#9aa0a6"></path><path d="M230.592 448.096H544a32 32 0 1 0 0-64H230.592a32 32 0 0 0 0 64zM230.592 640.096H544a32 32 0 1 0 0-64H230.592a32 32 0 1 0 0 64zM768 704a32 32 0 0 0 32-32V350.016a32 32 0 1 0-64 0V672a32 32 0 0 0 32 32z" p-id="4528" fill="#9aa0a6"></path></svg>`; addCardsBtn.innerHTML = addCardsBtnIcon; addCardsBtn.addEventListener( "click", (e) => { addCards(); e.stopPropagation(); e.preventDefault(); }, true );
  • 思源笔记

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

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

    26152 引用 • 108636 回帖 • 1 关注

相关帖子

欢迎来到这里!

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

注册 关于
请输入回帖内容 ...
  • 大佬,很好用,但是有一个疑问,段落制卡后属性里有标识

    image.png
    如果是无序列表高亮制卡,添加后属性里面没有标识image.png

    这样如果把卡包删除了,卡片旁边的标记就消不了了,一个一个的删除卡片标识可以消失

    我把卡包删除了,现在旁边的标记一直在,怎么解决呀(属性里面没有),感谢

    1 回复
  • zxhd86 1

    目前没写判断列表和段落的逻辑,所以无序列表制卡实际上是制卡到 无序列表-列表项-段落块 中的段落块,使用旁边的列表项块标是无法选中的。

    最简单的做法是,在块中按 ctrl+/,出来的就是段落块的菜单了。

    另外,如果没有引用关系的话,其实最简单的方法是先进入到导出预览界面,然后选择复制到语雀,块的属性就会清空了。

    1 回复
  • 谢谢大佬的解答

推荐标签 标签

  • 生活

    生活是指人类生存过程中的各项活动的总和,范畴较广,一般指为幸福的意义而存在。生活实际上是对人生的一种诠释。生活包括人类在社会中与自己息息相关的日常活动和心理影射。

    230 引用 • 1432 回帖
  • Netty

    Netty 是一个基于 NIO 的客户端-服务器编程框架,使用 Netty 可以让你快速、简单地开发出一个可维护、高性能的网络应用,例如实现了某种协议的客户、服务端应用。

    49 引用 • 33 回帖 • 38 关注
  • Kubernetes

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

    118 引用 • 54 回帖 • 3 关注
  • Latke

    Latke 是一款以 JSON 为主的 Java Web 框架。

    71 引用 • 535 回帖 • 827 关注
  • Quicker

    Quicker 您的指尖工具箱!操作更少,收获更多!

    37 引用 • 157 回帖
  • Bootstrap

    Bootstrap 是 Twitter 推出的一个用于前端开发的开源工具包。它由 Twitter 的设计师 Mark Otto 和 Jacob Thornton 合作开发,是一个 CSS / HTML 框架。

    18 引用 • 33 回帖 • 648 关注
  • Jenkins

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

    54 引用 • 37 回帖 • 1 关注
  • Sandbox

    如果帖子标签含有 Sandbox ,则该帖子会被视为“测试帖”,主要用于测试社区功能,排查 bug 等,该标签下内容不定期进行清理。

    440 引用 • 1238 回帖 • 591 关注
  • Pipe

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

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

    134 引用 • 1127 回帖 • 110 关注
  • GitLab

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

    46 引用 • 72 回帖
  • 周末

    星期六到星期天晚,实行五天工作制后,指每周的最后两天。再过几年可能就是三天了。

    14 引用 • 297 回帖
  • C++

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

    108 引用 • 153 回帖
  • RIP

    愿逝者安息!

    8 引用 • 92 回帖 • 408 关注
  • Word
    13 引用 • 41 回帖
  • WebSocket

    WebSocket 是 HTML5 中定义的一种新协议,它实现了浏览器与服务器之间的全双工通信(full-duplex)。

    48 引用 • 206 回帖 • 281 关注
  • Sublime

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

    10 引用 • 5 回帖 • 2 关注
  • 百度

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

    63 引用 • 785 回帖 • 69 关注
  • 书籍

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

    82 引用 • 411 回帖
  • TextBundle

    TextBundle 文件格式旨在应用程序之间交换 Markdown 或 Fountain 之类的纯文本文件时,提供更无缝的用户体验。

    1 引用 • 2 回帖 • 86 关注
  • frp

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

    17 引用 • 7 回帖
  • FlowUs

    FlowUs.息流 个人及团队的新一代生产力工具。

    让复杂的信息管理更轻松、自由、充满创意。

    1 引用 • 4 关注
  • CloudFoundry

    Cloud Foundry 是 VMware 推出的业界第一个开源 PaaS 云平台,它支持多种框架、语言、运行时环境、云平台及应用服务,使开发人员能够在几秒钟内进行应用程序的部署和扩展,无需担心任何基础架构的问题。

    5 引用 • 18 回帖 • 192 关注
  • PWL

    组织简介

    用爱发电 (Programming With Love) 是一个以开源精神为核心的民间开源爱好者技术组织,“用爱发电”象征开源与贡献精神,加入组织,代表你将遵守组织的“个人开源爱好者”的各项条款。申请加入:用爱发电组织邀请帖
    用爱发电组织官网:https://programmingwithlove.stackoverflow.wiki/

    用爱发电组织的核心驱动力:

    • 遵守开源守则,体现开源&贡献精神:以分享为目的,拒绝非法牟利。
    • 自我保护:使用适当的 License 保护自己的原创作品。
    • 尊重他人:不以各种理由、各种漏洞进行未经允许的抄袭、散播、洩露;以礼相待,尊重所有对社区做出贡献的开发者;通过他人的分享习得知识,要留下足迹,表示感谢。
    • 热爱编程、热爱学习:加入组织,热爱编程是首当其要的。我们欢迎热爱讨论、分享、提问的朋友,也同样欢迎默默成就的朋友。
    • 倾听:正确并恳切对待、处理问题与建议,及时修复开源项目的 Bug ,及时与反馈者沟通。不抬杠、不无视、不辱骂。
    • 平视:不诋毁、轻视、嘲讽其他开发者,主动提出建议、施以帮助,以和谐为本。只要他人肯努力,你也可能会被昔日小看的人所超越,所以请保持谦虚。
    • 乐观且活跃:你的努力决定了你的高度。不要放弃,多年后回头俯瞰,才会发现自己已经成就往日所仰望的水平。积极地将项目开源,帮助他人学习、改进,自己也会获得相应的提升、成就与成就感。
    1 引用 • 487 回帖 • 3 关注
  • Facebook

    Facebook 是一个联系朋友的社交工具。大家可以通过它和朋友、同事、同学以及周围的人保持互动交流,分享无限上传的图片,发布链接和视频,更可以增进对朋友的了解。

    4 引用 • 15 回帖 • 444 关注
  • 30Seconds

    📙 前端知识精选集,包含 HTML、CSS、JavaScript、React、Node、安全等方面,每天仅需 30 秒。

    • 精选常见面试题,帮助您准备下一次面试
    • 精选常见交互,帮助您拥有简洁酷炫的站点
    • 精选有用的 React 片段,帮助你获取最佳实践
    • 精选常见代码集,帮助您提高打码效率
    • 整理前端界的最新资讯,邀您一同探索新世界
    488 引用 • 384 回帖 • 4 关注
  • Angular

    AngularAngularJS 的新版本。

    26 引用 • 66 回帖 • 562 关注
  • 运维

    互联网运维工作,以服务为中心,以稳定、安全、高效为三个基本点,确保公司的互联网业务能够 7×24 小时为用户提供高质量的服务。

    151 引用 • 257 回帖 • 1 关注