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

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

前情提要: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
);
  • 思源笔记

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

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

    18710 引用 • 69855 回帖

相关帖子

欢迎来到这里!

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

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

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

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

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

    1 回复
  • zxhd86 1

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

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

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

    1 回复
  • 谢谢大佬的解答

推荐标签 标签

  • gRpc
    10 引用 • 8 回帖 • 55 关注
  • 大数据

    大数据(big data)是指无法在一定时间范围内用常规软件工具进行捕捉、管理和处理的数据集合,是需要新处理模式才能具有更强的决策力、洞察发现力和流程优化能力的海量、高增长率和多样化的信息资产。

    89 引用 • 113 回帖
  • RabbitMQ

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

    49 引用 • 60 回帖 • 399 关注
  • 爬虫

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

    106 引用 • 275 回帖 • 2 关注
  • 一些有用的避坑指南。

    69 引用 • 93 回帖 • 2 关注
  • OnlyOffice
    4 引用 • 23 关注
  • V2EX

    V2EX 是创意工作者们的社区。这里目前汇聚了超过 400,000 名主要来自互联网行业、游戏行业和媒体行业的创意工作者。V2EX 希望能够成为创意工作者们的生活和事业的一部分。

    17 引用 • 236 回帖 • 418 关注
  • Google

    Google(Google Inc.,NASDAQ:GOOG)是一家美国上市公司(公有股份公司),于 1998 年 9 月 7 日以私有股份公司的形式创立,设计并管理一个互联网搜索引擎。Google 公司的总部称作“Googleplex”,它位于加利福尼亚山景城。Google 目前被公认为是全球规模最大的搜索引擎,它提供了简单易用的免费服务。不作恶(Don't be evil)是谷歌公司的一项非正式的公司口号。

    49 引用 • 192 回帖
  • ngrok

    ngrok 是一个反向代理,通过在公共的端点和本地运行的 Web 服务器之间建立一个安全的通道。

    7 引用 • 63 回帖 • 598 关注
  • Maven

    Maven 是基于项目对象模型(POM)、通过一小段描述信息来管理项目的构建、报告和文档的软件项目管理工具。

    185 引用 • 318 回帖 • 344 关注
  • Node.js

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

    138 引用 • 268 回帖 • 194 关注
  • BAE

    百度应用引擎(Baidu App Engine)提供了 PHP、Java、Python 的执行环境,以及云存储、消息服务、云数据库等全面的云服务。它可以让开发者实现自动地部署和管理应用,并且提供动态扩容和负载均衡的运行环境,让开发者不用考虑高成本的运维工作,只需专注于业务逻辑,大大降低了开发者学习和迁移的成本。

    19 引用 • 75 回帖 • 618 关注
  • uTools

    uTools 是一个极简、插件化、跨平台的现代桌面软件。通过自由选配丰富的插件,打造你得心应手的工具集合。

    5 引用 • 13 回帖
  • 996
    13 引用 • 200 回帖
  • 尊园地产

    昆明尊园房地产经纪有限公司,即:Kunming Zunyuan Property Agency Company Limited(简称“尊园地产”)于 2007 年 6 月开始筹备,2007 年 8 月 18 日正式成立,注册资本 200 万元,公司性质为股份经纪有限公司,主营业务为:代租、代售、代办产权过户、办理银行按揭、担保、抵押、评估等。

    1 引用 • 22 回帖 • 684 关注
  • Mac

    Mac 是苹果公司自 1984 年起以“Macintosh”开始开发的个人消费型计算机,如:iMac、Mac mini、Macbook Air、Macbook Pro、Macbook、Mac Pro 等计算机。

    164 引用 • 594 回帖 • 1 关注
  • FFmpeg

    FFmpeg 是一套可以用来记录、转换数字音频、视频,并能将其转化为流的开源计算机程序。

    22 引用 • 31 回帖 • 3 关注
  • 设计模式

    设计模式(Design pattern)代表了最佳的实践,通常被有经验的面向对象的软件开发人员所采用。设计模式是软件开发人员在软件开发过程中面临的一般问题的解决方案。这些解决方案是众多软件开发人员经过相当长的一段时间的试验和错误总结出来的。

    198 引用 • 120 回帖
  • 微信

    腾讯公司 2011 年 1 月 21 日推出的一款手机通讯软件。用户可以通过摇一摇、搜索号码、扫描二维码等添加好友和关注公众平台,同时可以将自己看到的精彩内容分享到微信朋友圈。

    129 引用 • 793 回帖
  • 国际化

    i18n(其来源是英文单词 internationalization 的首末字符 i 和 n,18 为中间的字符数)是“国际化”的简称。对程序来说,国际化是指在不修改代码的情况下,能根据不同语言及地区显示相应的界面。

    7 引用 • 26 回帖 • 3 关注
  • PHP

    PHP(Hypertext Preprocessor)是一种开源脚本语言。语法吸收了 C 语言、 Java 和 Perl 的特点,主要适用于 Web 开发领域,据说是世界上最好的编程语言。

    164 引用 • 407 回帖 • 528 关注
  • Docker

    Docker 是一个开源的应用容器引擎,让开发者可以打包他们的应用以及依赖包到一个可移植的容器中,然后发布到任何流行的操作系统上。容器完全使用沙箱机制,几乎没有性能开销,可以很容易地在机器和数据中心中运行。

    476 引用 • 899 回帖
  • Vditor

    Vditor 是一款浏览器端的 Markdown 编辑器,支持所见即所得、即时渲染(类似 Typora)和分屏预览模式。它使用 TypeScript 实现,支持原生 JavaScript、Vue、React 和 Angular。

    313 引用 • 1667 回帖 • 1 关注
  • RESTful

    一种软件架构设计风格而不是标准,提供了一组设计原则和约束条件,主要用于客户端和服务器交互类的软件。基于这个风格设计的软件可以更简洁,更有层次,更易于实现缓存等机制。

    30 引用 • 114 回帖 • 1 关注
  • React

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

    192 引用 • 291 回帖 • 443 关注
  • 自由行
    1 关注
  • SOHO

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

    7 引用 • 55 回帖 • 92 关注