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

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

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

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)

  • 思源笔记

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

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

    22346 引用 • 89411 回帖 • 1 关注

相关帖子

欢迎来到这里!

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

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

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

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

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

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

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

推荐标签 标签

  • JavaScript

    JavaScript 一种动态类型、弱类型、基于原型的直译式脚本语言,内置支持类型。它的解释器被称为 JavaScript 引擎,为浏览器的一部分,广泛用于客户端的脚本语言,最早是在 HTML 网页上使用,用来给 HTML 网页增加动态功能。

    729 引用 • 1327 回帖
  • Hprose

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

    9 引用 • 17 回帖 • 611 关注
  • 爬虫

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

    106 引用 • 275 回帖
  • 旅游

    希望你我能在旅途中找到人生的下一站。

    90 引用 • 899 回帖
  • Solidity

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

    3 引用 • 18 回帖 • 399 关注
  • JRebel

    JRebel 是一款 Java 虚拟机插件,它使得 Java 程序员能在不进行重部署的情况下,即时看到代码的改变对一个应用程序带来的影响。

    26 引用 • 78 回帖 • 664 关注
  • Firefox

    Mozilla Firefox 中文俗称“火狐”(正式缩写为 Fx 或 fx,非正式缩写为 FF),是一个开源的网页浏览器,使用 Gecko 排版引擎,支持多种操作系统,如 Windows、OSX 及 Linux 等。

    8 引用 • 30 回帖 • 407 关注
  • MongoDB

    MongoDB(来自于英文单词“Humongous”,中文含义为“庞大”)是一个基于分布式文件存储的数据库,由 C++ 语言编写。旨在为应用提供可扩展的高性能数据存储解决方案。MongoDB 是一个介于关系数据库和非关系数据库之间的产品,是非关系数据库当中功能最丰富,最像关系数据库的。它支持的数据结构非常松散,是类似 JSON 的 BSON 格式,因此可以存储比较复杂的数据类型。

    90 引用 • 59 回帖 • 1 关注
  • Maven

    Maven 是基于项目对象模型(POM)、通过一小段描述信息来管理项目的构建、报告和文档的软件项目管理工具。

    186 引用 • 318 回帖 • 303 关注
  • 微信

    腾讯公司 2011 年 1 月 21 日推出的一款手机通讯软件。用户可以通过摇一摇、搜索号码、扫描二维码等添加好友和关注公众平台,同时可以将自己看到的精彩内容分享到微信朋友圈。

    130 引用 • 793 回帖
  • RESTful

    一种软件架构设计风格而不是标准,提供了一组设计原则和约束条件,主要用于客户端和服务器交互类的软件。基于这个风格设计的软件可以更简洁,更有层次,更易于实现缓存等机制。

    30 引用 • 114 回帖 • 1 关注
  • JSON

    JSON (JavaScript Object Notation)是一种轻量级的数据交换格式。易于人类阅读和编写。同时也易于机器解析和生成。

    52 引用 • 190 回帖
  • 小薇

    小薇是一个用 Java 写的 QQ 聊天机器人 Web 服务,可以用于社群互动。

    由于 Smart QQ 从 2019 年 1 月 1 日起停止服务,所以该项目也已经停止维护了!

    34 引用 • 467 回帖 • 742 关注
  • IDEA

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

    180 引用 • 400 回帖
  • CSS

    CSS(Cascading Style Sheet)“层叠样式表”是用于控制网页样式并允许将样式信息与网页内容分离的一种标记性语言。

    198 引用 • 550 回帖
  • VirtualBox

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

    10 引用 • 2 回帖 • 6 关注
  • 黑曜石

    黑曜石是一款强大的知识库工具,支持本地 Markdown 文件编辑,支持双向链接和关系图。

    A second brain, for you, forever.

    15 引用 • 122 回帖
  • CSDN

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

    14 引用 • 155 回帖
  • ZooKeeper

    ZooKeeper 是一个分布式的,开放源码的分布式应用程序协调服务,是 Google 的 Chubby 一个开源的实现,是 Hadoop 和 HBase 的重要组件。它是一个为分布式应用提供一致性服务的软件,提供的功能包括:配置维护、域名服务、分布式同步、组服务等。

    59 引用 • 29 回帖 • 5 关注
  • LeetCode

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

    209 引用 • 72 回帖
  • Ruby

    Ruby 是一种开源的面向对象程序设计的服务器端脚本语言,在 20 世纪 90 年代中期由日本的松本行弘(まつもとゆきひろ/Yukihiro Matsumoto)设计并开发。在 Ruby 社区,松本也被称为马茨(Matz)。

    7 引用 • 31 回帖 • 211 关注
  • 宕机

    宕机,多指一些网站、游戏、网络应用等服务器一种区别于正常运行的状态,也叫“Down 机”、“当机”或“死机”。宕机状态不仅仅是指服务器“挂掉了”、“死机了”状态,也包括服务器假死、停用、关闭等一些原因而导致出现的不能够正常运行的状态。

    13 引用 • 82 回帖 • 53 关注
  • Redis

    Redis 是一个开源的使用 ANSI C 语言编写、支持网络、可基于内存亦可持久化的日志型、Key-Value 数据库,并提供多种语言的 API。从 2010 年 3 月 15 日起,Redis 的开发工作由 VMware 主持。从 2013 年 5 月开始,Redis 的开发由 Pivotal 赞助。

    286 引用 • 248 回帖 • 62 关注
  • 大数据

    大数据(big data)是指无法在一定时间范围内用常规软件工具进行捕捉、管理和处理的数据集合,是需要新处理模式才能具有更强的决策力、洞察发现力和流程优化能力的海量、高增长率和多样化的信息资产。

    93 引用 • 113 回帖
  • 音乐

    你听到信仰的声音了么?

    60 引用 • 511 回帖
  • Sublime

    Sublime Text 是一款可以用来写代码、写文章的文本编辑器。支持代码高亮、自动完成,还支持通过插件进行扩展。

    10 引用 • 5 回帖
  • 学习

    “梦想从学习开始,事业从实践起步” —— 习近平

    169 引用 • 506 回帖