Использование заголовка изображения в Markdown Jekyll

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

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

Затем отображается изображение в тексте.

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

Ответ 1

Если вы не хотите использовать какие-либо плагины (что означает, что вы можете отправить их в 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." %}

Ответ 2

Я знаю, что это старый вопрос, но я думал, что по-прежнему буду делиться своим методом добавления подписи к изображениям. Вы не сможете использовать теги 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. Просто убедитесь, что есть тег, иначе вы не сможете его стилизовать.

Ответ 3

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

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

Результат:

Ответ 4

Правильный HTML- <figcaption> для изображений с подписями - <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 предназначался для использования.

Ответ 5

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

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

Ответ 6

Небольшой рифф на голосовой ответ top, который я считаю более явным, заключается в использовании синтаксиса 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;

Выходит хорошо!

Ответ 7

Andrew @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*

Ответ 8

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

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

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

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

1.1. Установить `jekyll-figure`

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

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

1.2. Используйте `jekyll-figure`

Просто оберните вашу {% endfigure %} теги {% 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 папку, и включить его с помощью жидкости в 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. В Markdown добавьте изображение с помощью Liquid

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

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

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

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

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

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

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

This is [Jekyll](https://jekyllrb.com) 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 logo" <!-- alt text -->
    caption="This is Jekyll logo, featuring Dr. Jekyll serum!" <!-- Caption -->
%}

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

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

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

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