思源笔记折腾记录 -html 块 - 链接卡片

首先,我们需要解决一个问题:html 块里面的元素没有办法搞到所在块的 id 之类,所以很难通过块属性之类来设置链接标题啥的.

所以我们来搞点奇怪的东西:

//http://127.0.0.1:62532/stage/build/desktop/?v=1681911359712&&blockID=20230421185342-gtv30ov
//siyuan://blocks/20230421185342-gtv30ov
let findHostBlock;
findHostBlock = (element) => {
  try {
    if (element.host) {
      return findHostBlock(element.host);
    }

    if (
      element.parentNode &&
      element.parentNode.getAttribute &&
      element.parentNode.getAttribute("data-node-id")
    ) {
      return element.parentNode;
    }

    return findHostBlock(element.parentNode);
  } catch (e) {
    return undefined;
  }
};




​

然后我们来造一个 link-card 元素

try {
  class linkCard extends HTMLElement {
    constructor() {
      super();
      this.hostBlock = findHostBlock(this);
      if (this.hostBlock) {
        let shawdow = this.attachShadow({ mode: "open" });
        shawdow.innerHTML = this.render();
      }
    }
    render() {
      return `
    <style>
        .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: var(--b3-theme-surface) !important;
    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 ,.LinkCard-image svg{
    width: 100%;
    height: 100%;
    object-fit: cover;
    top: 0;
    position: absolute;
}
.LinkCard-image svg{
  stroke-width:1px !important;
  fill:var(--b3-theme-primary)
}
.LinkCard-title {
    line-height: 20px;
    font-size:20px;
    font-weight:bold;

    display: -webkit-box;
    text-overflow: ellipsis;
    overflow: hidden;
    color:var(--b3-theme-on-surface);
    -webkit-box-orient: vertical;
  
    -webkit-line-clamp: 2;
    padding-bottom:0.5rem
}
.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;
    padding-top:0.5rem

}
.LinkCard-subscribe{
  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;

}
</style>
<div class="LinkCardContainer">
    <a class='LinkCard' href='${getHref(this)}'>
        <span class='LinkCard-contents'>
            <span class='LinkCard-title'>${getTitle(this)}</span>
            <span class='LinkCard-subscribe'><slot></slot></span>
            <span class='LinkCard-href'>${getHref(this)}</span>
        </span>
        <span class="LinkCard-image">
           ${getImg(this)}
        </span>
    </a>
</div>
    `;
    }
  }
  customElements.define("link-card", linkCard);
} catch (e) {}
//\
​

这是获取图片和标题的函数,图片放在 snippets/assets/linkIcons 文件夹下面了.

其实标题也可以从链接获取,但是我懒得搞了.

function getHref(element) {
  let href =    element.getAttribute("href") ||
  (findHostBlock(element) && findHostBlock(element).getAttribute("custom-href"))
  if(!href.startsWith('http://')&&!href.startsWith('https://')&&!href.startsWith('file://')){
    href='https://'+href
  }
  return (
    href
  );
}
function getTitle(element) {
  return (
    element.getAttribute("title") ||
    (findHostBlock(element) && findHostBlock(element).getAttribute("custom-title"))
  );
}
function getImg(element) {
  let src =
    element.getAttribute("img") ||
    (findHostBlock(element) && findHostBlock(element).getAttribute("custom-img"));
  if (src) {
    return `
    <img src="${src}"></img>
    `;
  } 
  try{
  let href =getHref(element)
  let url =new URL(href)
  let domain = url.host.split('.')
  domain=domain[domain.length-2]+'.'+domain[domain.length-1]
  let iconURL ='/snippets/assets/linkIcons/'+ domain+'.png'
  return `
  <img src="${iconURL}"></img>
  `
  }catch(e){
  return `   
    <svg><def>${
      document.getElementById("iconLanguage").outerHTML
    }</def><use xlink:href="#iconLanguage"></use></svg>
    `;
  }
}
​

来都来了,再造一个特殊的 script 元素吧,跟原生的 script 基本一样,除了能通过 hostBlock 获取所在的块元素.

//这是一个自己造的很新的script元素,它里面的代码可以获取自己所在的块
try {
  class scriptX extends HTMLElement {
    constructor() {
      super();
      this.style.display = "none";
      this.hostBlock = findHostBlock(this);
      if (this.hostBlock) {
        let iife = new Function(`return (hostBlock)=>{${this.innerText}}`)();
        iife(this.hostBlock);
      }
    }
  }
  customElements.define("script-x", scriptX);
} catch (e) {}
​

搞完之后在 html 块里面就可以用了嗷

<div>
<link-card  href="www.zhihu.com" title="知乎,分享你刚编的故事" img="">来到知乎,大家都是要学会编故事的啦</link-card>
<link-card  href="www.baidu.com" title="百度一下,癌症起步" img="">反正广告不是我自己写的,跟我百度有什么关系</link-card>
</div>
​

emmm 好像比之前绿皮版的强一点,不知道为什么截图有点糊, 算了就这样吧.

对了这个不一定要用思源笔记折腾记录 - 运行你的笔记 - 链滴 (ld246.com)里面的方法来弄,但是用它运行也没有毛病

如果你想要了解更多原理的话,就自己去搜一下 web components 吧,我就不罗嗦了.

水完收工，如果这玩意对你有用可以去爱发电给我买杯咖啡哒

leolee9086 正在创作一些简单的技术教程和小工具,以及设计方面内容 | 爱发电 (afdian.net)

‍