登录注册

思源笔记丨写了一个插件，用块引实现脚注和备注

Github：Achuan-2/siyuan-plugin-blockref-footnote: 用块引实现脚注备注

✨ 功能

使用思源的块引实现脚注和备注功能

使用 Tsundoku 主题演示，对嵌套引述块样式进行了优化

📝 使用介绍

插件需要思源笔记版本 >3.1.12

本插件支持高度自定义化，支持的设置如下：

脚注存放位置：可以设置存放在当前文档或者指定文档，默认为 当前文档
选中文本的样式：可以为选中文本添加加粗、高亮、斜体、下划线样式，默认：无样式
插入脚注的顺序：顺序或者倒序，默认：顺序
脚注标题：设置存放脚注的标题名，默认：脚注
脚注块引锚文本：设置脚注引用的锚文本，默认：注
脚注内容模板：设置脚注的模板，推荐使用引述块或超级块组合，保证脚注内容属于同一个块。 ${selection} 表示选中文本的内容，${content} 代表脚注内容占位
- 嵌套引述块模板
```
>> ${selection}
>> 
> 💡${content}
```
- 竖向超级块组合模板
```
{{{row
> ${selection}

${content}
}}}
```

支持同时删除脚注引用和脚注内容，可以在脚注引用右键菜单，点击【插件-删除脚注】

🙏 致谢

https://github.com/zxhd863943427/siyuan-plugin-memo：基于该插件进行改进，添加了更多功能和配置项
https://github.com/siyuan-note/plugin-sample-vite-svelte：使用的插件模板，大幅提高开发效率

❤️ 用爱发电

穷苦研究生在读ing，如果喜欢我的插件，欢迎给 GitHub 仓库点 star 和捐赠，这会激励我继续完善此插件和开发新插件。

思源笔记

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

融合块、大纲和双向链接，重构你的思维。
23000 引用 • 92500 回帖 • 2 关注

2 操作

Achuan-2 在 2024-11-20 12:33:30 更新了该帖

Achuan-2 在 2024-11-19 12:49:35 更新了该帖

Achuan-2 1 个月前上海位置

14 感谢

10 关注

10 收藏

1 赞同

2 操作

95 回帖

985 686 1 252 2 1 43

欢迎来到这里！

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

注册关于

请输入回帖内容 ...

Achuan-2 • 1 个月前
订阅者先知作者

要数字编号，暂时可以通过对脚注内容块进行命名，把脚注引用变为动态锚文本来实现

之后我会尝试下让插件有一键转换数字脚注的功能
hqweay • 1 个月前
订阅者付费者

赞，看效果很不错

Achuan-2 • 1 个月前

订阅者先知作者

把有脚注的文档导出为模板（即 kramdown 格式），写了个 js 可以把这个模板内容变为脚注数字编号，不过目前由于这个原因，/api/block/getBlockKramdown 支持导出 span 元素样式 · Issue #13183 · siyuan-note/siyuan 还得之后再集成到插件功能里去

转化前

转化后

function processkramdown(kramdownText) {
    // 使用正则表达式匹配所有的脚注块引，不考虑data-subtype和span的文本内容
    const footnoteRegex = /<span data-type="block-ref sup"[^>]*data-id="([^"]+)"[^>]*>[^<]*<\/span>{: style="--memo: 1"}/g;
    let match;
    const ids = [];
  
    // 提取所有的data-id并记录第一次出现的顺序
    while ((match = footnoteRegex.exec(kramdownText)) !== null) {
        const id = match[1];
        if (!ids.includes(id)) {
            ids.push(id);
        }
    }

    // 更新脚注块引中的内容为对应的序号，并修改data-subtype为"d"
    let processedkramdown = kramdownText.replace(footnoteRegex, (match, id) => {
        const index = ids.indexOf(id) + 1; // 获取序号
        return `<span data-type="block-ref sup" data-subtype="d" data-id="${id}">${index}</span>{: style="--memo: 1"}`;
    });

    // 更新被引用的块的命名
    ids.forEach((id, index) => {
        const blockRegex = new RegExp(`({: id="${id}"[^}]*)}`, 'g');
        processedkramdown = processedkramdown.replace(blockRegex, `$1 name="${index + 1}"}`);
    });

    return processedkramdown;
}

// 导出为模板的内容
const kramdownText = `
...
`;

// 处理Markdown文本
const processedkramdown = processkramdown(kramdownText);
console.log(processedkramdown);

syuer9528 • 1 个月前
付费者

原来那个备注增强不能用了不知道为什么可能是更新了之后 API 有变动吧。
syuer9528 • 1 个月前
付费者

安装后工具条上没有按钮，同时集市界面中也没有设置按钮

主题：ASRI，默认均如此。

1 回复
Achuan-2 • 1 个月前 • 1 • 1 赞同
订阅者先知作者

要用思源笔记 3.1.12dev 版本

插件添加工具栏的 api 有变动，我用了最新的 api，不适配旧版本

1 回复

1 操作
Achuan-2 在 2024-11-18 22:17:29 更新了该回帖
syuer9528 • 1 个月前
付费者

原来如此，感谢！

1 回复
Achuan-2 • 1 个月前
订阅者先知作者

你试了 dev 版本了吗，我自己在本地测试应该是没有什么问题的

很奇怪我明明设置了最低版本是 3.1.12，但是你用低版本还能开启插件

1 回复
ACai • 1 个月前
订阅者付费者支持者

太好了，脚注也有基于思源的快捷解决方案了
ACai • 1 个月前
订阅者付费者支持者

还没用上 dev，但看效果非常牛
Achuan-2 • 1 个月前
订阅者先知作者

@participants

支持对同一个文本进行多次备注了
YRJ0422 • 1 个月前
付费者

增强备注的 plus 版本，太强了

1 回复
Achuan-2 • 1 个月前 • 1 赞同
订阅者先知作者

站在大佬肩上更进一步哈哈，而且备注增强主要是备注，我这个更倾向于脚注，场景还是不一样的
syuer9528 • 1 个月前
付费者

由于我用的 MS STORE 里的版本所以暂时还未。是不是快要升级 3.1.12 了……❤️

哈哈刚看到已经有 3.1.12 了！

明天 MS STORE 的应该也能用了！

1 操作
syuer9528 在 2024-11-19 22:55:50 更新了该回帖
stevehfut • 1 个月前

docker 端好像无法弹出那个设置脚注后的窗口，由于环境不干净（docker 端不方便新建工作空间），可能是插件和其他代码有冲突。

1 回复
Achuan-2 • 1 个月前
订阅者先知作者

设置界面我是用的插件模板，应该没问题才对

你可以看看有没有报错

2 回复
YRJ0422 • 1 个月前
付费者

川佬把添加直角引用那个插件也上架吧，感觉稍微修一下就行了

1 回复
Achuan-2 • 1 个月前 • 1
订阅者先知作者

周末上架吧，搞一个配置项，可以设置是添加直角引号还是双引号
stevehfut • 1 个月前

施工方撒.mp4
不是插件的设置界面，是添加脚注后的界面弹窗（可能我之前表述不准确），所以简单录个视频。

2 回复
Achuan-2 • 1 个月前
订阅者先知作者

不知道其他人有没有这个问题，浮窗我也是用的官方 api，不应该有问题才对

1 回复
Achuan-2 • 1 个月前
订阅者先知作者
另外学习了下给超级块加边框的操作，改下默认模板
```
{{{row

> ${selection}



${content}

}}}

{: style="border: 2px dashed var(--b3-theme-on-background);"}
```
1 回复

1 操作
Achuan-2 在 2024-11-20 12:26:59 更新了该回帖
syuer9528 • 1 个月前 • 1 赞同
付费者

好吧直接升级到 3.1.13 了哈哈。

这个插件再有两个功能就基本完备了

一是自动编号，脚注应该是有序号的，甚至可以最后把所有的脚注包裹到一个有序列表中，不过原文处的上角标应该也是自动更新编号的，应该有个全局变量来维护这个编号列表值。

二是指定文档为当前文档的子文档，文档名是：当前文档名 + 自定义后缀，例如{{filename}}-"脚注"

这两个功能之后这个插件就算大成了；）

1 回复
syuer9528 • 1 个月前 • 1 赞同
付费者

超级块的边框建议不要管。

一般用思源的话，超级块的样式要么由主题控制，要么由用户写的 CSS 来处理。

由插件处理是不合适的。

1 回复
Achuan-2 • 1 个月前
订阅者先知作者

只是用模板生成样式，不需要可以自己删除 kramdown 语法
Achuan-2 • 1 个月前
订阅者先知作者

周末的时候我可以尝试下自动编号，编号没有什么问题，难的是删除后更新编号

我很早之前有试过把脚注放有序列表，性能很不好，插入不会及时更新，不知道现在怎样，列表编辑不方便，而且列表块容易误操作而失效，不考虑这种方案
stevehfut • 1 个月前

可能应该是我环境中有其他插件导致的
syuer9528 • 1 个月前
付费者

叠甲：以下仅作为备注相关功能设计的讨论，非 feature request。

