Github'da bir Jekyll Blogu barındırıyorum ve yayınlarımı Markdown ile yazıyorum. Resim eklerken bunu şu şekilde yaparım:

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

Bu daha sonra metindeki görüntüyü gösterir.

Ancak, Markdown'a resmin altında veya üstünde sunulan bir resim yazısı eklemesini nasıl söyleyebilirim?

Eğer (doğrudan ilk siteyi oluşturmadan GitHub'dan onu zorlayabilir araçları) Herhangi eklentileri kullanmak istemiyorsanız, adlı yeni bir dosya oluşturabilir image.htmliçinde _includes:

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

Ardından, işaretlemenizdeki resmi şununla görüntüleyin:

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

Bunun eski bir soru olduğunu biliyorum, ancak resim yazıları ekleme yöntemimi hala paylaşacağımı düşündüm. captionVeya figcaptionetiketlerini kullanamazsınız , ancak bu herhangi bir eklenti kullanmadan basit bir alternatif olacaktır.

İşaretlemenizde, altyazınızı vurgu etiketiyle sarabilir ve şunun gibi yeni bir satır eklemeden doğrudan resmin altına yerleştirebilirsiniz:

![](path_to_image)
*image_caption*

Bu, aşağıdaki HTML'yi oluşturur:

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

Daha sonra CSS'nizde em, sayfadaki diğer etiketlere müdahale etmeden aşağıdaki seçiciyi kullanarak stil oluşturabilirsiniz :

img + em { }

Bunun yerine, görüntü ve resim yazısı arasında boş bir satır olmamalıdır.

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

İstediğiniz başka bir etiketi de kullanabilirsiniz em. Bir etiket olduğundan emin olun, aksi takdirde stil uygulayamazsınız.

Bunun için tablo kullanabilirsiniz. İyi çalışıyor.

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

Sonuç:

Altyazılı görüntüler için kullanılacak doğru HTML, <figure>ile<figcaption> .

Bunun için Markdown eşdeğeri yoktur, bu nedenle yalnızca ara sıra altyazı ekliyorsanız, bu html'yi Markdown belgenize eklemenizi öneririz:

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 spesifikasyonu, HTML'yi bu gibi durumlarda gömmeye teşvik eder, bu yüzden iyi görünür . Ayrıca eklentilerle uğraşmaktan çok daha basit.

Altyazı oluşturmak için diğer Markdown-y özelliklerini (tablolar, yıldız işaretleri vb.) Kullanmaya çalışıyorsanız, Markdown'un nasıl kullanıldığını bilmezsiniz.

En çok oy alan cevapta hafif bir riffBiraz daha açık bulduğum bir şeye bir sınıf eklemek için jekyll sözdizimini kullanmak ve daha sonra bu şekilde stil uygulamaktır.

Böylece yazıya sahip olacaksınız:

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

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

Ve sonra CSS dosyanızda böyle bir şey yapabilirsiniz:

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

İyi görünüyor!

Bu sorunun anlamsal olarak doğru iki çözümü vardır:

1. Eklenti kullanma
2. Özel bir içerik oluşturma

1. Bir eklenti kullanma

Bunu yapan birkaç eklenti denedim ve en sevdiğimjekyll-figure .

1.1. Yüklemekjekyll-figure

Yüklemek için bir yolu jekyll-figureeklemektir gem "jekyll-figure"eklentilerinizde grubundaki Gemfile için.

Sonra bundle installterminal pencerenizden çalıştırın .

1.2. kullanımjekyll-figure

İşaretlemenizi {% figure %}ve {% endfigure %}etiketlerinizi sarmanız yeterlidir .

Altyazı açılış {% figure %}etiketine gider ve hatta işaretleme ile stil yapabilirsiniz!

Misal:

{% 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. Stil verin

Artık resimleriniz ve resim yazılarınız anlamsal olarak doğru olduğundan, CSS'yi istediğiniz gibi uygulayabilirsiniz:

• figure (resim ve resim yazısı için)
• figure img (yalnızca resim için)
• figcaption (yalnızca altyazı için)

2. Özel bir içerik oluşturma

Sen gerekir bir oluşturmak image.htmliçin dosyayı _includesklasöre ve Markdown Sıvı kullanarak dahil .

2.1. _İncludes / image.html oluşturun

Oluşturmak image.htmliçin _includes klasöründe belgeyi:

<!-- _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'a Sıvı kullanarak bir resim ekleyin

Bir görüntünün /assets/imagesbir başlık ile:

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 -->
%}

Mutlak URL kullanarak bir (dış) görüntü: (değişiklik src=""için 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 -->
%}

Tıklanabilir bir resim: ( url=""bağımsız değişken ekle )

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 -->
%}

Altyazısı olmayan bir resim:

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. Stil verin

Artık resimleriniz ve resim yazılarınız anlamsal olarak doğru olduğundan, CSS'yi istediğiniz gibi uygulayabilirsiniz:

• figure (resim ve resim yazısı için)
• figure img (yalnızca resim için)
• figcaption (yalnızca altyazı için)

pandocDönüştürücünüz olarak kullanmayı deneyebilirsiniz . İşte bunu uygulamak için bir jekyll eklentisi . Pandoc, altözelliğinizle aynı şekilde bir resim yazısı ekleyebilecektir .

Ancak derlenmiş siteyi zorlamanız gerekir, çünkü github güvenlik için Github sayfalarında eklentilere izin vermez.

Andrew'un @ andrew-wei cevabı harika çalışıyor. Ne yapmaya çalıştığınıza bağlı olarak birkaçını birlikte zincirleyebilirsiniz. Bu, örneğin, alt satır, başlık ve resim yazısı içeren bir resim, satır sonu ve kalın ve italik yazıların farklı bölümlerinde görüntülenmesini sağlar:

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;}

Aşağıdaki işaretleme ile <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>

Temel altyazı kullanımı budur. Ek bir eklenti kullanmak gerekli değildir.

İşte en basit (ama en güzel değil) çözüm: her şeyin etrafında bir tablo yapın. Açıkça ölçekleme sorunları var ve bu yüzden HTML ile örneğimi verdim, böylece görüntü boyutunu kolayca değiştirebilirsiniz. Bu benim için çalıştı.

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