8.1 层功力 remnote 制卡,支持内置卡包制卡和移除

本贴最后更新于 594 天前,其中的信息可能已经时过境迁

2023.4.5 这些代码片段还能用,但假如不是你不愿意使用插件系统、或插件系统不能正常运行的话,我还是建议是使用插件版本的闪卡增强插件 v0.0.1 发布 基于社区插件系统 - 链滴


前情提要:8 层功力的 remnote 制卡 并多多一键制卡更新,支持列表项制卡,增加一键移除

在尝试了 v2.7.7 最新版本的文档树制卡后,我不得不真香了,我必须承认:

从文档树打开闪卡界面真是太酷了,很符合我对思源未来的想象,科技并带着趣味。

故紧急更新了一版,支持直接制卡到文档树的内置卡包。

不过,制卡到文档树的内置卡包和制卡到之前的自定义卡包是一个二选一的选项,因为这会造成重复制卡,也就是说一张卡片你会在复习的时候重复见两遍 :(

所以暂时只能做成开关了。默认为之前的自定义卡包制卡方式,想要使用新版本的文档树内置卡包,那就划到代码的最下方,把 false 改成 true 即可。

// 一键制卡 v0.7
// 使用匿名函数,防止污染空间
// 支持使用内建卡片
((useBulitIn = false) => {
    // 请求函数
    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 currentPage = getCurrentPage();
        //获取当前页面id
        const currentPageID = currentPage.querySelector(
            "span.protyle-breadcrumb__item--active"
        ).getAttribute("data-node-id");

        return currentPageID;
    }

    function getCurrentPage() {
        var currentScreen;
        var currentPage;
        try {
            //获取当前屏幕
            currentScreen = document.querySelector(".layout__wnd--active");
            //获取当前页面
            currentPage = currentScreen.querySelector(
                ".fn__flex-1.protyle:not(.fn__none)"
            );
            return currentPage;
        }
        catch (e) {
            showMessage(`未能获取到页面焦点!`)
        }
        throw new Error("未能获取到页面焦点!");
    }

    //传入 node节点列表 arr和数据抽取函数 fliter。
    // fliter 传入一个节点,返回一个字典
    // 字典格式:
    // {status,data}
    // status 为 ok,则代表为抽取成功,将data压入返回列表anwer,并最后返回。
    function iterArr(arr, fliter) {

        if (!arr && arr.length <= 0) {
            return [];
        }

        length = arr.length;
        anwer = [];
        for (let node of arr) {
            data = fliter(node);
            if (data["status"] === "ok" && data["data"]) {
                anwer.push(data["data"]);
            }
        }
        return anwer;
    }

    // 传入列表下的段落,返回被标记段落的父节点:列表项的id
    function fliterListCard(node) {
        var re = /(>>|(》》))\s?\u200b?$/;
        if (re.test(node.innerText)) {
            return {
                status: "ok",
                data: node.parentElement.getAttribute("data-node-id")
            }
        }
        return { status: "no", data: null };
    }

    function fliterMarkCard(node) {
        return {
            status: "ok",
            data: node.parentElement.parentElement.getAttribute("data-node-id")
        }
    }

    function fliterSuperBlockCard(node) {
        return {
            status: "ok",
            data: node.getAttribute("data-node-id")
        }
    }

    // 获取当前文档路径
    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;
        }


        let customDeckIdArr = [];
        // 导入默认卡包
        if (useBulitIn === true) {
            customDeckIdArr.push('20230218211946-2kw8jgx');
        }
        else {

            //获取deck.id, 其deck.name 包含在 focusItemPath 中
            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 = getCurrentPage()
        //标记块
        const markList = currentPage.querySelectorAll("span[data-type='mark']")
        //超级块
        const superBlockList = currentPage.querySelectorAll("div[class='sb']")
        //列表块
        const listList = currentPage.querySelectorAll("div[class='li']:has(div[class='li'])  > div[class = 'p']")

        let arr = [];
        var markCardList = iterArr(markList, fliterMarkCard)
        var superBlockCardList = iterArr(superBlockList, fliterSuperBlockCard)
        var listCardList = iterArr(listList, fliterListCard)
        arr = arr.concat(markCardList, superBlockCardList, listCardList)


        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 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
    );

})(false);
// 一键移除卡片 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 });
    }


    function getCurrentPage() {
        var currentScreen;
        var currentPage;
        try {
            //获取当前屏幕
            currentScreen = document.querySelector(".layout__wnd--active");
            //获取当前页面
            currentPage = currentScreen.querySelector(
                ".fn__flex-1.protyle:not(.fn__none)"
            );
            return currentPage;
        }
        catch (e) {
            showMessage(`未能获取到页面焦点!`)
        }
        throw new Error("未能获取到页面焦点!");
    }

    //传入 node节点列表 arr和数据抽取函数 fliter。
    // fliter 传入一个节点,返回一个字典
    // 字典格式:
    // {status,data}
    // status 为 ok,则代表为抽取成功,将data压入返回列表anwer,并最后返回。
    function iterArr(arr, fliter) {

        if (!arr && arr.length <= 0) {
            return [];
        }

        length = arr.length;
        anwer = [];
        for (let node of arr) {
            data = fliter(node);
            if (data["status"] === "ok" && data["data"]) {
                anwer.push(data["data"]);
            }
        }
        return anwer;
    }

    function fliterBlockCard(node) {
        return {
            status: "ok",
            data: node.getAttribute("data-node-id")
        }
    }

    async function removeCards() {


        // 获取需要被制成卡片的块的ID
        const currentPage = getCurrentPage()
        //已制卡块
        const cardedBlockList = currentPage.querySelectorAll(".protyle-wysiwyg [data-node-id][custom-riff-decks]")


        let arr = [];
        var cardedBlockIdList = iterArr(cardedBlockList, fliterBlockCard)

        arr = arr.concat(cardedBlockIdList)


        if (arr.length === 0) {
            showMessage(`未能获取到页面的卡片`);
            return;
        }

        // 去重
        arr = [... new Set(arr)];


        let body = {
            deckID: '',
            blockIDs: arr,
        };
        let res = await request("/api/riff/removeRiffCards", body);
        if (res.code === 0) {
            showMessage(`All卡包的移除卡片数:${arr.length}`);
        }

    }

    const barMode = document.getElementById("barMode");
    barMode.insertAdjacentHTML(
        "beforebegin",
        '<div id="removeCards" class="toolbar__item b3-tooltips b3-tooltips__se" aria-label="移除卡片" ></div>'
    );
    const removeCardsBtn = document.getElementById("removeCards");
    removeCardsBtn.style.width = "auto";
    const removeCardsBtnIcon = `<svg xmlns="http://www.w3.org/2000/svg" height="48" viewBox="0 96 960 960" width="48"><path d="M600 826v-60h145v60H600Zm0-368v-60h280v60H600Zm0 184v-60h235v60H600ZM125 381H80v-60h170v-45h135v45h170v60h-45v415q0 24-18 42t-42 18H185q-24 0-42-18t-18-42V381Zm60 0v415h265V381H185Zm0 0v415-415Z"/></svg>`;
    removeCardsBtn.innerHTML = removeCardsBtnIcon;
    removeCardsBtn.addEventListener(
        "click",
        (e) => {
            removeCards();
            e.stopPropagation();
            e.preventDefault();
        },
        true
    );

})();

