網頁

2016年5月16日

|

2016 表情符號 V2 更新版 ( Unicode Emoji 格式 ) 顯示策劃

Views:
一個星期前, 發表了 Unicode Emoji 表情符號 2016 版.
期間, 經過研究; 實踐; 改進...
終於找到一個更好, 更方便的程式碼. V2 更新版

  • 放棄使用 CSS 對表的方式
  • 只是用單一段 JavaScript
  • 放入 [設計]>[版面配置]>[新增小工具]>[HTML/Javascript]>
  • 只是針對留言區進行顯示處理
  • 對應 Win8/10 浮動鍵盤所有 Emoji (自帶輸入工具設計中)
  • 加入 YouTube 超連結對應
  • 支援 YouTube 長網址 e.g. https://www.youtube.com/watch?v=usO_6-RuCrg
  • 支援 YouTube 短網址 e.g. https://youtu.be/usO_6-RuCrg
  • 加入圖片超連結對應 e.g. https://c1.staticflickr.com/9/8325/8149501783_656c5e33a1_b.jpg
  • 支援 jpg , jpeg , gif , png 這4種圖片顯示格式
  • Enoji 的轉換用了 ECMAScript 6 指令, 因為它完全不被 IE 支援. 所以 IE "被"沒有效果.

先列出整段 JavaScript

<!-- 2016 My Emoji blogspot 顯示 start -->
<script>(function() {
        var c = document.getElementById("comment-holder");
        if (c) {
            var p = c.getElementsByTagName("p");
            for (i = 0; i < p.length; i++) {
                if (p[i].getAttribute("CLASS") == "comment-content") {
                    var str = p[i].innerHTML.replace(/(http(s?):\/(\/[^\/\s]+)+)(\.jpg|\.jpeg|\.gif|\.png)/gi, "<img style='max-width:500px;' src='$&' />");
                    str = str.replace(/http(s?):\/\/www\.youtube\.com\/watch\?v\=.{11}/gi,
                    function(a) {
                        return "<iframe width='500' height='300' src='https://www.youtube.com/embed/" + a.split("v=")[1] + "' frameborder='0' allowfullscreen></iframe>"
                    });
                    str = str.replace(/http(s?):\/\/youtu\.be\/.{11}/gi,
                    function(a) {
                        return "<iframe width='500' height='300' src='https://www.youtube.com/embed/" + a.split("/")[3] + "' frameborder='0' allowfullscreen></iframe>"
                    });
                    if (
                    /*@cc_on!@*/
                    false || !!document.documentMode == false) {
                        str = str.replace(/\ud83c[\udc00-\udfff]|\ud83d[\udc00-\ude4f]|\ud83d[\ude80-\udeff]|\u203c|[\u2b1b-\u2b1c]|[\u2b05-\u2b07]|[\u2049-\u2935]|[\u3030-\u3299]|\u00a9|\u00ae/gi,
                        function(A) {
                            return '<img style="margin: 0 0.1em" width="20" src="//mail.google.com/mail/e/' + A.codePointAt(0).toString(16) + '" />'
                        });
                    }
                    p[i].innerHTML = str;
                };
            };
        };
    })();</script>
<!-- 2016 My Emoji blogspot 顯示 end -->

程式已經指定 Emoji 大小為 20px (第22行 width='20')
YouTube 大小為 500px x 300px (第11,15行 width='500' height='300')
圖片顯示不超過 500px (第8行 max-width:500px)
以上數字因應你的需要, 可以自行修改.
YouTube & 圖片的網址, 建議整句放在同一行, 而沒有其他字句. 顯示較好.

這篇的留言裡, 先作出一個示範展示. 這裡上一張未經處理的原始文字截圖, 作為對比.

安裝只是用單一段 JavaScript,
放入 [設計]>[版面配置]>[新增小工具]>[HTML/Javascript]>
如下圖...


