Как работают директивы `@import` в SCSS?

[Question42]

Привет! Не хотел спамить форумами несколькими темами, поэтому задаю здесь 4 основных вопроса как новый пользователь/участник Discourse:

1) Есть ли способ удалить все следы социальных сетей с моего сайта?

Не уверен, что это встроено в Discourse или зависит от конкретной темы, но в исходном коде на каждой странице, если посмотреть исходный код, есть 5 упоминаний Twitter и одно упоминание Facebook. Это:

<meta name="twitter:card" content="summary" />
<meta name="twitter:image" content="https://forums.mysite.me/uploads/default/original/1X/9c81453y45yh45ha81cedd21d3cf20.png" />
<meta name="twitter:url" content="https://forums.mysite.me/" />
<meta name="twitter:title" content="SiteTitle" />
<meta name="twitter:description" content="Site Description Is Here" />

А в разделе <div class="hidden" id="data-preloaded" data-preloaded= упоминание Facebook выглядит так: \"facebook_app_id\". Мой сайт ориентирован на максимальную приватность, поэтому наличие этих элементов выглядит не лучшим образом.

Задал тот же вопрос снова по адресу: Remove All Traces of Social Media On My Website?

2) Как работают @import в SCSS? При попытке настроить тему Air Theme я заметил на странице GitHub, что для десктопной версии есть CSS со следующим содержимым:

@import "showcased-categories";
@import "chat-desktop";
@import "sidebar-desktop";

Я попытался создать свою тему и добавить эти строки в раздел редактирования CSS/HTML → Desktop, но при сохранении получил ошибку:

И я никак не могу понять, как заставить @import работать. Я даже зашел на сервер VPS с установленным Discourse, создал папку “scss” и поместил туда файлы, которые пытается импортировать этот код, перезапустил форумы, но всё равно не получилось.

3) Как настроить автоматический перезапуск форума после перезагрузки сервера VPS? Сервер работает под управлением Ubuntu 22.04. При поиске информации я нашел этот ответ на этих форумах, но сделал всё, как там сказано, и, должно быть, я что-то упустил, потому что не вижу инструкций по выполнению этого на странице установки, как предполагает тот комментарий.

4) Как немного опустить весь форум вниз? На десктопе всё выглядит нормально, но на мобильных устройствах он выглядит так, как показано в комментарии под этим постом (поскольку новые пользователи могут добавлять только один скриншот в пост), где закруглённые края врезаются в верхнюю панель…

Я пробовал добавить тег переноса строки (<br>) в раздел Head темы CSS, но это сдвинуло вниз всё, включая верхнюю навигационную панель, которую я хочу оставить наверху.

Думаю, на данный момент это все мои вопросы. Спасибо.

[Question42]

Что касается пункта 4 выше, вот скриншот, о котором я упоминал:

[Arkshine]

Привет, добро пожаловать на Meta

1. У меня нет ответа на ваш вопрос. Однако я могу ошибаться. Я не думаю, что эти мета-теги OpenGraph и facebook_app_id здесь являются проблемами конфиденциальности. Надеюсь, кто-то другой сможет дать более подробную информацию по этому поводу.

2. Вы не создали удалённую тему. Она находится в репозитории GitHub. Вы можете создавать свои файлы, например, разделив ваш CSS на несколько файлов в директории scss. Тогда @import автоматически будет ссылаться на эту директорию.

   Вы не можете сделать это, если вручную создаёте тему в Админ-панели.

   Если вы хотите настроить удалённую тему, вы можете создать компонент темы, привязать его к теме Air и добавить любой желаемый CSS. Это не обязательно для импорта этих файлов. Однако вам может потребоваться скопировать любые SCSS-функции/миксины, если они нужны для ваших настроек (например, discourse-air/scss/sidebar-desktop.scss at main · discourse/discourse-air · GitHub)

   Подробнее о темах: Developing Discourse Themes & Theme Components

3. Как сказал Фалько, по умолчанию, если вы следуете стандартной установке, Docker всегда запускается после перезагрузки. Нет никаких инструкций по поиску, так как это поведение по умолчанию. Можете ли вы подтвердить, что ваш форум не запускался после перезагрузки?

4. Сначала проверьте, всё ли отображается правильно в безопасном режиме? Просто чтобы убедиться, что это не связано с какими-либо настройками. Это будет первым шагом в выяснении проблемы.

[Question42]

Спасибо за ответ. По поводу пункта 4 я предполагаю, что это проблема с CSS или что-то в этом роде, поэтому не уверен, как добавить отступ, чтобы мобильная версия не выглядела плохо. Даже с включенным безопасным режимом это происходит (при снятом флажке первого варианта).

Что касается пункта 1, это может быть не столько «проблемами конфиденциальности», но я просто не хочу, чтобы где-либо упоминались социальные сети.

Пункт 2: А, понятно, интересно… Я делал это с помощью компонента, который редактировал около 5 часов назад, но не знал, что так работают темы. Попробую это прямо сейчас.

Хм… мой Docker не запустился автоматически после перезагрузки моего VPS, странно.

[thoka (Thomas Kalka)]

