Простой адаптивный подвал

[Discourse]

	Краткое описание	Easy Responsive Footer позволит вам создать полностью адаптивный подвал, используя только обычный текст.
	Предпросмотр	Предпросмотр в конструкторе тем Discourse
	Ссылка на репозиторий	https://github.com/discourse/Discourse-easy-footer
	Новичок в темах Discourse?	Руководство для начинающих по использованию тем Discourse

Установить этот компонент темы

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

 Поддержка  Баг  UX  Функция

Возможности

Рабочий стол

Мобильное устройство

Настройки

Имя	Описание
heading	Текст заголовка в подвале — например, можно использовать название вашего сайта — Максимальная длина 25 символов
blurb	Введите короткое описание вашего сообщества — Максимальная длина 180 символов
sections	Секции, которые будут отображаться в подвале
small links	Маленькие ссылки в нижней части подвала, такие как Условия использования и Политика конфиденциальности
social links	Социальные ссылки, которые вы хотите добавить в подвал
show footer on login required page	Установите этот параметр, если хотите, чтобы подвал отображался на странице, требующей входа (применяется только если ваш сайт приватный)
svg icons	Список иконок FontAwesome 7, используемых в настройке социальных ссылок выше.

В этом компоненте есть шесть настроек, которые помогут легко его настроить

1. Заголовок

Текст заголовка в подвале — например, можно использовать название вашего сайта — Максимальная длина 25 символов

2. Описание

Короткое описание вашего сообщества — Максимальная длина 180 символов

3. Секции ссылок

Добавьте секции ссылок. Идеальное количество секций — шесть. Один элемент в строке в следующем порядке: Текст, заголовок
Текст: то, что отображается в подвале
Заголовок: текст, который появляется при наведении на элемент.

4. Ссылки

Добавьте ссылки в секции ссылок. Один элемент в строке в следующем порядке:
Родитель, текст, URL, цель, заголовок
Рекомендуется, чтобы количество ссылок в каждой секции было примерно одинаковым
Родитель: имя родительской секции, под которой отображается эта ссылка. Используйте значение text из списка выше
Текст: текст, отображаемый для этой ссылки
URL: путь, по которому ведет ссылка. Можно использовать относительные пути.
Цель: выберите, откроется ли ссылка в новой вкладке или в той же. Используйте blank для открытия в новой вкладке или self для открытия в той же.
Заголовок: текст, который появляется при наведении на ссылку.

5. Маленькие ссылки

Вы можете добавить маленькие ссылки в нижней части подвала, такие как Условия использования и Политика конфиденциальности. Один элемент в строке в следующем порядке:
Текст, URL, цель
Текст: текст, отображаемый для маленькой ссылки
URL: путь ссылки
Цель: используйте blank для открытия ссылки в новой вкладке или self для открытия в той же

6. Социальные ссылки

Введите социальные ссылки, которые вы хотите добавить в подвал, в следующем формате:
провайдер, заголовок, URL, цель
Провайдер: название провайдера, например Facebook или Twitter
Заголовок: текст, который появляется при наведении на ссылку
URL: путь, который должна иметь ссылка
Цель: используйте blank для открытия ссылки в новой вкладке или self для открытия в той же

Примечания

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

2. Этот компонент будет использовать цветовую схему вашей темы для генерации цветов, используемых для элементов в нем. Однако все элементы имеют уникальные классы, добавленные к ним, на случай, если вы захотите что-то переопределить.

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

Размещено нами? Компоненты тем доступны для использования в наших тарифных планах Pro, Business и Enterprise.

[Johani (Joe)]

Я внес несколько исправлений.

Ключевые изменения:

• компонент теперь использует CSS-переменные, поэтому он совместим с тёмной темой

• исправления в медиа-запросах для устранения ошибки, о которой сообщил @mbauman

• добавлена настройка, позволяющая контролировать отображение подвала на страницах, требующих авторизации

  

Easy Footer v2.3 (#7)

@rolando

Я сделал .wrap шире (1200px) с помощью медиа-запросов, чтобы после определённого разрешения форум становился шире. Если я включаю адаптивный подвал, .wrap становится уже (1100px), но это касается только «части доски», а не .d-header .wrap и не .footer, которые остаются шириной 1200px. Как только я отключаю адаптивный подвал, всё снова выглядит шире (1200px), как и должно быть.

Причина этого кроется в специфичности CSS. Ваш CSS-селектор .wrap работает, но этот компонент также содержит CSS-правила, которые применяются к #main-outlet и добавляют свойства, чтобы удерживать подвал внизу даже на коротких страницах.

Discourse-easy-footer/common/common.scss at main · discourse/Discourse-easy-footer · GitHub

Селектор #main-outlet имеет более высокую специфичность, чем ваш селектор .wrap, поскольку он основан на идентификаторе, поэтому он переопределяет ваши стили.

Вы можете исправить это, добавив следующий CSS:

#main {
  #main-outlet {
    width: 1200px; // или любая другая желаемая ширина
  }
}

@Edward_Legaspi

Здравствуйте. Есть ли способ ограничить количество колонок подвала тремя?

Конечно, удалите все лишние колонки, которые вам не нужны, в настройках, и у вас останется три колонки.

@PoojaPatel

После обновления в консоли Chrome появляется ошибка, как указано ниже.

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

---

