Verwenden einer Bildunterschrift in Markdown Jekyll
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.
Sie können dazu eine Tabelle verwenden. Es funktioniert gut.
|  |
|:--:|
| *Space* |
Ergebnis:
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:
- Ein Plugin verwenden
- Ein benutzerdefiniertes Include erstellen
1. Ein Plugin verwenden
Ich habe ein paar Plugins ausprobiert und mein Favorit ist jekyll-figure .
1.1. jekyll-figure installieren
Eine 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.
1.2. Verwenden Sie 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 %}
1.3. Style es
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)
2. Erstellen Sie ein benutzerdefiniertes Include
Sie müssen ___ eine image.html-Datei in Ihrem _includes-Ordner erstellen und sie mit Liquid in Markdown einfügen.
2.1. Erstellen Sie _includes/image.html
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>
2.2. Fügen Sie in Markdown ein Bild mit Liquid ein
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 -->
%}
2.3. Style es
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 |