点击“备注”按钮后，自动指定文档名这个功能要考虑的情况太多了，我目前想到的一些情况，想想都头大哈哈：

脚注、备注、读后感（这个相当于一种需要区别对待的特殊引用，和一般的脚注、备注有很本质的区别），不应被它的表现形式也是“引用”（或链接）所迷惑。

当指定文档时：指定到哪个笔记本？如果要手动了怎么办？有的自动有的手动怎么办？那么就是不是需要在文档属性中指定一个自定义字段用于：处理脚注的一些细节、用于星图过滤……如果原文档中已经有了备注怎么办？需要不需要把已有的移到指定的文档中？怎么移动？

如果是固定的一个文档，为什么要由它来统一管理所有的备注？

所以是不是要指定的其实是一个笔记本？

备注是不是可以涵盖浮评（COMMENT）功能？要不要显示回复时间？要不要用递归的大纲呈现回复关系（类似“回复盖楼”功能）？（这个是不是属于协作功能方面的设计了……目前设计这个笔记软件并不多）

然后是细节：

原文中的锚是不是应该是被引用文本？而不是那个角标？或者两者是可选？

然后就是原文和备注之间应该是“链接”，然后备注到原文也是一个链接。其实就是手动建立非“引用”的两个链接，两个对接的锚。相当于手动添加两个链接，一个是原文指向备注，另一个是备注指向原文。

仅作技术层面的交流探讨，感谢楼主辛勤制作的插件。

2 操作
syuer9528 在 2024-11-20 14:39:32 更新了该回帖

syuer9528 在 2024-11-20 14:39:03 更新了该回帖
Tisamn • 1 个月前 • 1 赞同 • 1 评论
付费者

川佬，脚注可以选择设置为链接吗？块引有时候会污染反链

3 回复

喜欢超链接功能,谢谢川佬,块引基本不用.

cxg318 • 4 周前
syuer9528 • 1 个月前
付费者

对！我也刚想说这个问题！！！
Achuan-2 • 1 个月前
订阅者先知作者

可以是可以，但是用链接的话，就会丢失脚注内容与脚注块引的双向链接功能了，以及导出到外部，不支持思源本身自带的导出块引为脚注功能了

1 回复
Tisamn • 1 个月前
付费者

川佬，如果将脚注存放在当前文档底部，导出时无需再选择“将块引导出为脚注”的功能，否则会出现两个脚注，如下图所示：

在这个场景下我认为“链接型脚注”更合适一点（ps：唯一缺憾就是无法使用 pdf 的跳转功能）。

所以，如果需要将文档导出为 pdf，这么选择更为合适：块引型脚注 + 将脚注存放在指定文档；如果无需导出 pdf 且将脚注置于文档底部，使用“链接型脚注”可以有效避免反链的重复~

以上仅仅是个人观点，感谢川佬搞了一个这么 nice 的插件！
muhaha • 1 个月前
订阅者付费者

赞，感谢开发插件，笔记用法更加灵活了。

已充电小小支持一下。

1 回复
Achuan-2 • 1 个月前
订阅者先知作者

感谢支持 ❤️
Achuan-2 • 1 个月前 • 1 • 1 赞同
订阅者先知作者
@participants

插件更新 v1.0.5 / 2024.11.20
- ✨ 支持设置脚注块引为块超链接
- ✨ 支持设置脚注放在子文档
1 回复
mozhu • 1 个月前
订阅者付费者支持者捐赠者

屌
Achuan-2 • 1 个月前 • 2 • 1 赞同
订阅者先知作者
@participants