Я немного привёл всё в порядок и удалил ответы на ошибки, которые будут исправлены после обновления компонента. Если ваша проблема не исчезнет, не стесняйтесь написать о ней снова.

[dadberg (Interstellar)]

Интересно, можно ли заменить заголовок (This is a header) внутри компонента темы [Easy Footer Theme Component by Joe] на логотип.

Я пытался экспортировать компонент, чтобы изменить файлы hbs, но у меня не получилось. Думаю, мне нужны какие-то подсказки.

Буду очень признателен за любые советы

[dax (Daniela)]

В зависимости от того, что вы хотите сделать, можно просто попробовать что-то вроде этого:

• в настройках темы «Easy responsive footer» удалите текст внутри параметра Blurb. При желании можно удалить даже текст внутри параметра Heading.

• создайте новый компонент темы и добавьте его во вкладку Common > CSS

  .custom-footer .first-box .blurb::before {
      background-image: url(LOGO-URL);
      background-repeat: no-repeat;
      display: inline-block;
      content: "";
      /*измените настройки ниже в зависимости от размера вашего логотипа*/
      background-size: 200px 200px;
      width: 200px;
      height: 200px;
  }
  

и результат будет примерно таким:

[dadberg (Interstellar)]

Решено!

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

[Jcava5 (John)]

Должна быть возможность настроить цвета фона и текста с помощью CSS. По умолчанию они не сочетаются с заголовком.

В остальном всё отлично! Спасибо!

[thaidb]

Привет, Джо, можем ли мы добавить еще один виджет здесь?

[b481]

Это привело к тому, что логотип отображается в псевдоэлементе blurb::before в результатах поиска, даже после того, как я указал это в компоненте

div.below-footer-outlet.custom-footer.ember-view > div.wrap > div.flexbox > div.first-box > .blurb::before {
    background-image: url(image url);
}

Есть ли способ убедиться, что он не появляется в результатах поиска, но при этом отображается в подвале?

[littleviolette]

Спасибо за отличный подвал! У меня возникла проблема с отображением логотипа TikTok из Font Awesome. Я пробовал добавлять fab-tiktok, fa-tiktok, fas-tiktok, tiktok в настройки SVG-икон, но ни один из них не отображает логотип TikTok.

Спасибо за вашу помощь!

[bekircem]

Я хочу изменить ограничение в 25 символов для заголовка. Я буду размещать заголовок с помощью CSS. Как проще всего это сделать?

[keegan (Keegan George)]

@bekircem
Превышение лимита символов может нарушить работу некоторых элементов, но вы можете попробовать следующее:

.custom-footer .first-box .heading {
   visibility: hidden;
}

.custom-footer .first-box .heading::after {
   content: "This is something that is longer than 25 characters";
   visibility: visible;
   display: block;
}

Однако использование visibility: hidden всё равно сохранит пробелы. В зависимости от размера вашего заголовка вы можете попробовать такой вариант:

.custom-footer .first-box .heading {
   visibility: hidden;
   position: relative; 
}

.custom-footer .first-box .heading::after {
   content: "This is something that is longer than 25 characters";
   visibility: visible;
   display: block;
   position: absolute;
   top: 0;
}

[bekircem]

Возможно ли добавлять текст в секции ссылок без атрибута href?

[IAmGav (Gavin Perch)]

Просто добавьте # там, где должна быть ссылка

[bekircem]

В данном случае ссылка всё ещё отображается как кликабельная. Можно ли добавить её без использования тега ?

[Johani (Joe)]

@bekircem

Можно ли добавить что-то, не получая тег a?

Вы можете добавить этот CSS в свою тему в любое место

.custom-footer a[href="#"] {
  pointer-events: none;
}

[pfaffman (Jay Pfaffman)]

Я отправил это:

Fix: add pluginId to modifyClass (#12)

Это должно исправить устаревание из-за отсутствующего плагинId. Я не тестировал это, но мне всё выглядит правильно.

РЕДАКТИРОВАНИЕ: Но это совсем не так.

[umbergerba (B.A. Umberger)]

К сведению, ОШИБКА >>> Если я добавляю следующее … «Сообщество, Список тегов, /tags, self, Список всех тегов» … на фронтенде отображается горизонтальная линия. Если я удалю [пробел] между «Список тегов» и изменю его на «СписокТегов», горизонтальная линия исчезнет.

[mkschulze (M. Schulze)]

Здравствуйте, у меня две проблемы с социальными ссылками и иконками Fontawesome.

1. Я пытаюсь настроить другие иконки Fontawesome 5 в разделе «Социальные сети», но они не отображаются.
   Я хочу использовать <i class="fad fa-home"></i>.

2. Я настроил ссылку на GitHub, и иконка уже отображается на странице, хотя я на самом деле не добавил эту иконку в список svg-икон.

РЕДАКТИРОВАНИЕ: решил проблему, просто используя название иконки “home”

[AquaL1te]

При использовании этого компонента темы на моем телефоне ширина не устанавливается равной ширине экрана. Ширина растягивается почти до размера монитора настольного компьютера.

Тестирование можно выполнить здесь: https://forum.tzm.community/

Убедитесь, что вы открыли страницу на телефоне (или используйте опцию отладки в вашем браузере; в Firefox вы можете воспроизвести ошибку, используя профиль Galaxy Note 20 для Linux).

[dax (Daniela)]

Компонент исправлен. Вам необходимо его обновить.