Obsidian Clipper template - Twitter(X)

README.md

原版来自 DC 频道：Discord | "X (Twitter) Post Template" | Obsidian Members Group (OMG)

这是我自己的魔改版：Obsidian Clipper template - Twitter(X)

配置好之后，设置「模板触发器」： /^https:\/\/x\.com\/[A-Za-z0-9_]+\/status\/\d+$/ 来针对 Twitter 页面自动启用。

属性说明

1. 属性中 cssclasses 的 media-count-x 是用来适配不同的图片数量，以应用不同的图片排列布局；twitter-clip 留着备用。
2. 日期属性的格式按需调整。

正文说明

1. 使用了 [!twitter] 类型的 Callout 方便自定义样式
2. 把作者主页和发布原帖都以链接的形式放在标题区域了，点击用户名可以跳转主页，点击日期打开原文
3. 用户 ID 加上了 斜体 是方便用 CSS 增加样式

Moy-推特剪藏.css

/* ! Twitter 剪藏块 */

/* * 结合了 Callout 和 Cssclasses 所以放到一起 */

/* Callout */

/* 处理链接标签 */
.cm-embed-block.cm-callout:has(.callout[data-callout="twitter"]) {
    pointer-events: fill;

}


/* --- 链接处理 --- */
.callout[data-callout="twitter"] {
    /* 隐藏前面的标识 */
    a.external-link {
        /* display: none; */

        /* 去掉那个链接 SVG 图标 */
        background-image: none !important;
        padding-right: 0;

        opacity: 0.9;
        color: var(--text-faint);
        border: none;
        color: rgb(37, 175, 255);
        font-weight: 500;
    }

    a.tag {
        color: rgb(29, 155, 240);
        background: none;
        padding: 0;
    }

}

/* 媒体处理 */
.callout[data-callout="twitter"] {

    p:has(img) {
        display: grid;
        grid-template-columns: 50% 50%;
        grid-template-rows: 1fr;
        gap: 3px;

        br {
            display: none;
        }
        
        img {
            width: 100%;
            height: 100%;
            object-fit: cover;  /* 关键属性：按最长边匹配并裁切 */
            display: block;     /* 移除图片底部间隙 */

            /* 缩放算法 */
            image-rendering: auto !important;
            /* 这个会有锯齿 */
            image-rendering: -webkit-optimize-contrast; /* Chrome, Safari */
        }
    }
}

.media-count-3 .callout[data-callout="twitter"] {

    p:has(.media-embed) {
        display: grid;
        grid-template-columns: 50% 50%;
        grid-template-rows: 1fr 1fr;
        gap: 3px;

        max-height: 500px !important;
        overflow: hidden;

        .media-embed {
            width: 100%;
            height: 100%;
            object-fit: cover;  /* 关键属性：按最长边匹配并裁切 */
            display: block;     /* 移除图片底部间隙 */
            
            overflow: hidden !important;
        }

        .media-embed:first-of-type {
            grid-column: 1;
            grid-row: 1 / span 2;
        }

        .media-embed:nth-of-type(2) {
            grid-column: 2;
            grid-row: 1;
        }

        .media-embed:nth-of-type(3) {
            grid-column: 2;
            grid-row: 2;
        }
    }

    p:has(img) {
        gap: 3px;

        grid-template-columns: 50% 50%;
        grid-template-rows: 1fr 1fr;

        /* 确保容器填满可用空间 */
        width: 100%;
        height: 100%;
        
        /* 外链的图片 */
        img {
            width: 100%;
            height: 100%;
            object-fit: cover;  /* 关键属性：按最长边匹配并裁切 */
            display: block;     /* 移除图片底部间隙 */

        }

        img:first-of-type {
            grid-column: 1;
            grid-row: 1 / span 2;
        }

        img:nth-of-type(2) {
            grid-column: 2;
            grid-row: 1;
        }

        img:nth-of-type(3) {
            grid-column: 2;
            grid-row: 2;
        }

    }
}

