Лучшие практики создания пользовательских CSS-стилей для секций постов?

Разработка
1

Вступление

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

Одна из вещей, которую я хотел бы сделать, — добавить собственную подпись к отправляемым мной личным сообщениям и «подписывать» их. Я не хочу использовать изображение, а предпочитаю своё имя, выполненное шрифтом Google.

Реализация этого поможет мне понять, как предлагать фрагменты кода и подобные элементы своему сообществу для использования при составлении постов, так что полученные знания будут универсальными, даже если вопрос конкретный.

Причина, по которой я задаю этот вопрос, заключается в том, что прежде чем тратить время на создание таких блоков для использования, я хочу убедиться, что это лучший подход. Ведь если у меня появятся какие-то оригинальные идеи, я планирую поделиться несколькими примерами, чтобы начать обсуждение и почерпнуть ещё больше оригинальных идей от людей умнее меня. :slight_smile:

Вопрос: Как поместить текст в посте в блок, к которому можно обратиться через CSS?

Что я нашёл на данный момент

Я наткнулся на следующую тему:

[ Custom css inside a post / adding custom classes](Custom css inside a post / adding custom classes)

Из этой темы я извлек следующий ответ:

Это, кажется, работает, но мне интересно, считается ли это сейчас лучшей практикой/методом для такой задачи.

Пока я здесь, конкретный вопрос, немного не по теме, но всё же связанный с ней:

Я «злоупотребляю» настройкой, чтобы заставить работать мою идею с подписью, но это не получается, и мне интересно, есть ли у кого-то какие-то идеи на этот счёт.

Я загружаю пользовательские шрифты Google с помощью плагина, который, как я знаю, работает, поскольку весь мой форум успешно использует эти шрифты. Я использовал это, чтобы принудительно загрузить «Playwrite USA Traditional».

В моей теме есть следующий CSS:

div[data-theme-ieh] {
    font-family: "Playwrite USA Traditional";
    text-align: right;
}

Мой div в моём примере поста действительно выровнен по правому краю, но он использует Arial или аналогичный шрифт, а не шрифт моей темы и не Playwrite.

Не упустил ли я что-то очевидное в своей настройке, или вы можете предложить что-то ещё, что я упустил? Это не вопрос по Discourse.

Также есть ли лучший способ загрузить шрифт Google для использования на моём сайте?

2

Рекомендую посмотреть здесь: Generic bbcode wrapper for theme components

Исходя из того, что вы здесь поделили, ничего не приходит на ум. Если вы сможете предоставить ссылку на живой форум, нам будет проще помочь вам найти проблему.

3

Проверив код встраивания по ссылке https://fonts.google.com/share?selection.family=Playwrite+US+Trad:wght@100..400, видно, что он должен выглядеть как "Playwrite US Trad"

// <uniquifier>: Используйте уникальное и описательное имя класса
// <weight>: Используйте значение от 100 до 400

.playwrite-us-trad-<uniquifier> {
  font-family: "Playwrite US Trad", cursive;
  font-optical-sizing: auto;
  font-weight: <weight>;
  font-style: normal;
}
4

О, это выглядит довольно круто. Спасибо за подсказку!

Именно на это я и надеялся. Не хотел тратить время, но вдруг есть что-то совсем очевидное. lol.

Я… глупый Google… уф. Я зациклился на инструкции компонента, чтобы убедиться, что правильно указал название, включая заглавные буквы, и даже не подумал проверить РЕАЛЬНОЕ название, которое может использовать Google. д’оу.

Для справки: загрузка правильного имени шрифта и использование правильного имени шрифта дают ожидаемый результат.

И теперь я могу «подписывать» свои сообщения:

712×532 40 KB

Спасибо :slight_smile: