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

本贴最后更新于 726 天前,其中的信息可能已经时移世改

首先,我们需要解决一个问题: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 好像比之前绿皮版的强一点,不知道为什么截图有点糊, 算了就这样吧.

image

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

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


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

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

来到知乎,大家都是要学会编故事的啦 反正广告不是我自己写的,跟我百度有什么关系

  • 思源笔记

    思源笔记是一款隐私优先的个人知识管理系统,支持完全离线使用,同时也支持端到端加密同步。

    融合块、大纲和双向链接,重构你的思维。

    25120 引用 • 103566 回帖 • 1 关注
2 操作
leolee 在 2023-04-22 03:20:16 更新了该帖
leolee 在 2023-04-22 03:11:05 更新了该帖

相关帖子

欢迎来到这里!

我们正在构建一个小众社区,大家在这里相互信任,以平等 • 自由 • 奔放的价值观进行分享交流。最终,希望大家能够找到与自己志同道合的伙伴,共同成长。

注册 关于
请输入回帖内容 ...
请输入回帖内容 ...

推荐标签 标签

  • 创业

    你比 99% 的人都优秀么?

    82 引用 • 1395 回帖
  • NGINX

    NGINX 是一个高性能的 HTTP 和反向代理服务器,也是一个 IMAP/POP3/SMTP 代理服务器。 NGINX 是由 Igor Sysoev 为俄罗斯访问量第二的 Rambler.ru 站点开发的,第一个公开版本 0.1.0 发布于 2004 年 10 月 4 日。

    315 引用 • 547 回帖 • 1 关注
  • 脑图

    脑图又叫思维导图,是表达发散性思维的有效图形思维工具 ,它简单却又很有效,是一种实用性的思维工具。

    31 引用 • 97 回帖
  • 深度学习

    深度学习(Deep Learning)是机器学习的分支,是一种试图使用包含复杂结构或由多重非线性变换构成的多个处理层对数据进行高层抽象的算法。

    53 引用 • 40 回帖
  • Netty

    Netty 是一个基于 NIO 的客户端-服务器编程框架,使用 Netty 可以让你快速、简单地开发出一个可维护、高性能的网络应用,例如实现了某种协议的客户、服务端应用。

    49 引用 • 33 回帖 • 36 关注
  • 反馈

    Communication channel for makers and users.

    126 引用 • 930 回帖 • 273 关注
  • 链滴

    链滴是一个记录生活的地方。

    记录生活,连接点滴

    172 引用 • 3848 回帖 • 3 关注
  • 数据库

    据说 99% 的性能瓶颈都在数据库。

    345 引用 • 742 回帖
  • 程序员

    程序员是从事程序开发、程序维护的专业人员。

    588 引用 • 3538 回帖
  • React

    React 是 Facebook 开源的一个用于构建 UI 的 JavaScript 库。

    192 引用 • 291 回帖 • 383 关注
  • ZeroNet

    ZeroNet 是一个基于比特币加密技术和 BT 网络技术的去中心化的、开放开源的网络和交流系统。

    1 引用 • 21 回帖 • 647 关注
  • 链书

    链书(Chainbook)是 B3log 开源社区提供的区块链纸质书交易平台,通过 B3T 实现共享激励与价值链。可将你的闲置书籍上架到链书,我们共同构建这个全新的交易平台,让闲置书籍继续发挥它的价值。

    链书社

    链书目前已经下线,也许以后还有计划重制上线。

    14 引用 • 257 回帖 • 2 关注
  • Hprose

    Hprose 是一款先进的轻量级、跨语言、跨平台、无侵入式、高性能动态远程对象调用引擎库。它不仅简单易用,而且功能强大。你无需专门学习,只需看上几眼,就能用它轻松构建分布式应用系统。

    9 引用 • 17 回帖 • 627 关注
  • IPFS

    IPFS(InterPlanetary File System,星际文件系统)是永久的、去中心化保存和共享文件的方法,这是一种内容可寻址、版本化、点对点超媒体的分布式协议。请浏览 IPFS 入门笔记了解更多细节。

    21 引用 • 245 回帖 • 228 关注
  • BAE

    百度应用引擎(Baidu App Engine)提供了 PHP、Java、Python 的执行环境,以及云存储、消息服务、云数据库等全面的云服务。它可以让开发者实现自动地部署和管理应用,并且提供动态扩容和负载均衡的运行环境,让开发者不用考虑高成本的运维工作,只需专注于业务逻辑,大大降低了开发者学习和迁移的成本。

    19 引用 • 75 回帖 • 666 关注
  • Telegram

    Telegram 是一个非盈利性、基于云端的即时消息服务。它提供了支持各大操作系统平台的开源的客户端,也提供了很多强大的 APIs 给开发者创建自己的客户端和机器人。

    5 引用 • 35 回帖
  • Sphinx

    Sphinx 是一个基于 SQL 的全文检索引擎,可以结合 MySQL、PostgreSQL 做全文搜索,它可以提供比数据库本身更专业的搜索功能,使得应用程序更容易实现专业化的全文检索。

    1 引用 • 222 关注
  • GitHub

    GitHub 于 2008 年上线,目前,除了 Git 代码仓库托管及基本的 Web 管理界面以外,还提供了订阅、讨论组、文本渲染、在线文件编辑器、协作图谱(报表)、代码片段分享(Gist)等功能。正因为这些功能所提供的便利,又经过长期的积累,GitHub 的用户活跃度很高,在开源世界里享有深远的声望,并形成了社交化编程文化(Social Coding)。

    210 引用 • 2040 回帖
  • 工具

    子曰:“工欲善其事,必先利其器。”

    298 引用 • 762 回帖 • 1 关注
  • ActiveMQ

    ActiveMQ 是 Apache 旗下的一款开源消息总线系统,它完整实现了 JMS 规范,是一个企业级的消息中间件。

    19 引用 • 13 回帖 • 680 关注
  • 前端

    前端技术一般分为前端设计和前端开发,前端设计可以理解为网站的视觉设计,前端开发则是网站的前台代码实现,包括 HTML、CSS 以及 JavaScript 等。

    245 引用 • 1338 回帖 • 1 关注
  • 知乎

    知乎是网络问答社区,连接各行各业的用户。用户分享着彼此的知识、经验和见解,为中文互联网源源不断地提供多种多样的信息。

    10 引用 • 66 回帖
  • Quicker

    Quicker 您的指尖工具箱!操作更少,收获更多!

    37 引用 • 156 回帖 • 1 关注
  • 互联网

    互联网(Internet),又称网际网络,或音译因特网、英特网。互联网始于 1969 年美国的阿帕网,是网络与网络之间所串连成的庞大网络,这些网络以一组通用的协议相连,形成逻辑上的单一巨大国际网络。

    99 引用 • 367 回帖
  • 房星科技

    房星网,我们不和没有钱的程序员谈理想,我们要让程序员又有理想又有钱。我们有雄厚的房地产行业线下资源,遍布昆明全城的 100 家门店、四千地产经纪人是我们坚实的后盾。

    6 引用 • 141 回帖 • 593 关注
  • 阿里巴巴

    阿里巴巴网络技术有限公司(简称:阿里巴巴集团)是以曾担任英语教师的马云为首的 18 人,于 1999 年在中国杭州创立,他们相信互联网能够创造公平的竞争环境,让小企业通过创新与科技扩展业务,并在参与国内或全球市场竞争时处于更有利的位置。

    43 引用 • 221 回帖 • 72 关注
  • jsDelivr

    jsDelivr 是一个开源的 CDN 服务,可为 npm 包、GitHub 仓库提供免费、快速并且可靠的全球 CDN 加速服务。

    5 引用 • 31 回帖 • 106 关注