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

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

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

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

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

источник

2013-10-12 orschiro

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

<table class="image"> 
<caption align="bottom">{{ include.description }}</caption> 
<tr><td><img src="{{ include.url }}" alt="{{ include.description }}"/></td></tr> 
</table>

(и, очевидно, я не дизайнер Вы, вероятно, следует использовать CSS вместо таблицы, чтобы сделать ваше изображение выравнивать должным образом.)

а затем отобразить изображение с уценкой с:

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

источник

2013-10-14 12:30:40 IQAndreas

Это отличная идея! Однако 'site_root' не принимается как допустимая переменная. При рендеринге он заканчивается как 'src =" {{site.url_root}} ... '. – orschiro

А, справа, это переменная, добавленная в [Octopress] (http://octopress.org/). поэтому примерный код просто использует относительный URL-адрес изображения. – IQAndreas

Jekyll теперь включает переменную 'site.url'. –

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

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

источник

2013-10-13 08:32:47

Спасибо , Таким образом, уценка сама по себе не способна создавать титры? – orschiro

Я считаю, что это зависит от используемого вами конвертера, однако стандарт markdown не поддерживает добавление титров. –

152

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

источник

2015-05-21 06:45:58

Это действительно круто! Спасибо. – bitmask

Удивительно! Не нужно запоминать какой-то глупый синтаксис jekyll :) –

Я большой поклонник этого –

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

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

источник

2016-12-09 09:16:48 ndimhypervol

Незначительное рифф на top voted answer, что я нашел, чтобы быть немного более четко, чтобы использовать синтаксис Джекил для добавления класса к чему-то, а затем стиль его таким образом.

Так в посте вы бы:

![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;

выходит хорошо выглядеть!

источник

2017-03-27 11:50:20 Cory

Если вы только добавив случайную подпись, и вы хотите использовать more semantic<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 encourages embedding HTML , поэтому он будет отображаться просто отлично.

источник

2017-07-06 14:32:41 bryanbraun

Очень жаль, что этот ответ не привлек к себе внимания - я действительно думаю, что это самый простой и семантически правильный.Я особенно огорчен всеми ответами, предлагающими форматирование с использованием таблиц, которые просто наводят хаос 1990-х годов. ;-) –

Согласен. Однако, похоже, Bitbucket еще не поддерживается. Питти. – Boriel

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

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

Результат:

источник

2017-07-19 12:52:23 Bilal

Это приятное обходное решение для меня. ;) –

не используют таблицы для семантической разметки! – mb21

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

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*

источник

2018-01-07 12:21:43

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

ответ

Смежные вопросы