Création manuelle de Onebox pour les sites Web qui ne s'affichent pas correctement

Dev
1

J’adore la fonctionnalité Onebox, mais malheureusement, tous les sites Web ne sont pas correctement configurés pour fournir les données à Onebox. L’ajout de plusieurs liens à un sujet peut sembler désordonné lorsque les formats ne sont pas uniformes. Vous trouverez ici une solution pour résoudre ce problème en utilisant un peu de CSS et de markdown.

Exemple de plusieurs Onebox côte à côte avec quelques sites aléatoires ne se chargeant pas correctement.

Voyez comment le 2ème et le 3ème ne se chargent pas correctement ? Nous pouvons y remédier en créant manuellement une Onebox pour ces liens spécifiques.

image
image790×778 44.7 KB

…pour que cela ressemble à ceci :

image
image713×168 6.5 KB

Comment créer une Onebox manuelle

ARRÊT Veuillez noter que je ne suis pas un programmeur qualifié. Bien que ce code fonctionne, je doute qu’il soit optimisé. Si quelqu’un souhaite améliorer le code, veuillez répondre ci-dessous, et je le lierai ici.

1. Ajoutez le code CSS personnalisé suivant à votre thème Discourse.

/*========================================================================================
OneBox - Créez manuellement une onebox pour un site Web qui ne charge pas les données correctement.
=========================================================================================*/
[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. Utilisez le markdown suivant dans votre publication.

Remplacez les liens et le texte en fonction du site Web pour lequel vous souhaitez créer la Onebox.

[wrap="onebox-wrapper"]
[wrap="onebox-header"] [Texte d'en-tête](https://example.com) [/wrap]
[wrap="onebox-body"]

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

### [Texte du titre](https://example.com)

Description du corps

[/wrap]
[/wrap]

3. Téléchargez une image (facultatif)

  1. Faites glisser et déposez ou téléchargez une image dans le sujet.
  2. Copiez le chemin (Par exemple upload://ucs5Tw4ovoDhIxUbfCdQJ2W7wKi.png)
  3. Mettez en surbrillance le chemin existant upload://your_uploaded_url.png puis collez celui que vous avez copié à l’étape ci-dessus.

RÉSULTAT

image
image1057×531 30.4 KB

Amélioration bonus

Tous les sites Web n’ont pas d’image. Donc, pour maintenir l’uniformité, nous supprimerions toutes les images, ou utiliserions plutôt une image de remplacement pour les liens qui n’en ont pas. J’ai choisi l’option de l’image de remplacement. J’ai fait glisser et déposé une image dans mon sujet pour la télécharger sur Discourse. J’utilise ensuite ce lien dans l’enveloppe onebox-image. Enfin, j’ai copié l’intégralité du markdown et je l’utilise comme modèle pour les liens futurs. L’image de remplacement est donc toujours là (pas besoin de la retélécharger à chaque fois).

J’espère que quelqu’un trouvera cela aussi utile que moi :slight_smile:

7 « J'aime »