Продвинутый компонент героя

:information_source: Краткое описание Создавайте впечатляющие настраиваемые Hero-секции с расширенными инструментами стилизации — идеально для сообществ разработчиков и форумов по программированию.
:eyeglasses: Предпросмотр https://vibecommit.dev/
:hammer_and_wrench: Репозиторий GitHub - thebestgoodguy/vibecommit-hero: Discourse Hero Component · GitHub
:question: Инструкция по установке Как установить тему или компонент темы
:open_book: Новичок в темах Discourse? Руководство для начинающих по использованию тем Discourse

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

Мощный компонент темы Discourse, создающий впечатляющие настраиваемые Hero-секции с расширенными инструментами стилизации — идеально для сообществ разработчиков и форумов по программированию.

Компонент темы сообщества Vibe Coders — полный набор инструментов для кастомизации

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

:artist_palette: Настройка Hero-секции

  • Настраиваемые параметры темы: Полный контроль над внешним видом Hero-секции с помощью специализированных опций кастомизации темы
  • Управление текстом Hero-секции: Настраиваемый основной заголовок и описание с поддержкой расширенного форматирования
  • Интеграция призывов к действию (CTA): Встроенные кнопки CTA с возможностью настройки текста, стиля и целевых ссылок
  • Адаптивный дизайн: Автоматическая адаптация макета Hero-секции для просмотра на настольных компьютерах, планшетах и мобильных устройствах

:framed_picture: Опции визуальной кастомизации

  • Управление фоном: Поддержка пользовательских фоновых изображений или сплошных цветов с эффектами наложения
  • Управление цветовой палитрой: Комплексные настройки цветовой схемы, включая основные, второстепенные и акцентные цвета

:gear: Расширенные функции стилизации

  • Градиентные наложения: Множество вариантов градиентных цветов для улучшения визуальной привлекательности
  • Эффекты анимации: Плавные анимации появления и эффекты при наведении для интерактивных элементов
  • Интеграция иконок: Поддержка пользовательских иконок внутри Hero-секции

:mobile_phone: Оптимизация для мобильных устройств

  • Интерфейс, удобный для сенсорного ввода: Оптимизированные размеры кнопок и отступы для взаимодействия на мобильных устройствах
  • Прогрессивная загрузка: Быстрая загрузка благодаря оптимизированному сжатию изображений и ленивой загрузке
  • Адаптивная типографика: Автоматическое масштабирование шрифтов для оптимальной читаемости на всех устройствах
  • Дизайн, ориентированный на мобильные устройства: Разработан с приоритетом на мобильный опыт

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

12 лайков

Похоже, вы использовали в качестве примера versatile banner. В этом нет ничего плохого в целом, но, например, вы оставили все переведённые файлы локализации без изменений. Хотя вы кастомизировали английские файлы, изменив, например, «banner» на «hero banner», вы не сделали то же самое для переведённых файлов. Не поймите меня неправильно: я не ожидаю, что вы переведёте свой компонент, но важно удалять устаревшие переводы. Если нет немецкого перевода, я увижу английский текст в том виде, в котором вы его написали. Но если вы оставите перевод без изменений, я увижу устаревший немецкий текст. Обычно устаревшие тексты сбивают с толку больше, чем английский текст.

На вашем месте я бы удалил все эти файлы переводов и оставил только en.yml.

Вы также всё ещё используете ссылку на versatile banner как about_url в about.json, а license_url не ведёт на ваш репозиторий.

7 лайков

Вы правы. Что касается базовой структуры, я использовал универсальный баннер и добавил к нему дополнительные функции. Я внес необходимые изменения и добавил информацию о форке в файл README. Спасибо за ваши предупреждения.

7 лайков

11 сообщений были перенесены в новую тему: Ошибка 500 при установке компонента Advanced Hero

Значит, нет способа убрать черный градиент? Я просто хочу показать изображение без черного полупрозрачного слоя поверх. Мне удалось заставить это работать, но пришлось скачать CSS и снова загрузить его в Git. Хотя это должно быть опцией в компоненте.

Переключатель изображений для дневного/ночного режима тоже не работает и ничего не делает: он позволяет загрузить изображения для дневного и ночного режимов, но не переключает между ними.

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