ฉันกำลังโฮสต์บล็อก Jekyll บน Github และเขียนโพสต์ของฉันด้วย Markdown เมื่อฉันเพิ่มภาพฉันทำตามวิธีต่อไปนี้:

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

จากนั้นจะแสดงรูปภาพในข้อความ

อย่างไรก็ตามฉันจะบอก Markdown ให้เพิ่มคำอธิบายภาพที่แสดงด้านล่างหรือด้านบนของภาพได้อย่างไร

หากคุณไม่ต้องการใช้ปลั๊กอินใด ๆ (ซึ่งหมายความว่าคุณสามารถส่งไปที่ GitHub โดยตรงโดยไม่ต้องสร้างเว็บไซต์ก่อน) คุณสามารถสร้างไฟล์ใหม่ที่มีชื่อimage.htmlใน_includes:

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

จากนั้นแสดงภาพจาก markdown ของคุณด้วย:

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

ฉันรู้ว่านี่เป็นคำถามเก่า แต่ฉันคิดว่าฉันยังคงแบ่งปันวิธีการเพิ่มคำบรรยายภาพ คุณจะไม่สามารถใช้captionหรือfigcaptionแท็กได้ แต่จะเป็นทางเลือกง่ายๆโดยไม่ต้องใช้ปลั๊กอินใด ๆ

ใน markdown ของคุณคุณสามารถใส่คำบรรยายใต้ภาพด้วยแท็กการเน้นและวางไว้ใต้ภาพโดยตรงโดยไม่ต้องใส่บรรทัดใหม่ดังนี้:

![](path_to_image)
*image_caption*

สิ่งนี้จะสร้าง HTML ต่อไปนี้:

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

จากนั้นใน CSS ของคุณคุณสามารถจัดรูปแบบโดยใช้ตัวเลือกต่อไปนี้โดยไม่รบกวนemแท็กอื่น ๆในหน้า:

img + em { }

โปรดทราบว่าคุณต้องไม่มีบรรทัดว่างระหว่างรูปภาพและคำอธิบายภาพเนื่องจากจะสร้างแทน:

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

นอกจากนี้คุณยังสามารถใช้สิ่งที่คุณต้องการแท็กอื่น ๆ emกว่า เพียงตรวจสอบให้แน่ใจว่ามีแท็กไม่เช่นนั้นคุณจะไม่สามารถจัดสไตล์ได้

คุณสามารถใช้ตารางสำหรับสิ่งนี้ มันใช้งานได้ดี

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

ผลลัพธ์:

HTML ที่ถูกต้องเพื่อใช้สำหรับภาพที่มีคำบรรยายเป็นด้วย<figure><figcaption>

ไม่มี Markdown ที่เทียบเท่ากับสิ่งนี้ดังนั้นหากคุณเพียงเพิ่มคำบรรยายภาพเป็นครั้งคราวฉันขอแนะนำให้คุณเพิ่ม html นั้นลงในเอกสาร 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...

ข้อมูลจำเพาะ Markdown สนับสนุนให้คุณฝัง HTML ในกรณีเช่นนี้ดังนั้นมันจะแสดงผลได้ดี นอกจากนี้ยังง่ายกว่าการล้อเล่นกับปลั๊กอิน

หากคุณกำลังพยายามที่จะใช้คุณสมบัติ Markdown-y อื่น ๆ (เช่นตาราง, เครื่องหมายดอกจัน, ฯลฯ ) เพื่อสร้างคำบรรยายภาพคุณก็แค่แฮ็คว่าจะให้ Markdown ถูกใช้งานอย่างไร

คำตอบที่ได้รับการโหวตเล็กน้อยบนชั้นล่างเล็กน้อยที่ฉันคิดว่าชัดเจนกว่านั้นคือการใช้ไวยากรณ์ jekyll เพื่อเพิ่มคลาสให้กับบางสิ่งบางอย่าง

ดังนั้นในโพสต์คุณจะได้:

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

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

จากนั้นในไฟล์ CSS ของคุณคุณสามารถทำสิ่งนี้:

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

ออกมาดูดี!

มีคำตอบที่ถูกต้องสองวิธีสำหรับคำถามนี้:

1. ใช้งานปลั๊กอิน
2. การสร้างแบบกำหนดเองรวมถึง

