正しく表示されないウェブサイトの手動Onebox作成

開発
1

Onebox機能は大好きですが、残念ながらすべてのウェブサイトがOneboxにデータを供給するように正しく設定されているわけではありません。フォーマットが統一されていないと、トピックに複数のリンクを追加すると見栄えが悪くなることがあります。ここでは、CSSとMarkdownを少し使ってその問題を解決する方法を紹介します。

複数のOneboxを横並びにした例。いくつかのランダムなサイトが正しく読み込まれていません。

2番目と3番目が正しく読み込まれていないのがわかりますか？これは、これらの特定のリンクに対して手動でOneboxを作成することで修正できます。

image
image790×778 44.7 KB

…このように見えます。

image
image713×168 6.5 KB

手動でOneboxを作成する方法

停止 プログラマーではないため、このコードは機能しますが、最適化されているとは限りません。コードを改善したい場合は、以下に返信してください。ここにリンクを貼ります。

1. Discourseテーマに以下のカスタムCSSコードを追加します。

/*========================================================================================
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 ラップで使用します。最後に、Markdown全体をコピーして、将来のリンクのテンプレートとして使用します。これにより、プレースホルダー画像は常に表示されます（毎回再アップロードする必要はありません）。

誰かの役に立てば幸いです :slight_smile:

「いいね！」 7