为显示不正确的网站手动创建 Onebox

开发
1

我非常喜欢 Onebox 功能，但不幸的是，并非所有网站都已正确配置以将数据提供给 Onebox。当格式不统一时，在主题中添加多个链接可能会显得杂乱无章。在这里，您将找到一种使用少量 CSS 和 Markdown 来解决该问题的方法。

示例：一行中的多个 Onebox，其中一些随机网站未正确加载。

看到第二个和第三个未正确加载了吗？我们可以通过手动为这些特定链接创建 Onebox 来解决此问题。

image
image790×778 44.7 KB

…使其看起来像这样：

image
image713×168 6.5 KB

如何创建手动 Onebox

停止 请注意，我不是熟练的程序员。尽管此代码有效，但我怀疑它并未得到优化。如果有人想改进代码，请在下方回复，我将在此处链接到它。

1. 将以下自定义 CSS 代码添加到您的 Discourse 主题中。

/*========================================================================================
OneBox - 为未正确加载数据的网站手动创建 onebox。
=========================================================================================*/
[data-wrap="onebox-wrapper"] {
    border: 5px solid var(--primary-low);
    margin: 1em 0;
    padding: 1em;
    font-size: var(--font-0);
    background: var(--secondary);
}

[data-wrap="onebox-header"] {
    align-items: center;
    display: flex;
    margin-bottom: 1em;
}


[data-wrap="onebox-header"] a[href] {
    color: var(--primary-med-or-secondary-med);
    text-decoration: none;
}

[data-wrap="onebox-header"] p {
    margin-top: 0em;
    margin-bottom: 0em;
}


[data-wrap="onebox-body"] {
    clear: both;
}

[data-wrap="onebox-body"] h3 {
     margin-top: 0em;
    margin-bottom: 0em;
}

[data-wrap="onebox-body"] p {
     margin-top: 0em;
    margin-bottom: 0em;
}

[data-wrap="onebox-image"] {
    max-height: 170px;
    --magic-ratio: calc(var(--aspect-ratio) + 0.15);
    width: calc(128px*var(--magic-ratio));
    max-width: 20%;
    float: left;
    margin-right: 1em;
    height: auto;
    padding-bottom: 0em;
}

2. 在您的帖子中使用以下 Markdown。

根据您想要为其创建 Onebox 的网站替换链接和文本。

[wrap="onebox-wrapper"]
[wrap="onebox-header"] [页眉文本](https://example.com) [/wrap]
[wrap="onebox-body"]

[wrap="onebox-image"]![image|75x75](upload://your_uploaded_url.png)[/wrap]

### [标题文本](https://example.com)

正文描述

[/wrap]
[/wrap]

3. 上传图片（可选）

  1. 将图片拖放到主题中或上传图片。
  2. 复制路径（例如 upload://ucs5Tw4ovoDhIxUbfCdQJ2W7wKi.png）
  3. 突出显示现有路径 upload://your_uploaded_url.png，然后粘贴您在上一步中复制的路径。

结果

image
image1057×531 30.4 KB

奖励改进

并非所有网站都有图片。因此，为了保持一致性，我们可以删除所有图片，或者为没有图片的链接使用占位符。我选择了占位符选项。我已经将一张图片拖放到我的主题中，将其上传到 discourse。然后，我在 onebox-image wrap 中使用该链接。最后，我复制了整个 Markdown，并将其用作未来链接的模板。因此，占位符图片始终存在（无需每次重新上传）。

希望有人觉得这个有用 :slight_smile:

7 个赞