wake-up-neo.com

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:

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

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?

87
orschiro

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." %}
65
IQAndreas

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:

![](path_to_image)
*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.

207
Andrew Wei

Sie können dazu eine Tabelle verwenden. Es funktioniert gut.

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

Ergebnis:

 enter image description here

30
Bilal Gultekin

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.

23
bryanbraun

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.

4
Chongxu Ren

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:

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

{:.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!

3
Cory

Es gibt zwei semantisch korrekte Lösungen für diese Frage:

  1. Ein Plugin verwenden
  2. 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" %}
    ![Le logo de Jekyll](/assets/images/2018-08-07-jekyll-logo.png)
{% 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)
2
robinmetral

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:

![description](https://img.jpg "description")
***Image:*** *description*
2
Matthew Bennett

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 |
0
ndimhypervol