Ghost: оформление постов

Так как я уже накропал некоторое количество постов в Ghost, наверное, пришло время поделиться полученными навыками. Да и закрепить материал не помешает. Итак, при наборе текста в Ghost используется специальный язык разметки Markdown. Я не буду сейчас рассказывать обо всех правилах использования этого средства конкретно в Ghost - о них достаточно хорошо рассказано в документации. Но некоторые хитрости я приведу.

Одно из правил Markdown (по крайней мере, для Ghost) гласит: если ты чего-то не можешь сделать при помощи наших инструментов, просто используй чистый HTML. И первой операцией, в которой мне пришлось применить свои не очень глубокие знания языка гипертекстовой разметки, стала вставка картинок для оформления поста.

Markdown предоставляет возможность вставки изображений в текст. Для этого необходимо набрать примерно следующий код:

![Альтернативный_текст](путь/к/графическому/файлу/в/хранилище)

Естественно, графический файл должен быть предварительно загружен в хранилище. Редактор Ghost позволяет это все сделать очень быстро: курсор помещается в строку, в которую надо добавить картинку, задействуется пиктограмма вставки картинки, в появившемся окне выбирается нужный файл и все: файл подгружается в хранилище графических данных блога, а в том месте, куда был установлен курсор, вписывается нужное выражение (по правилам Markdown) с учетом правильного адреса загруженного на сервер файла.

Но таким образом можно получить лишь очень базовый набор возможностей вставки графических данных: картинка находится отдельно от текста (текст может быть только сверху и снизу картинки), при этом, на странице поста, она просто центруется. А что делать, если нужно что-то большее? Ответ прост: вспоминать (ну, или, учить) HTML.

Для получения нужного эффекта, надо в определенное место текста просто вставить тег HTML <img>, снабдив его нужными атрибутами. Вот, например, код для вставки картинки с обтеканием текста справа:

<img src="/content/images/2017/09/ghost-post-card.png" style="float: left;margin:0 10px 10px 0;">

А вот это пример с масштабированием картинки до нужного размера:

<img src="/content/images/2017/09/ghost-tag-page.png" style="width: 90%;height: auto;">

То есть, все достаточно просто. Если вам лень каждый раз писать значения для атрибута style, можно завести в css файле какие-нибудь классы, и прописывать нужный в каждом из тегов <img>. Да, не забудьте, что картинки, адрес которых вы указываете в атрибуте src, должны быть подгружены в хранилище.

На самом деле, можно получать еще более сложные конфигурации. Вот лишь один из примеров (реальный код, использованный в одном из моих постов):

<div class="container">
 <div style="float:left;width:49%;"> 
  <img src="/content/images/2017/10/java-9-no-x32-plans.png" style="width:100%;height:auto;">
 </div>
 <div style="float:right;width:49%;">
  <img src="/content/images/2017/10/java-9-embed-systems.png" style="width:100%;height:auto;">
 </div>
</div>

Результат приведен ниже:

В общем, подведу черту под всем вышеизложенным описанием того, как я теперь вставляю картинки, которые должны отображаться каким-то не очень обычным образом:

при помощи средств редактора Markdown вставляю картинку в нужное место самым обычным образом (одновременно, картинка подгружается в хранилище блога)
заменяю код Markdown на тег <img>
добавляю атрибут style с нужными параметрами и значениями
если надо, пишу еще какой-нибудь HTML код

Вот, пожалуй, и все - на сегодня...