使用 Obsidian 的过程中发现一些痛点：

1> 使用插件 annotator 时，引用的文本内不能添加链接

如果强行将关键字改成链接，就会出现格式错乱

我想要的效果如下：引用的文本能够给添加链接

2> 使用简悦剪藏文章时 ，文章内的图片是外链。如果图片是外链，那么如果外链链接失效了就找不回图片了

我想要的效果如下：将外链转为图床的链接

3> Media Extended 虽然能使用链接跳转到视频指定时间点，但是手写链接太麻烦了

我想要的效果：自动生成一个视频的全部字幕和引用，且每句字幕和一点时间点引用呈一一对应的关系

❗❗❗为了节省大家的时间，我在文末写了我常用的 Obsidian 插件的下载链接，这些插件中有部分插件的源码都是被我修改过的，有两个需要注意的事项：

• 被我修改过源码的插件不全是可以直接用的，比如发送图片到 Picgo 时的 url 要换成你在 Picgo 内设置的 url
• 修改过源码的插件不要升级，如果升级了会导致修改失效

❗❗❗再附加一个注意事项：

• 入门简悦的时候如果运气不好（比如我），会遇到很多问题，如果看了入门文章还是解决不了就到 https://github.com/Kenshin/simpread/issues 提交自己的问题，简悦的开发者回复消息还是挺快的（顺便夸夸开发者很积极，这很难得）

使用工具

Annotator：是一个用于给 pdf 做标注和跳转的开源插件

Linter：是一个用于格式化笔记的开源插件

配置 Linter

目标：修改其源代码，添加将 Annotator 样式修改为 📌

添加规则分类：

添加具体的规则处理：

代码如下：

new Rule('Reform Annotation', '修改 Annotation 链接的样式', RuleType.MINE, (text, options = {}) => {  
    const searchRegex = new RegExp(`${options['Find']}`, "gm");  
    text = text.replace(searchRegex, `${options['Replace']}`);  
    return text;  
},[  
], [  
    new TextOption('Find', 'regular expression for finding', "\\[\\[([^@]+)@annote#([^|]+)\\|([^📌\\]]+)\\]\\]"),  
    new TextOption('Replace', 'result of replacement', '[[$1@annote#$2|📌]]$3')  
])

保存后退出 ide，并重启 Obsidian，打开 Linter 的设置，并开启新功能的开关

测试一下：
（测试前）

（测试后）

外链图片转图床

使用工具

简悦（版本为 2.2）：这是一个可以把网页文章保存为本地 markdown 格式笔记的工具

配置 Linter

修改 Linter 源代码，添加可以将图片外链转换成自己图床的链接
ps. 我使用的图床是 github，并且使用 PicGo 快速上传图片到图床。

首先引入 http、https、fs 库

var fs = require('fs');  
var http = require('http');  
var https = require('https');

添加自定义的方法

ps. 我的前端能力很菜很菜，献丑了。大佬们可以自己写这部分的功能。这段代码的逻辑就是先在本地新建一个文件夹 temp_pic_folder，然后通过正则表达式匹配到图片链接，然后通过这些链接把图片一个一个下载到文件夹 temp_pic_folder 中，然后再把下载下来的图片一个一个上传到用户设置的图床中，并修改文章中这些图片链接为最终图床上的图片链接，最后再把文件夹 temp_pic_folder 及其内部的图片都从本地删了。
注意！我这段代码只能匹配末尾有图片文件后缀名的链接，如 https://xxxx/xxx/.../xxx.jpg，如果是 https://xxxx/xxx/.../xxx 就不能识别，别问我为什么不处理这种情况，懒且够用

/**  
 * 将外链图片链接转换为自己的图床链接  
 *  
 * @param text 文档的文本  
 * @param options 插件在 setting tab 的设置  
 */  
