Saya hosting Blog Jekyll di Github dan menulis posting saya dengan Markdown. Ketika saya menambahkan gambar, saya melakukannya dengan cara berikut:
Ini kemudian menunjukkan gambar dalam teks.
Namun, bagaimana saya bisa memberi tahu Markdown untuk menambahkan keterangan yang disajikan di bawah atau di atas gambar?
Jawaban:
Jika Anda tidak ingin menggunakan plugin (yang berarti dapat Anda mendorongnya untuk GitHub langsung tanpa menghasilkan situs yang pertama), Anda dapat membuat file baru bernama image.htmldi _includes:
<figure class="image">
<img src="{{ include.url }}" alt="{{ include.description }}">
<figcaption>{{ include.description }}</figcaption>
</figure>
Dan kemudian tampilkan gambar dari penurunan harga Anda dengan:
{% include image.html url="/images/my-cat.jpg" description="My cat, Robert Downey Jr." %}
site.urlvariabel.
<figure class="image"><img src="{{ include.url }}" alt="{{ include.description }}"><figcaption>{{ include.description }}</figcaption></figure>
include image.html? Saya mencoba dengan sesuatu seperti {% for image in page.images %}tetapi tidak berhasil. Bisakah kamu membantuku?
Saya tahu ini adalah pertanyaan lama tapi saya pikir saya masih akan berbagi metode saya menambahkan keterangan gambar. Anda tidak akan dapat menggunakan captionataufigcaption tag , tetapi ini akan menjadi alternatif sederhana tanpa menggunakan plugin apa pun.
Dalam penurunan harga Anda, Anda dapat membungkus takarir Anda dengan tag penekanan dan meletakkannya langsung di bawah gambar tanpa memasukkan baris baru seperti:
*image_caption*
Ini akan menghasilkan HTML berikut:
<p>
<img src="path_to_image" alt>
<em>image_caption</em>
</p>
Kemudian di CSS Anda, Anda bisa menatanya menggunakan pemilih berikut tanpa mengganggu emtag lain pada halaman:
img + em { }
Perhatikan bahwa Anda tidak boleh memiliki garis kosong antara gambar dan teks karena itu akan menghasilkan:
<p>
<img src="path_to_image" alt>
</p>
<p>
<em>image_caption</em>
</p>
Anda juga dapat menggunakan tag apa pun yang Anda inginkan selain em. Pastikan ada tag, jika tidak, Anda tidak akan bisa men-style-nya.
<link href="{{ site.baseurl }}/assets/css/main.css" rel="stylesheet">jadi saya hanya menambahkan definisi CSS kustom saya di bagian bawah file ini: // My custom css img + em { display: block; text-align: center; } //image captions
Anda dapat menggunakan tabel untuk ini. Ini bekerja dengan baik.
|  |
|:--:|
| *Space* |
Hasil:
HTML yang benar untuk digunakan untuk gambar dengan teks, adalah <figure>dengan<figcaption> .
Tidak ada Markdown yang setara untuk ini, jadi jika Anda hanya menambahkan teks sekali-sekali, saya sarankan Anda untuk menambahkan html itu ke dalam dokumen penurunan harga Anda:
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...
Spesifikasi Markdown mendorong Anda untuk menyematkan HTML dalam kasus-kasus seperti ini, sehingga itu akan ditampilkan dengan baik. Ini juga jauh lebih sederhana daripada mengotak-atik plugin.
Jika Anda mencoba menggunakan fitur Markdown-y lainnya (seperti tabel, tanda bintang, dll) untuk menghasilkan teks, maka Anda hanya mencari-cari bagaimana Markdown dimaksudkan untuk digunakan.
Riff kecil di bagian atas memberikan suara yang saya temukan menjadi sedikit lebih eksplisit adalah dengan menggunakan sintaks jekyll untuk menambahkan kelas ke sesuatu dan kemudian gaya itu seperti itu.
Jadi di pos Anda akan memiliki:
{:.image-caption}
*The caption for my image*
Dan kemudian di file CSS Anda, Anda dapat melakukan sesuatu seperti ini:
.image-caption {
text-align: center;
font-size: .8rem;
color: light-grey;
Keluar terlihat bagus!
Ada dua solusi semantik yang benar untuk pertanyaan ini:
Saya sudah mencoba beberapa plugin melakukan ini dan favorit saya adalahjekyll-figure .
jekyll-figureSalah satu cara untuk menginstal jekyll-figureadalah menambahkan gem "jekyll-figure"Gemfile Anda di grup plugin Anda.
Kemudian jalankan bundle installdari jendela terminal Anda.
jekyll-figureCukup bungkus penurunan harga {% figure %}dan {% endfigure %}tag Anda.
Keterangan Anda ada di {% figure %}tag pembuka , dan Anda bahkan dapat menatanya dengan penurunan harga!
Contoh:
{% figure caption:"Le logo de **Jekyll** et son clin d'oeil à Robert Louis Stevenson" %}
{% endfigure %}
Sekarang gambar dan teks Anda secara semantik benar, Anda dapat menerapkan CSS sesuai keinginan:
figure (untuk gambar dan teks)figure img (hanya untuk gambar)figcaption (hanya untuk keterangan)Anda harus membuat image.htmlfile di _includesfolder Anda , dan memasukkannya menggunakan Liquid in Markdown .
Buat image.htmldokumen di folder _includes Anda:
<!-- _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>
Gambar /assets/imagesdengan keterangan:
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 -->
%}
Gambar (eksternal) menggunakan URL absolut: (ubah src=""ke 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 -->
%}
Gambar yang dapat diklik: (tambahkan url=""argumen)
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 -->
%}
Gambar tanpa teks:
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 -->
%}
Sekarang gambar dan teks Anda secara semantik benar, Anda dapat menerapkan CSS sesuai keinginan:
figure (untuk gambar dan teks)figure img (hanya untuk gambar)figcaption (hanya untuk keterangan)Anda dapat mencoba menggunakan pandocsebagai konverter Anda. Berikut adalah plugin jekyll untuk mengimplementasikan ini. Pandoc akan dapat menambahkan keterangan gambar yang sama dengan altatribut Anda secara otomatis.
Tetapi Anda harus mendorong situs yang dikompilasi karena github tidak mengizinkan pengaya di halaman Github untuk keamanan.
Jawaban Andrew andrew-wei sangat bagus. Anda juga dapat membuat beberapa rantai bersama, tergantung pada apa yang Anda coba lakukan. Ini, misalnya, memberi Anda gambar dengan alt, judul, dan teks dengan jeda baris dan huruf tebal dan huruf miring di berbagai bagian teks:
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;}
Dengan <img>penurunan harga berikut :
***Image:*** *description*
<p align="center">
<img alt="img-name" src="/path/image-name.png" width="300">
<br>
<em>caption</em>
</p>
Itulah penggunaan teks dasar. Tidak perlu menggunakan plugin tambahan.
Inilah solusi paling sederhana (tapi tidak tercantik): buatlah tabel di sekitar semuanya. Jelas ada masalah penskalaan, dan inilah mengapa saya memberikan contoh saya dengan HTML sehingga Anda dapat memodifikasi ukuran gambar dengan mudah. Ini berhasil untuk saya.
| <img src="" alt="" style="width: 400px;"/> |
| My Caption |
site_roottidak diterima sebagai variabel yang valid. Ketika diterjemahkan itu berakhir sebagaisrc="{{ site.url_root }}....