本来不是很想把这种比较蛋疼的实现方式贴出来的,但是看到好像很多人需要这个,就简单说一下实现的思路吧
使用 shadowdom 是为了防止 hack 的链接影响编辑器运行。
import { DOM监听器 } from "/script/public/DOMwatcher.js";
//DOM监听器只是一个observer的封装
export class linkCard extends naive.plugin {
constructor() {
super({ name: "linkCard" });
window.requestAnimationFrame(() => this.hackLink());
this.icons = naive.fs.readdirSync(
naive.pathConstructor.naivePath() +
"/script/plugin/corePlugins/linkCard/icon4Tsundoku"
);
window.siyuan.ws.ws.addEventListener("message", () => {
this.hackLink();
});
document.addEventListener("mouseover", () => {
this.hackLink();
});
let 监听选项1 = {
监听目标: `[data-node-id]`,
//监听目标这里是指定了一个css选择器
监听器回调: () => this.hackLink(),
//hacklink函数才是的功能代码
};
this.DOM监听器1 = new DOM监听器(监听选项1);
}
hackLink() {
try{
let links = document.querySelectorAll(
'.protyle-wysiwyg.protyle-wysiwyg--attr [data-node-id] span[data-type="a"]'
);
links.forEach((link) => {
if (link.dataset.title && link.dataset.title.indexOf("card:") >= 0) {
//意思是标题以card:开头的超链接才会显示成卡片形式
if (!link.shadowRoot||!link.shadowRoot.innerHTML||!link.shadowRoot.querySelector("img")) {
//已经有shadowDOM的元素不重复添加
this.attachLinkShadow(link);
} else {
//已经有shadowDOM元素,修改之后需要确保图标和URL等正确
let src = this.getImg(link.dataset.href);
if (
link.shadowRoot.querySelector("img").getAttribute("src") !== src
) {
link.shadowRoot.querySelector("img").setAttribute("src", src);
}
if (link.dataset.title) {
link.shadowRoot.querySelector(".LinkCard-title").innerText =
link.dataset.title.slice(5);
}
if (link.dataset.href) {
link.shadowRoot.querySelector(".LinkCard-href").innerText =
link.dataset.href
}
}
}
else{
link.shadowRoot?link.shadowRoot.innerHTML=`<span>${link.innerHTML}</span>`:null
}
});
}catch(e){}
//出错时直接忽略不是好习惯,不过这里好像没有太大问题,因为触发频率比较高,如果在控制台输出错误信息很可能会卡死
}
attachLinkShadow(a) {
a.shadowRoot?a.shadowRoot.innerHTML='':null
//下面这段添加了卡片链接样式
let linkStyle = document.createElement("style");
linkStyle.innerHTML = `
.LinkCard:hover{
background-color:var(--b3-theme-primary-lightest) !important
}
.LinkCard{
position: relative;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
box-sizing: border-box;
-webkit-flex-direction: row;
-ms-flex-direction: row;
flex-direction: row;
-webkit-align-items: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
width: 60%;
min-height: 84px;
border-radius: 8px;
max-width: 100%;
overflow: hidden;
margin: 16px auto;
padding: 12px 12px 9px 12px;
background-color: #F6F6F6;
text-decoration:none
}
.LinkCard-contents {
display: block;
-webkit-flex: 1 1 auto;
-ms-flex: 1 1 auto;
flex: 1 1 auto;
position: relative;
white-space:normal !important;
}
.LinkCard-image {
-webkit-flex: 0 0 auto;
-ms-flex: 0 0 auto;
flex: 0 0 auto;
background-color:var(--b3-theme-surface);
background-size: cover;
background-position: center;
position: relative;
display: block;
width: 60px;
height: 60px;
margin-left: 20px;
object-fit: cover;
border-radius: inherit;
overflow: hidden;
}
.LinkCard-image img {
width: 100%;
height: 100%;
object-fit: cover;
top: 0;
position: absolute;
}
.LinkCard-title {
line-height: 20px;
display: -webkit-box;
text-overflow: ellipsis;
overflow: hidden;
color:var(--b3-theme-on-surface);
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
}
.LinkCard-href{
line-height: 15px;
font-size:15px;
display: -webkit-box;
text-overflow: ellipsis;
overflow: hidden;
color:var(--b3-theme-on-surface);
-webkit-box-orient: vertical;
-webkit-line-clamp: 1;
}
`;
let shadow = a.shadowRoot?a.shadowRoot:a.attachShadow({ mode: "open" });
shadow.innerHTML += `<div class="LinkCardContainer">
<a class='LinkCard' href='${a.dataset.href}'>
<span class='LinkCard-contents'>
<span class='LinkCard-title'>${a.dataset.title.slice(
5
)}</span>
<span class='LinkCard-href'>${a.dataset.href
}</span>
</span>
<span class="LinkCard-image">
<img src="${this.getImg(a.dataset.href)}"></img>
</span>
</a>
</div>`;
shadow.appendChild(linkStyle);
}
getImg(href) {
//这里使用了icon4Tsundoku中的图标,故名思意,这些图标是从tsundoku主题偷来的....
//你也可以通过其他方式请求网站的图标,或者仅仅在远程请求失败的时候使用本地图标
let iconNameRes =
naive.pathConstructor.naivePath() +
"/script/plugin/corePlugins/linkCard/icon4Tsundoku/" +
"link2.svg";
this.icons.forEach((iconName) => {
if (iconName && iconName.split) {
let iconURL = iconName.split(".")[0].replace("_", ".");
if (href && href.indexOf(iconURL) >= 0) {
//这里的URL可能有有点怪,因为为了方便这里是跟naive另外拉起的服务器请求图标的,在其它地方实现的时候可以忽略
iconNameRes =
naive.pathConstructor.naivePath() +
"/script/plugin/corePlugins/linkCard/icon4Tsundoku/" +
iconName;
}
}
});
return iconNameRes;
}
}
//这段代码可以忽略,因为这个本来是naive主题的一个插件,所以会有这个指定生效环境的内容,实际上不仅仅可以在APP环境生效,我这里是为了对比性能在其他环境关闭了这个插件
export const environments = ["APP"];
效果类似这样
想要其他样式就改一下 style 部分的代码。
貌似是不影响链接编辑的,就这样吧。
因为实现得比较随便,老哥们实际用的时候自己改改代码吧
欢迎来到这里!
我们正在构建一个小众社区,大家在这里相互信任,以平等 • 自由 • 奔放的价值观进行分享交流。最终,希望大家能够找到与自己志同道合的伙伴,共同成长。
注册 关于