The Reftagger library allows you to convert bible references on your Discourse forum into links with a hover-preview.
By request of @outofthebox we made a theme component based on this code.
I’ve added a setting that allows you to select the translation you want to use, and the component extends the content security policy to allow for the reftagger library to be included.
Repository here.
@RGJ, our community loves this feature. Thank you for developing in a secure and customizable manner. I appreciate your generosity in sharing this work back to the Discourse community.
We’ve been using that for the last 18 months or so, and it’s worked like a charm. Happy to see it improved and made more easily available!
Wow, that’s super cool.
I would love to see a similar component in which custom keywords and previews can be defined.
That would be super useful to create a glossary for example
There is the auto abbrify words theme component which does such a thing.
I really appreciate you and everyone who contributed to the original conversation on Meta about how to make this feature work!
Hello everyone, Reftagger was working swimmingly for a few months, and then it just stopped. It will still automatically generate an external link for the book/chapter/verse format, but it will not load the hover preview.
It appears to be up to date too. Any ideas?
What Discourse version are you running?
How can I find this info?
It should be somewhere in the admin dashboard at /admin
Seems to be working fine on Discourse 2.7.7 (at least in Safari) for me.
It’s working again now.
Reftagger apparently switched to a different CDN (reftagger.bibliacdn.com) which had to be whitelisted in the content security policy. I have added it and pushed a new version of the theme component. All you need to do is update the component.
There it is, thank you sir 
理查德，你好：
我在翻看一个旧帖子。我安装了这个主题组件，出现了两个问题。
首先是组件需要更新的消息。
[管理员通知] 主题 ‘Reftagger’ 包含需要更新的代码。（ID：discourse.script-tag-discourse-plugin）（[了解更多](Modernizing inline script tags for templates & JS API)）
第二个问题可能与第一个组件需要更新的通知有关。引用没有被标记，页面在浏览器标签中显示加载圆圈并卡住。
是否可以更新此组件？
我用 ChatGPT 在这方面取得了一些进展，并为 Logos RefTagger 和 Blue Letter Bible 制作了可用的 reftaggers。
如果可以将它们捆绑成一个主题组件供社区使用，那就太好了，如果不行，主题组件只是为了方便。您只需要获取您喜欢的任何代码，然后将其放入新主题组件的 JS 选项卡中。您需要删除 Discourse 中 JS 选项卡中的默认代码。
如果有人有改进意见，欢迎提出。我的技能仅限于指导大型语言模型。
使用 Logos RefTagger：
import { apiInitializer } from "discourse/lib/api";
import loadScript from "discourse/lib/load-script";
export default apiInitializer("0.1", (api) => {
// 1. 在加载脚本之前，在 window 上定义 RefTagger 设置
window.refTagger = {
settings: {
bibleVersion: "ESV", // 例如：默认圣经版本
tagChapters: true, // 也标记章节引用
convertHyperlinks: false, // 不重新标记现有链接
roundCorners: true,
socialSharing: [],
},
};
// 2. 挂钩到 Discourse 帖子渲染：
api.decorateCooked((element) => {
// 加载外部 RefTagger 脚本（如果尚未加载）
loadScript("https://api.reftagger.com/v2/RefTagger.js").then(() => {
// 在新内容元素上运行标记
window.refTagger.tag(element);
});
});
});
使用 BLB ScriptTagger：
import { apiInitializer } from "discourse/lib/api";
import loadScript from "discourse/lib/load-script";
export default apiInitializer("0.1", (api) => {
// 可选地在加载之前设置 BLB ScriptTagger 设置（显示默认值）
window.BLB ||= {}; // 确保全局 BLB 对象存在
window.BLB.Tagger ||= {};
window.BLB.Tagger.Translation = "NKJV"; // 默认翻译版本
window.BLB.Tagger.HyperLinks = "all"; // 标记甚至已链接的引用
window.BLB.Tagger.TargetNewWindow = true; // 链接在新标签页中打开
// ... （根据需要设置其他设置，如 DarkTheme 等）
api.decorateCooked((elem) => {
loadScript("https://www.blueletterbible.org/assets/scripts/blbToolTip/BLB_ScriptTagger-min.js")
.then(() => {
if (window.BLB && window.BLB.Tagger) {
window.BLB.Tagger.pageInit(); // 重新扫描新内容中的经文引用
}
});
});
});
这现在已经解决了。
即使在解决上述问题之前，我也无法重现这一点——那仅仅是一个警告，而不是一个错误。
非常感谢这次更新！