@Question42

Привет, не хотел спамить форум несколькими темами, поэтому у меня здесь 4 основных вопроса как у нового пользователя/участника форума Discourse:

Хм. Если больше людей пойдут по этому пути, форум будет завален спамом с непригодными заголовками тем.

[JammyDodger]

Будет лучше, @Question42, если вы создадите отдельную тему для каждой проблемы. Это не только сделает заголовки тем более релевантными, но и облегчит людям участие в обсуждении, а также сделает их гораздо более понятными для тех, кто в будущем будет искать похожие вопросы.

[Question42]

Второй комментарий по пункту №2, быстро:
Итак, я сделал форк темы Air, внес свои изменения, загрузил её в свой репозиторий и установил через ссылку на GitHub в разделе «Темы» панели администратора… но теперь я не могу получить доступ к CSS/HTML, так как тема теперь не локальная. Как мне обойти это? Или мне обязательно нужно использовать компонентный подход, о котором вы упоминали?

Неужели нет способа редактировать локальные CSS/HTML при использовании импортированной темы с GitHub? Потому что хотя бы локально я мог легко редактировать CSS/HTML в панели администратора, просто не мог сделать @import. Но теперь я сделал то удалённое решение, о котором вы говорили, и не могу редактировать тему, чтобы добавить код @import, а ведь именно для этого всё и затевалось.

[bryce (Bryce Huhtala)]

Касательно #4:
Попробуйте добавить отступ сверху для класса .list-controls.

// в мобильном CSS
.list-controls {
  margin-top: 1rem;
}

[Question42]

Итак, единственное упоминание .list-controls в моём файле mobile.scss находится здесь:

.categories-list .list-controls {
  background: var(--secondary);
  padding: 0.5em;
  border-radius: 8px;
}

.list-controls .nav-pills {
  li.navigation-toggle {
    border-radius: 8px;
    border: none;
    background-color: var(--secondary);
    a:hover,
    a:focus {
      color: var(--primary);
      background-color: var(--secondary);
    }
  }

Куда именно мне следует вставить ваш код?

[bryce (Bryce Huhtala)]

Вы можете разместить это внутри первого селектора.
Или другой вариант — эту часть:

.list-controls .nav-pills {
  li.navigation-toggle {
    border-radius: 8px;
    border: none;
    background-color: var(--secondary);
    a:hover,
    a:focus {
      color: var(--primary);
      background-color: var(--secondary);
    }
  }
}

Можно переписать так:

.list-controls {
  
  .nav-pills {
    li.navigation-toggle {
      border-radius: 8px;
      border: none;
      background-color: var(--secondary);
      a:hover,
      a:focus {
        color: var(--primary);
        background-color: var(--secondary);
      }
    }
  }
}

Тогда вы сможете добавить новые объявления, которые будут влиять только на .list-controls, перед частью .nav-pills.

[Question42]

Значит, я могу добавить

.list-controls {
  margin-top: 1rem;
}

чтобы всё выглядело так:

.list-controls {
  margin-top: 1rem;
  
  .nav-pills {
    li.navigation-toggle {
      border-radius: 8px;
      border: none;
      background-color: var(--secondary);
      a:hover,
      a:focus {
        color: var(--primary);
        background-color: var(--secondary);
      }
    }
  }
}

?

[bryce (Bryce Huhtala)]

Верно! Хотя, похоже, в конце не хватает ещё одной }.

[Question42]

Итак, вот что у меня получается на мобильном устройстве:

К сожалению, из-за этого панель «Топ/Ответ/Активность» больше не прилегает к постам, а вкладка «Последние» теперь упирается в самый верх. Можно ли каким-то образом сделать так, чтобы область «Топ/Ответ/Активность» по-прежнему прилегала к области постов, но выпадающий список «Последние» не касался верхней панели?

Хотя это и было следствием сбоя, область «Последние» хорошо смотрелась, будучи объединённой с областью темы, как показано на оригинальном скриншоте:

РЕДАКТИРОВАНИЕ: О боже… попросил друга проверить сайт на его телефоне (iPhone 13), и теперь сайт выглядит на его телефоне испорченным, лол… эмм Но на моём телефоне всё выглядит «нормально» (скриншот выше, без тех исправлений, которые я хочу). Похоже, обычный мобильный вид на его телефоне в порядке, но режим «для ПК» на телефоне делает всё запутанным.

[bryce (Bryce Huhtala)]

Хм, сложно сказать, какие ещё стили влияют на вашу тему. Если вы ещё не смотрели, рекомендую ознакомиться с этим руководством, особенно с разделами, где показано использование инспектора браузера (в инструментах разработчика — открывается через F12 в Chrome). Это позволяет увидеть, какие стили применяются к каждому элементу, и включать или отключать их, чтобы в реальном времени наблюдать разницу.

Так как проблема связана с мобильным видом, вы можете эмулировать мобильное устройство на своём компьютере из большинства браузеров. Вот как выглядит эта кнопка в Chrome:

[Firepup650 (Firepup Sixfifty)]

@Question42

Режим рабочего стола на телефоне делает всё запутанным

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