.cm-callout:has(.callout[data-callout="twitter"]) {
    cursor: pointer;
    /* pointer-events: none; */

    &:hover {
        cursor: pointer;
        box-shadow: none !important;
    }

    .edit-block-button {
        display: none !important;
    }
}

/* 引用靠右，并添加前缀 */
.callout[data-callout="twitter"] {
    border-top: 5px solid rgb(37, 175, 255) !important;
    border-radius: 8px;

    /* 限制最大宽度 */
    /* max-width: 600px; */
    max-width: 95%;

    margin-top: 1em !important;
    margin-left: auto !important;
    margin-right: auto !important;
    margin-bottom: 1em !important;

    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.1);

    /* 标题区，包含图标 */
    .callout-title {
        /* padding-bottom: 0.8em;
        border-bottom: 1px solid rgb(200, 200, 200) !important;
        margin-bottom: 0.5em; */

        /* 对齐元素 */
        align-items: anchor-center;

        /* 标题文本区域 */
        .callout-title-inner {
            font-size: 0.75em;
            color: rgb(37, 175, 255);
            font-weight: 500;

            display: flex !important;
            align-items: center;
            justify-content: space-between;
            gap: 8px;
            width: 100%;

            a.external-link:first-of-type {
                opacity: 1.0 !important;
                font-weight: 600;
                text-decoration: none;

            }

            em, .at-people {
                opacity: 0.75;
                /* font-weight: 400; */
                font-style: normal;
                /* color: var(--text-faint); */
                border: none;
            }

            .full-date {
                all: unset !important;
                background: none !important;
                background-color: transparent !important;

                &::before {
                    content: " · " !important;
                }
            }

            /* 最后一个链接 */
            a.external-link:last-of-type {
                /* display: none; */

                opacity: 0.6;
                text-decoration: none !important;
                
                &::before {
                    /* content: " · " !important; */
                }
                

                /* 靠右 */
                margin-left: auto !important; /* 自动左外边距推到最右边 */
                margin-right: 0;
            }
        }
    }

    .callout-content {
        max-height: 500px;
        padding-right: 20px;

        font-size: 17px;
    }
}


/* ! 引用块的处理 */
.internal-embed.markdown-embed.inline-embed.is-loaded[alt="Original Post"] {
    h2 {
        display: none;
    }

    padding-left: 0;
    border-left: none;
}

Obsidian Clipper 配置.json

