Ich hoste einen Jekyll-Blog auf Github und schreibe meine Beiträge mit Markdown. Wenn ich Bilder hinzufüge, gehe ich folgendermaßen vor:

Dies zeigt dann das Bild im Text.
Wie kann ich Markdown jedoch anweisen, eine Beschriftung hinzuzufügen, die unter oder über dem Bild angezeigt wird?
Wenn Sie keine Plugins verwenden möchten (was bedeutet, dass Sie es direkt in GitHub einfügen können, ohne die Site zuerst zu generieren), können Sie eine neue Datei mit dem Namen image.html
in _includes
erstellen:
<figure class="image">
<img src="{{ include.url }}" alt="{{ include.description }}">
<figcaption>{{ include.description }}</figcaption>
</figure>
Und dann zeigen Sie das Bild von Ihrem Markdown an mit:
{% include image.html url="/images/my-cat.jpg" description="My cat, Robert Downey Jr." %}
Ich weiß, das ist eine alte Frage, aber ich dachte, ich würde meine Methode zum Hinzufügen von Bildunterschriften noch teilen. Sie können die Tags caption
oder figcaption
nicht verwenden, dies wäre jedoch eine einfache Alternative ohne die Verwendung von Plugins.
In Ihrem Markdown können Sie Ihre Beschriftung mit dem Hervorhebungs-Tag umschließen und direkt unter das Bild einfügen, ohne eine neue Zeile wie folgt einzufügen:

*image_caption*
Dies würde den folgenden HTML-Code erzeugen:
<p>
<img src="path_to_image" alt>
<em>image_caption</em>
</p>
Dann können Sie es in Ihrem CSS mit dem folgenden Selektor formatieren, ohne andere em
-Tags auf der Seite zu beeinträchtigen:
img + em { }
Beachten Sie, dass Sie zwischen Bild und Beschriftung keine Leerzeile haben dürfen, da dies zu Folgendem führen würde:
<p>
<img src="path_to_image" alt>
</p>
<p>
<em>image_caption</em>
</p>
Sie können auch ein beliebiges anderes Tag als em
verwenden. Stellen Sie nur sicher, dass es ein Tag gibt, sonst können Sie es nicht formatieren.
Der richtige HTML-Code für Bilder mit Bildunterschriften lautet <figure>
MIT <figcaption>
.
Hierfür gibt es kein Markdown-Äquivalent. Wenn Sie also nur gelegentlich Beschriftungen hinzufügen, sollten Sie die HTML-Datei einfach in Ihr Markdown-Dokument einfügen:
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...
Die Markdown-Spezifikation fordert Sie auf, HTML in solchen Fällen einzubetten. So wird es gut angezeigt. Es ist auch viel einfacher, als mit Plugins herumzuspielen.
Wenn Sie versuchen, andere Markdown-y-Funktionen (z. B. Tabellen, Sternchen usw.) zu verwenden, um Beschriftungen zu erzeugen, dann hacken Sie einfach herum, wie Markdown verwendet werden sollte.
Sie können versuchen, pandoc
als Konverter zu verwenden. Hier ist ein Jekyll-Plugin um dies zu implementieren. Pandoc kann automatisch eine Bildunterschrift hinzufügen, die Ihrem alt
-Attribut entspricht.
Sie müssen jedoch die kompilierte Site pushen, da Github aus Sicherheitsgründen keine Plugins in Github-Seiten zulässt.
Ein leichtes Riff auf der top gestimmten Antwort das ich etwas expliziter fand, ist die Verwendung der Jekyll-Syntax, um einer Klasse etwas hinzuzufügen und sie dann so zu gestalten.
Also in der Post hättest du:

{:.image-caption}
*The caption for my image*
Und dann können Sie in Ihrer CSS-Datei so etwas tun:
.image-caption {
text-align: center;
font-size: .8rem;
color: light-grey;
Kommt gut aus!
Es gibt zwei semantisch korrekte Lösungen für diese Frage:
Ich habe ein paar Plugins ausprobiert und mein Favorit ist jekyll-figure
.
jekyll-figure
installierenEine Möglichkeit, jekyll-figure
zu installieren, besteht darin, gem "jekyll-figure"
zu Ihrer Gemfile-Datei in Ihrer Plugins-Gruppe hinzuzufügen.
Führen Sie dann bundle install
in Ihrem Terminalfenster aus.
jekyll-figure
Packen Sie Ihren Markdown einfach in {% figure %}
- und {% endfigure %}
-Tags ein.
Ihre Bildunterschrift geht in das {% figure %}
-Tag, und Sie können sie sogar mit markdown formatieren!
Beispiel:
{% figure caption:"Le logo de **Jekyll** et son clin d'oeil à Robert Louis Stevenson" %}

{% endfigure %}
Da Ihre Bilder und Bildunterschriften nun semantisch korrekt sind, können Sie CSS nach Belieben anwenden:
figure
(sowohl für Bild als auch für Bildunterschrift)figure img
(nur für Bilder)figcaption
(nur für Bildunterschrift)Sie müssen ___ eine image.html
-Datei in Ihrem _includes
-Ordner erstellen und sie mit Liquid in Markdown einfügen.
Erstellen Sie das image.html
-Dokument in Ihrem _includes-Ordner:
<!-- _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>
Ein Bild in /assets/images
mit einer Beschriftung:
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 -->
%}
Ein (externes) Bild mit einer absoluten URL: (src=""
in srcabs=""
ändern)
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 -->
%}
Ein anklickbares Bild: (url=""
-Argument hinzufügen)
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 -->
%}
Ein Bild ohne Bildunterschrift:
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 -->
%}
Da Ihre Bilder und Bildunterschriften nun semantisch korrekt sind, können Sie CSS nach Belieben anwenden:
figure
(sowohl für Bild als auch für Bildunterschrift)figure img
(nur für Bilder)figcaption
(nur für Bildunterschrift)Andrews @ Andrew-Wei-Antwort funktioniert gut. Sie können auch ein paar miteinander verketten, je nachdem, was Sie versuchen. So erhalten Sie zum Beispiel ein Bild mit alt, Titel und Bildunterschrift mit einem Zeilenumbruch sowie fett und kursiv in verschiedenen Teilen der Bildunterschrift:
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;}
Mit dem folgenden <img>
markdown:

***Image:*** *description*
Hier ist die einfachste (aber nicht schönste) Lösung: Erstellen Sie einen Tisch um das Ganze herum. Es gibt offensichtlich Skalierungsprobleme, und deshalb gebe ich mein Beispiel mit HTML, damit Sie die Bildgröße leicht ändern können. Das hat bei mir funktioniert.
| <img src="" alt="" style="width: 400px;"/> |
| My Caption |