Tôi đang lưu trữ một Blog Jekyll trên Github và viết bài đăng của mình với Markdown. Khi tôi thêm hình ảnh, tôi làm theo cách sau:
Điều này sau đó cho thấy hình ảnh trong văn bản.
Tuy nhiên, làm cách nào tôi có thể yêu cầu Markdown thêm chú thích được trình bày bên dưới hoặc bên trên hình ảnh?
Câu trả lời:
Nếu bạn không muốn sử dụng bất kỳ plugin nào (có nghĩa là bạn có thể đẩy nó trực tiếp lên GitHub mà không cần tạo trang web trước), bạn có thể tạo một tệp mới có tên image.htmltrong _includes:
<figure class="image">
<img src="{{ include.url }}" alt="{{ include.description }}">
<figcaption>{{ include.description }}</figcaption>
</figure>
Và sau đó hiển thị hình ảnh từ đánh dấu của bạn với:
{% include image.html url="/images/my-cat.jpg" description="My cat, Robert Downey Jr." %}
site.urlbiến.
<figure class="image"><img src="{{ include.url }}" alt="{{ include.description }}"><figcaption>{{ include.description }}</figcaption></figure>
include image.htmlkhông? Tôi đang cố gắng với một cái gì đó như {% for image in page.images %}nhưng không thành công. Bạn có thể giúp tôi được không?
Tôi biết đây là một câu hỏi cũ nhưng tôi nghĩ tôi vẫn chia sẻ phương pháp thêm chú thích hình ảnh của mình. Bạn sẽ không thể sử dụng các thẻ captionhoặc figcaption, nhưng đây sẽ là một cách thay thế đơn giản mà không cần sử dụng bất kỳ plugin nào.
Trong phần đánh dấu của bạn, bạn có thể bọc chú thích của mình bằng thẻ nhấn mạnh và đặt nó trực tiếp bên dưới hình ảnh mà không cần chèn một dòng mới như vậy:
*image_caption*
Điều này sẽ tạo ra HTML sau:
<p>
<img src="path_to_image" alt>
<em>image_caption</em>
</p>
Sau đó, trong CSS của bạn, bạn có thể tạo kiểu cho nó bằng cách sử dụng bộ chọn sau mà không can thiệp vào các emthẻ khác trên trang:
img + em { }
Lưu ý rằng bạn không được có một dòng trống giữa hình ảnh và chú thích vì điều đó thay vào đó sẽ tạo ra:
<p>
<img src="path_to_image" alt>
</p>
<p>
<em>image_caption</em>
</p>
Bạn cũng có thể sử dụng bất cứ thẻ nào bạn muốn ngoài em. Chỉ cần đảm bảo có thẻ, nếu không bạn sẽ không thể tạo kiểu cho nó.
<link href="{{ site.baseurl }}/assets/css/main.css" rel="stylesheet">vì vậy tôi chỉ cần thêm định nghĩa CSS tùy chỉnh của mình ở dưới cùng của tệp này: // My custom css img + em { display: block; text-align: center; } //image captions
Bạn có thể sử dụng bảng cho việc này. Nó hoạt động tốt.
|  |
|:--:|
| *Space* |
Kết quả:
HTML chính xác để sử dụng cho hình ảnh có chú thích, là <figure>với<figcaption> .
Không có Markdown tương đương cho điều này, vì vậy nếu bạn chỉ thêm chú thích không thường xuyên, tôi khuyến khích bạn chỉ cần thêm html đó vào tài liệu Markdown của mình:
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...
Thông số Markdown khuyến khích bạn nhúng HTML trong các trường hợp như thế này, vì vậy nó sẽ hiển thị tốt. Nó cũng đơn giản hơn nhiều so với việc làm rối các plugin.
Nếu bạn đang cố gắng sử dụng các tính năng Markdown-y khác (như bảng, dấu sao, v.v.) để tạo chú thích, thì bạn chỉ đang hack xung quanh cách sử dụng Markdown.
Một câu riff nhẹ về câu trả lời được bình chọn hàng đầu mà tôi thấy rõ ràng hơn một chút là sử dụng cú pháp jekyll để thêm một lớp vào một cái gì đó và sau đó tạo kiểu theo cách đó.
Vì vậy, trong bài bạn sẽ có:
{:.image-caption}
*The caption for my image*
Và sau đó trong tệp CSS của bạn, bạn có thể làm một cái gì đó như thế này:
.image-caption {
text-align: center;
font-size: .8rem;
color: light-grey;
Nhìn ra tốt!
Có hai giải pháp đúng về mặt ngữ nghĩa cho câu hỏi này:
Tôi đã thử một vài plugin làm điều này và yêu thích của tôi làjekyll-figure .
jekyll-figureMột cách để cài đặt jekyll-figurelà thêm gem "jekyll-figure"vào Gemfile của bạn trong nhóm plugin của bạn.
Sau đó chạy bundle installtừ cửa sổ thiết bị đầu cuối của bạn.
jekyll-figureĐơn giản chỉ cần bọc markdown của bạn trong {% figure %}và {% endfigure %}thẻ.
Chú thích của bạn đi vào {% figure %}thẻ mở và thậm chí bạn có thể tạo kiểu cho nó bằng cách đánh dấu!
Thí dụ:
{% figure caption:"Le logo de **Jekyll** et son clin d'oeil à Robert Louis Stevenson" %}
{% endfigure %}
Giờ đây, hình ảnh và chú thích của bạn đã chính xác về mặt ngữ nghĩa, bạn có thể áp dụng CSS theo ý muốn:
figure (cho cả hình ảnh và chú thích)figure img (chỉ dành cho hình ảnh)figcaption (chỉ dành cho chú thích)Bạn sẽ cần tạo một image.htmltệp trong _includesthư mục của mình và đưa tệp đó vào Liquid trong Markdown .
Tạo image.htmltài liệu trong thư mục _includes của bạn:
<!-- _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>
Một hình ảnh /assets/imagesvới chú thích:
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 -->
%}
Hình ảnh (bên ngoài) sử dụng URL tuyệt đối: (thay đổi src=""thành 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 -->
%}
Một hình ảnh có thể nhấp: (thêm url=""đối số)
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 -->
%}
Một hình ảnh không có chú thích:
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 -->
%}
Giờ đây, hình ảnh và chú thích của bạn đã chính xác về mặt ngữ nghĩa, bạn có thể áp dụng CSS theo ý muốn:
figure (cho cả hình ảnh và chú thích)figure img (chỉ dành cho hình ảnh)figcaption (chỉ dành cho chú thích)Bạn có thể thử sử dụng pandocnhư là công cụ chuyển đổi của bạn. Đây là một plugin jekyll để thực hiện điều này. Pandoc sẽ có thể tự động thêm chú thích hình giống như altthuộc tính của bạn .
Nhưng bạn phải đẩy trang được biên dịch vì github không cho phép bổ trợ trong các trang Github để bảo mật.
Câu trả lời @ andrew-wei của Andrew hoạt động rất tốt. Bạn cũng có thể xâu chuỗi một vài cái lại với nhau, tùy thuộc vào những gì bạn đang cố gắng làm. Ví dụ, điều này giúp bạn có một hình ảnh với alt, tiêu đề và chú thích với dấu ngắt dòng và đậm và in nghiêng trong các phần khác nhau của chú thích:
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;}
Với đánh dấu sau <img>:
***Image:*** *description*
<p align="center">
<img alt="img-name" src="/path/image-name.png" width="300">
<br>
<em>caption</em>
</p>
Đó là sử dụng chú thích cơ bản. Không cần thiết phải sử dụng một plugin bổ sung.
Đây là giải pháp đơn giản nhất (nhưng không đẹp nhất): tạo một bảng xung quanh toàn bộ. Rõ ràng có các vấn đề mở rộng và đây là lý do tại sao tôi đưa ra ví dụ của mình với HTML để bạn có thể sửa đổi kích thước hình ảnh một cách dễ dàng. Điều này làm việc cho tôi.
| <img src="" alt="" style="width: 400px;"/> |
| My Caption |
site_rootkhông được chấp nhận là một biến hợp lệ. Khi kết xuất nó kết thúc làsrc="{{ site.url_root }}....