5 則留言:

  1. Emoji
    😊😎🎃🎤🍙📣🚀⛲⛅🐭🗻🉐

    YouTube
    https://www.youtube.com/watch?v=usO_6-RuCrg

    JPG
    https://c1.staticflickr.com/9/8325/8149501783_656c5e33a1_b.jpg

    GIF
    http://a4.files.theultralinx.com/image/upload/MTI5MDU2ODM1OTcyOTUyMDM0.gif

    PNG
    https://lh3.googleusercontent.com/-X6ia1syva-g/VKX_6CG3O6I/AAAAAAAAGw4/cWfVjB0k-Zk/w506-h438/15.png

    回覆刪除
  2. 你好, 你有關BLOGGER O既文章好有用!!! 多謝

    我想加EMOJI去個BLOG COMMENTS, 已按照你的方法做但不成功@@
    我嘗試開HTML加以上的SCRIPT進去

    for (i = 0; i < p.length; i++) {

    第 17 欄):The content of elements must consist of well-formed character data or markup.

    請問有方法可解決嗎?


    另外想請教一下有關BLOGGER的其他問題
    https://mandywakaka.blogspot.hk/2018/01/wh_25.html?showComment=1516950077992#c6275891270380862174
    我的BLOG留言底下有一欄------ 訂閱: 發佈留言 (Atom)
    這個按進去只有一堆亂碼@_@|||
    但我又完全找不到地方可以把它除掉

    這是我自己加加減減過的主題
    https://www.dropbox.com/s/d9mhh54ikcxtgv3/%21new9.xml?dl=0
    請問如果你有空閒的話可否幫我找找問題所在? 謝謝!

    回覆刪除
    回覆
    1. 你好, 先謝謝你 😄
      這裡的 Javascript code, 不建議用 HTML 方式寫入. 因為 blogspot 的 HTML 編輯器, 對一些 Javascript 會發生錯誤分析.
      建議用介紹的 [設計]>[版面配置]>[新增小工具]>[HTML/Javascript]> 寫入這段 code.
      我在上面網頁, 加入了對應圖片, 方便了解.💬

      刪除
    2. "訂閱: 發佈留言 (Atom)" 問題,
      在你的網誌"首頁", 我用 chrome 的 "檢視網頁原始碼" 功能, 看了你的網誌內容.
      用"Ctrl-F"(尋找)功能, 找到"訂閱"這2個字, 約在 1645 行, 找到了.
      它的主要關鍵詞是 "div class='feed-links"
      在 dropbox 文件中約在 1285 行找到它.
      它看似是 [版面配置]>[新增小工具]> 的一個加入工具, 功能是"訂閱". 可試試在 [版面配置] 裡找找.

      刪除
    3. Thank you!!!! ;)
      我其實一開始係試左放入個新增HTML/JAVASCRIPT, 但係放完之後都冇反應, 所以我再試下貼O係HTML度.
      不過可能係我下晏發緊夢COPY錯少左野@_@|||
      我頭先再試多一次貼落個小工具度就得左!!!!

      第二個問題我O係HTML度搵左div class='feed-links 呢一段
      我試左由
      < div class ......... /div >
      都delete哂, 之後就解決到呢個問題啦!!!!
      唔該哂你呀!!!!
      thank you so much!!!

      刪除

★ 謝謝留言,留下的一句話,已經是很好的推動力 !
★ 勾選右下角的「通知我 」可以由電郵收到留言回覆!
★ 留言與文章無關的主題時,請到頂列「留言版 GuestBook」暢所欲言。
★ 若發佈留言後,留言不見了。可能被系統錯誤判斷為垃圾留言,請不用擔心,我會盡快將留言恢復。
◎ 本留言區已經支援 Unicode Emoji,對應 Win10 的浮動鍵盤。歡迎貼上,增加效果。
◎ 支援 YouTube 超連結對應,支援 jpg , jpeg , gif , png 這4種圖片顯示格式。
◎ 文章介紹 2016 表情符號 V2 更新版 ( Unicode Emoji 格式 ) 顯示策劃