通过 hack 的方式实现卡片式超链接

本来不是很想把这种比较蛋疼的实现方式贴出来的，但是看到好像很多人需要这个，就简单说一下实现的思路吧

使用 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 部分的代码。

貌似是不影响链接编辑的，就这样吧。

因为实现得比较随便，老哥们实际用的时候自己改改代码吧