如果喜欢,请给我留言吧。

  • 思源笔记

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

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

    22350 引用 • 89424 回帖 • 1 关注
1 操作
zxhd86 在 2023-04-07 22:25:46 更新了该帖

相关帖子

欢迎来到这里!

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

注册 关于
请输入回帖内容 ...
  • 是吧,这可是我当初据理力争、力排众议、舌战群儒争取来的 😄

  • 支持,太棒了,上次想一键移除卡片,D 大说为了稳定性暂时不考虑一次性删除多个属性,没想到大佬这么快就安排了。等待大佬的列表项制卡,达到 9 层功力。

    感谢提供。

    1 回复
  • wz169645

    支持,很棒

  • renky

    所以现在的代码是还暂时不可以列表项制卡吗?

    2 回复
  • zxhd86

    @gladi 我不太理解这个意思,不过现在确实是支持列表项制卡的。

    有什么改进的想法也可以提一下,虽然我暂时想不到什么能改进而且我能实现的。

    比如我有一个想法是动态跟踪用户的标记,不用手动点击,但是想不到有什么比较好的办法追踪,如果定期执行感觉又太浪费性能,而且可能不符合用户的想法。

    1 回复
  • 感谢大佬回复,当时看到一键移除有点激动就立即评论了,没有注意到是否支持列表项制卡。我这里测试了一下,列表项制卡还是和之前一样是用的段落块制作的卡片,不过加入了一键移除后也没什么影响了,挺好用的,再次感谢提供。

    动态追踪那个我不清楚耶,我一个外行想到,是否能打开某个开关后,就可以通过,在标记或超级块生成时的按键或快捷键后就立即执行自动点一下制作卡片的按钮呢。(触发机制就是点了标记或超级块的按键就触发)

    没有也没事,现在已经很好了。

    之前用 anki 制作卡时有用到一些模版批量制卡,有在想思源能用什么方法达到这样的列表项制作问答卡片,但是无奈啥都不会,大佬可以看看,也许能有所启发。

    方法来源于学习骇客:模板制卡的网站,所用到的 anki 模板

    达到的效果image.png

    image.png

    image.png

    image.png

    image.png

    image.png

    image.png

    可以看到,书写笔记需要有一定的原则,比如第 1 层是书名,第 2 层是章名,第 3 层是节名,第 4 层是问题,第 5 层是答案。

    那么就会得到这么些卡片

    • 1、问题是:书名,答案是:所有章名(问题处的下标指示了《书名》)
    • 2、问题是:章名,答案是:所有节名(问题处的下标指示了《书名》)
    • 3、问题是:节名,答案是:所有的问题(问题处的下标指示了《书名-章名》)
    • 4、问题是:问题,答案是:问题的答案(问题处的下标指示了《书名-章名-节名》)

    前 3 种自动生成的卡片的好处是让我们对这本书有个大的框架的把握,最后一种卡片是细化到每一问题,然后又有下标指示让知识点不是那么碎片化。

    @88250

    • 对应到思源上面,闪卡上的面包屑相当于上面的下标这个功能,但是思源的列表项在闪卡中展开与否,看的是文档中是否展开了,就比较想要在闪卡中能自动判断是否该展开。
    • (比如我制作的是一张上面的第 3 类卡,那么就默认是不展开问题的答案而只展示所有问题,想看答案也可以全部展开)
    • 现在是文档中全部展开,闪卡显示的时候就展开的;文档中全部关闭的,闪卡显示的时候就只有最开始能看到的卡片正面,背面需要自己展开才显示。(这点估计得让 D 大或 V 姐看看能否支持)
    • 列表项多制卡片右边的标记用渐变色来表示是否多次制作卡片了,对了撤销键 D 大看看要不要换一个数字 5 或是 J,换成 5 就可以单手完成用闪卡时的所有操做了,换成 J 就是左手负责选择程度,右手负责撤销(毕竟大家的右手食指一般都是放在 J 上的,会比用小拇指按 P 更方便。

    @zxhd86 大佬的一键制作卡片加入制作列表项制作卡片就可以实现上面这样了(每一个层级都制作一张)

    谢谢

  • zxhd86

    怎么说呢,原来你说的支持列表项制卡是指:要是段落挖空在列表项里,就用该列表项制卡的意思啊。那这个确实还没有支持,而且在引入一键移除后,感觉也没有太大支持的必要。而且会与思源目前支持的列表项制卡混杂。

    我所说的支持列表项制卡其实就是目前 siyuan 提供的那种列表项卡片,也就是:

    • 问题 < 标记符号 >

      • 答案 1
      • 答案 2

    就能一键制成卡片的那种。目前支持的标记符号有》》和 >>,想要添加的话不是很有难度,但是在键盘上又没有其他用途的符号难找,不然像 remnote 一样支持箭头符号也可以。

    如果要通过标记或超级块的按键或快捷键执行时触发的话,那以我的认知来看,就需要修改思源的源码才能实现了……

    2 回复
  • 好嘞,谢谢解答哟,目前已经很好用了,很棒

  • 把大佬 < 标记符号 > 中的一个改成了?,然后就不用用》》做标记了,很不错。(我习惯在问题后面打上问号)就很 nice。

  • 可以的,是我之前没有注意到,真的香的一批。

    你将大佬一键制作卡片的代码中的 var re = /(>>|(》》))\s?\u200b?$/;中的 >> 换成?

    然后列表项目的问答题,你只要写问题的时候打了 ?(哈哈问号不就是天然的问答卡的标记符么)

    就可以一键用列表项生成问答卡

    至于列表项中的填空卡是用段落块生成的,也没什么影响。

    总结:太香了

  • 想问请教一下大佬,现在一键移除这么方便,也紧紧挨着一键制卡的。

    如果去点一键制卡的时候不小心点到了一键移除,怎么撤销呢?

    是只能用历史数据回滚么,还是有撤销的快捷键呢?

    如果有撤销的快捷键麻烦大佬告知一下呀,谢谢。

    如果没有,希望下一版的一键移除可以改进。(方式有:增加撤销键 或 增加一键移除的难度,比如多一步确认才能一键移除)

  • zxhd86 1 赞同

    因为我个人并不常用一键移除。事实上,我只有用到的时候才打开代码片段的……

    所以并没有撤销机制,这也并不是使用代码片段能做到的。只能历史数据回滚。

    增加撤销的确定可以考虑,不过不会是近期了。因为打算迁移到社区里的插件系统,打算那时候插件 api 完善了再把两个合并。

    1 回复
  • 好嘞,谢谢,那我暂时先将一键移除的代码片段关掉,用的时候再打开

  • yinyon

    支持!

    学习中!

请输入回帖内容 ...

推荐标签 标签

  • 周末

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

    14 引用 • 297 回帖 • 1 关注
  • GAE

    Google App Engine(GAE)是 Google 管理的数据中心中用于 WEB 应用程序的开发和托管的平台。2008 年 4 月 发布第一个测试版本。目前支持 Python、Java 和 Go 开发部署。全球已有数十万的开发者在其上开发了众多的应用。

    14 引用 • 42 回帖 • 764 关注
  • OkHttp

    OkHttp 是一款 HTTP & HTTP/2 客户端库,专为 Android 和 Java 应用打造。

    16 引用 • 6 回帖 • 62 关注
  • ngrok

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

    7 引用 • 63 回帖 • 624 关注
  • 音乐

    你听到信仰的声音了么?

    60 引用 • 511 回帖 • 1 关注
  • Lute

    Lute 是一款结构化的 Markdown 引擎,支持 Go 和 JavaScript。

    25 引用 • 191 回帖 • 16 关注
  • 服务器

    服务器,也称伺服器,是提供计算服务的设备。由于服务器需要响应服务请求,并进行处理,因此一般来说服务器应具备承担服务并且保障服务的能力。

    125 引用 • 588 回帖
  • 自由行
    10 关注
  • Hibernate

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

    39 引用 • 103 回帖 • 709 关注
  • 服务

    提供一个服务绝不仅仅是简单的把硬件和软件累加在一起,它包括了服务的可靠性、服务的标准化、以及对服务的监控、维护、技术支持等。

    41 引用 • 24 回帖 • 2 关注
  • BAE

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

    19 引用 • 75 回帖 • 641 关注
  • Android

    Android 是一种以 Linux 为基础的开放源码操作系统,主要使用于便携设备。2005 年由 Google 收购注资,并拉拢多家制造商组成开放手机联盟开发改良,逐渐扩展到到平板电脑及其他领域上。

    334 引用 • 323 回帖 • 2 关注
  • InfluxDB

    InfluxDB 是一个开源的没有外部依赖的时间序列数据库。适用于记录度量,事件及实时分析。

    2 引用 • 72 关注
  • Maven

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

    186 引用 • 318 回帖 • 304 关注
  • 资讯

    资讯是用户因为及时地获得它并利用它而能够在相对短的时间内给自己带来价值的信息,资讯有时效性和地域性。

    55 引用 • 85 回帖 • 1 关注
  • 职场

    找到自己的位置,萌新烦恼少。

    127 引用 • 1705 回帖
  • QQ

    1999 年 2 月腾讯正式推出“腾讯 QQ”,在线用户由 1999 年的 2 人(马化腾和张志东)到现在已经发展到上亿用户了,在线人数超过一亿,是目前使用最广泛的聊天软件之一。

    45 引用 • 557 回帖 • 67 关注
  • Netty

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

    49 引用 • 33 回帖 • 21 关注
  • Git

    Git 是 Linux Torvalds 为了帮助管理 Linux 内核开发而开发的一个开放源码的版本控制软件。

    209 引用 • 358 回帖 • 2 关注
  • 心情

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

    59 引用 • 369 回帖
  • 知乎

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

    10 引用 • 66 回帖
  • SendCloud

    SendCloud 由搜狐武汉研发中心孵化的项目,是致力于为开发者提供高质量的触发邮件服务的云端邮件发送平台,为开发者提供便利的 API 接口来调用服务,让邮件准确迅速到达用户收件箱并获得强大的追踪数据。

    2 引用 • 8 回帖 • 483 关注
  • SQLite

    SQLite 是一个进程内的库,实现了自给自足的、无服务器的、零配置的、事务性的 SQL 数据库引擎。SQLite 是全世界使用最为广泛的数据库引擎。

    5 引用 • 7 回帖
  • V2Ray
    1 引用 • 15 回帖 • 1 关注
  • GraphQL

    GraphQL 是一个用于 API 的查询语言,是一个使用基于类型系统来执行查询的服务端运行时(类型系统由你的数据定义)。GraphQL 并没有和任何特定数据库或者存储引擎绑定,而是依靠你现有的代码和数据支撑。

    4 引用 • 3 回帖 • 9 关注
  • 深度学习

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

    53 引用 • 40 回帖 • 1 关注
  • Hadoop

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

    86 引用 • 122 回帖 • 625 关注