Creazione manuale di Onebox per siti web che non vengono visualizzati correttamente

Sviluppatore
1

Adoro la funzionalità Onebox, ma sfortunatamente non tutti i siti web sono configurati correttamente per fornire i dati a Onebox. L’aggiunta di più link a un argomento può apparire disordinata quando i formati non sono uniformi. Qui troverai una soluzione per risolvere quel problema usando un po’ di CSS e markdown.

Esempio di più Onebox in riga con alcuni siti casuali che non vengono caricati correttamente.

Vedi come il 2° e il 3° non vengono caricati correttamente? Possiamo risolvere questo problema creando manualmente un Onebox per quei link specifici.

image
image790×778 44.7 KB

…in modo che appaia così:

image
image713×168 6.5 KB

Come creare un Onebox manuale

STOP Si prega di notare che non sono un programmatore esperto. Sebbene questo codice funzioni, dubito che sia ottimizzato. Se qualcuno desidera migliorare il codice, risponda qui sotto e lo collegherò qui.

1. Aggiungi il seguente codice CSS personalizzato al tuo tema Discourse.

/*========================================================================================
OneBox - Crea manualmente un onebox per un sito web che non carica correttamente i dati.
=========================================================================================*/
[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. Utilizza il seguente markdown nel tuo post.

Sostituisci i link e il testo in base al sito web per cui desideri creare l’Onebox.

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

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

### [Testo Titolo](https://example.com)

Descrizione Corpo

[/wrap]
[/wrap]

3. Carica un’immagine (facoltativo)

  1. Trascina e rilascia o carica un’immagine nell’argomento.
  2. Copia il percorso (Ad esempio upload://ucs5Tw4ovoDhIxUbfCdQJ2W7wKi.png)
  3. Evidenzia il percorso esistente upload://your_uploaded_url.png e incolla quello che hai copiato nel passaggio precedente.

RISULTATO

image
image1057×531 30.4 KB

Miglioramento Bonus

Non tutti i siti web hanno un’immagine. Quindi, per mantenere le cose uniformi, rimuoveremmo tutte le immagini o, in alternativa, useremmo un segnaposto per i link che non hanno immagini. Ho scelto l’opzione segnaposto. Ho trascinato e rilasciato un’immagine nel mio argomento per caricarla su discourse. Quindi uso quel link nell’involucro onebox-image. Infine, ho copiato l’intero markdown e lo uso come modello per i link futuri. Quindi il segnaposto è sempre presente (non è necessario ricaricarlo ogni volta).

Spero che qualcuno abbia trovato questo utile quanto me :slight_smile:

7 Mi Piace