Manuelle Onebox-Erstellung für Websites, die nicht korrekt angezeigt werden

Entwickler
1

Ich liebe die Onebox-Funktion absolut, aber leider sind nicht alle Websites korrekt konfiguriert, um die Daten an Onebox zu übermitteln. Das Hinzufügen mehrerer Links zu einem Thema kann unordentlich aussehen, wenn die Formate nicht einheitlich sind. Hier finden Sie eine Lösung für dieses Problem mit ein wenig CSS und Markdown.

Beispiel für mehrere Oneboxen in einer Reihe mit einigen zufälligen Websites, die nicht korrekt geladen werden.

Sehen Sie, wie die 2. und 3. nicht korrekt geladen werden? Wir können dies mit der manuellen Erstellung einer Onebox für diese spezifischen Links beheben.

image
image790×778 44.7 KB

…damit es so aussieht:

image
image713×168 6.5 KB

Manuelle Erstellung einer Onebox

STOPP Bitte beachten Sie, dass ich kein erfahrener Programmierer bin. Obwohl dieser Code funktioniert, bezweifle ich, dass er optimiert ist. Wenn jemand den Code verbessern möchte, antworten Sie bitte unten, und ich werde hier darauf verlinken.

1. Fügen Sie den folgenden benutzerdefinierten CSS-Code zu Ihrem Discourse-Theme hinzu.

/*========================================================================================
OneBox - Manuelle Erstellung einer Onebox für eine Website, die die Daten nicht korrekt lädt.
=========================================================================================*/
[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. Verwenden Sie die folgende Markdown in Ihrem Beitrag.

Ersetzen Sie die Links und den Text basierend auf der Website, für die Sie die Onebox erstellen möchten.

[wrap="onebox-wrapper"]
[wrap="onebox-header"] [Header-Text](https://example.com) [/wrap]
[wrap="onebox-body"]

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

### [Titeltext](https://example.com)

Beschreibung des Inhalts

[/wrap]
[/wrap]

3. Laden Sie ein Bild hoch (optional)

  1. Ziehen Sie ein Bild per Drag & Drop in das Thema oder laden Sie es hoch.
  2. Kopieren Sie den Pfad (Zum Beispiel upload://ucs5Tw4ovoDhIxUbfCdQJ2W7wKi.png)
  3. Markieren Sie den vorhandenen Pfad upload://your_uploaded_url.png und fügen Sie dann den kopierten Pfad aus dem obigen Schritt ein.

ERGEBNIS

image
image1057×531 30.4 KB

Bonus-Verbesserung

Nicht alle Websites haben ein Bild. Um die Dinge einheitlich zu halten, würden wir entweder alle Bilder entfernen oder stattdessen einen Platzhalter für die Links verwenden, die keine Bilder haben. Ich habe die Option mit dem Platzhalter gewählt. Ich habe ein Bild in mein Thema gezogen und fallen gelassen, um es nach Discourse hochzuladen. Dann verwende ich diesen Link im onebox-image-Wrap. Schließlich habe ich die gesamte Markdown kopiert und verwende sie als Vorlage für zukünftige Links. Der Platzhalter ist also immer vorhanden (kein erneutes Hochladen erforderlich).

Ich hoffe, jemand fand dies so nützlich wie ich :slight_smile:

7 „Gefällt mir“