Я веду блог Jekyll на Github и пишу свои сообщения с Markdown. Когда я добавляю изображения, я делаю это следующим образом:

![name of the image](http://link.com/image.jpg)

Это тогда показывает изображение в тексте.

Однако, как я могу сказать Markdown добавить заголовок, который представлен ниже или выше изображения?

Если вы не хотите использовать какие-либо плагины (что означает, что вы можете отправить их на GitHub напрямую, не создавая сайт в первую очередь), вы можете создать новый файл с именем image.htmlв _includes:

<figure class="image">
  <img src="{{ include.url }}" alt="{{ include.description }}">
  <figcaption>{{ include.description }}</figcaption>
</figure>

А затем отобразите изображение из вашей уценки с помощью:

{% include image.html url="/images/my-cat.jpg" description="My cat, Robert Downey Jr." %}

Я знаю, что это старый вопрос, но я решил поделиться своим методом добавления подписей к изображениям. Вы не сможете использовать теги captionor figcaption, но это будет простая альтернатива без использования каких-либо плагинов.

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

![](path_to_image)
*image_caption*

Это сгенерирует следующий HTML:

<p>
    <img src="path_to_image" alt>
    <em>image_caption</em>
</p>

Затем в вашем CSS вы можете стилизовать его, используя следующий селектор, не мешая другим emтегам на странице:

img + em { }

Обратите внимание, что у вас не должно быть пустой строки между изображением и заголовком, потому что вместо этого будет генерироваться:

<p>
    <img src="path_to_image" alt>
</p>
<p>
    <em>image_caption</em>
</p>

Вы также можете использовать любой тег, который вы хотите, кроме em. Просто убедитесь, что есть тег, иначе вы не сможете его стилизовать.

Вы можете использовать таблицу для этого. Работает нормально.

| ![space-1.jpg](http://www.storywarren.com/wp-content/uploads/2016/09/space-1.jpg) | 
|:--:| 
| *Space* |

Результат:

Правильный HTML-код для изображений с подписями - <figure>с<figcaption> .

Для этого нет эквивалента уценки, поэтому, если вы добавляете только случайный заголовок, я рекомендую вам просто добавить этот HTML-код в документ уценки:

Lorem ipsum dolor sit amet, consectetur adipiscing elit...

<figure>
  <img src="{{site.url}}/assets/image.jpg" alt="my alt text"/>
  <figcaption>This is my caption text.</figcaption>
</figure>

Vestibulum eu vulputate magna...

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

Если вы пытаетесь использовать другие функции Markdown-y (например, таблицы, звездочки и т. Д.) Для создания подписей, то вы просто разбираетесь в том, как Markdown предназначался для использования.

Небольшой риф на ответе с верхним голосом, который я нашел немного более явным, состоит в том, чтобы использовать синтаксис jekyll для добавления класса к чему-то и затем стилизовать его таким образом.

Так что в посте вы бы имели:

![My image](/images/my-image.png)

{:.image-caption}
*The caption for my image*

И тогда в вашем файле CSS вы можете сделать что-то вроде этого:

.image-caption {
  text-align: center;
  font-size: .8rem;
  color: light-grey;

Выглядит хорошо!

Есть два семантически правильных решения этого вопроса:

1. Используя плагин
2. Создание пользовательского включения

1. Использование плагина

Я попробовал пару плагинов, делающих это, и мой любимый этоjekyll-figure .

1.1. устанавливатьjekyll-figure

Один из способов установки jekyll-figure- добавить gem "jekyll-figure"ваш Gemfile в группу плагинов.

Затем бегите bundle installиз окна вашего терминала.

1.2. использованиеjekyll-figure

Просто оберните ваши уценки {% figure %}и {% endfigure %}теги.

{% figure %}Ваша подпись помещается в открывающий тег, и вы даже можете оформить его с помощью markdown!

Пример:

{% figure caption:"Le logo de **Jekyll** et son clin d'oeil à Robert Louis Stevenson" %}
    ![Le logo de Jekyll](/assets/images/2018-08-07-jekyll-logo.png)
{% endfigure %}

1.3. Стиль это

Теперь, когда ваши изображения и подписи семантически верны, вы можете применять CSS так, как вы хотите:

• figure (для изображения и подписи)
• figure img (только для изображения)
• figcaption (только для подписи)

2. Создание пользовательского включения

Вам нужно будет создать image.htmlфайл в вашей _includesпапке и включить его, используя Liquid в Markdown .

2.1. Создать _includes / image.html

Создайте image.htmlдокумент в папке _include:

<!-- _includes/image.html -->
<figure>
    {% if include.url %}
    <a href="{{ include.url }}">
    {% endif %}
    <img
        {% if include.srcabs %}
            src="{{ include.srcabs }}"
        {% else %}
            src="{{ site.baseurl }}/assets/images/{{ include.src }}"
        {% endif %}
    alt="{{ include.alt }}">
    {% if include.url %}
    </a>
    {% endif %}
    {% if include.caption %}
        <figcaption>{{ include.caption }}</figcaption>
    {% endif %}
</figure>

2.2. В Markdown добавьте изображение с помощью Liquid

Изображение /assets/imagesс подписью:

This is [Jekyll](https://jekyllrb.com)'s logo :

{% include image.html
    src="jekyll-logo.png" <!-- image filename (placed in /assets/images) -->
    alt="Jekyll's logo" <!-- alt text -->
    caption="This is Jekyll's logo, featuring Dr. Jekyll's serum!" <!-- Caption -->
%}

(Внешнее) изображение с использованием абсолютного URL: (изменить src=""на srcabs="")

This is [Jekyll](https://jekyllrb.com)'s logo :

{% include image.html
    srcabs="https://jekyllrb.com/img/logo-2x.png" <!-- absolute URL to image file -->
    alt="Jekyll's logo" <!-- alt text -->
    caption="This is Jekyll's logo, featuring Dr. Jekyll's serum!" <!-- Caption -->
%}

Кликабельное изображение: (добавить url=""аргумент)

This is [Jekyll](https://jekyllrb.com)'s logo :

{% include image.html
    src="https://jekyllrb.com/img/logo-2x.png" <!-- absolute URL to image file -->
    url="https://jekyllrb.com" <!-- destination url -->
    alt="Jekyll's logo" <!-- alt text -->
    caption="This is Jekyll's logo, featuring Dr. Jekyll's serum!" <!-- Caption -->
%}

Изображение без подписи:

This is [Jekyll](https://jekyllrb.com)'s logo :

{% include image.html
    src="https://jekyllrb.com/img/logo-2x.png" <!-- absolute URL to image file -->
    alt="Jekyll's logo" <!-- alt text -->
%}

2,3. Стиль это

Теперь, когда ваши изображения и подписи семантически верны, вы можете применять CSS так, как вы хотите:

• figure (для изображения и подписи)
• figure img (только для изображения)
• figcaption (только для подписи)

Вы можете попробовать использовать в pandocкачестве конвертера. Вот плагин Jekyll для реализации этого. Pandoc сможет altавтоматически добавлять подписи к рисункам так же, как ваш атрибут.

Но вы должны подтолкнуть скомпилированный сайт, потому что github не разрешает плагины на страницах Github для безопасности.

Эндрю @ andrew-wei ответ прекрасно работает. Вы также можете объединить несколько цепочек, в зависимости от того, что вы пытаетесь сделать. Это, например, дает вам изображение с alt, заголовком и заголовком с разрывом строки и жирным шрифтом и курсивом в разных частях заголовка:

img + br + strong {margin-top: 5px; margin-bottom: 7px; font-style:italic; font-size: 12px; }
img + br + strong + em {margin-top: 5px; margin-bottom: 7px; font-size: 12px; font-style:italic;}

Со следующей <img>уценкой:

![description](https://img.jpg "description")
***Image:*** *description*

<p align="center">
  <img alt="img-name" src="/path/image-name.png" width="300">
  <br>
    <em>caption</em>
</p>

Это основное использование подписи. Не обязательно использовать дополнительный плагин.

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

| <img src="" alt="" style="width: 400px;"/> |
| My Caption |