{
  "schemaVersion": "0.1.0",
  "name": "𝕏 X (Twitter) Post",
  "behavior": "create",
  "noteContentFormat": "## Original Post\n> [!twitter] [{{selector:div[data-testid=\"User-Name\"]|first|split:\"@\"|first}}](https://x.com/{{url|split:\"/\"|slice:3,-2}}) {{content|split:\"\\n\\n\"|first|replace:(\"/\\*\\*.*?\\*\\* /\":\"\\*\")|replace:\" [\":\"* [\"}}\n{{selectorHtml:article[tabindex=\"-1\"] div[data-testid=\"tweetText\"]|first|strip_tags:\"a, img\"|strip_attr:\"href, alt, style, draggable\"|replace:\"\\n\":\"<br>\"|replace:\"<img alt=\\\"\",\"\"|replace:\"\\\" draggable=\\\"false\\\">\":\"\"|markdown|blockquote}}\n>\n{{selectorHtml:article[tabindex=\"-1\"] video, article[tabindex=\"-1\"] img[draggable=\"true\"]:not(img[src*=\"profile_images\"])|join:\"<br>\"|strip_attr:\"poster, src\"|replace:(\"<video poster=\":\"<img src=\",\"</video>\":\"\")|replace:\"/&amp;name=([^\\\"]+)/g\":\"&amp;name=large\"|markdown|blockquote}}\n\n## Notes\n\n\n## AI Tags\n{{\"Create some relevant single word tags for the bellow content. Less than 6. Use # before each of the tasgs.  Answer only the tags, do not add introductory words of explanations.\"}}",
  "properties": [
    {
      "name": "aliases",
      "value": "",
      "type": "text"
    },
    {
      "name": "created_at",
      "value": "{{time|date:YYYY-MM-DD[T]HH:mm}}",
      "type": "text"
    },
    {
      "name": "modified_at",
      "value": "{{time|date:YYYY-MM-DD[T]HH:mm}}",
      "type": "datetime"
    },
    {
      "name": "tags",
      "value": "tweet",
      "type": "multitext"
    },
    {
      "name": "type",
      "value": "推文",
      "type": "text"
    },
    {
      "name": "url",
      "value": "{{url}}",
      "type": "text"
    },
    {
      "name": "cssclasses",
      "value": "twitter-clip, media-count-{{selectorHtml:article[tabindex=\\\"-1\\\"] video, article[tabindex=\\\"-1\\\"] img[draggable=\\\"true\\\"]:not(img[src*=\\\"profile_images\\\"])|join:\\\"===\\\"|split:\\\"===\\\"|length}}",
      "type": "multitext"
    },
    {
      "name": "author",
      "value": "{{selector:div[data-testid=\\\"User-Name\\\"]|first|split:\\\"@\\\"|first}}",
      "type": "multitext"
    },
    {
      "name": "user_id",
      "value": "{{url|split:\\\"/\\\"|slice:3,-2}}",
      "type": "text"
    },
    {
      "name": "user_url",
      "value": "[{{selector:div[data-testid=\\\"User-Name\\\"]|first|split:\\\"@\\\"|first}}](https://x.com/{{url|split:\\\"/\\\"|slice:3,-2}})",
      "type": "text"
    },
    {
      "name": "published_date",
      "value": "{{selectorHtml:article[tabindex=\\\"-1\\\"] time?datetime|date:YYYY-MM-DD}}",
      "type": "date"
    },
    {
      "name": "image",
      "value": "{{selectorHtml:article[tabindex=\\\"-1\\\"] video, article[tabindex=\\\"-1\\\"] img[draggable=\\\"true\\\"]:not(img[src*=\\\"profile_images\\\"])|first|strip_attr:\\\"poster, src\\\"|replace:(\\\"<video poster=\\\":\\\"<img src=\\\",\\\"</video>\\\":\\\"\\\")|markdown|slice:4,-1}}",
      "type": "text"
    },
    {
      "name": "TLDR",
      "value": "{{\\\"请用中文简短地总结出这条推文的内容\\\"}}",
      "type": "text"
    }
  ],
  "triggers": [
    "/^https:\\/\\/x\\.com\\/[A-Za-z0-9_]+\\/status\\/\\d+$/"
  ],
  "noteNameFormat": "@{{url|split:\"/\"|slice:3,-2}} {{selectorHtml:article[tabindex=\"-1\"] time?datetime|first|date:\"YYYY-MM-DD_HHmmss\"}}",
  "path": "网络摘录/Clippings/Twitter",
  "context": ">[!twitter] {{content|split:\"\\n\\n\"|first}}\n{{selectorHtml:article[tabindex=\"-1\"] div[data-testid=\"tweetText\"]|first|strip_tags:\"a, img\"|strip_attr:\"href, alt, style, draggable\"|replace:\"\\n\":\"<br>\"|replace:\"<img alt=\\\"\",\"\"|replace:\"\\\" draggable=\\\"false\\\">\":\"\"|markdown|blockquote}}\n>\n{{selectorHtml:article[tabindex=\"-1\"] video, article[tabindex=\"-1\"] img[draggable=\"true\"]:not(img[src*=\"profile_images\"])|join:\"<br>\"|strip_attr:\"poster, src\"|replace:(\"<video poster=\":\"<img src=\",\"</video>\":\"\")|replace:\"/&amp;name=([^\\\"]+)/g\":\"&amp;name=large\"|markdown|blockquote}}"
}