1. การใช้ปลั๊กอิน

ฉันได้พยายามคู่ของปลั๊กอินทำเช่นนี้และที่ชื่นชอบคือjekyll-figure

1.1 ติดตั้งjekyll-figure

วิธีหนึ่งในการติดตั้งjekyll-figureคือการเพิ่มgem "jekyll-figure"Gemfile ลงในกลุ่มปลั๊กอิน

จากนั้นเรียกใช้bundle installจากหน้าต่างเทอร์มินัลของคุณ

1.2 ใช้jekyll-figure

เพียงห่อ markdown ของคุณ{% figure %}และ{% endfigure %}แท็ก

คำบรรยายใต้ภาพของคุณจะอยู่ใน{% figure %}แท็กเปิดและคุณยังสามารถจัดแต่งมันด้วยมาร์คดาวน์!

ตัวอย่าง:

{% 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 สไตล์มัน

เมื่อภาพและคำอธิบายภาพของคุณถูกต้องแล้วคุณสามารถใช้ CSS ได้ตามที่คุณต้องการ:

• figure (สำหรับทั้งภาพและคำบรรยาย)
• figure img (สำหรับภาพเท่านั้น)
• figcaption (สำหรับคำบรรยายภาพเท่านั้น)

2. การสร้างการรวมแบบกำหนดเอง

คุณจะต้องสร้างimage.htmlไฟล์ของคุณใน_includesโฟลเดอร์และรวมไว้โดยใช้ของเหลวใน Markdown

2.1 สร้าง _includes / image.html

สร้างimage.htmlเอกสารในโฟลเดอร์ _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 ใน Markdown ให้ใส่รูปภาพโดยใช้ Liquid

รูปภาพที่/assets/imagesมีคำอธิบายภาพ:

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

รูปภาพ (ภายนอก) โดยใช้ URL แบบสัมบูรณ์: (เปลี่ยนsrc=""เป็น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 -->
%}

ภาพที่คลิกได้: (เพิ่มurl=""อาร์กิวเมนต์)

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

รูปภาพที่ไม่มีคำบรรยาย:

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 สไตล์มัน

เมื่อภาพและคำอธิบายภาพของคุณถูกต้องแล้วคุณสามารถใช้ CSS ได้ตามที่คุณต้องการ:

• figure (สำหรับทั้งภาพและคำบรรยาย)
• figure img (สำหรับภาพเท่านั้น)
• figcaption (สำหรับคำบรรยายภาพเท่านั้น)

คุณสามารถลองใช้pandocเป็นตัวแปลงของคุณ นี่คือปลั๊กอิน jekyllเพื่อดำเนินการนี้ Pandoc จะสามารถเพิ่มคำบรรยายภาพให้เหมือนกับaltแอตทริบิวต์ของคุณโดยอัตโนมัติ

แต่คุณต้องกดไซต์ที่คอมไพล์เพราะ github ไม่อนุญาตให้ใช้ปลั๊กอินในหน้า Github เพื่อความปลอดภัย

คำตอบ @ andrew-wei ของ Andrew ใช้งานได้ดี นอกจากนี้คุณยังสามารถเชื่อมโยงเข้าด้วยกันโดยขึ้นอยู่กับว่าคุณกำลังพยายามทำอะไร ตัวอย่างเช่นคุณได้รับรูปภาพที่มี alt ชื่อและคำอธิบายภาพพร้อมตัวแบ่งบรรทัดและตัวหนาและตัวเอียงในส่วนต่างๆของคำบรรยายภาพ:

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

ด้วย<img>markdown ต่อไปนี้:

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

นั่นคือการใช้คำอธิบายภาพพื้นฐาน ไม่จำเป็นต้องใช้ปลั๊กอินเสริม

นี่คือวิธีที่ง่ายที่สุด (แต่ไม่ใช่ที่น่ารักที่สุด) วิธีแก้ปัญหา: สร้างตารางรอบ ๆ สิ่งทั้งหมด เห็นได้ชัดว่ามีปัญหาเกี่ยวกับการปรับขนาดและนี่คือเหตุผลที่ฉันให้ตัวอย่างกับ HTML เพื่อให้คุณสามารถปรับขนาดภาพได้อย่างง่ายดาย สิ่งนี้ใช้ได้สำหรับฉัน

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