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

**URL:** https://meta.discourse.org/t/manual-onebox-creation-for-websites-that-dont-display-correctly/260528
**Category:** Development
**Tags:** css
**Created:** [2023 年4 月 4 日 12:26 UTC](https://meta.discourse.org/t/manual-onebox-creation-for-websites-that-dont-display-correctly/260528 "2023-04-04T12:26:53Z")
**Posts on this page:** 1
**Page:** 1

<div class="post-metadata">

### 作者： ![UnitedFreedom](https://avatars.discourse-cdn.com/v4/letter/u/ac91a4/32.png) [@UnitedFreedom](https://meta.discourse.org/u/UnitedFreedom)
#### 发布日期： [2023 年4 月 4 日 12:26 UTC](https://meta.discourse.org/t/manual-onebox-creation-for-websites-that-dont-display-correctly/260528/1 "2023-04-04T12:26:53Z")

</div>

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

* * *

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

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

 ![image](https://global.discourse-cdn.com/meta/original/4X/0/0/3/003ef17dda98b8c636cded3c931c1e37e3e4f1f6.png)

### …使其看起来像这样：

 ![image](https://global.discourse-cdn.com/meta/original/4X/3/1/c/31c3aa9045a41383d905bec861b7492c3fc281d8.png)

* * *

# 如何创建手动 Onebox

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

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

```scss
/*========================================================================================
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 的网站替换链接和文本。

```plaintext
[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](https://global.discourse-cdn.com/meta/original/4X/6/d/2/6d2453a49e8f312874b9ff42f50ea70d17265544.png)

* * *

### 奖励改进

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

* * *

希望有人觉得这个有用 🙂