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

Новая таксономия

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

Обычно в блогах категории являются иерархичными таксономиями, а теги - плоскими. То есть у категорий, есть так называемая вложенность - когда одна категория может быть родительской для другой категории, которая в свою очередь будет дочерней. Теги ли метки такой вложенности не имеют. Такую структуру в свое время предложили создатели CMS WordPress. Кому-то она действительно нужна. Но относительно современные CMS, например, Ghost, предлагает своим пользователям только теги в качестве организации контента. Ну, еще есть таксономия «автор». И тоже плоская.

Я решил не создавать на этом блоге никаких категорий, поскольку создать для них вложенность на уровне кода, наверное, было бы крайне сложно. Да и на блогах, как правило, в современном мире, такое уже не требуется. Собственно как и сами блоги в виде отдельных сайтов, уходят в прошлое. (Зачем я только все это делаю 😂). Но одна мысль занимала мой мозг и никак не отпускала.

Я хотел поделиться с людьми своим опытом размещения статичного сайта на Sveltekit в Яндекс Облаке. Но когда начал писать статью, понял, что невозможно уложиться ни только в одну статью, но и в две не уложиться. Нужно было как-то эти статьи объединить. Выход, конечно, создать тег, например, «яндекс облако». Но проблема для меня была в том, что статей по теме размещения сайта на Sveltekit в Yandex Cloud может быть ограниченное количество, а статей в целом на тему «яндекс облака» может быть гораздо больше. Кроме того, хотелось создать навигацию по статьям одной темы, чтобы было удобно следить за всеми статьями.

Так и появилась у меня в блоге новая таксономия под названием «Серия». Статьи в первой серии Статический сайт SvelteKit на Yandex Cloud уже публикуются. По своей сути, серия - это такой же тег, только узкотематической и прикладной направленности, а также ограниченный количеством статей внутри. У каждой серии есть своя страница в блоге, где удобно прыгать по разным статьям внутри серии.

Кроме того я сделал специальный виджет содержания серии, который автоматически встает в начале статьи. В этом виджете в хронологическом порядке перечисляются названия статей со ссылками на них. Посетителям будет сразу понятно, что данная статья не какой-то отдельный материал на заданную тему, а часть чего-то более обширного. Идею с таким виджетом я подсмотрел на сайте dev.to. Мне такое решение показалась очень удобным.

Содержание статьи

Оглавление статьи, которое часто встречается на многих блогах, дает удобный доступ к разным частям длинного поста. Как правило содержание генерируется автоматически при помощи скрипта, который выхватывает заголовки из тела статьи. Для блогов, статьи которых генерируются из markdown-файлов, существуют плагины, вроде rehype-toc.

Моя основная сложность заключалась в том, что я хотел, чтобы содержание вставало не автоматически в начале статьи, а в нужном мне месте. Я нашел подходящий плагин от @atomictech, который создал форк известного плагина от JS-DevTools. Он позволяет в настройках прописать так называемый placeholder - ключевое слово, которое будет заменяться на содержание. К примеру, в этой статье, в ее md-файле, после первого абзаца я написал слово «TOC». И вместо него плагин вставил содержание статьи.

Поскольку содержание статьи статично находится в ее начале, и при скролле оно пропадает из видимости, хорошим тоном считается как-нибудь закрепить его на странице, чтобы к нему был доступ при любой прокрутке. Подсмотрел решение на блоге Joy of Code и немного его видоизменил. Суть в том, что если в статье есть TOC, то когда пользователь скроллит страницу и оглавление внутри статьи скрывается из области видимости, появляется кнопка с тем же оглавлением в правом нижнем углу экрана. При нажатии на него, появляется окошко с содержанием статьи. Таким образом у читателя всегда есть возможность посмотреть, что там еще находится в статье.

Лайтбокс для картинок

Пустяковое по сути дело. Не везде используется, но мне нравится когда лайтбокс для картинок в статьях ненавязчивый. Ты нажимаешь на картинку, она подскакивает над всем контентом, который в свою очередь скрывается под фоном, а чтобы картинка вернулась на свое место, а контент вновь появился не нужно нажимать ни на какие «крестики». Достаточно просто продолжить прокрутку. Работает это и на компьютерах и на сенсорных девайсах.

Отлично справляется с такой задачей плагин Lightense. Он очень мало весит и чрезвычайно легко настраивается.

$lib/components/Image.svelte
<script>
    import Lightense from 'lightense-images'
    import { onMount } from 'svelte';

    onMount(() => {
        Lightense('.main-content img',
            {
                background: 'var(--color-bg-o)',
            }
        )
    })
</script>

    ...

У плагина есть ряд настроек - цвет фона, отступы, управление с клавиатуры, анимации и так далее. Но все по минимуму, что мне и нужно было. Создание лайтбокс-галерей из всех картинок в статье с дополнительными возможностями оставим другим проектам. На этом сайте такой простоты и удобства, что дает Lightense, вполне достаточно.

Фильтр в портфолио

Для удобства тех, кому возможно интересно просматривать мои работы, сделал фильтр. Он использует пока два параметра - «Категория» и «Годы». Работает на JS, ничего из последнего выбора не запоминает, URL-страницы не меняет. Просто минимум кода и максимум функций. Адекватно работает с подгрузочно-кнопочной пагинацией.

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

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