Obsidian——用quickadd 制作一份注音版的诗词

2026-03-05 45点热度 0人点赞 0条评论

如何在 QuickAdd 中配置？

创建文件：在你的 Obsidian 脚本文件夹里新建 pinyinLocalHTML.js，粘贴下面的代码。

module.exports = async (params) => {
    const { quickAddApi, app } = params;

    // --- 1. 核心：确保 pinyinPro 全局可用 ---
    if (typeof window.pinyinPro === 'undefined') {
        new Notice("正在加载本地注音引擎 (需联网一次)...");
        try {
            const response = await window.requestUrl("https://unpkg.com/pinyin-pro/dist/index.js");
            const scriptContent = response.text;
            
            // 使用 Function 构造器强制将库注入全局作用域
            const loader = new Function(scriptContent);
            loader(); 
            
            // 如果 unpkg 的 umd 格式没有自动挂载，手动从模块中获取
            if (typeof window.pinyinPro === 'undefined') {
                 // 兼容性处理：尝试从导出对象获取
                 window.pinyinPro = window.pinyinPro || (typeof pinyinPro !== 'undefined' ? pinyinPro : null);
            }

            if (!window.pinyinPro) throw new Error("库加载失败");
            new Notice("✅ 注音引擎已准备就绪");
        } catch (e) {
            new Notice("❌ 引擎加载失败，请检查网络连接");
            console.error(e);
            return;
        }
    }

    // --- 2. 获取编辑区内容 ---
    const activeEditor = app.workspace.activeEditor?.editor;
    if (!activeEditor) return;

    const selection = activeEditor.getSelection();
    let text = selection || await quickAddApi.inputPrompt("输入需要注音的汉字");
    if (!text) return;

    // --- 3. 执行本地转换 ---
    try {
        const pinyin = window.pinyinPro;
        // 使用 html 方法直接生成标准的 <ruby> 标签
        const htmlResult = pinyin.html(text, {
            nonZh: 'consecutive', // 连续非汉字不拆分
            v: true,              // 使用 v 代替 ü
        });

        // --- 4. 替换文本 ---
        activeEditor.replaceSelection(htmlResult);
        new Notice("✅ 注音完成");
    } catch (err) {
        console.error("转换出错:", err);
        new Notice("❌ 转换失败，请查看控制台日志");
    }
};

管理宏：打开 QuickAdd 设置 -> Manage Macros -> 新建一个宏叫 HTML注音。
添加脚本：在宏里点击 User Scripts，选择刚才的 pinyinLocalHTML.js。
绑定命令：在 QuickAdd 主界面，添加一个 Macro 类型的 Choice，取名“智能注音”，绑定刚才的宏，并点击旁边的小闪电。
使用方式：运行命令：按下 Ctrl+P 搜 HTML注音 并运行。

[!note] 可以正常生成注音版的文字，生成的注音版太冗长，再修改一下代码。

module.exports = async (params) => {
    const { quickAddApi, app } = params;
    const p = window.pinyinPro;

    if (!p) {
        new Notice("❌ 请先运行之前的脚本加载引擎");
        return;
    }

    const activeEditor = app.workspace.activeEditor?.editor;
    if (!activeEditor) return;

    const selection = activeEditor.getSelection();
    let text = selection || await quickAddApi.inputPrompt("输入需要注音的汉字");
    if (!text) return;

    try {
        // 1. 获取带声调的拼音数组
        // type: 'array' 返回每个汉字的拼音
        const pyArray = p.pinyin(text, { type: 'array' });
        const chars = text.split('');
        
        let htmlResult = "";

        // 2. 遍历合并：只有汉字才包裹 ruby
        for (let i = 0; i < chars.length; i++) {
            const char = chars[i];
            const py = pyArray[i];

            if (/[\u4e00-\u9fa5]/.test(char)) {
                // 精简：去掉多余空格，直接拼接
                htmlResult += `<ruby>${char}<rt>${py}</rt></ruby>`;
            } else {
                // 非汉字（标点、空格、换行）原样保留，不加标签
                htmlResult += char;
            }
        }

        // 3. 替换选中内容
        activeEditor.replaceSelection(htmlResult);
        new Notice("✅ 精简版注音完成");
    } catch (err) {
        console.error("PinyinPro Error:", err);
        new Notice("❌ 转换出错，请检查控制台");
    }
};

[!note] 成功简化了生成的代码，将生成的 HTML 自动包裹在一个 Obsidian Callout (折叠框) 里。

再修改下代码

module.exports = async (params) => {
    const { quickAddApi, app } = params;
    const p = window.pinyinPro;

    if (!p) {
        new Notice("❌ 请先运行之前的脚本加载引擎");
        return;
    }

    const activeEditor = app.workspace.activeEditor?.editor;
    if (!activeEditor) return;

    const selection = activeEditor.getSelection();
    let text = selection || await quickAddApi.inputPrompt("输入需要注音的汉字");
    if (!text) return;

    try {
        // 1. 获取拼音数组
        const pyArray = p.pinyin(text, { type: 'array' });
        const chars = text.split('');
        
        let htmlResult = "";

        // 2. 构建精简 HTML
        for (let i = 0; i < chars.length; i++) {
            const char = chars[i];
            const py = pyArray[i];

            if (/[\u4e00-\u9fa5]/.test(char)) {
                htmlResult += `<ruby>${char}<rt>${py}</rt></ruby>`;
            } else if (char === '\n') {
                htmlResult += '<br>'; // 换行符转为 HTML 换行
            } else {
                htmlResult += char;
            }
        }

        // 3. 将 HTML 包裹在 Obsidian Callout 中
        // [!abstract]- 这里的减号表示默认折叠，加号表示默认展开
        const title = text.substring(0, 10).replace(/\n/g, " ") + (text.length > 10 ? "..." : "");
        const calloutResult = `> [!abstract]- 注音版：${title}\n> ${htmlResult}`;

        // 4. 替换选中内容
        activeEditor.replaceSelection(calloutResult);
        new Notice("✅ 已生成折叠注音框");
    } catch (err) {
        console.error("Pinyin Callout Error:", err);
        new Notice("❌ 转换出错");
    }
};

🎨 配合 CSS 让效果更美

由于 HTML 的 <ruby> 标签在不同主题下高度不一，建议你在 设置 -> 外观 -> CSS 代码片段 中添加以下代码，让拼音对齐更完美：

CSS

/* 优化拼音显示 */
ruby {
    ruby-align: center;
}

rt {
    font-size: 0.5em; /* 调整拼音大小 */
    color: #888;     /* 拼音颜色 */
    user-select: none; /* 复制时不会误选拼音 */
}

最终效果图:

自动折叠状态：