【分享】使用当前文档的二级标题快速制作闪卡

简介&&演示

基本功能:使用当前打开的这个文档的二级标题快速制作卡片;

视频演示:

1、代码片段中设置好卡包的 ID

工作空间/data/storage/riff 文件夹下,找到卡包对应的文件(我这个空间只有一个默认卡包,卡包名就是 ID)

卡包文件.png

然后在代码片段中设置卡包的 ID,就是 deckID 的值;

指定卡包 ID.png

2、添加代码片段

设置——外观——代码片段(设置)——JS

添加并开启代码片段:

// 请求函数
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() {
  // 获取需要被制成卡片的块的ID
  const currentPage = document.querySelector(
    ".fn__flex-1.protyle:not(.fn__none)"
  );
  const subTitles = currentPage?.getElementsByClassName("h2");
  if (subTitles && subTitles.length > 0) {
    let arr = [];
    Array.from(subTitles).forEach((item) => {
      let id = item.getAttribute("data-node-id");
      if (id) {
        arr.push(id);
      }
    });

    // 把二级标题全部制成卡片
    let body = {
      deckID: "20230119154536-93nudhn",
      blockIDs: arr,
    };
    let res = await request("/api/riff/addRiffCards", body);
    if (res.code === 0) {
      showMessage(`当前卡包的总卡片数:${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
);

3、开始制卡

  • 打开一个文档,向下滚动到底部以加载文档的所有内容(如果是长文档,最好先点击文档右上角的三个点进入菜单,然后点击 保持已加载内容 来确保文档的所有内容都被加载)
  • 对二级标题下的内容进行(Alt+t)标记挖空效果,或者直接折叠二级标题作为卡片;
  • 点击右上角刚刚添加的卡片图标
  • 添加成功后,会提示当前卡包的总卡片数
  • 开始使用卡片进行复习
2 操作
BryceAndJuly 在 2023-01-29 18:13:53 更新了该帖
BryceAndJuly 在 2023-01-19 22:26:56 更新了该帖

相关帖子

欢迎来到这里!

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

注册 关于
请输入回帖内容 ...
  • zxhd86
    订阅者

    emmm,这是把二级标题转化为超级块了吗?但是好像也不是,超级块是默认隐藏第一行以外内容的。

    是怎么实现使用非超级块添加多个块的卡片?

  • zxhd86
    订阅者

    原来如此,目前标题块制卡会直接把下面的内容也显示出来。这是一个 bug 吗?

    @88250

    1 回复
  • ilovesiyuan 1 评论

    其他级别的标题也可以制卡吗?如果可以的话那就可以拿来渐进阅读了trollface

    应该一个道理,改改就行。
    BryceAndJuly 1 赞同
  • 88250
    订阅者

    标题块和其他块一样,只有超级块不显示。

  • Alex88

    试了下很好用,这下可以批量制卡了,感谢 😄 ~

  • ciwoyipang
    捐赠者 支持者 订阅者

    大佬能看看你的自定义顶栏为啥可以随主题变化的?是因为直接加代码片段吗?

    1 回复
  • BryceAndJuly
    订阅者 作者

    你是指顶栏图标的顺序吗?排列顺序可以直接在主题里指定的,它那个 toolbar 是 flex 定位的,在 theme.css 里指定图标的 order 的值就可以了。比如:

    /* 顶栏——搜索图标 */
    div#barSearch {
        order: -4;
    }
    

    其他是一些自己添上的图标,是一些小功能,像那个日历、浏览历史、复制当前时间、待办提醒之类的,可以把对应功能的挂件放到相应主题的文件夹里,然后在 theme.js 里指定插入的图标并设置好挂件的引用地址就可以了。我有的主题只添加其中部分功能,所以切换主题之后,顶栏看起来有点不一样。这个看需要吧。

    如果是快速制作闪卡的那种,直接在代码片段里设置就好了,这样无论切换到哪个主题,都能用。

    1 回复
  • ciwoyipang
    捐赠者 支持者 订阅者

    感谢答复,主要看今天大佬反馈了一个行级备注的 bug ,顶栏也差不多但是样式是 logseq 那样的

    1 回复
  • BryceAndJuly
    订阅者 作者

    哈哈,那个主题就是最近照着 Logseq 官网的配色改的,不得不说那个主页的配色看起来还蛮好看的。直接把默认的 midnight 主题复制一份,改个名字,然后按自己喜好调一下就好。

    1 回复
  • ciwoyipang
    捐赠者 支持者 订阅者

    新版的 logseq 官网配色确实还行,还挺现代化的,思源缺这个

请输入回帖内容 ...