2017年5月1日 星期一

Emoji 表情符號輸入小幫手 (書籤工具)

Emoji 表情符號輸入小幫手 (書籤工具)

Wayne Fu 0 A+
emoji-unicode-input-helper-bookmark-Emoji 表情符號輸入小幫手 (書籤工具)前陣子有讀者留言時使用 Unicode 表情符號,覺得效果還不錯,語意看起來活潑許多,因此決定動手做個表情符號的輸入工具。

其實這類的留言輔助工具,在網路上已經可以找到一些,而寫部落格的初期,也曾思考過是否安裝這類的外掛。但這畢竟算是使用率較低的工具,如果為了花俏的功能而拖慢網頁載入的速度,我認為並不值得,因此一直擱置這個構想。

那麼現在重啟這個計畫,是因為找到了不錯的解決方案,部落格不用特別安裝外掛,自然也不會影響網頁載入速度。

(圖片出處: pexels.com)


一、書籤工具介紹


1. 一般外掛的隱憂

目前在網路上能找到的解決方案,主要是用 "圖片" 的方式來顯示表情符號,那麼會有兩種隱憂:

  • 外掛連結:作者不再維護、或網頁空間失效
  • 圖片連結:圖床失效

不管是哪種失效,將來都會很麻煩,可能表情符號的圖片會變成叉燒包,或是留下一串亂碼字串。詳情的說明可參考「Emoji 表情符號輸入小幫手 (網頁版)」→「二、其他工具」→「使用圖案、表情圖案外掛」


2. Unicode 的優點

使用 Unicode 表情符號,就不用擔心圖片連結失效的問題,而且還可以跨平台顯示,能確保文章、留言使用的符號,將來都不會不見。

而為了讓不同作業系統版本可以顯示,此工具只挑選 Win7 可顯示的 Unicode 特殊符號,以確保相容性。


3. 書籤版

將這個外掛工具做成書籤執行,網站就不必每次載入頁面時都執行外掛,把執行權交給使用者決定,需要輸入表情符號時,才點擊書籤執行工具。。


4. 需要有網路空間

為了能用書籤執行,使用者必須有網路空間存放 js 外連,例如 Dropbox、Github 等,安裝步驟會多一些。



二、執行效果


emoji-unicode-input-helper-bookmark-1-Emoji 表情符號輸入小幫手 (書籤工具)

上圖為點擊標籤工具後的效果,螢幕上會彈出「Emoji 表情符號輸入小幫手」視窗,點擊圖案後,即可貼在留言框。

想要先測試這個工具的效果,可在「Emoji 表情符號輸入小幫手」操作網頁版的功能,基本上跟書籤版的介面大同小異。



三、安裝步驟


<a href="javascript:var emojiTop = 50, emojiRight = 10, getScript=function(d,f){var e=document.createElement('script');if(e.readyState){e.onreadystatechange=function(){if(e.readyState=='loaded'||e.readyState=='complete'){e.onreadystatechange=null;if(f){f()}}}}else{e.onload=function(){if(f){f()}}}e.src=d;document.documentElement.firstChild.appendChild(e)},callback=function(){jQuery.getScript('https://drive.google.com/file/d/0BykclfTTti-0WkNQRXZWQ1BUaDg/view')};getScript('https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js',callback);">將此連結拖曳到書籤列或加入書籤</a>
首先有幾個地方需要修改:


完成以上修改後,可以開始製作書籤連結,有兩種方式:

1. 如果熟悉如何製作書籤的話,請將全部有顏色的字串(含改過的 js 連結)複製,貼到書籤的連結即可使用

2. 如果對書籤製作不熟悉,以 Blogger 為例,可開一篇新文章,貼上所有程式碼(含改過的 js),儲存後即可看到文章內的這個超連結。然後直接將超連結拖曳到書籤列即可使用。



四、補充說明


1. 要叫出「表情符號輸入小幫手」時,點擊製作好的書籤即可。

2. 第一次執行時,可能會花個 3~5 秒鐘,因為必須載入一個 jquery 連結 + 外掛 js 連結。

3. 第二次以後執行就很快了,應該 1 秒內就會出現,因為瀏覽器會對這兩個連結檔案快取,不會真的讀取 js 外連。


更多字型相關文章:
0 0
如這篇文章對你有幫助,歡迎「分享」到 FB、「追蹤」粉絲團、「訂閱」最新文章

沒有留言:

張貼留言注意事項:

◎ 勾選「通知我」可收到後續回覆的mail!
◎ 請在相關文章留言,與文章無關的主題可至「Blogger 社團」提問。
◎ 請避免使用 Safari 瀏覽器,否則無法登入 Google 帳號留言(只能匿名留言)!
◎ 提問若無法提供足夠的資訊供判斷,可能會被無視。建議先參考這篇「Blogger 提問技巧及注意事項」。
◎ CSS 相關問題非免費諮詢,建議使用「Chrome 開發人員工具」尋找答案。
◎ 手機版相關問題請參考「Blogger 行動版範本的特質」→「三、行動版範本不一定能執行網頁版工具」;或參考「Blogger 行動版範本修改技巧 」,或本站 Blogger 行動版標籤相關文章。
◎ 非官方範本問題、或貴站為商業網站,請參考「Blogger 免費諮詢 + 付費諮詢
◎ 若是使用官方 RWD 範本,請參考「Blogger 推出全新自適應 RWD 官方範本及佈景主題」→ 不建議對範本進行修改!
◎ 若留言要輸入語法,"<"、">"這兩個符號請用其他符號代替,否則語法會消失!
◎ 為了過濾垃圾留言,所有留言不會即時發佈,請稍待片刻。
◎ 本站「已關閉自刪留言功能」。

TOP