Я розміщую блог Джекілла в Github і пишу свої повідомлення разом із Маркдаун. Додаючи зображення, я роблю це наступним чином:

![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." %}

Я знаю, що це старе питання, але я подумав, що все-таки поділюсь своїм методом додавання підписів до зображень. Ви не зможете використовувати теги captionабо 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> .

Для цього немає еквівалента Markdown, тому, якщо ви додаєте лише випадкові підписи, я б радив вам просто додати цей HTML у ваш документ Markdown:

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 %}тезі, що відкривається , і ви навіть можете стилізувати його за допомогою розмітки!

Приклад:

{% 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папці та включити його за допомогою рідини в Markdown .

2.1. Створіть _includes / image.html

Створіть image.htmlдокумент у папці _includes:

<!-- _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. У розмітку додайте зображення за допомогою рідини

Зображення /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 |