Criação manual de Onebox para sites que não são exibidos corretamente

Dev
1

Eu adoro o recurso Onebox, mas infelizmente nem todos os sites estão configurados corretamente para fornecer os dados ao Onebox. Adicionar vários links a um tópico pode ficar confuso quando os formatos não são uniformes. Aqui você encontrará uma solução para resolver esse problema usando um pouco de CSS e markdown.

Exemplo de múltiplos Onebox em linha com alguns sites aleatórios não carregando corretamente.

Veja como o 2º e o 3º não estão carregando corretamente? Podemos corrigir isso criando manualmente um Onebox para esses links específicos.

image
image790×778 44.7 KB

…para que fique assim:

image
image713×168 6.5 KB

Como criar um Onebox manual

PARE Por favor, note que eu não sou um programador experiente. Embora este código funcione, duvido que esteja otimizado. Se alguém quiser melhorar o código, por favor, responda abaixo, e eu o vincularei aqui.

1. Adicione o seguinte código CSS personalizado ao seu tema do Discourse.

/*========================================================================================
OneBox - Crie manualmente um onebox para um site que não carrega os dados corretamente.
=========================================================================================*/
[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. Use o seguinte markdown em sua postagem.

Substitua os links e o texto com base no site para o qual você deseja criar o Onebox.

[wrap="onebox-wrapper"]
[wrap="onebox-header"] [Texto do Cabeçalho](https://example.com) [/wrap]
[wrap="onebox-body"]

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

### [Texto do Título](https://example.com)

Descrição do Corpo

[/wrap]
[/wrap]

3. Faça o upload de uma imagem (opcional)

  1. Arraste e solte ou faça o upload de uma imagem no tópico.
  2. Copie o caminho (Por exemplo upload://ucs5Tw4ovoDhIxUbfCdQJ2W7wKi.png )
  3. Destaque o caminho existente upload://your_uploaded_url.png e cole o que você copiou na etapa acima.

RESULTADO

image
image1057×531 30.4 KB

Melhoria Bônus

Nem todos os sites têm uma imagem. Portanto, para manter as coisas uniformes, removeríamos todas as imagens ou, em vez disso, usaríamos um espaço reservado para os links que não têm imagens. Eu escolhi a opção de espaço reservado. Arrastei e soltei uma imagem em meu tópico para fazer o upload para o discourse. Em seguida, usei esse link no wrap onebox-image. Por último, copiei todo o markdown e o usei como um modelo para links futuros. Assim, a imagem de espaço reservado está sempre lá (não há necessidade de fazer o upload novamente a cada vez).

Espero que alguém tenha achado isso tão útil quanto eu :slight_smile:

7 curtidas