Prowadzę bloga Jekyll na Github i piszę posty z Markdown. Dodając obrazy, robię to w następujący sposób:

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

To pokazuje obraz w tekście.

Jak jednak mogę powiedzieć Markdown, aby dodał podpis, który jest przedstawiony poniżej lub powyżej obrazu?

Jeśli nie chcesz używać żadnych wtyczek (co oznacza, że ​​możesz przesłać je bezpośrednio do GitHub bez wcześniejszego generowania witryny), możesz utworzyć nowy plik o nazwie image.htmlw _includes:

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

Następnie wyświetl obraz z przeceny za pomocą:

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

Wiem, że to stare pytanie, ale pomyślałem, że nadal podzielę się moją metodą dodawania podpisów do zdjęć. Nie będziesz mógł używać tagów captionlub figcaption, ale byłaby to prosta alternatywa bez użycia jakichkolwiek wtyczek.

W swoim przecenie możesz zawinąć podpis w znacznik wyróżnienia i umieścić go bezpośrednio pod obrazem bez wstawiania nowego wiersza, jak na przykład:

![](path_to_image)
*image_caption*

Spowoduje to wygenerowanie następującego kodu HTML:

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

Następnie w swoim CSS możesz stylizować go za pomocą następującego selektora bez zakłócania innych emtagów na stronie:

img + em { }

Zauważ, że nie możesz mieć pustej linii między obrazem a podpisem, ponieważ zamiast tego wygenerowałoby:

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

Możesz także użyć dowolnego tagu innego niż em. Po prostu upewnij się, że jest tag, w przeciwnym razie nie będziesz w stanie go stylizować.

Możesz do tego użyć tabeli. To działa dobrze.

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

Wynik:

Prawidłowe HTML do wykorzystania w przypadku zdjęć z podpisami, jest <figure>z<figcaption> .

Nie ma odpowiednika w Markdown, więc jeśli dodajesz tylko sporadyczny podpis, zachęcam Cię do dodania tego kodu HTML do dokumentu 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...

Specyfikacja Markdown zachęca do osadzania kodu HTML w takich przypadkach, aby wyświetlał się dobrze. Jest to również o wiele prostsze niż majstrowanie przy wtyczkach.

Jeśli próbujesz używać innych funkcji Markdown-y (takich jak tabele, gwiazdki itp.) Do tworzenia napisów, to po prostu hakujesz, w jaki sposób miał być używany Markdown.

Niewielki riff na górze głosował odpowiedź, którą uważam za nieco bardziej wyraźną, to użycie składni jekyll do dodania klasy do czegoś, a następnie stylowanie tego w ten sposób.

Więc w poście miałbyś:

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

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

A potem w swoim pliku CSS możesz zrobić coś takiego:

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

Wygląda dobrze!

Istnieją dwa poprawne semantycznie rozwiązania tego pytania:

1. Korzystanie z wtyczki
2. Tworzenie niestandardowego pliku dołączanego

1. Korzystanie z wtyczki

Wypróbowałem kilka wtyczek, które to robią, a moim ulubionym jestjekyll-figure .

1.1. zainstalowaćjekyll-figure

Jednym ze sposobów instalacji jekyll-figurejest dodanie gem "jekyll-figure"do pliku Gemfile w grupie wtyczek.

Następnie uruchom bundle installz okna terminala.

1.2. Posługiwać sięjekyll-figure

Po prostu zawiń przecenę {% figure %}i {% endfigure %}oznacz.

Twój podpis pojawia się w otwierającym {% figure %}tagu, a nawet możesz go stylizować za pomocą przeceny!

Przykład:

{% 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. Styl to

Teraz, gdy twoje obrazy i podpisy są semantycznie poprawne, możesz zastosować CSS, jak chcesz:

• figure (dla obrazu i podpisu)
• figure img (tylko dla obrazu)
• figcaption (tylko do podpisów)

2. Tworzenie dołączenia niestandardowego

Musisz utworzyć image.htmlplik w swoim _includesfolderze i dołączyć go za pomocą Liquid w Markdown .

2.1. Utwórz _includes / image.html

Utwórz image.htmldokument w swoim folderze _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. W Markdown dołącz obraz za pomocą Liquid

Obraz /assets/imagesz podpisem:

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

Obraz (zewnętrzny) używający bezwzględnego adresu URL: (zmień src=""na 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 -->
%}

Klikalny obraz: (dodaj url=""argument)

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

Obraz bez podpisu:

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. Styl to

Teraz, gdy twoje obrazy i podpisy są semantycznie poprawne, możesz zastosować CSS, jak chcesz:

• figure (dla obrazu i podpisu)
• figure img (tylko dla obrazu)
• figcaption (tylko do podpisów)

Możesz spróbować użyć pandocjako konwertera. Oto wtyczka jekyll do zaimplementowania tego. Pandoc będzie mógł automatycznie dodać podpis do figury taki sam jak twój altatrybut.

Ale musisz wypchnąć skompilowaną witrynę, ponieważ github nie zezwala na wtyczki na stronach Github ze względów bezpieczeństwa.

Odpowiedź Andrew @ andrew-wei działa świetnie. Możesz także połączyć kilka ze sobą, w zależności od tego, co próbujesz zrobić. Na przykład otrzymujesz obraz z alt, tytułem i podpisem z podziałem wiersza oraz pogrubieniem i kursywą w różnych częściach podpisu:

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

Z następującą <img>przeceną:

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

To jest podstawowe użycie napisów. Nie ma potrzeby używania dodatkowej wtyczki.

Oto najprostsze (ale nie najładniejsze) rozwiązanie: ułóż tabelę wokół całości. Istnieją oczywiście problemy ze skalowaniem i dlatego podaję mój przykład z HTML, abyś mógł łatwo zmodyfikować rozmiar obrazu. To zadziałało dla mnie.

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