Menampilkan Gambar Dan Teks Di Situs Hugo

Sebelumnya kita sudah belajar cara membuat situs hugo dan belajar struktur direktori hugo.

Sekarang, kita akan belajar cara menampilkan gambar dan teks pada halaman utama situs hugo.

Langkah pertama, buka visual studio code, sublime text, vim atau aplikasi teks editor apapun yang kamu gunakan.

Kali ini dan kedepannya saya akan memberikan panduan menggunakan software visual studio code.

Panduan menampilkan teks dan gambar di halaman utama hugo

1. Buka folder belajarhugo atau folder situs hugo kamu (pada pembelajaran sebelumnya, kita sudah membuat situs dengan nama belajarhugo).
2. Di dalam folder belajarhugo, buatlah sebuah file dengan nama index.html di dalam folder layouts. Hasilnya akan terlihat seperti ini:

1layouts
2    ├── index.html

3. Buka file index.html kemudian sisipkan gambar dengan tag HTML dan ketik teks dibawahnya.
   Kalian juga bisa menggunakan kode dibawah ini (salin dan tempel di file index.html).

1<img src="https://upload.wikimedia.org/wikipedia/commons/6/60/White_Cat_Nursing_Four_Kittens.jpg" alt="foto kucing">
2<p>Kucing disebut juga kucing domestik atau kucing rumah (nama ilmiah: <em>Felis silvestris catus</em> atau <em>Felis catus</em>) adalah sejenis mamalia karnivora dari keluarga Felidae. Kata "kucing" biasanya merujuk kepada "kucing" yang telah dijinakkan, tetapi bisa juga merujuk kepada "kucing besar" seperti singa dan harimau.</p>

Seperti yang sebelumnya sudah kita pelajari. Kita bisa menyimpan foto atau gambar di folder static.

Supaya foto atau gambar di folder static ditampilkan. Kita dapat mengakses foto atau gambar tersebut dengan memasukkan jalur folder dari gambar di atribut src pada tag <img>.

Sesuaikan nilai dari atribut src dengan jalur foto atau gambar yang kamu punya.

Contoh: <img src="images/kucingku.jpg">

1. Buka browser (chrome, firefox, atau browser lainnya yang kamu punya). Ketik localhost:1313 di kolom pencarian browser.

   

Jangan lupa simpan filenya ya 😄.