前言

一張圖勝千言萬語，是時候加上emoji的功能了。( 好吧，我承認只是為了讓blog更華麗 )

How

加入 emojify.js

emojify.js是一個自動將網頁上的emoji代號轉成對應emoji圖的好用工具，基本上在head中加入它的js就可以了。

設定 emoji 的圖片路徑

emoji 的圖要準備好，我將emojify github中的 dist/images/basic 加到網頁對應的 /images/emoji 路徑中。

設定 emojify

emojify.js 提供了一些參數可以做額外的設定，可以參考官方的README。下面是本部落格的設定：

emojify.setConfig({
  ignore_emoticons: true,
  img_dir: '/images/emoji',
  blacklist: {
    elements: ['script', 'textarea', 'pre', 'code'],
    classes: ['no-emojify']
  }
});
emojify.run();

其中ignore_emoticons: true指的是不使用:)之類的符號，而是只使用:smile:等代號，這樣可以避免貼程式碼被誤轉成 emoji 的情況。img_dir: '/images/emoji'則是設定 emoji 的圖片路徑，注意這裡要用/開頭，不然會用相對路徑來找圖片。blacklist則是用來設定哪些元件或是css類別不使用 emoji，因為預設把連結拿掉了，所以我把它加回去。

在文章中插入 emoji

只要在想顯示 emoji 的地方加上代號即可，不過要注意的是在中文句子中要用空白隔開，例如：這是一句 :smile: 中文。，這樣就有 emoji 可以用了。Ya ~

Refs

Github - emojify.js

前言
How
Refs