Блоги: заметки с тегом Блог

Требуется помощь кодера

Александр Токарев — Wed, 11 Jun 2025 03:31:20 +0500

Вы веб-кодер? Вас-то мне и нужно! Мне требуется прикрутить к блогу нормальные спойлеры: они периодически бывают нужны, а в движке «Эгея» соответствующего функционала нет и, насколько я понимаю, никогда не будет. Как должен выглядеть толковый, правильный спойлер, я уже знаю: нашёл его в одном новостном издании, и этот дизайн мне кажется превосходным. Задача в том, чтобы написать для него правильный HTML, CSS и JavaScript.

Поскольку я не кодер и не умею писать скрипты, я попробовал пообщаться на эту тему с чатботом GPT-4o mini, объяснил ему задачу и попросил написать код. Он это сделал, но результат получился кривым и неполным. Сколько я ни объяснял и сколько не указывал на ошибки — всё, как об стенку горох, он так ничего и не исправил; лишь снова и снова предлагал мне те же самые неработающие варианты, в чём сам и признался в конце концов.

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

Техзадание

Мне нужен спойлер со следующим поведением:

1) спойлер разворачивается при нажатии на длинную кнопку, на которой находится произвольный текст (его я буду менять в зависимости от контекста) и стрелочка вниз. До и после спойлера — горизонтальная линия.
2) после нажатия на кнопку под ней разворачивается содержимое спойлера. Текст на кнопке меняется на «Свернуть»; стрелочка вниз меняется на стрелочку вверх. (Сейчас стрелки после нажатия кнопки не отображаются.)
3) при повторном нажатии на кнопку спойлер сворачивается, а текст на кнопке и стрелочка возвращаются в исходное состояние (т. е. меняются на исходный текст + стрелочку вниз).
4) спойлер должен быть адаптивным: на десктопах кнопка должна находиться ДО содержимого спойлера, а на смартфонах — ПОСЛЕ содержимого спойлера. (Сейчас этого не происходит: кнопка всё время сверху.)

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

Спойлер, который требуется доработать

Подпись к картинке

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

Эгея Power-Ups

Bohdan Stefaniuk — Mon, 25 Nov 2019 19:30:51 +0500

Bohdan Stefaniuk:

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

Список улучшений

Кнопка «подробнее» или кат внутри заметок
Заметки на полях
Хайлайты
Мини галерея

Кнопка «подробнее» или кат

Когда пишешь статью и у тебя много исходников, удобно их скрыть под кат, чтобы они не увеличивали размер статьи не отвлекали от текста. Для этого добавил поддержку катов внутри заметок. Для этого нужно сделать 2 вещи:

Пометить текст, который будет выступать в качестве кнопки: .cut-button Название кнопки.
Следующим элементов разместить блок div с классом cut-content и в него поместить нужный контент для скрытия.

Как это выглядит в коде:

.cut-button Два лучших вопроса для собеседования
<div class="cut-content">
Как бы вы описали идеального кандидата на эту должность?
Как вы будете судить, хорош ли я в том, что потребуется от меня через 1-3 месяца?
</div>

Как это работает

Два лучших вопроса для собеседования

Как бы вы описали идеального кандидата на эту должность?
Как вы будете судить, хорош ли я в том, что потребуется от меня через 1-3 месяца?

Стилизация в виде карточке

Если необходимо выделить какой-то блок текста в заметке можно использовать хайлайты. Для этого достаточно обернуть текст, который хотите выделить в div с классом highlight.

Как выглядит в коде:

<div class="highlight">
Как бы вы описали идеального кандидата на эту должность?
Как вы будете судить, хорош ли я в том, что потребуется от меня через 1-3 месяца?
</div>

Как работает

Заметки на полях

Блог с реализацией заметок: http://mopsicus.ru.

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

Как выглядит в коде:

.note Блог с реализацией заметок:  ((http://mopsicus.ru/all/aegea-field-notes/ http://mopsicus.ru)).
.note-md Блог с реализацией заметок: ((http://mopsicus.ru/all/aegea-field-notes/ http://mopsicus.ru)).

Как выглядит на мобиле:

Во всю ширину экрана.

Обтекаемый текст.

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

Как выглядит в коде:

<div class="card-gallery card-gallery-4">
    <!-- Список ссылок на изображения -->
</div>

<div class="card-gallery card-gallery-3">
    <!-- Список ссылок на изображения -->
</div>

Как выглядит на страницу

Где скачать?

Все исходники выложил на github. Там же вы найдете инструкцию по установке.

PS

Если у вас есть предложения, оставляйте их в комментариях, а лучше в issue на github-е. Как будет время, займусь реализацией предложений.