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

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

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

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)

  • 思源笔记

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

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

    24815 引用 • 102085 回帖

相关帖子

欢迎来到这里!

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

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

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

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

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

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

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

推荐标签 标签

  • 印象笔记
    3 引用 • 16 回帖
  • MySQL

    MySQL 是一个关系型数据库管理系统,由瑞典 MySQL AB 公司开发,目前属于 Oracle 公司。MySQL 是最流行的关系型数据库管理系统之一。

    693 引用 • 537 回帖
  • 七牛云

    七牛云是国内领先的企业级公有云服务商,致力于打造以数据为核心的场景化 PaaS 服务。围绕富媒体场景,七牛先后推出了对象存储,融合 CDN 加速,数据通用处理,内容反垃圾服务,以及直播云服务等。

    28 引用 • 226 回帖 • 135 关注
  • VirtualBox

    VirtualBox 是一款开源虚拟机软件,最早由德国 Innotek 公司开发,由 Sun Microsystems 公司出品的软件,使用 Qt 编写,在 Sun 被 Oracle 收购后正式更名成 Oracle VM VirtualBox。

    10 引用 • 2 回帖 • 13 关注
  • 以太坊

    以太坊(Ethereum)并不是一个机构,而是一款能够在区块链上实现智能合约、开源的底层系统。以太坊是一个平台和一种编程语言 Solidity,使开发人员能够建立和发布下一代去中心化应用。 以太坊可以用来编程、分散、担保和交易任何事物:投票、域名、金融交易所、众筹、公司管理、合同和知识产权等等。

    34 引用 • 367 回帖 • 1 关注
  • Eclipse

    Eclipse 是一个开放源代码的、基于 Java 的可扩展开发平台。就其本身而言,它只是一个框架和一组服务,用于通过插件组件构建开发环境。

    76 引用 • 258 回帖 • 630 关注
  • Python

    Python 是一种面向对象、直译式电脑编程语言,具有近二十年的发展历史,成熟且稳定。它包含了一组完善而且容易理解的标准库,能够轻松完成很多常见的任务。它的语法简捷和清晰,尽量使用无异义的英语单词,与其它大多数程序设计语言使用大括号不一样,它使用缩进来定义语句块。

    556 引用 • 674 回帖
  • Scala

    Scala 是一门多范式的编程语言,集成面向对象编程和函数式编程的各种特性。

    13 引用 • 11 回帖 • 157 关注
  • WiFiDog

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

    1 引用 • 7 回帖 • 610 关注
  • Quicker

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

    36 引用 • 155 回帖
  • 30Seconds

    📙 前端知识精选集,包含 HTML、CSS、JavaScript、React、Node、安全等方面,每天仅需 30 秒。

    • 精选常见面试题,帮助您准备下一次面试
    • 精选常见交互,帮助您拥有简洁酷炫的站点
    • 精选有用的 React 片段,帮助你获取最佳实践
    • 精选常见代码集,帮助您提高打码效率
    • 整理前端界的最新资讯,邀您一同探索新世界
    488 引用 • 384 回帖 • 5 关注
  • FreeMarker

    FreeMarker 是一款好用且功能强大的 Java 模版引擎。

    23 引用 • 20 回帖 • 459 关注
  • 百度

    百度(Nasdaq:BIDU)是全球最大的中文搜索引擎、最大的中文网站。2000 年 1 月由李彦宏创立于北京中关村,致力于向人们提供“简单,可依赖”的信息获取方式。“百度”二字源于中国宋朝词人辛弃疾的《青玉案·元夕》词句“众里寻他千百度”,象征着百度对中文信息检索技术的执著追求。

    63 引用 • 785 回帖 • 109 关注
  • Word
    13 引用 • 40 回帖 • 1 关注
  • CSDN

    CSDN (Chinese Software Developer Network) 创立于 1999 年,是中国的 IT 社区和服务平台,为中国的软件开发者和 IT 从业者提供知识传播、职业发展、软件开发等全生命周期服务,满足他们在职业发展中学习及共享知识和信息、建立职业发展社交圈、通过软件开发实现技术商业化等刚性需求。

    14 引用 • 155 回帖
  • Pipe

    Pipe 是一款小而美的开源博客平台。Pipe 有着非常活跃的社区,可将文章作为帖子推送到社区,来自社区的回帖将作为博客评论进行联动(具体细节请浏览 B3log 构思 - 分布式社区网络)。

    这是一种全新的网络社区体验,让热爱记录和分享的你不再感到孤单!

    132 引用 • 1115 回帖 • 120 关注
  • GAE

    Google App Engine(GAE)是 Google 管理的数据中心中用于 WEB 应用程序的开发和托管的平台。2008 年 4 月 发布第一个测试版本。目前支持 Python、Java 和 Go 开发部署。全球已有数十万的开发者在其上开发了众多的应用。

    14 引用 • 42 回帖 • 805 关注
  • 服务

    提供一个服务绝不仅仅是简单的把硬件和软件累加在一起,它包括了服务的可靠性、服务的标准化、以及对服务的监控、维护、技术支持等。

    41 引用 • 24 回帖
  • Visio
    1 引用 • 2 回帖
  • 倾城之链
    23 引用 • 66 回帖 • 158 关注
  • OkHttp

    OkHttp 是一款 HTTP & HTTP/2 客户端库,专为 Android 和 Java 应用打造。

    16 引用 • 6 回帖 • 83 关注
  • 机器学习

    机器学习(Machine Learning)是一门多领域交叉学科,涉及概率论、统计学、逼近论、凸分析、算法复杂度理论等多门学科。专门研究计算机怎样模拟或实现人类的学习行为,以获取新的知识或技能,重新组织已有的知识结构使之不断改善自身的性能。

    83 引用 • 37 回帖
  • Solidity

    Solidity 是一种智能合约高级语言,运行在 [以太坊] 虚拟机(EVM)之上。它的语法接近于 JavaScript,是一种面向对象的语言。

    3 引用 • 18 回帖 • 431 关注
  • 心情

    心是产生任何想法的源泉,心本体会陷入到对自己本体不能理解的状态中,因为心能产生任何想法,不能分出对错,不能分出自己。

    59 引用 • 369 回帖
  • 游戏

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

    180 引用 • 821 回帖
  • JetBrains

    JetBrains 是一家捷克的软件开发公司,该公司位于捷克的布拉格,并在俄国的圣彼得堡及美国麻州波士顿都设有办公室,该公司最为人所熟知的产品是 Java 编程语言开发撰写时所用的集成开发环境:IntelliJ IDEA

    18 引用 • 54 回帖 • 1 关注
  • V2Ray
    1 引用 • 15 回帖 • 1 关注