async changeOuterLink (text, options = {}, app) {  
    // 获取当前编辑文档的所在文件系统的绝对地址  
    const tempFolder = "temp_pic_folder";  
    const anchorFile = "anchor_file";  
    const parentPath = app.vault.getAbstractFileByPath(app.workspace.getActiveFile().path).parent.path;  
    // 以 \ 为分隔符的就当作是 path    const tempFolderRelativePath = parentPath + "\\" + tempFolder;  
    // 以 / 为分隔符的就当作是 url    const tempFolderRelativeUrl = parentPath + "/" + tempFolder;  
    const anchorFileRelativeUrl = tempFolderRelativeUrl + "/" + anchorFile;  
    const basePath = app.vault.adapter.getBasePath();  
    const absolutePath = basePath + "\\" + tempFolderRelativePath;  

    // 匹配图片网址的正则表达式（已测网站图床包括：知乎、CSDN等）  
    const searchRegex = new RegExp(`${options['Image regex']}`, "gm");  

    // 自己图床的 url    let myPicBedUrl = `${options['Host']}` + `${options['Repository']}`;  
    // 已经下载的文件的列表  
    let fileList = [];  
    // 文件名到其相应文件后缀的映射  
    let fileExtMap = {};  
    // 下载图片后返回的多个 promise    let promiseList = [];  
    // 存放图片的文件夹里的文件列表  
    let tempFileSet = new Set();  

    let folderAbstractFile = app.vault.getAbstractFileByPath(tempFolderRelativeUrl);  
    if (folderAbstractFile) {  
        // 将文件名保存到 set 中  
        let downloadedPicList = app.fileManager.getNewFileParent(anchorFileRelativeUrl).children;  
        for (let i = 0; i < downloadedPicList.length; i++) {  
            tempFileSet.add(downloadedPicList[i].basename);  
        }  
    } else {  
        // 创建存放图片的文件夹  
        await app.vault.createFolder(tempFolderRelativePath);  
        folderAbstractFile = app.vault.getAbstractFileByPath(tempFolderRelativeUrl);  
        await app.vault.create(anchorFileRelativeUrl, "");  
    }  

    text = text.replace(searchRegex, (rs, $1, $2) => {  
        // 检查是否是自己图床的图片  
        if ($1.indexOf(myPicBedUrl) === -1) {  
            // 检查本地是否已经下载  
            let picName = $1.slice($1.lastIndexOf('/') + 1).toString();  
            if (!tempFileSet.has(picName)) {  
                let perPromise = new Promise((resolve, reject) => {  
                    let request;  
                    if ($1[4] === "s") {  
                        request = https.get($1 + $2, (res) => {  
                            if (res.statusCode !== 200) {  
                                console.log("download image error!");  
                                return;                            }  
                            let ext = res.headers['content-type'].split('/')[1];  
                            let dest = absolutePath + "\\" + picName + "." + ext;  
                            let file = fs.createWriteStream(dest);  

                            res.on('end', () => {  
                                console.log("图片下载完毕");  
                            });  

                            // 进度、超时等  
                            file.on('finish', () => {  
                                file.close();  
                                fileList.push(dest);  
                                fileExtMap[picName] = ext;  
                                resolve();  
                            }).on('error', (err) => {  
                                fs.unlink(dest);  
                            });  
                            res.pipe(file);  
                        });  
                    } else {  
                        // todo http 的不管用  
                        // 和 https 一样的代码  
                    }  
                    request.on('error', reject);  
                    request.end();  
                });  
                promiseList.push(perPromise);  
            } else {  
                console.log("图片已存在");  
            }  
        } else {  
            console.log("自己的地址");  
        }  
        return rs;  
    });  

    return Promise.allSettled(promiseList)  
        .then((results) => {  
            console.log("文件列表 " + fileList);  
            if (fileList.length > 0) {  
                return new Promise((resolve, reject) => {  
                    const postOptions = {  
                        hostname: `${options['PicGoUrl']}`,  
                        port: `${options['PicGoPort']}`,  
                        path: `${options['PicGoPath']}`,  
                        method: 'POST',  
                        headers: {  
                            'Content-Type': 'application/json'  
                        }  
                    }  

                    const req = http.request(postOptions, async res => {  
                        if (res.statusCode === 200) {  
                            console.log("删除图片文件夹 " + folderAbstractFile.path);  
                            await app.vault.delete(folderAbstractFile, true);  
                            // 正则替换图片地址  
                            text = text.replace(searchRegex, (rs, $1) => {  
                                console.log("替换链接名");  
                                // 根据文件名在 map 中找到对应的后缀  
                                let picName = $1.slice($1.lastIndexOf('/') + 1);  
                                let ext = fileExtMap[picName];  
                                return "![](" + myPicBedUrl + picName + "." + ext;  
                            });  
                        } else {  
                            console.log("上传失败");  
                        }  
                        resolve(text);  
                    });  

                    req.on('error', error => {  
                        console.error(error);  
                        reject(error);  
                    });  

                    req.write(JSON.stringify({list: fileList}));  
                    req.end();  
                });  
            } else {  
                return new Promise((resolve, reject) => {  
                    resolve(text);  
                });  
            }  
        });  
}

该方法调用处也要做修改：

因为 changeOuterLink 方法是异步的，所以调用该方法的地方要加上 await

然后在 rules 上添加新的规则

