Ручное создание Onebox для сайтов, которые отображаются некорректно

Разработка
1

Мне очень нравится функция Onebox, но, к сожалению, не все сайты настроены правильно для передачи данных в Onebox. Добавление нескольких ссылок к теме может выглядеть небрежно, если форматы не одинаковы. Здесь вы найдете решение этой проблемы, используя немного CSS и Markdown.

Пример нескольких Onebox в ряд с несколькими случайными сайтами, которые не загружаются правильно.

Обратите внимание, что второй и третий не загружаются правильно? Мы можем это исправить, вручную создав Onebox для этих конкретных ссылок.

image
image790×778 44.7 KB

…чтобы это выглядело так:

image
image713×168 6.5 KB

Как создать ручной Onebox

СТОП Обратите внимание, что я не квалифицированный программист. Хотя этот код работает, я сомневаюсь, что он оптимизирован. Если кто-то захочет улучшить код, пожалуйста, ответьте ниже, и я добавлю ссылку на него здесь.

1. Добавьте следующий пользовательский CSS-код в вашу тему Discourse.

/*=========================================================================================
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 лайков