v1.0.6 / 2024.11.20
- ✨ 脚注内容模板新增 ${refID}，代表选中文本所在的块 ID，现在可以通过模板插入选中文本所在的块链接了，方便在脚注内容里直接跳转到原来的块
  {{{row > ${selection} [[↩️]](siyuan://blocks/${refID}) ${content} }}} {: style="border: 2px dashed var(--b3-border-color);"}
1 操作
Achuan-2 在 2024-11-20 22:36:52 更新了该回帖
zxhd86 • 1 个月前 • 1
订阅者先知

又一个脚注插件，加油！

1 回复
Achuan-2 • 1 个月前
订阅者先知作者

主要还是抄大佬的插件哈哈哈

1 回复
Achuan-2 • 1 个月前 • 1
订阅者先知作者

对我来说，在当前页面进行脚注块引其实还能从反链面板快速找到所有脚注

1 回复
zxhd86 • 1 个月前 • 1 评论
订阅者先知

不过我现在失去改进这个插件的兴趣了，因为 vv 搓了个大活，enhance 插件里的划词评论……不得不说在这件事上已经达到一个极致了。

下面是视频链接：

https://simplest-frontend.feishu.cn/minutes/obcnjq7455z25m2nnym3m4fs

两个插件各有个的特点吧

stevehfut • 1 个月前
dsuper • 4 周前
付费者

很高级，关注一波！
syuer9528 • 4 周前
付费者

我的天啊！！！楼主这个更新速度！！！！

给大佬点一万个赞！
syuer9528 • 4 周前
付费者

给大佬点赞！

小细节方面的讨论：

一是标注的对象的表现现在和原版插件的表现是不一样的。原版的锚文本是被划线的文字；这个感觉应该好一些或者可以做成可选项。两者各有优缺点。前者优点是一目了然，也更直观符合直觉；后者是可以快速变换划线文本的样式（指快速在加粗、下划线等之间选择而不用去修改锚文本的 CSS）。

仅做讨论。

1 回复
Achuan-2 • 4 周前 • 1 • 1 赞同
订阅者先知作者

第二点已经做了，见 v1.0.6 更新，用 refID 变量结合思源块超链接放到模板里，就可以在生成的脚注内容绑定原始的块

第一点暂时不考虑，因为初衷就是做脚注，不是做划词评论插件，用块引当划词评论会让划线的文字格式消掉（思源的块引不支持富文本），也不方便多次注释，我是不喜欢的，另外现在的脚注块引也能和常规的块引区别开。思源增强插件也做了划词评论，用反链来做，可以保留划线文字格式（虽然要付费），就暂时不考虑做这个了

1 回复
syuer9528 • 4 周前
付费者

哈哈刚注意到了那个功能已经完成了，震惊之余，刚把#2 的讨论给删除了！

在关于#1 的讨论和思考后，现在感觉的确目前的实现更加合理。

1 操作
syuer9528 在 2024-11-21 09:15:29 更新了该回帖
Tisamn • 4 周前
付费者

可能应用场景不一样~我比较懒，基本上不会将反链内容整理到文章内，把底部反链当做正文的一部分 😂 川佬更新也太迅速了！！！

1 回复
Achuan-2 • 4 周前 • 1
订阅者先知作者

gpt 帮我写就是快

1 回复
syuer9528 • 4 周前
付费者

虚心求教！

请问是把思源 API 文档喂给 GPT 吗？还是 COPILOT 写 JS/TS？

1 回复
Achuan-2 • 4 周前 • 1 • 1 赞同
订阅者先知作者

vscode copilot 直接问，直接写

因为可以生成工作区索引，加上 claude 3.5 本身就有一部分思源 api 的知识

1 回复

1 操作
Achuan-2 在 2024-11-21 11:09:41 更新了该回帖
syuer9528 • 4 周前
付费者

感谢大佬指点！

请输入回帖内容 ...

1 2

Achuan-2

给时间以生命而不是给生命以时间，如果你喜欢我的分享，欢迎给我买杯咖啡 https://www.yuque.com/achuan-2 上海

回帖

948

帖子

241

积分

1598

思源笔记丨写了一个插件，用块引实现脚注和备注

✨ 功能

📝 使用介绍

🙏 致谢

❤️ 用爱发电

相关帖子

[js][css] 高亮提示目前正在编辑的块、高亮提示超级块、高亮提示鼠标悬浮块

我想咨询一下，思源笔记里面这种分享到社区点错能否撤回？如果已经分享成功了，为什么在社区看不到相关内容？？？

文章尾部动态加载卡退

导入插件，导入 epub 没反应，急急急，求助

思源无法取消默认快捷键

希望文档的图标能支持上传

s3 云同步只有手机显示网络超时，平板和电脑都正常

欢迎来到这里！

思源笔记丨写了一个插件，用块引实现脚注和备注

✨ 功能

📝 使用介绍

🙏 致谢

❤️ 用爱发电

相关帖子

[js][css] 高亮提示目前正在编辑的块、高亮提示超级块、高亮提示鼠标悬浮块

我想咨询一下，思源笔记里面这种分享到社区点错能否撤回？ 如果已经分享成功了，为什么在社区看不到相关内容？？？

文章尾部动态加载卡退

导入插件，导入 epub 没反应，急急急，求助

思源无法取消默认快捷键

希望文档的图标能支持上传

s3 云同步只有手机显示网络超时，平板和电脑都正常

欢迎来到这里！

我想咨询一下，思源笔记里面这种分享到社区点错能否撤回？如果已经分享成功了，为什么在社区看不到相关内容？？？