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

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

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>

渲染出来长这样：

​​

已知的问题：

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

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

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

‍

‍