思源笔记折腾记录 - 超链接菜单自定义 - 复制为链接卡片

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

需要用到的还是自定义菜单模块:

import 自定义菜单 from "https://esm.sh/siyuan-noob/customMenu/index.js"

还是那个比较复杂的写入剪贴版的函数,其实我也没看懂,直接抄的思源的源码

let writeText = async (text) => { let range; if (getSelection().rangeCount > 0) { range = getSelection().getRangeAt(0).cloneRange(); } try { // navigator.clipboard.writeText 抛出异常不进入 catch,这里需要先处理移动端复制 if ("android" === window.siyuan.config.system.container && window.JSAndroid) { window.JSAndroid.writeClipboard(text); return; } if ("ios" === window.siyuan.config.system.container && window.webkit?.messageHandlers) { window.webkit.messageHandlers.setClipboard.postMessage(text); return; } navigator.clipboard.writeText(text); } catch (e) { if (window.siyuan.config.system.container === "ios" && window.webkit?.messageHandlers) { window.webkit.messageHandlers.setClipboard.postMessage(text); } else if (window.siyuan.config.system.container === "android" && window.JSAndroid) { window.JSAndroid.writeClipboard(text); } else { const textElement = document.createElement("textarea"); textElement.value = text; textElement.style.position = "fixed"; //avoid scrolling to bottom document.body.appendChild(textElement); textElement.focus(); textElement.select(); document.execCommand("copy"); document.body.removeChild(textElement); if (range) { focusByRange(range); } } } }

附赠从 stardust 那里偷来的一个新卡片样式:

pink-room 改动概念图 - 链滴 (ld246.com)

class linkCardStardust extends HTMLElement{ constructor() { super(); let shawdow = this.attachShadow({ mode: "open" }); shawdow.innerHTML = this.render(); } render() { return ` <div> <style> .link-card { height: 100px; width: auto; background-color:${this.getAttribute('bgColor')||'#effffe'} ; background-image:${this.getAttribute('bgImg')}; display: flex; box-shadow: 0px 0px 5px 1px #0000004d; border-radius: 5px; overflow: hidden; color: ${this.getAttribute('color')||'#259494'} ; } .link-card:hover{ scale:102% } .icon{ height: auto; width: 94px; background-color:${this.getAttribute('imgColor')||'#ff7777'} ; background-image: url(${this.getAttribute('img')}); /* 括号内填入复制粘贴到思源后的图片的相对路径,可以右键思源内的图片来复制 */ background-size:cover; margin:3px; border-radius:2px; } .text-content{ width: auto; margin: 5px 10px 5px 10px; } h2{ margin: 0px; padding: 0px; } p{ margin: 0px; padding: 0px; } </style> <div> <div class="link-card" onclick="window.location.href='${this.getAttribute('href')}'"><!-- 单双引号内填入思源的块超链接 --> <div class="icon"> </div> <div class="text-content"> <h2>${this.getAttribute('title')}</h2> <p><slot></slot></p> </div> </div> </div> </body> </div> ` } } try{ customElements.define("link-card-stardust", linkCardStardust); }catch(e){ }

然后写入到自定义链接菜单里面去:

自定义菜单.超链接菜单.注册自定义菜单项({ id: "复制链接卡片", 图标:"#iconCopy", 文字:"复制为链接卡片", }).注册自定义子菜单项( (菜单项) => { return 菜单项.id == "复制链接卡片" }, { id:'复制为SD卡片', 文字:`复制为starDust卡片`, 图标:'#iconCopy', 点击回调函数:()=>{ let 当前元素 = 自定义菜单.超链接菜单.菜单状态.链接元素 writeText(`<div><link-card-stardust href='${当前元素.dataset.href}' title='${当前元素.dataset.title}'>${当前元素.innerText}</link-card-stardust></div>`) window.siyuan.menus.menu.remove() } } ).注册自定义子菜单项( (菜单项) => { return 菜单项.id == "复制链接卡片" }, { id:'复制为CC卡片', 文字:`复制为简单卡片`, 图标:'#iconCopy', 点击回调函数:()=>{ let 当前元素 = 自定义菜单.超链接菜单.菜单状态.链接元素 writeText(`<div><link-card href='${当前元素.dataset.href}' title='${当前元素.dataset.title}'>${当前元素.innerText}</link-card></div>`) window.siyuan.menus.menu.remove() } } )

具体效果就懒得录屏了,自己试试吧。

stardust 卡片也可以自己在 html 块里面手写:

<div> <link-card-stardust href='https://ld246.com/article/1640266171309' title='链接生活 分享点滴' img='https://ld246.com/images/faviconH-dark.png' imgColor='transpanret' >用户社区汇总</link-card-stardust> </div>

渲染出来长这样:

image


已知的问题:

我并没完成网页图标和标题的在线获取,有兴趣的可以结合【分享】一个制作超链接卡片的小工具 - 链滴 (ld246.com)自己玩一下


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

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

  • 思源笔记

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

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

    25228 引用 • 104032 回帖

欢迎来到这里!

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

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

    此种方法插入的图片会被思源视为未引用文档清除掉,应该改进一下图片的插入

    1 回复
  • 嗯 这里是应该补充一下 思源的附件管理是会清理未引用的附件 在线图片不会被清除所以问题不大 如果要使用本地图片的话,那就需要把图片放在思源的附件之外的位置。

    我一般是放在/data/snnipets 文件夹下面了。

    其实也还可以放到挂件目录,这里和代码片段目录都能通过链接访问也不会被清除。

    这两个目录都会同步,所以我各端都要用到的静态资源又不希望思源的附件清理处理的都会放到那个里面

推荐标签 标签

  • Excel
    31 引用 • 28 回帖 • 3 关注
  • 游戏

    沉迷游戏伤身,强撸灰飞烟灭。

    181 引用 • 821 回帖 • 1 关注
  • 负能量

    上帝为你关上了一扇门,然后就去睡觉了....努力不一定能成功,但不努力一定很轻松 (° ー °〃)

    89 引用 • 1243 回帖 • 411 关注
  • Oracle

    Oracle(甲骨文)公司,全称甲骨文股份有限公司(甲骨文软件系统有限公司),是全球最大的企业级软件公司,总部位于美国加利福尼亚州的红木滩。1989 年正式进入中国市场。2013 年,甲骨文已超越 IBM,成为继 Microsoft 后全球第二大软件公司。

    107 引用 • 127 回帖 • 341 关注
  • jQuery

    jQuery 是一套跨浏览器的 JavaScript 库,强化 HTML 与 JavaScript 之间的操作。由 John Resig 在 2006 年 1 月的 BarCamp NYC 上释出第一个版本。全球约有 28% 的网站使用 jQuery,是非常受欢迎的 JavaScript 库。

    63 引用 • 134 回帖 • 734 关注
  • Kotlin

    Kotlin 是一种在 Java 虚拟机上运行的静态类型编程语言,由 JetBrains 设计开发并开源。Kotlin 可以编译成 Java 字节码,也可以编译成 JavaScript,方便在没有 JVM 的设备上运行。在 Google I/O 2017 中,Google 宣布 Kotlin 成为 Android 官方开发语言。

    19 引用 • 33 回帖 • 81 关注
  • IDEA

    IDEA 全称 IntelliJ IDEA,是一款 Java 语言开发的集成环境,在业界被公认为最好的 Java 开发工具之一。IDEA 是 JetBrains 公司的产品,这家公司总部位于捷克共和国的首都布拉格,开发人员以严谨著称的东欧程序员为主。

    181 引用 • 400 回帖
  • 爬虫

    网络爬虫(Spider、Crawler),是一种按照一定的规则,自动地抓取万维网信息的程序。

    106 引用 • 275 回帖
  • Hadoop

    Hadoop 是由 Apache 基金会所开发的一个分布式系统基础架构。用户可以在不了解分布式底层细节的情况下,开发分布式程序。充分利用集群的威力进行高速运算和存储。

    89 引用 • 122 回帖 • 617 关注
  • WordPress

    WordPress 是一个使用 PHP 语言开发的博客平台,用户可以在支持 PHP 和 MySQL 数据库的服务器上架设自己的博客。也可以把 WordPress 当作一个内容管理系统(CMS)来使用。WordPress 是一个免费的开源项目,在 GNU 通用公共许可证(GPLv2)下授权发布。

    66 引用 • 114 回帖 • 197 关注
  • 钉钉

    钉钉,专为中国企业打造的免费沟通协同多端平台, 阿里巴巴出品。

    15 引用 • 67 回帖 • 287 关注
  • Tomcat

    Tomcat 最早是由 Sun Microsystems 开发的一个 Servlet 容器,在 1999 年被捐献给 ASF(Apache Software Foundation),隶属于 Jakarta 项目,现在已经独立为一个顶级项目。Tomcat 主要实现了 JavaEE 中的 Servlet、JSP 规范,同时也提供 HTTP 服务,是市场上非常流行的 Java Web 容器。

    162 引用 • 529 回帖 • 6 关注
  • OpenShift

    红帽提供的 PaaS 云,支持多种编程语言,为开发人员提供了更为灵活的框架、存储选择。

    14 引用 • 20 回帖 • 660 关注
  • Notion

    Notion - The all-in-one workspace for your notes, tasks, wikis, and databases.

    10 引用 • 77 回帖 • 2 关注
  • JVM

    JVM(Java Virtual Machine)Java 虚拟机是一个微型操作系统,有自己的硬件构架体系,还有相应的指令系统。能够识别 Java 独特的 .class 文件(字节码),能够将这些文件中的信息读取出来,使得 Java 程序只需要生成 Java 虚拟机上的字节码后就能在不同操作系统平台上进行运行。

    180 引用 • 120 回帖 • 1 关注
  • WiFiDog

    WiFiDog 是一套开源的无线热点认证管理工具,主要功能包括:位置相关的内容递送;用户认证和授权;集中式网络监控。

    1 引用 • 7 回帖 • 611 关注
  • LeetCode

    LeetCode(力扣)是一个全球极客挚爱的高质量技术成长平台,想要学习和提升专业能力从这里开始,充足技术干货等你来啃,轻松拿下 Dream Offer!

    209 引用 • 72 回帖 • 2 关注
  • 安装

    你若安好,便是晴天。

    132 引用 • 1184 回帖
  • 电影

    这是一个不能说的秘密。

    122 引用 • 608 回帖
  • Swagger

    Swagger 是一款非常流行的 API 开发工具,它遵循 OpenAPI Specification(这是一种通用的、和编程语言无关的 API 描述规范)。Swagger 贯穿整个 API 生命周期,如 API 的设计、编写文档、测试和部署。

    26 引用 • 35 回帖 • 1 关注
  • 互联网

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

    99 引用 • 367 回帖
  • 工具

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

    298 引用 • 763 回帖
  • frp

    frp 是一个可用于内网穿透的高性能的反向代理应用,支持 TCP、UDP、 HTTP 和 HTTPS 协议。

    20 引用 • 7 回帖 • 4 关注
  • 创造

    你创造的作品可能会帮助到很多人,如果是开源项目的话就更赞了!

    184 引用 • 1015 回帖 • 1 关注
  • 知乎

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

    10 引用 • 66 回帖
  • PWL

    组织简介

    用爱发电 (Programming With Love) 是一个以开源精神为核心的民间开源爱好者技术组织,“用爱发电”象征开源与贡献精神,加入组织,代表你将遵守组织的“个人开源爱好者”的各项条款。申请加入:用爱发电组织邀请帖
    用爱发电组织官网:https://programmingwithlove.stackoverflow.wiki/

    用爱发电组织的核心驱动力:

    • 遵守开源守则,体现开源&贡献精神:以分享为目的,拒绝非法牟利。
    • 自我保护:使用适当的 License 保护自己的原创作品。
    • 尊重他人:不以各种理由、各种漏洞进行未经允许的抄袭、散播、洩露;以礼相待,尊重所有对社区做出贡献的开发者;通过他人的分享习得知识,要留下足迹,表示感谢。
    • 热爱编程、热爱学习:加入组织,热爱编程是首当其要的。我们欢迎热爱讨论、分享、提问的朋友,也同样欢迎默默成就的朋友。
    • 倾听:正确并恳切对待、处理问题与建议,及时修复开源项目的 Bug ,及时与反馈者沟通。不抬杠、不无视、不辱骂。
    • 平视:不诋毁、轻视、嘲讽其他开发者,主动提出建议、施以帮助,以和谐为本。只要他人肯努力,你也可能会被昔日小看的人所超越,所以请保持谦虚。
    • 乐观且活跃:你的努力决定了你的高度。不要放弃,多年后回头俯瞰,才会发现自己已经成就往日所仰望的水平。积极地将项目开源,帮助他人学习、改进,自己也会获得相应的提升、成就与成就感。
    1 引用 • 487 回帖 • 5 关注
  • Office

    Office 现已更名为 Microsoft 365. Microsoft 365 将高级 Office 应用(如 Word、Excel 和 PowerPoint)与 1 TB 的 OneDrive 云存储空间、高级安全性等结合在一起,可帮助你在任何设备上完成操作。

    5 引用 • 34 回帖