GIZ! Blog

Emoji di blog Jekyll

— May 10, 2020 - Terakhir diedit: May 11, 2020 —

Cerita saya menambahkan Emoji dalam blog atau situs berbasis Jekyll menggunakan Jemoji Gem.

TL:DR menggunakan Jemoji

Tambahkan kode ini di Gemfile

gem 'jemoji'

Tambahkan kode dibawah di _config.yml

plugins:
  - jemoji

:bulb: Jika kamu menggunakan Jekyll versi dibawah 3.5.0, gunakan gems daripada plugins.

Lalukan bundle install

Lalu tulis shortcode :+1: pada salah satu postingan file .md kamu maka otomatis akan muncul :+1: daripada teks :+:`

TL:RA

Kemarin ketika saya melihat-lihat README.md di salah satu repositori github, sangat menarik melihat emotikon bertebaran.

Dan ternyata itu namanya emoji.

Saya jadi kepikiran menambahkan di README saya dan blog ini.

Menambah emoji dengan cara copy-paste

Pada awalnya, saya menggunakan https://emojipedia.org dengan cara copy paste dari website ybs ke sini seperti ini 👍 dan lumayan sempurna! 🎉

Awalnya…

Namun lama-lama cara ini tidak efektif. Karena saya harus masuk ke website, menjadi emoji yang diinginkan, klik copy, dan klik paste, lalu diulangin lagi.

Lalu saya coba buka kembali repo yang menarik yang saya sebutkan kembali, dan lihat source codenya ternyata isinya bukan image emoji yang saya bayangkan.

Melainkan…

This is great! :+1:

Happy! :tada:

:party_popper:

Usut punya usut ternyata itu adalah semacam shortcode, atau kode.

Menambah emoji dengan cara otimatis render menggunakan Jemoji

Jemoji adalah wrapper dari Gemoji. Dan intinya, otomatis render menggunakan gemoji. Cara menginstall cukup mudah.

Tambahkan kode ini di Gemfile

gem 'jemoji'

Tambahkan kode dibawah di _config.yml

plugins:
  - jemoji

:bulb: Jika kamu menggunakan Jekyll versi dibawah 3.5.0, gunakan gems daripada plugins.

Lalukan bundle install

Lalu tulis shortcode :+1: pada salah satu postingan file .md kamu maka otomatis akan muncul :+1: daripada teks :+:`

Mudah bukan?


Referensi

  • https://github.com/github/gemoji
  • https://github.com/jekyll/jemoji
  • https://emojipedia.org