Insert class CSS pada tag <p> ke dalam variable {{.Content}} Hugo
Optimalkan tampilan konten Hugo dengan menambahkan kelas CSS ke tag <p> dalam variabel {{.Content}} menggunakan cara yang sederhana.
- Fauzan My
- 1 min read
Secara default SSG Hugo, variabel {{ .Content }} akan merender paragraf tag <p></p> tanpa atribut CSS kustom. Namun, kita seringkali ingin menambahkan gaya CSS tertentu ke dalam tag tersebut.
Sayangnya, tidak langsung insert kelas CSS ke dalam variabel {{ .Content }} Hugo tanpa melakukan beberapa langkah tambahan.
Jika ingin menambah class seperti <p class="font-semibold">{{.Content}}</p>, hasil render tetap menghasilkan <p>Your posting article</p> mentah.
Hugo akan mengabaikan atribut kelas tersebut.
Berikut adalah cara untuk menambahkan atribut kelas ke dalam tag <p> pada variabel {{ .Content }} Hugo:
{{ .Content | replaceRE "<p>" "<p class=\"py-4\">" | safeHTML }}
Cara di atas menggunakan fungsi Hugo replaceRE untuk mencari tag <p> dan menggantinya dengan <p class="your-class">. Kemudian, safeHTML digunakan untuk memastikan bahwa outputnya safe.
Dengan menambahkan kelas-kelas, misalnya TailwindCSS ke dalam tag <p> konten post Hugo tampilan paragraf jadi lebih enak dibaca.
Semoga bermamfaat.
