pdd 版文档树制卡

本贴最后更新于 449 天前,其中的信息可能已经时移俗易

前情提要:使用当前文档的标记块快速制作闪卡 - 链滴

依然基于 @BryceAndJuly 大佬的 【分享】使用当前文档的二级标题快速制作闪卡,但是现在不需要手动输入了,可以自动获取当前文档的路径,然后在全部的卡包里进行匹配,匹配一个卡包的名字包括在当前文档路径里的卡包。

举例:卡包名为 test1、test2,当前文档路径为\a\test1\b,那么会自动添加卡片到 test1。

不要尝试 \a\test1\test2 的文档,因为我也不知道会发生什么:)

注意,因为目前获取路径的方法是从页面中读取,在添加卡片之前,需要将鼠标放在当前文档的选项卡上,确定路径已经加载完毕:

图片.png

如果有更好的获取当前文档路径的方法,请一定告诉我。

使用说明:

前情提要:我已经提前建立了名为内容块的卡包。

快速制卡.gif

另外,一个我写的时候未能想到的好消息:当前页面的嵌入块中的标记也能被添加到卡包中。

欢迎留言使用体验,或者告诉我代码还能怎么改进。


2023.2.2 更新:现在支持添加到多个卡组了,也就是说,卡包名为 test1、test2,当前文档路径为\a\test1\test2 时,会自动添加卡片到 test1、test2 卡组。

// 一键制卡 v0.2
// 请求函数
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 });
}

