Я вижу, что уже были темы о добавлении кнопки «Назад» для мобильных браузеров, но я не нашёл решения, хотя, возможно, упустил его 
Я не программист и недостаточно хорошо разбираюсь в Discourse, чтобы что-то сломать 
, но всё же с помощью ChatGPT смог сделать работающую синюю кнопку «Назад», как на этом фото с моей собакой.
Хочу скрывать эту кнопку на определённых страницах, но пока не разобрался, как скрывать элементы. Если кто-то знает, как это сделать, я обновлю и дополню инструкцию.
Как добавить плавающую кнопку «Назад» в Discourse (для мобильных пользователей)
Это руководство поможет вам добавить плавающую кнопку «Назад» для мобильных устройств в вашем форуме Discourse. Она будет отображаться только на мобильных устройствах и улучшит навигацию для приложений или браузеров, в которых отсутствует встроенная кнопка «Назад».
Шаг 1: Создание нового компонента темы
- Войдите как администратор:
- Перейдите на свой форум Discourse и войдите под учётной записью администратора.
- Откройте настройки темы:
- Перейдите в раздел
Администрирование > Настройка > Темы.
- Создайте компонент темы:
- Нажмите Компоненты.
- Нажмите Установить > Создать новый.
- Назовите компонент «Мобильная кнопка Назад» и нажмите Создать.
Шаг 2: Добавление кода кнопки «Назад»
- Отредактируйте компонент темы:
- Нажмите на только что созданный компонент темы.
- Перейдите в раздел CSS/HTML.
- Добавьте JavaScript для кнопки «Назад»:
- Переключитесь на вкладку Mobile.
- Нажмите на секцию
</head>. - Вставьте следующий код:
html
Copy code
<script type="text/discourse-plugin" version="0.8">
function addMobileBackButton() {
const isMobileView = api.container.lookup('site:main').mobileView;
if (isMobileView) {
const existingButton = document.querySelector('.floating-back-button');
if (!existingButton) {
const backButton = document.createElement('button');
backButton.className = 'floating-back-button';
backButton.innerHTML = '←'; // Unicode для стрелки влево
backButton.onclick = (event) => {
event.preventDefault();
window.history.back();
};
document.body.appendChild(backButton);
}
}
}
// Добавляем кнопку при первоначальной загрузке страницы
document.addEventListener('DOMContentLoaded', addMobileBackButton);
// Проверяем снова при переходах между страницами
api.onPageChange(addMobileBackButton);
</script>
Шаг 3: Добавление CSS для стилизации
- Добавьте стили для кнопки «Назад»:
- На вкладке Mobile откройте секцию CSS.
- Вставьте следующий CSS:
css
Copy code
.floating-back-button {
position: fixed;
bottom: 20px;
left: 20px;
width: 50px;
height: 50px;
border-radius: 50%;
background-color: #0088cc; /* Измените цвет при необходимости */
color: #fff;
border: none;
font-size: 24px;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
z-index: 1000;
cursor: pointer;
}
Шаг 4: Применение компонента темы
- Вернитесь к настройкам тем:
- Перейдите обратно в раздел
Администрирование > Настройка > Темы.
- Отредактируйте активную тему:
- Нажмите на вашу активную тему.
- В разделе Компоненты темы выберите из выпадающего списка компонент «Мобильная кнопка Назад».
- Нажмите Добавить, а затем Сохранить.
Шаг 5: Проверка изменений
- Откройте форум на мобильном устройстве:
- Используйте мобильный браузер или эмулируйте мобильный вид через инструменты разработчика.
- Проверьте работу кнопки «Назад»:
- Кнопка должна появиться в левом нижнем углу экрана.
- При нажатии на неё должно происходить перемещение назад по истории браузера.
Примечания:
- Только для мобильных устройств: Поскольку код и CSS находятся на вкладке Mobile, кнопка будет отображаться только на мобильных устройствах.
- Настройка внешнего вида:
- Вы можете изменить положение, размер или цвет кнопки в CSS, чтобы она соответствовала дизайну вашего форума.
- Функциональность:
- Кнопка «Назад» использует
window.history.back(). Если предыдущей страницы нет, переход не будет выполнен.
- Кнопка «Назад» использует
