[Feature]: 完善 {% link %} 标签功能
828767 opened this issue · comments
功能简介
完善 {% link %} 标签功能
问题描述
当前存在的问题:
- 一律视为站外链接,不区分站内站外地址
- 图标自动接口获取url/favicon.png,当url为相对路径时异常:
- 获取
favicon.png
失败 - 生成的链接href="这里还会多出空格"
- 获取
- 网站不存在
favicon.png
时无图标
实现效果
- 区分站内和站外链接
- 站内链接自动应用配置的favicon,站外链接应用标签中指定的图标文件或自动获取的图标
你想到的可行的替代方案
const urlFor = require("hexo-util").url_for.bind(hexo);
function link(args) {
const themeConfig = hexo.theme.config;
args = args.join(" ").split(",");
let title = args[0];
let sitename = args[1];
let link = args[2];
let imgUrl = args[3] || "";
let favicon = themeConfig.site.siteIcon;
// 删除头尾空白符
link = link.trim();
imgUrl = imgUrl.trim();
favicon = favicon.trim();
// 链接指定为有效URL视为站外,其他相对路径等视为站内
try {
new URL(link);
InsideStation = false;
} catch (err) {
InsideStation = true;
}
// let urlNoProtocol = args[2].replace(/^https?\:\/\//i, "");
// let imgUrl = "https://api.iowen.cn/favicon/" + urlNoProtocol + ".png";
return `<a class="tag-link" target="_blank" href="${urlFor(link)}">
<div class="tag-link-tips">${
InsideStation ? "站内地址" : "引用站外地址"
}</div>
<div class="tag-link-bottom">
<div class="tag-link-left" style="${
imgUrl
? `background-image: url(${InsideStation ? favicon : imgUrl})`
: ""
}">
<i class="solitude st-link-m-line" style="${
imgUrl ? "display: none" : ""
}"></i>
</div>
<div class="tag-link-right">
<div class="tag-link-title">${title}</div>
<div class="tag-link-sitename">${sitename}</div>
</div>
<i class="solitude st-arrow-right-bold"></i>
</div>
</a>`;
}
hexo.extend.tag.register("link", link, { ends: false });
其他内容
No response
图标显示理想状态应该可以做成:
- 有指定则应用指定图标
- 无指定:
- 站内自动应用favicon
- 站外自动自动获取
- 获取失败<i_class>
可以自己交一个PR,完善一下
可以自己交一个PR,完善一下
可我是个菜鸟啊,还不知道怎么单独把这个文件PR o(╯□╰)o
const urlFor = require("hexo-util").url_for.bind(hexo);
function link(args) {
const themeConfig = hexo.theme.config;
args = args.join(" ").split(",");
let title = args[0];
let sitename = args[1];
let link = args[2];
let imgUrl = args[3] || "";
let favicon = themeConfig.site.siteIcon;
// 删除头尾空白符
link = link.trim();
imgUrl = imgUrl.trim();
favicon = favicon.trim();
// 链接指定为有效URL视为站外,其他相对路径等视为站内
try {
new URL(link);
InsideStation = false;
} catch (err) {
InsideStation = true;
}
if ((imgUrl == "") && (InsideStation == false)) {
let domain = new URL(link).hostname
if (domain) {
imgUrl_online = "https://api.iowen.cn/favicon/" + domain + ".png";
}
}
return `<a class="tag-link" target="_blank" href="${urlFor(link)}">
<div class="tag-link-tips">${
InsideStation ? "站内链接" : "引用站外链接"
}</div>
<div class="tag-link-bottom">
<div class="tag-link-left" style="${
InsideStation
? `background-image: url(${imgUrl ? imgUrl : favicon})`
: `background-image: url(${imgUrl ? imgUrl : imgUrl_online})`
}">
<i class="solitude st-link-m-line" style="${
`(imgUrl) || (imgUrl_online)` ? "display: none" : ""
}"></i>
</div>
<div class="tag-link-right">
<div class="tag-link-title">${title}</div>
<div class="tag-link-sitename">${sitename}</div>
</div>
<i class="solitude st-arrow-right-bold"></i>
</div>
</a>`;
}
hexo.extend.tag.register("link", link, { ends: false });