new Rule('Upload Image', 'Switch', RuleType.MINE, (text, options = {}, app, changeOuterLink) => {  
    return changeOuterLink(text, options, app);  
},[  
], [  
    new TextOption('PicGoUrl', '', "127.0.0.1"), 
    //  PicGoPort 是 picgo 默认的端口号
    new TextOption('PicGoPort', '', "36677"),  
    new TextOption('PicGoPath', '', "/upload"),  
    new TextOption('Host', 'target host', "https://raw.githubusercontent.com"),  
    // Repository 为 github 的仓库名
    new TextOption('Repository', '', "/xxx/xx/"),  
    new TextOption('Image regex', '', '\\!\\[[^\\[\\]]*\\]\\(([a-zA-z]+://[^/]+/[^.?)]+)([^)?]*)')  
])

根据字幕跳转视频

使用工具

Media Extended：使用这个插件能够播放网络视频并能跳转进度条（我已测试能行的网站有 youtube，其他没试过）

Media Extended BiliBili Plugin：这个插件是支持播放 bilibili 视频并能跳转进度条的插件

Regex Find and Replace：该插件可用于正则表达式查找和替换

Language Reactor：这是个 chrome 插件，可以在看 youtube 的时候把英文字幕翻译成中文（或其他语言），并且能选中字幕中的单词查看释义甚至可以把单词加入生词库，在生词库可以使用类似 anki 的复习方式背诵单词

安装 chrome 插件

设置 Regex Find and Replace

修改该插件的源代码

// 匹配 xxs
let regDocumentText = documentText.replace(/(^[0-5]?[0-9])s$/gm, (rs, $1) => {  
    return ">👇[" + $1 + "s](" + replaceString + "#t=" + $1 + ")";  
});  

// 匹配 mm:ssregDocumentText = regDocumentText.replace(/(^[0-5]?[0-9]):([0-5][0-9])$/gm, (rs, $1, $2) => {  
    return ">👇[" + $1 + ":" + $2 + "](" + replaceString + "#t=" + ($1 * 60 + $2 * 1) + ")";  
});  

// 匹配 hh:mm:ssregDocumentText = regDocumentText.replace(/((^[0-1]?[0-9]|2[0-3]):([0-5][0-9]):([0-5][0-9]))$/gm, (rs, $1, $2, $3) => {  
    return ">👇[" + $1 + ":" + $2 + ":" + $3 + "](" + replaceString + "#t=" + ($1 * 60 * 60 + $2 * 60 + $3 * 1) + ")";  
});  

editor.setValue(regDocumentText);

第一个正则表达式 ([0-5]?[0-9])s$ 是转换 xxs\n 格式的字符串
第二个正则表达式 ([0-5]?[0-9]):([0-5][0-9]) 是转换 m:ss 或 mm:ss 格式的字符串
第三个正则表达式 (([0-1]?[0-9]|2[0-3]):([0-5][0-9]):([0-5][0-9]))$ 是转换 hh:mm:ss 格式的字符串
以上统一最终转换为 >👇[$1s](网址#t=$1)

之所以要设置以上正则，是为了匹配 Language Reactor 生成的字幕文件，下面工作流会介绍到

然后设置一下该插件的快捷键：

导出视频的中英字幕

先打开 Language Reactor

一开始打开某个视频可能默认是中文字幕，要改成英文的：

点击 设置 查看字幕情况：

（一般没有人类翻译的话相应的单选框是选择不了的）
因为根据上图可以知道这个视频是有人类翻译的，所以导出字幕时可以仅仅导出英文字幕和人类翻译：
 

接着按 导出 就会弹出字幕的 html：

接着 ctrl + a 全选整个 html 并且 ctrl + c 复制：

新建新的关于这个视频笔记的 markdown 并插入自己设置好的视频模板（其实就只是一些元数据）：

接着在这个 markdown 里 ctrl + v 一下，可以看到复制进来了，并且把选中的这三行没用的信息删了：

使用正则替换修改字幕笔记的格式

复制一下视频的地址：

回到刚刚新建的笔记，按 ctrl + alt + f 进行正则替换：

可以看到替换成功了 👇

注意：想跳转视频一定要切换到 查看视图

结尾

这篇文章末尾就不写参考了，因为纯纯是我的经验分享，如有雷同是他抄我的。
该给的链接都给了，希望大家不要忘了给那些开源插件点个 star 哦~

我常用的 Obsidian 插件链接：

链接：https://pan.baidu.com/s/1i-eKm4UdqXAigvwUEQn8QQ

提取码：oyac

本博客所有文章除特别声明外，均采用 CC BY-SA 4.0 协议 ，转载请注明出处！