简介
图片超链接的功能详见帖子:
- 图片超链接 html/markdown方案对比分享
- 基本功能:点击图片触发URL(跳转到网页/本地应用/ob笔记条目)
本帖介绍URL转图片超链接快速插入笔记的方法
基本流程:
- 弹出输入框,输入网址
- 网址转域名
- 拼接域名到第三方供应商网页,调用第三方供应商解析网页icon(部分网页无自带favicon)
- 拼接icon链接和原网址,生成markdown格式的图片超链接
使用方法
- 使用
- 调用创建好的quickadd capture命令,输入网址
- 回车自动插入带有网站在线图标的图片超链接
- 配置
- 创建.js文件到库中,粘贴代码
- quickadd设置,创建macro;配置macro添加UserScripts,选择创建好的js文件
- quickadd设置,创建capture;开启Capture to active file选项、配置capture format为
{{MACRO:刚才创建的macro名称}}
(输入{{
后,下拉菜单拉到最底部就有)
脚本
async function Url2IconUrl(params) {
const userInput = await params.quickAddApi.inputPrompt("请输入内容:", "默认值");
try {
const urlObj = new URL(userInput);
const domain = urlObj.hostname;
// 定义IconProvider接口和providers对象
// src: https://github.com/joethei/obsidian-link-favicon/blob/master/src/provider.ts
const providers = {
'google': {name: 'Google', url: domain => Promise.resolve("https://www.google.com/s2/favicons?domain=" + domain)},
'duckduckgo': {
name: 'DuckDuckGo',
url: domain => Promise.resolve("https://icons.duckduckgo.com/ip3/" + domain + ".ico")
},
'iconhorse': {name: 'Icon Horse', url: domain => Promise.resolve("https://icon.horse/icon/" + domain)},
'splitbee': {name: 'Splitbee', url: domain => Promise.resolve("https://favicon.splitbee.io/?url=" + domain)}
};
// 选择供应商
const selectedProvider = 'splitbee'; // 这里可以根据需求更改
// 获取图标URL
const iconUrl = await providers[selectedProvider].url(domain);
new Notice(iconUrl, 5000); // 显示通知
// 组合成Markdown格式的超链接图片
const markdownLink = `[![](${iconUrl})](${userInput})`;
return markdownLink;
} catch (error) {
new Notice("输入的内容不是有效的URL,请重新输入。", 5000);
return null;
}
}
module.exports = Url2IconUrl;