// 添加多个卡片
async function addCards() {
    //获取全部deck
    let res = await request("/api/riff/getRiffDecks", {});

    //获取当前打开文档的路径
    let focusItem = document.querySelector("li[class='item item\\-\\-focus']");
    focusItemPath = focusItem.getAttribute("aria-label");
    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;
    } else if (customDeckIdArr.length > 0) {

        // 获取需要被制成卡片的块的ID
        const currentPage = document.querySelector(
            ".fn__flex-1.protyle:not(.fn__none)"
        );

        const markList = currentPage.querySelectorAll("span[data-type='mark']")


        if (markList && markList.length > 0) {
            let arr = [];
            Array.from(markList).forEach((item) => {
                let id = item.parentElement.parentElement.getAttribute("data-node-id");
                if (id) {
                    arr.push(id);
                }
            })
            // 去重
            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
);```

欢迎留言使用体验,或者告诉我代码还能怎么改进。

  • 思源笔记

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

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

    18697 引用 • 69801 回帖
1 操作
zxhd86 在 2023-02-02 10:08:28 更新了该帖

相关帖子

欢迎来到这里!

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

注册 关于
请输入回帖内容 ...
  • 在思源官方支持文档树制卡前,可以暂时用楼主这套方案代替。再次呼吁官方考虑按文档树无感分类方案。

    相关文章:

    【科普帖】RemNote 是如何进行卡片分类的


    从这篇文章以及最近的一些讨论中不难发现,同一篇文档的卡片属于同一卡包 这一用户需求具备广泛民意基础,因为这是一个很自然的软件逻辑。

    2 操作
    openAI 在 2023-02-01 21:23:44 更新了该回帖
    openAI 在 2023-02-01 20:41:40 更新了该回帖
  • 其他回帖
  • zxhd86

    额,抱歉,我发帖子的时候显然忘记把代码贴上去了……不过我又更新了一次了。

  • zyu318

    请问 JS 代码在哪里?

    1 回复

推荐标签 标签

  • CloudFoundry

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

    5 引用 • 18 回帖 • 152 关注
  • MySQL

    MySQL 是一个关系型数据库管理系统,由瑞典 MySQL AB 公司开发,目前属于 Oracle 公司。MySQL 是最流行的关系型数据库管理系统之一。

    675 引用 • 535 回帖 • 1 关注
  • SpaceVim

    SpaceVim 是一个社区驱动的模块化 vim/neovim 配置集合,以模块的方式组织管理插件以
    及相关配置,为不同的语言开发量身定制了相关的开发模块,该模块提供代码自动补全,
    语法检查、格式化、调试、REPL 等特性。用户仅需载入相关语言的模块即可得到一个开箱
    即用的 Vim-IDE。

    3 引用 • 31 回帖 • 71 关注
  • Bug

    Bug 本意是指臭虫、缺陷、损坏、犯贫、窃听器、小虫等。现在人们把在程序中一些缺陷或问题统称为 bug(漏洞)。

    77 引用 • 1741 回帖
  • 快应用

    快应用 是基于手机硬件平台的新型应用形态;标准是由主流手机厂商组成的快应用联盟联合制定;快应用标准的诞生将在研发接口、能力接入、开发者服务等层面建设标准平台;以平台化的生态模式对个人开发者和企业开发者全品类开放。

    15 引用 • 127 回帖 • 2 关注
  • etcd

    etcd 是一个分布式、高可用的 key-value 数据存储,专门用于在分布式系统中保存关键数据。

    5 引用 • 26 回帖 • 492 关注
  • Hadoop

    Hadoop 是由 Apache 基金会所开发的一个分布式系统基础架构。用户可以在不了解分布式底层细节的情况下,开发分布式程序。充分利用集群的威力进行高速运算和存储。

    82 引用 • 122 回帖 • 621 关注
  • SQLServer

    SQL Server 是由 [微软] 开发和推广的关系数据库管理系统(DBMS),它最初是由 微软、Sybase 和 Ashton-Tate 三家公司共同开发的,并于 1988 年推出了第一个 OS/2 版本。

    19 引用 • 31 回帖 • 1 关注
  • AngularJS

    AngularJS 诞生于 2009 年,由 Misko Hevery 等人创建,后为 Google 所收购。是一款优秀的前端 JS 框架,已经被用于 Google 的多款产品当中。AngularJS 有着诸多特性,最为核心的是:MVC、模块化、自动化双向数据绑定、语义化标签、依赖注入等。2.0 版本后已经改名为 Angular。

    12 引用 • 50 回帖 • 423 关注
  • Docker

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

    476 引用 • 899 回帖
  • Vim

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

    27 引用 • 66 回帖
  • Hprose

    Hprose 是一款先进的轻量级、跨语言、跨平台、无侵入式、高性能动态远程对象调用引擎库。它不仅简单易用,而且功能强大。你无需专门学习,只需看上几眼,就能用它轻松构建分布式应用系统。

    9 引用 • 17 回帖 • 597 关注
  • CodeMirror
    1 引用 • 2 回帖 • 117 关注
  • Hexo

    Hexo 是一款快速、简洁且高效的博客框架,使用 Node.js 编写。

    21 引用 • 140 回帖 • 27 关注
  • 一些有用的避坑指南。

    69 引用 • 93 回帖 • 1 关注
  • Hibernate

    Hibernate 是一个开放源代码的对象关系映射框架,它对 JDBC 进行了非常轻量级的对象封装,使得 Java 程序员可以随心所欲的使用对象编程思维来操纵数据库。

    39 引用 • 103 回帖 • 685 关注
  • 知乎

    知乎是网络问答社区,连接各行各业的用户。用户分享着彼此的知识、经验和见解,为中文互联网源源不断地提供多种多样的信息。

    10 引用 • 66 回帖 • 1 关注
  • Linux

    Linux 是一套免费使用和自由传播的类 Unix 操作系统,是一个基于 POSIX 和 Unix 的多用户、多任务、支持多线程和多 CPU 的操作系统。它能运行主要的 Unix 工具软件、应用程序和网络协议,并支持 32 位和 64 位硬件。Linux 继承了 Unix 以网络为核心的设计思想,是一个性能稳定的多用户网络操作系统。

    915 引用 • 931 回帖
  • Eclipse

    Eclipse 是一个开放源代码的、基于 Java 的可扩展开发平台。就其本身而言,它只是一个框架和一组服务,用于通过插件组件构建开发环境。

    75 引用 • 258 回帖 • 627 关注
  • FFmpeg

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

    22 引用 • 31 回帖 • 2 关注
  • Oracle

    Oracle(甲骨文)公司,全称甲骨文股份有限公司(甲骨文软件系统有限公司),是全球最大的企业级软件公司,总部位于美国加利福尼亚州的红木滩。1989 年正式进入中国市场。2013 年,甲骨文已超越 IBM,成为继 Microsoft 后全球第二大软件公司。

    103 引用 • 126 回帖 • 447 关注
  • Latke

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

    70 引用 • 532 回帖 • 712 关注
  • App

    App(应用程序,Application 的缩写)一般指手机软件。

    90 引用 • 383 回帖 • 1 关注
  • FlowUs

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

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

    1 引用
  • React

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

    192 引用 • 291 回帖 • 442 关注
  • JRebel

    JRebel 是一款 Java 虚拟机插件,它使得 Java 程序员能在不进行重部署的情况下,即时看到代码的改变对一个应用程序带来的影响。

    26 引用 • 78 回帖 • 623 关注
  • gRpc
    10 引用 • 8 回帖 • 54 关注