Как я пилю сайт в сайте. Часть 1. Высунув язык...
Усач-ногач, граждане и гражданки!
Как обычно, хотел до последнего хранить в секрете то, что делаю, но - отчасти благодаря своему раздолбайству, отчасти благодаря содействию некоторых личностей - вся секретность пошла в одно место. Так что я решил рассказать по секрету всему свету о том, что делаю. Как водится - подробно, интересно и простым (не всегда правда) языком.
Уже давно мне приходила в голову такая мысля, что на голосе контент никак не систематизирован. Чтобы найти нужный пост полугодовой давности, нужно либо вспомнить ник автора, зайти в его блог и листать вниз, вниз и ещё раз вниз до посинения, либо попытаться вспомнить его название, вбить в поисковик и снова листать. Причём в последнем случае не факт, что найдётся, ибо не факт, что вы вспомнили название верно.
В общем, безобразие всё энто. Поначалу я вообще понятия не имел, что с этим делать, поэтому ограничивался выпуском постов-каталогов со своими статьями. Но вот, относительно недавно, разрабы сделали замечательную вещь - позволили редактировать посты любой давности. И понеслось...
Пришла мне в голову идея - сделать мини-сайт, написав несколько системных постов, имитирующих страницы сайта, и связав их ссылками. А чем не сайт, реально? Древо есть, система есть, любую страницу можно произвольно менять в любое время. Каеф!
Долго думал, как же всё это организовать, чтобы было аккуратно, красиво и привлекательно. В конце концов решил подогнать под свой проект "Фантастические создания". Почему именно так? Ну, во-первых, чтобы было громкое название. Потому что "каталог постов @ivprst" - ну не звучит как-то. А во-вторых - именно тема этой рубрики пропитала мой блог до мозга костей, в последние четыре месяца я большей частью на эту тему посты и пишу.
Задумка такая. Во главе системы, аки дуб над травой муравой, находится главная страница. Ссылки с неё ведут на технические посты-страницы второго порядка, представляющие собой списки тематических постов со ссылками, либо же переходные страницы со ссылками на страницы третьего порядка со списками постов... Немного сумбурное и непонятно описание, но вы меня авось небось да как-нибудь поняли.
Для технических постов сделал два твинка - @fantasticbeasts и @fb200000000. Потому что не хотелось свой уникальный и содержательный блог засирать техническими постами: как справедливо заметил @media, содержимого в этой галиматье меньше, чем в кокаине (вот понятия не имею, как он это узнал, видимо, реально знал то, с чем сравнивал)... Впрочем, мы отвлекаемся от основной темы поста.
Главную страницу своего мини-сайта решил сделать ВОТ ТАКОЙ. Красиво же, правда? Со ссылками довольно долго мучался. Хотелось выставить их в виде картинок в два ряда, а они не ставились. В конце концов решил позаимствовать макет вот этого изображения-ссылки у @chaos.legion:
Вот её код:
<div
class="pull-right">
<a
href="https://golos.io/@chaos.legion"
rel="noopener">
<img
src="https://imgp.golos.io/400x222/https://i.imgur.com/jBolnTw.jpg">
</a>
</div>
Изменив значение "pull-right" на "pull-left" в параметре class тега div, сдвинул половину изображений вправо. Встало прям-таки замечательно.
Были некоторые проблемы с теми ссылками, которые хотелось поставить по центру, потому что значение "pull-center" явно не существует, т. к. клиент на него никак не реагирует. Немного помучившись, поместил всё это в тег center. Как оказалось позже, это было не самым удачным решением, но это потом... А пока что я с удовлетворённой физиономией и лёгким сердцем запостил эту главную страницу.
Потом сделал аналогичным образом страницы для насекомых, млекопитающих, птиц и рептилий. В первом случае пришлось оформлять пост так же, как и главную страницу - ведь насекомых пипец, как много. Страницы под птиц, рептилий и млекопитающих пока забацал просто в виде заготовок для списка постов. На эти страницы вы можете самостоятельно пройти с главной и увидеть, как там всё устроено.
К тому моменту я уже порядком устал и решил чуть-чуть поменять вектор деятельности. Занялся форматированием свой основной материал - собственно посты из рубрики "фантастические создания". Это оказалось довольно геморно - постов-то у меня дофига, и каждый из них пришлось обрабатывать отдельно. Нужно было более-менее унифицировать заголовки и вставить ссылки на главную страницу. Особенные проблемы были с первыми постами, так как публиковал я их с аккаунта @ivprstvox, пароль от которого уже немножко забыл. Но и с этим в конечном итоге удалось успешно справиться.
Проделав всё это, я окончательно выдохся и пошёл отдыхать. А когда вернулся...
Нет, кита @media я упомянул не просто так. Его флаг под одним из постов поначалу оказался очень неприятным сюрпризом, но в конечном итоге сыграл положительную роль, вызвав специфическую цепочку случайных событий.
Однако, об этом всём - в следующем посте.
Всего самого лучшего!
С уважением, @ivprstъ.