各大免費素材、圖示、插畫、向量圖庫整理

August 15, 2019, 1:40 am

≫ Next: ICON 免費素材搜尋引擎﹍一次找齊各大素材圖庫

≪ Previous: 部落格文章修改發佈日期對 SEO 的影響

$

0

0

過去製作的「CC0 免費圖庫搜尋引擎」可搜尋高畫質圖片，適合用於部落格、書籍、海報等各種需要完整圖片的場合，例如大部分本站文章開頭使用的封面圖。

對於設計用途而言，會比較需要以下這些類別的圖片：

• 透明去背圖
• ICON 圖示
• 背景素材
• 向量圖
• 美術插畫、剪影圖案

例如製作簡報時，可能某處會需要一根指揮棒的圖案，或是角落需要點綴一隻可愛的小動物、植物等等。

更多情況會是在規劃設計各種平面作品、網站時，需要各種物體的素材、向量圖等等。例如設計聖誕節慶的意象時，會希望能找到各種聖誕樹、禮品的圖案，來進行修改、排列組合。

本篇會整理各大向量、素材免費圖庫，方便快速找到需要的圖案，而介紹順序將依照網站圖片被 Google 索引的圖片數量排列。

一、免費圖庫使用須知

首先必須非常嚴肅地提醒讀者，這些免費圖庫跟「CC0 免費圖庫」在使用上有非常巨大的差別，CC0 圖片有這些特質：

可商業用途 ‧ 允許修改再利用 ‧ 免標示出處

而一般免費圖庫無法任意使用，必須詳閱每一張圖片的條款，例如：

• 有的限制只能個人使用，不得商業使用
• 有的必須在圖片、或網站上署名作者或圖庫
• 有的直接標示 CC 授權，需以相同方式分享
• 但也有的允許商業使用

因此下載之前請特別注意該圖片附註的使用條款聲明，以免某天收到侵權通知。

二、可中文搜尋的圖庫

1. pngtree

• 網址：zh.pngtree.com
• 索引量：4,060,000
• 介紹文章：pngtree超過340萬張去背圖片免費下載
• 特點：
  • 有大量去背圖
  • 分類做得很好，就算只使用滑鼠操作也能找到好圖片
  • 搜尋功能非常強大，可依照顏色、各種分類進行篩選圖片
  • 免費帳號一天最多下載兩張

2. illustAC

• 網址：ac-illust.com/tw
• 索引量：1,120,000
• 介紹文章：illustAC 超過 90,000 張免費插圖向量圖
• 特點：
  • 以向量圖為主
  • 大部分可商業使用、不需署名
  • 免費帳號下載時要等待倒數 10 秒

3. silhouetteAC

• 網址：silhouette-ac.com/tw
• 索引量：518,000
• 介紹文章：silhouetteAC 超過 47,000 張免費剪影向量圖
• 特點：
  • 以剪影向量圖為主
  • 大部分可商業使用、不需署名
  • 免費帳號下載時要等待倒數 10 秒

4. Pixabay

這是最大、最知名的 CC0 免費圖庫，但也額外提供了向量、插畫圖片：

• 向量網址：pixabay.com/zh/vectors/
• 插畫網址：pixabay.com/zh/illustrations/
• 索引量：兩者加總 281,000
• 特點：
  • 完全可 CC0 商用，不用多解釋

5. easyicon

• 網址：easyicon.net/language.zh-tw
• 索引量：76,600
• 介紹文章：Easyicon 超過四十萬個免費圖示，打包快速下載
• 特點：
  • 以小圖示為主
  • 搜尋功能強大，可依照顏色、多種分類進行篩選圖片
  • 可集中所有喜愛的圖示，一次打包下載

三、英文圖庫

1. freepik

• 網址：freepik.com
• 索引量：26,200,000
• 介紹文章：Freepik 逾43萬張專業圖片，製圖排版沒煩惱
• 特點：
  • 搜尋功能強大，除了主分類 "向量""照片""圖示"之外，還可依顏色、圖片形狀等多種選項篩選。
  • 分類功能非常用心，圖片已設定了數十種類別，例如動物、卡通、材質、食物等等。
  • 免費使用都需要註明出處

2. Vecteezy

• 網址：vecteezy.com
• 索引量：5,400,000
• 特點：
  • 以向量圖為主
  • 搜尋功能可依授權條款篩選
  • 分類的項目還不少

3. FLATICON

• 網址：flaticon.com
• 索引量：4,290,000
• 介紹文章：FLATICON-自行挑選icon打包免費下載-還可線上製作Patterns
• 特點：
  • 以圖示為主
  • 可將所有喜愛的圖示，一次打包下載
  • 也可將多個圖示組合成一張樣版、線上編修

4. IconArchive

• 網址：iconarchive.com
• 索引量：1,320,000
• 介紹文章：IconArchive － 專業圖示搜尋引擎，超過二十萬個免費圖示下載
• 特點：
  • 以圖示為主
  • 下載操作方式友善方便
  • 搜尋功能強大，可依照顏色、多種分類進行篩選圖片

5. vectorportal

• 網址：vectorportal.com
• 索引量：967,000
• 介紹文章：Vectorportal免費向量圖素材網站
• 特點：
  • 以向量圖為主
  • 目前唯一看到全站可商業使用的免費向量圖庫，類似 CC0 條款

6. StickPng

• 網址：stickpng.com
• 索引量：655,000
• 介紹文章：StickPNG 免費 PNG 插圖下載，超過一萬五千張透明背景圖庫推薦
• 特點：
  • 以透明背景圖為主
  • 可從多種分類尋找圖片

7. Icon Ninja

• 網址：iconninja.com
• 索引量：643,000
• 介紹文章：Icon Ninja 推薦免費圖示搜尋引擎，收錄將近 90 萬個 PNG、SVG 圖案下載
• 特點：
  • 以圖示為主
  • 可組合多個圖示，製作成一張「CSS Sprites」圖片

四、其他圖庫

以下列表會不定期刪除數量太少的圖庫，新增數量大的圖庫，依照 Google 索引數量，視情況調整權重。(2019.8.15 止)

• stockio：603,000 → 圖庫搜尋引擎
• iconshock：151,000 → 圖示為主，可線上編修顏色
• pngimg：150,000 → 透明背景圖為主
• PNG MART：80,400 → 透明背景圖為主

已刪除圖庫：

• findicons：257,000 → 圖庫搜尋引擎
• Vector4Free：64,200 → 向量圖為主

五、補充

本篇主要作為圖庫搜索引擎工具之用，日後會不定期進行更新調整。

更多「免費圖庫」相關文章：

----
如這篇文章對您有幫助，請順手按個 +1 或分享，謝謝！

---

ICON 免費素材搜尋引擎﹍一次找齊各大素材圖庫

August 19, 2019, 6:44 pm

≫ Next: 讓相簿圖片在網頁上呈現各種拼貼效果﹍jQuery 畫廊外掛

≪ Previous: 各大免費素材、圖示、插畫、向量圖庫整理

$

0

0

當初發佈「CC0 免費圖庫搜尋引擎」後，有讀者及朋友都建議加入素材圖庫。當時的想法是，這些素材網都不是 CC0 圖庫，因此不適合放在一起，否則授權規定一定十分混淆、容易引起爭端。

不過既然需求還不少，那麼另外做一個專門找素材圖片的搜尋引擎，也是滿有必要的。

這些年來「CC0 免費圖庫搜尋引擎」多次改版及更新，累積了不少調校的技術，讓搜尋成效更完善。現在將這些經驗用來製作「免費素材搜尋引擎」，得以一開始就具備相當不錯的性能，那麼推出日期雖然晚了幾年，但也不算壞事。

前往「免費素材搜尋引擎」

一、使用說明

進入搜尋引擎頁面後，如果沒用過 CC0 搜尋引擎的話，使用上請參照以下說明：


1. 橢圓形



所有橢圓形的分頁，按下後就能直接在站內搜尋該圖庫的圖片。


2. 長方形



而所有長方形的分頁，無論是什麼顏色，按下後都會另開視窗，連到外部圖庫時不需另外輸入原本的搜尋字串，仍然可直接顯示搜尋結果。

會使用外部圖庫連結的原因是：

• 使用站內搜尋時發現，某些圖庫 Google 索引的狀態不佳，使用上不便利，故必須割捨這些圖庫
• 但該圖庫的索引量很大，仍有使用價值，故保留使用站外搜尋的權利

3. 紅色



由於中文搜尋的需求不小，如果能夠讓使用者一眼就看出哪些圖庫可以搜尋中文，將會是非常體貼的設計。

因此特別將可以搜尋中文的圖庫使用紅色標示，無論形狀是橢圓形、或長方形，上圖可看到目前有 7 個使用紅底的分頁。


4. 綠色



CC0 是最方便、不需特別研究的使用條款，上圖可看到目前有 5 個使用綠色的分頁，無論是使用綠底或綠框，都屬於 CC0 圖庫。


5. 切換其他圖庫



為了節省空間，預設隱藏第二行的分頁，請按上圖按鈕，可以打開或收合其餘的分頁按鈕。


6. 行動版



手機的寬度有限，為了版面美觀，將每個站內搜尋的圖庫，減少顯示的字元數。

雖無法一眼知道圖庫名稱，不過跟網頁版比對一下就大致能瞭解。




而外部圖庫連結，則需要盡量保持全名，以免跑錯網站。


7. 基本操作

如第一次使用的話，可參考「高畫質免費圖庫搜尋引擎﹍2015 版」，瞭解這個工具的運作原理、及基本操作。

二、圖庫篩選

1. 圖庫記錄

這個搜尋引擎索引的各種圖片，理論上數量會隨著時間而越來越豐富。

而收錄的圖庫、以及索引數量，最新狀態會紀錄在「各大免費素材、圖示、插畫、向量圖庫整理」。


2. 圖庫篩選原則

製作這個搜尋引擎幾天下來，發現難度比「CC0 免費圖庫搜尋引擎」高，原因為：

• CC0 圖片大部分的索引準確度很高
• 素材、圖示類的圖片多半很小，因而頁面上會被該網站塞了許多其他圖片
• 導致 Google 索引時，常常同一個頁面可能索引了不相干的圖片、或是廣告圖片
• 因此必須一一測試每個圖庫的收尋結果、測試各種 keyword
• 如果某圖庫的搜尋結果良率不夠高，就必須淘汰該圖庫，無論該圖庫是否索引量很高、是否很知名

因此可能隔一段時間就必須重新測試所有圖庫的搜尋結果，評測搜尋良率，決定哪些圖庫需要移除，然後從候補圖庫拉上來填補。

三、圖庫分類

如果覺得很難從圖庫名稱，一眼就看出該圖庫的主題，以下做個簡單分類，要搜尋該分類的圖案時，直接點選這些分頁：

1. 透明去背圖

判別很簡單，看到圖庫名稱有 png 就是了：

• PngTree
• StickPng
• PngImg
• PngMart

2. 小圖示

判別很簡單，看到圖庫名稱有 icon 就是了：

• EasyIcon
• FlatIcon
• IconArchive

3. 向量圖

• vectorportal
• Pixabay向量
• VectorMe
• illustAC → 向量美術圖
• silhouetteAC → 向量剪影圖
• Vecteezy

4. 其他

• Pixabay插畫
• FreePik → 綜合

四、圖片使用條款

雖然是免費圖庫，但不代表可以隨心所欲使用圖片，下載圖片之前請務必在該頁面的圖片前後左右找找，看看授權使用條款是如何描述的。

以下簡略舉例幾種狀況，但不代表含括所有案例：

1. CC0 圖庫

只要沒有拿 CC0 圖片商用，基本上要怎麼使用都可以。如果要商用的話，請務必閱讀這篇「CC0 圖片商業使用注意事項」。


2. 只可個人使用



上圖為 easyicon 的某張貓咪圖示，標示了「Free for personal use only」，也就是個人使用免費，不得商用的意思。


3. 允許商業使用、有但書



上圖為「Freepik 某張圖案」，標示了「Free for personal and commercial purpose with attribution」，代表可以個人及商用，但必須署名。

而商用如何進行署名的作法，則必須點進「How to attribute the author?」這個連結，請詳實照做，以免侵權。


4. 需要署名、禁止印刷銷售



上圖為「pngtree 某張圖案」，標示了「需要標註來源. 禁止印刷銷售.」。

而標註來源的作法，通常下載圖片時就會自動附上連結語法，只要複製貼上即可。

五、整合式服務

最後介紹一下這個搜尋引擎的優點，跟其他同質的圖庫、搜尋引擎比起來，「免費素材搜尋引擎」最方便、快速：

• 第一階段可使用這個工具的橢圓形分頁
• 若是找不到滿意的圖片，第二階段再使用方形分頁，另開視窗可直接顯示搜尋結果，做個別的搜尋。
• 這個工具無論是進行搜尋、切換圖庫、或是切換數字分頁，都是使用動態載入，速度非常快
• 其他任何圖庫網站，做任何搜尋動作、切換分頁，都要重新載入頁面，多個動作累積操作下來，速度慢很多

相信這整合式的服務，可以讓搜尋素材的流程更加順暢，在同一個頁面就能搜尋完所有圖庫。

P.S. 目前此工具剛開始上線，如對您有所幫助，那麼操作上若發生任何錯誤、或是哪裡覺得可以設計的更好，歡迎隨時回報。相信這個搜尋引擎如果可以改的更好，您使用起來也能更順暢！

更多「免費圖庫」相關文章：

----
如這篇文章對您有幫助，請順手按個 +1 或分享，謝謝！

讓相簿圖片在網頁上呈現各種拼貼效果﹍jQuery 畫廊外掛

August 24, 2019, 5:27 pm

≫ Next: 讓 Google 試算表快速跳到指定行號

≪ Previous: ICON 免費素材搜尋引擎﹍一次找齊各大素材圖庫

$

0

0

這是「jQuery 相簿畫廊外掛 nanogallery2」系列文的第二篇，本篇將會介紹非常具有藝術感的「Mosaic 拼貼式」版型，如同觀賞美術館(gallery)畫作一般。

一、官方說明書

首先有必要瞭解一下「Mosaic 拼貼式」的版型製作原理，在「官方說明書」頁面，往下捲到「Mosaic layout」這個區塊，提供一個簡單的範例說明：



參照上圖，將版面切割成九宮格後，需要設定的參數有以下四種：

• c：代表 column，也可看做 X 軸(直向)座標
• r：代表 row，也可看做 Y 軸(橫向)座標
• w：代表 width，也就是寬度
• h：代表 height，也就是高度

每張圖片都需要設定以上 4 組參數，上圖 Mosaic 版面一共使用了 5 張圖，這些圖片的參數如下：

galleryMosaic : [
{ c: 1, r: 1, w: 2, h: 2 },
{ c: 3, r: 1, w: 1, h: 1 },
{ c: 3, r: 2, w: 1, h: 1 },
{ c: 1, r: 3, w: 1, h: 1 },
{ c: 3, r: 3, w: 2, h: 1 }
]

第一張圖的 { c: 1, r: 1, w: 2, h: 2 }代表：

• 起始座標從左上開始計算
• c: 1, r: 1 就是左上角那一格
• w: 2, h: 2 代表這張圖的寬、高都是 2 個單位
• 這張圖的面積將佔據從左上角延伸出來 2 x 2 的大小

第二張圖的 { c: 3, r: 1, w: 1, h: 1 }代表：

• c: 3, r: 1 就是右上角那一格
• w: 1, h: 1 代表這張圖的寬、高都是 1 個單位
• 這張圖的面積將佔據從右上角延伸出來 1 x 1 的大小

接下來以此類推，就能讓程式知道每張圖佔據哪個位置、佔用多少面積，從而拼貼出自己想要的 Mosaic 版面。

只要發揮想像力，你的畫廊將能呈現各種天馬行空的效果，以下直接來看範例。

二、抽象效果

上圖這樣的不規則拼貼展示效果，出自官網「nanogallery2 demonstrations」。

以下提供範例程式碼：

<script src='//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js'></script>
<link href="https://unpkg.com/nanogallery2/dist/css/nanogallery2.min.css" rel="stylesheet" type="text/css"></link>
<script type="text/javascript" src="https://unpkg.com/nanogallery2/dist/jquery.nanogallery2.min.js"></script>
<div id="nanogallery1"></div>
<script>
$("#nanogallery1").nanogallery2({
thumbnailHeight: 300,
thumbnailWidth: 300,
galleryMosaic: [
{ "w": 5, "h": 3, "c": 2, "r": 1 },
{ "w": 2, "h": 2, "c": 1, "r": 2 },
{ "w": 2, "h": 2, "c": 7, "r": 2 },
{ "w": 2, "h": 2, "c": 2, "r": 4 },
{ "w": 3, "h": 4, "c": 4, "r": 4 },
{ "w": 3, "h": 4, "c": 7, "r": 4 },
{ "w": 2, "h": 2, "c": 10, "r": 5 },
{ "w": 4, "h": 2, "c": 11, "r": 6 }
],
thumbnailGutterWidth: 0,
thumbnailGutterHeight: 0,
thumbnailBorderHorizontal: 5,
thumbnailBorderVertical: 5,
thumbnailHoverEffect2: "imageGrayOn|scale120",
thumbnailLabel: {
display: false
},
items: [{
src: "https://4.bp.blogspot.com/-1g7zj-oB-s4/XFO0dywZTVI/AAAAAAAAYRk/_t7XrH7YtQoCp67gHxZ4pskAHX9TUnqHQCLcBGAs/s1600/cc0-image-stock-license.jpg",
srct: "https://4.bp.blogspot.com/-1g7zj-oB-s4/XFO0dywZTVI/AAAAAAAAYRk/_t7XrH7YtQoCp67gHxZ4pskAHX9TUnqHQCLcBGAs/s300/cc0-image-stock-license.jpg",
title: "pic 1"
}, {
src: "https://2.bp.blogspot.com/-MQgmDdWOn5s/WoEcbqEIWPI/AAAAAAAAWXo/h8U_GHIW75obyskVvwgGQlD3ji0gjU7NACLcBGAs/s1600/will-google-close-blogger-business-analysis.jpg",
srct: "https://2.bp.blogspot.com/-MQgmDdWOn5s/WoEcbqEIWPI/AAAAAAAAWXo/h8U_GHIW75obyskVvwgGQlD3ji0gjU7NACLcBGAs/s300/will-google-close-blogger-business-analysis.jpg",
title: "pic 2"
}, {
src: "https://4.bp.blogspot.com/-Vp6_fuEU8zM/V7vRUTEb-HI/AAAAAAAAOJE/9YVKsFPH6Tk1ADOnOK_yU44EXCthIY75gCLcB/s1600/blogger-free-consultant.jpg",
srct: "https://4.bp.blogspot.com/-Vp6_fuEU8zM/V7vRUTEb-HI/AAAAAAAAOJE/9YVKsFPH6Tk1ADOnOK_yU44EXCthIY75gCLcB/s300/blogger-free-consultant.jpg",
title: "pic 3"
}, {
src: "https://1.bp.blogspot.com/-Kix19BaDmNE/Wy4Y_U_3uPI/AAAAAAAAXPY/nIwxapAva4QVDYpZLcFssWe4_q7KkDvVgCLcBGAs/s1600/mobile-detect-webview-fb-line-in-app.jpg",
srct: "https://1.bp.blogspot.com/-Kix19BaDmNE/Wy4Y_U_3uPI/AAAAAAAAXPY/nIwxapAva4QVDYpZLcFssWe4_q7KkDvVgCLcBGAs/s300/mobile-detect-webview-fb-line-in-app.jpg",
title: "pic 4"
}, {
src: "https://1.bp.blogspot.com/-G607thP7cWc/XDg22TxSSUI/AAAAAAAAYLc/bWQMrxhgneEBSKKiJ3TCuqYnxpcAyofVACLcBGAs/s1600/picasa-url-parameter.jpg",
srct: "https://1.bp.blogspot.com/-G607thP7cWc/XDg22TxSSUI/AAAAAAAAYLc/bWQMrxhgneEBSKKiJ3TCuqYnxpcAyofVACLcBGAs/s300/picasa-url-parameter.jpg",
title: "pic 5"
}, {
src: "https://1.bp.blogspot.com/-fuPZuDAdv4s/XGN84O7JSkI/AAAAAAAAYV0/1LcgeouMQ18tWegvK11vz1qHDweOLtXZACLcBGAs/s1600/github-api-upload-file.jpg",
srct: "https://1.bp.blogspot.com/-fuPZuDAdv4s/XGN84O7JSkI/AAAAAAAAYV0/1LcgeouMQ18tWegvK11vz1qHDweOLtXZACLcBGAs/s300/github-api-upload-file.jpg",
title: "pic 6"
}, {
src: "https://2.bp.blogspot.com/-Bc-JyEZwpG4/W6LTpxNm2mI/AAAAAAAAXpg/Tf-GhNpvFLICCg_6ICW3y4Er4trMozW3gCLcBGAs/s1600/seo-fake-information-identification.jpg",
srct: "https://2.bp.blogspot.com/-Bc-JyEZwpG4/W6LTpxNm2mI/AAAAAAAAXpg/Tf-GhNpvFLICCg_6ICW3y4Er4trMozW3gCLcBGAs/s300/seo-fake-information-identification.jpg",
title: "pic 7"
}, {
src: "https://3.bp.blogspot.com/-lo1NZ0KVZSU/WRrNvclwESI/AAAAAAAAPjQ/k50YaNha-1YlzwU0qtHwbhBoLfXPll1iACLcB/s1600/how-to-become-top-blog-writer.jpg",
srct: "https://3.bp.blogspot.com/-lo1NZ0KVZSU/WRrNvclwESI/AAAAAAAAPjQ/k50YaNha-1YlzwU0qtHwbhBoLfXPll1iACLcB/s300/how-to-become-top-blog-writer.jpg",
title: "pic 8"
}]
});
</script>
<style>
#nanogallery1.nGY2 .nGY2GThumbnail {background:#fff; border-color: #f8f8f8; border-top-width: 5px; border-right-width: 5px; border-bottom-width: 5px; border-left-width: 5px; }
</style>

這個根據官方提供的範例程式碼，展示效果如下：

三、整齊拼貼效果

上圖這樣的整齊拼貼展示效果，出自「官網首頁」→ 往下找到並點擊 「MOSAIC example 2」。

以下提供範例程式碼：

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<link href="https://unpkg.com/nanogallery2/dist/css/nanogallery2.min.css" rel="stylesheet" type="text/css"></link>
<script type="text/javascript" src="https://unpkg.com/nanogallery2/dist/jquery.nanogallery2.min.js"></script>
<div id="nanogallery2"></div>
<script>
$("#nanogallery2").nanogallery2({
galleryDisplayTransitionDuration: 1500,
galleryMosaic : [
{ w: 1, h: 1, c: 1, r: 1 },
{ w: 1, h: 1, c: 2, r: 1 },
{ w: 1, h: 1, c: 3, r: 1 },
{ w: 1, h: 1, c: 4, r: 1 },
{ w: 1, h: 1, c: 5, r: 1 },
{ w: 1, h: 1, c: 6, r: 1 },
{ w: 1, h: 2, c: 1, r: 2 },
{ w: 2, h: 2, c: 2, r: 2 },
{ w: 2, h: 2, c: 4, r: 2 },
{ w: 1, h: 2, c: 6, r: 2 },
{ w: 1, h: 1, c: 1, r: 4 },
{ w: 1, h: 1, c: 2, r: 4 },
{ w: 1, h: 1, c: 3, r: 4 },
{ w: 1, h: 1, c: 4, r: 4 },
{ w: 1, h: 1, c: 5, r: 4 },
{ w: 1, h: 1, c: 6, r: 4 }
],
thumbnailAlignment: 'scaled',
thumbnailHeight: 300,
thumbnailWidth: 300,
thumbnailBaseGridHeight: 80,
thumbnailDisplayTransition: 'flipDown',
thumbnailDisplayTransitionDuration: 600,
thumbnailDisplayInterval: 30,
galleryMaxRows: 1,
galleryDisplayMode: 'rows',
thumbnailL1GutterWidth: 0,
thumbnailL1GutterHeight: 0,
thumbnailBorderHorizontal: 0,
thumbnailBorderVertical: 0,
thumbnailL1BuildInit2: '.nGY2GThumbnailAlbumTitle_border-left_5px solid #23CB99|.nGY2GThumbnailAlbumTitle_margin_20px|title_backgroundColor_rgba(200,200,200,0.8)|title_color_#000',
thumbnailL1HoverEffect2: 'image_scale_1.00_1.15_500_bounce|image_rotateZ_0deg_05deg',
galleryBuildInit2: 'perspective_900px|perspective-origin_50% 150%',
thumbnailHoverEffect2: 'label_font-size_1em_1.5em|title_backgroundColor_rgba(255,255,255,0.34)_rgba(((35,203,153,0.8)|title_color_#000_#fff|image_scale_1.00_1.10_5000|image_rotateZ_0deg_4deg_5000',
thumbnailToolbarImage: null,
thumbnailToolbarAlbum: null,
thumbnailLabel: {
display: false,
position: 'onBottomOverImage',
hideIcons: true,
titleFontSize: '1em',
align: 'left',
titleMultiLine: true,
displayDescription: false
},
gallerySorting: 'random',
galleryTheme: {
thumbnail: {
titleShadow: 'none',
descriptionShadow: 'none',
titleColor: '#fff'
},
navigationBreadcrumb: {
background: '#3C4B5B'
},
navigationFilter: {
background: '#2E7C7F',
backgroundSelected: '#19676B',
color: '#eee'
}
},
XviewerTheme: {
barBackground: 'rgba(35, 203, 153, 0.7)'
},
viewerToolbar: {
display: false
},
viewerTools: {
topLeft: 'label',
topRight: 'shareButton, rotateLeft, rotateRight, fullscreenButton, closeButton'
},

touchAnimation: false,
locationHash: true,
items: [{
src: "https://4.bp.blogspot.com/-1g7zj-oB-s4/XFO0dywZTVI/AAAAAAAAYRk/_t7XrH7YtQoCp67gHxZ4pskAHX9TUnqHQCLcBGAs/s1600/cc0-image-stock-license.jpg",
srct: "https://4.bp.blogspot.com/-1g7zj-oB-s4/XFO0dywZTVI/AAAAAAAAYRk/_t7XrH7YtQoCp67gHxZ4pskAHX9TUnqHQCLcBGAs/s300/cc0-image-stock-license.jpg",
title: "pic 1"
}, {
src: "https://2.bp.blogspot.com/-MQgmDdWOn5s/WoEcbqEIWPI/AAAAAAAAWXo/h8U_GHIW75obyskVvwgGQlD3ji0gjU7NACLcBGAs/s1600/will-google-close-blogger-business-analysis.jpg",
srct: "https://2.bp.blogspot.com/-MQgmDdWOn5s/WoEcbqEIWPI/AAAAAAAAWXo/h8U_GHIW75obyskVvwgGQlD3ji0gjU7NACLcBGAs/s300/will-google-close-blogger-business-analysis.jpg",
title: "pic 2"
}, {
src: "https://4.bp.blogspot.com/-Vp6_fuEU8zM/V7vRUTEb-HI/AAAAAAAAOJE/9YVKsFPH6Tk1ADOnOK_yU44EXCthIY75gCLcB/s1600/blogger-free-consultant.jpg",
srct: "https://4.bp.blogspot.com/-Vp6_fuEU8zM/V7vRUTEb-HI/AAAAAAAAOJE/9YVKsFPH6Tk1ADOnOK_yU44EXCthIY75gCLcB/s300/blogger-free-consultant.jpg",
title: "pic 3"
}, {
src: "https://1.bp.blogspot.com/-Kix19BaDmNE/Wy4Y_U_3uPI/AAAAAAAAXPY/nIwxapAva4QVDYpZLcFssWe4_q7KkDvVgCLcBGAs/s1600/mobile-detect-webview-fb-line-in-app.jpg",
srct: "https://1.bp.blogspot.com/-Kix19BaDmNE/Wy4Y_U_3uPI/AAAAAAAAXPY/nIwxapAva4QVDYpZLcFssWe4_q7KkDvVgCLcBGAs/s300/mobile-detect-webview-fb-line-in-app.jpg",
title: "pic 4"
}, {
src: "https://1.bp.blogspot.com/-G607thP7cWc/XDg22TxSSUI/AAAAAAAAYLc/bWQMrxhgneEBSKKiJ3TCuqYnxpcAyofVACLcBGAs/s1600/picasa-url-parameter.jpg",
srct: "https://1.bp.blogspot.com/-G607thP7cWc/XDg22TxSSUI/AAAAAAAAYLc/bWQMrxhgneEBSKKiJ3TCuqYnxpcAyofVACLcBGAs/s300/picasa-url-parameter.jpg",
title: "pic 5"
}, {
src: "https://1.bp.blogspot.com/-fuPZuDAdv4s/XGN84O7JSkI/AAAAAAAAYV0/1LcgeouMQ18tWegvK11vz1qHDweOLtXZACLcBGAs/s1600/github-api-upload-file.jpg",
srct: "https://1.bp.blogspot.com/-fuPZuDAdv4s/XGN84O7JSkI/AAAAAAAAYV0/1LcgeouMQ18tWegvK11vz1qHDweOLtXZACLcBGAs/s300/github-api-upload-file.jpg",
title: "pic 6"
}, {
src: "https://2.bp.blogspot.com/-Bc-JyEZwpG4/W6LTpxNm2mI/AAAAAAAAXpg/Tf-GhNpvFLICCg_6ICW3y4Er4trMozW3gCLcBGAs/s1600/seo-fake-information-identification.jpg",
srct: "https://2.bp.blogspot.com/-Bc-JyEZwpG4/W6LTpxNm2mI/AAAAAAAAXpg/Tf-GhNpvFLICCg_6ICW3y4Er4trMozW3gCLcBGAs/s300/seo-fake-information-identification.jpg",
title: "pic 7"
}, {
src: "https://3.bp.blogspot.com/-lo1NZ0KVZSU/WRrNvclwESI/AAAAAAAAPjQ/k50YaNha-1YlzwU0qtHwbhBoLfXPll1iACLcB/s1600/how-to-become-top-blog-writer.jpg",
srct: "https://3.bp.blogspot.com/-lo1NZ0KVZSU/WRrNvclwESI/AAAAAAAAPjQ/k50YaNha-1YlzwU0qtHwbhBoLfXPll1iACLcB/s300/how-to-become-top-blog-writer.jpg",
title: "pic 8"
}, {
src: "https://4.bp.blogspot.com/-1g7zj-oB-s4/XFO0dywZTVI/AAAAAAAAYRk/_t7XrH7YtQoCp67gHxZ4pskAHX9TUnqHQCLcBGAs/s1600/cc0-image-stock-license.jpg",
srct: "https://4.bp.blogspot.com/-1g7zj-oB-s4/XFO0dywZTVI/AAAAAAAAYRk/_t7XrH7YtQoCp67gHxZ4pskAHX9TUnqHQCLcBGAs/s300/cc0-image-stock-license.jpg",
title: "pic 1"
}, {
src: "https://2.bp.blogspot.com/-MQgmDdWOn5s/WoEcbqEIWPI/AAAAAAAAWXo/h8U_GHIW75obyskVvwgGQlD3ji0gjU7NACLcBGAs/s1600/will-google-close-blogger-business-analysis.jpg",
srct: "https://2.bp.blogspot.com/-MQgmDdWOn5s/WoEcbqEIWPI/AAAAAAAAWXo/h8U_GHIW75obyskVvwgGQlD3ji0gjU7NACLcBGAs/s300/will-google-close-blogger-business-analysis.jpg",
title: "pic 2"
}, {
src: "https://4.bp.blogspot.com/-Vp6_fuEU8zM/V7vRUTEb-HI/AAAAAAAAOJE/9YVKsFPH6Tk1ADOnOK_yU44EXCthIY75gCLcB/s1600/blogger-free-consultant.jpg",
srct: "https://4.bp.blogspot.com/-Vp6_fuEU8zM/V7vRUTEb-HI/AAAAAAAAOJE/9YVKsFPH6Tk1ADOnOK_yU44EXCthIY75gCLcB/s300/blogger-free-consultant.jpg",
title: "pic 3"
}, {
src: "https://1.bp.blogspot.com/-Kix19BaDmNE/Wy4Y_U_3uPI/AAAAAAAAXPY/nIwxapAva4QVDYpZLcFssWe4_q7KkDvVgCLcBGAs/s1600/mobile-detect-webview-fb-line-in-app.jpg",
srct: "https://1.bp.blogspot.com/-Kix19BaDmNE/Wy4Y_U_3uPI/AAAAAAAAXPY/nIwxapAva4QVDYpZLcFssWe4_q7KkDvVgCLcBGAs/s300/mobile-detect-webview-fb-line-in-app.jpg",
title: "pic 4"
}, {
src: "https://1.bp.blogspot.com/-G607thP7cWc/XDg22TxSSUI/AAAAAAAAYLc/bWQMrxhgneEBSKKiJ3TCuqYnxpcAyofVACLcBGAs/s1600/picasa-url-parameter.jpg",
srct: "https://1.bp.blogspot.com/-G607thP7cWc/XDg22TxSSUI/AAAAAAAAYLc/bWQMrxhgneEBSKKiJ3TCuqYnxpcAyofVACLcBGAs/s300/picasa-url-parameter.jpg",
title: "pic 5"
},{
src: "https://1.bp.blogspot.com/-fuPZuDAdv4s/XGN84O7JSkI/AAAAAAAAYV0/1LcgeouMQ18tWegvK11vz1qHDweOLtXZACLcBGAs/s1600/github-api-upload-file.jpg",
srct: "https://1.bp.blogspot.com/-fuPZuDAdv4s/XGN84O7JSkI/AAAAAAAAYV0/1LcgeouMQ18tWegvK11vz1qHDweOLtXZACLcBGAs/s300/github-api-upload-file.jpg",
title: "pic 6"
}, {
src: "https://2.bp.blogspot.com/-Bc-JyEZwpG4/W6LTpxNm2mI/AAAAAAAAXpg/Tf-GhNpvFLICCg_6ICW3y4Er4trMozW3gCLcBGAs/s1600/seo-fake-information-identification.jpg",
srct: "https://2.bp.blogspot.com/-Bc-JyEZwpG4/W6LTpxNm2mI/AAAAAAAAXpg/Tf-GhNpvFLICCg_6ICW3y4Er4trMozW3gCLcBGAs/s300/seo-fake-information-identification.jpg",
title: "pic 7"
}, {
src: "https://3.bp.blogspot.com/-lo1NZ0KVZSU/WRrNvclwESI/AAAAAAAAPjQ/k50YaNha-1YlzwU0qtHwbhBoLfXPll1iACLcB/s1600/how-to-become-top-blog-writer.jpg",
srct: "https://3.bp.blogspot.com/-lo1NZ0KVZSU/WRrNvclwESI/AAAAAAAAPjQ/k50YaNha-1YlzwU0qtHwbhBoLfXPll1iACLcB/s300/how-to-become-top-blog-writer.jpg",
title: "pic 8"
}]
});
</script>
<style>.nGY2 .nGY2GThumbnail { background: #444; }</style>

這個根據官方提供的範例程式碼，展示效果如下：

四、不規則拼貼效果

上圖這樣的不規則拼貼展示效果，出自官網首頁 → 往下找到並點擊 「MOSAIC example 1」。

以下提供範例程式碼：

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<link href="https://unpkg.com/nanogallery2/dist/css/nanogallery2.min.css" rel="stylesheet" type="text/css"></link>
<script type="text/javascript" src="https://unpkg.com/nanogallery2/dist/jquery.nanogallery2.min.js"></script>
<div id="nanogallery3"></div>
<script>
$("#nanogallery3").nanogallery2({
galleryDisplayTransitionDuration: 1500,
galleryMosaic : [
{ w: 2, h: 2, c: 1, r: 1 },
{ w: 1, h: 1, c: 3, r: 1 },
{ w: 1, h: 1, c: 3, r: 2 },
{ w: 1, h: 2, c: 4, r: 1 },
{ w: 2, h: 1, c: 5, r: 1 },
{ w: 2, h: 2, c: 5, r: 2 },
{ w: 1, h: 1, c: 4, r: 3 },
{ w: 2, h: 1, c: 2, r: 3 },
{ w: 1, h: 2, c: 1, r: 3 },
{ w: 1, h: 1, c: 2, r: 4 },
{ w: 2, h: 1, c: 3, r: 4 },
{ w: 1, h: 1, c: 5, r: 4 },
{ w: 1, h: 1, c: 6, r: 4 }
],
thumbnailAlignment: "scaled",
thumbnailHeight: 300,
thumbnailWidth: 300,
thumbnailBaseGridHeight: 80,
thumbnailDisplayTransition: "slideLeft",
thumbnailDisplayTransitionDuration: 600,
thumbnailDisplayInterval: 30,
galleryMaxRows: 1,
galleryDisplayMode: "rows",
thumbnailL1GutterWidth: 0,
thumbnailL1GutterHeight: 0,
thumbnailBorderHorizontal: 0,
thumbnailBorderVertical: 0,
thumbnailL1BuildInit2: "image_scale_1.20",
thumbnailL1HoverEffect2: "thumbnail_scale_1.00_1.05_300|image_translateX_-20px_20px",
thumbnailToolbarImage: null,
thumbnailToolbarAlbum: null,
thumbnailLabel: {
display: false,
position: "onBottomOverImage",
hideIcons: true,
titleFontSize: "1em",
align: "left",
titleMultiLine: true,
displayDescription: false
},
gallerySorting: "random",
galleryTheme: {
thumbnail: {
titleShadow: "none",
descriptionShadow: "none",
titleColor: "#fff"
},
navigationBreadcrumb: {
background: "#3C4B5B"
},
navigationFilter: {
background: "#2E7C7F",
backgroundSelected: "#19676B",
color: "#eee"
}
},
XviewerTheme: {
barBackground: "rgba(35, 203, 153, 0.7)"
},
viewerToolbar: {
display: false
},
viewerTools: {
topLeft: "label",
topRight: "shareButton, rotateLeft, rotateRight, fullscreenButton, closeButton"
},
touchAnimation: false,
locationHash: true,
items: [{
src: "https://4.bp.blogspot.com/-1g7zj-oB-s4/XFO0dywZTVI/AAAAAAAAYRk/_t7XrH7YtQoCp67gHxZ4pskAHX9TUnqHQCLcBGAs/s1600/cc0-image-stock-license.jpg",
srct: "https://4.bp.blogspot.com/-1g7zj-oB-s4/XFO0dywZTVI/AAAAAAAAYRk/_t7XrH7YtQoCp67gHxZ4pskAHX9TUnqHQCLcBGAs/s300/cc0-image-stock-license.jpg",
title: "pic 1"
}, {
src: "https://2.bp.blogspot.com/-MQgmDdWOn5s/WoEcbqEIWPI/AAAAAAAAWXo/h8U_GHIW75obyskVvwgGQlD3ji0gjU7NACLcBGAs/s1600/will-google-close-blogger-business-analysis.jpg",
srct: "https://2.bp.blogspot.com/-MQgmDdWOn5s/WoEcbqEIWPI/AAAAAAAAWXo/h8U_GHIW75obyskVvwgGQlD3ji0gjU7NACLcBGAs/s300/will-google-close-blogger-business-analysis.jpg",
title: "pic 2"
}, {
src: "https://4.bp.blogspot.com/-Vp6_fuEU8zM/V7vRUTEb-HI/AAAAAAAAOJE/9YVKsFPH6Tk1ADOnOK_yU44EXCthIY75gCLcB/s1600/blogger-free-consultant.jpg",
srct: "https://4.bp.blogspot.com/-Vp6_fuEU8zM/V7vRUTEb-HI/AAAAAAAAOJE/9YVKsFPH6Tk1ADOnOK_yU44EXCthIY75gCLcB/s300/blogger-free-consultant.jpg",
title: "pic 3"
}, {
src: "https://1.bp.blogspot.com/-Kix19BaDmNE/Wy4Y_U_3uPI/AAAAAAAAXPY/nIwxapAva4QVDYpZLcFssWe4_q7KkDvVgCLcBGAs/s1600/mobile-detect-webview-fb-line-in-app.jpg",
srct: "https://1.bp.blogspot.com/-Kix19BaDmNE/Wy4Y_U_3uPI/AAAAAAAAXPY/nIwxapAva4QVDYpZLcFssWe4_q7KkDvVgCLcBGAs/s300/mobile-detect-webview-fb-line-in-app.jpg",
title: "pic 4"
}, {
src: "https://1.bp.blogspot.com/-G607thP7cWc/XDg22TxSSUI/AAAAAAAAYLc/bWQMrxhgneEBSKKiJ3TCuqYnxpcAyofVACLcBGAs/s1600/picasa-url-parameter.jpg",
srct: "https://1.bp.blogspot.com/-G607thP7cWc/XDg22TxSSUI/AAAAAAAAYLc/bWQMrxhgneEBSKKiJ3TCuqYnxpcAyofVACLcBGAs/s300/picasa-url-parameter.jpg",
title: "pic 5"
}, {
src: "https://1.bp.blogspot.com/-fuPZuDAdv4s/XGN84O7JSkI/AAAAAAAAYV0/1LcgeouMQ18tWegvK11vz1qHDweOLtXZACLcBGAs/s1600/github-api-upload-file.jpg",
srct: "https://1.bp.blogspot.com/-fuPZuDAdv4s/XGN84O7JSkI/AAAAAAAAYV0/1LcgeouMQ18tWegvK11vz1qHDweOLtXZACLcBGAs/s300/github-api-upload-file.jpg",
title: "pic 6"
}, {
src: "https://2.bp.blogspot.com/-Bc-JyEZwpG4/W6LTpxNm2mI/AAAAAAAAXpg/Tf-GhNpvFLICCg_6ICW3y4Er4trMozW3gCLcBGAs/s1600/seo-fake-information-identification.jpg",
srct: "https://2.bp.blogspot.com/-Bc-JyEZwpG4/W6LTpxNm2mI/AAAAAAAAXpg/Tf-GhNpvFLICCg_6ICW3y4Er4trMozW3gCLcBGAs/s300/seo-fake-information-identification.jpg",
title: "pic 7"
}, {
src: "https://3.bp.blogspot.com/-lo1NZ0KVZSU/WRrNvclwESI/AAAAAAAAPjQ/k50YaNha-1YlzwU0qtHwbhBoLfXPll1iACLcB/s1600/how-to-become-top-blog-writer.jpg",
srct: "https://3.bp.blogspot.com/-lo1NZ0KVZSU/WRrNvclwESI/AAAAAAAAPjQ/k50YaNha-1YlzwU0qtHwbhBoLfXPll1iACLcB/s300/how-to-become-top-blog-writer.jpg",
title: "pic 8"
}, {
src: "https://4.bp.blogspot.com/-1g7zj-oB-s4/XFO0dywZTVI/AAAAAAAAYRk/_t7XrH7YtQoCp67gHxZ4pskAHX9TUnqHQCLcBGAs/s1600/cc0-image-stock-license.jpg",
srct: "https://4.bp.blogspot.com/-1g7zj-oB-s4/XFO0dywZTVI/AAAAAAAAYRk/_t7XrH7YtQoCp67gHxZ4pskAHX9TUnqHQCLcBGAs/s300/cc0-image-stock-license.jpg",
title: "pic 1"
}, {
src: "https://2.bp.blogspot.com/-MQgmDdWOn5s/WoEcbqEIWPI/AAAAAAAAWXo/h8U_GHIW75obyskVvwgGQlD3ji0gjU7NACLcBGAs/s1600/will-google-close-blogger-business-analysis.jpg",
srct: "https://2.bp.blogspot.com/-MQgmDdWOn5s/WoEcbqEIWPI/AAAAAAAAWXo/h8U_GHIW75obyskVvwgGQlD3ji0gjU7NACLcBGAs/s300/will-google-close-blogger-business-analysis.jpg",
title: "pic 2"
}, {
src: "https://4.bp.blogspot.com/-Vp6_fuEU8zM/V7vRUTEb-HI/AAAAAAAAOJE/9YVKsFPH6Tk1ADOnOK_yU44EXCthIY75gCLcB/s1600/blogger-free-consultant.jpg",
srct: "https://4.bp.blogspot.com/-Vp6_fuEU8zM/V7vRUTEb-HI/AAAAAAAAOJE/9YVKsFPH6Tk1ADOnOK_yU44EXCthIY75gCLcB/s300/blogger-free-consultant.jpg",
title: "pic 3"
}, {
src: "https://1.bp.blogspot.com/-Kix19BaDmNE/Wy4Y_U_3uPI/AAAAAAAAXPY/nIwxapAva4QVDYpZLcFssWe4_q7KkDvVgCLcBGAs/s1600/mobile-detect-webview-fb-line-in-app.jpg",
srct: "https://1.bp.blogspot.com/-Kix19BaDmNE/Wy4Y_U_3uPI/AAAAAAAAXPY/nIwxapAva4QVDYpZLcFssWe4_q7KkDvVgCLcBGAs/s300/mobile-detect-webview-fb-line-in-app.jpg",
title: "pic 4"
}, {
src: "https://1.bp.blogspot.com/-G607thP7cWc/XDg22TxSSUI/AAAAAAAAYLc/bWQMrxhgneEBSKKiJ3TCuqYnxpcAyofVACLcBGAs/s1600/picasa-url-parameter.jpg",
srct: "https://1.bp.blogspot.com/-G607thP7cWc/XDg22TxSSUI/AAAAAAAAYLc/bWQMrxhgneEBSKKiJ3TCuqYnxpcAyofVACLcBGAs/s300/picasa-url-parameter.jpg",
title: "pic 5"
}]
});
</script>
<style>.nGY2 .nGY2GThumbnail { background: #444; }</style>

這個根據官方提供的範例程式碼，展示效果如下：

更多圖片展示工具：

----
如這篇文章對您有幫助，請順手按個 +1 或分享，謝謝！

讓 Google 試算表快速跳到指定行號

August 29, 2019, 8:58 pm

≫ Next: 珍惜免費資源，才能長久使用﹍沒使用 Blogger 請避免拿來當圖床

≪ Previous: 讓相簿圖片在網頁上呈現各種拼貼效果﹍jQuery 畫廊外掛

$

0

0

當 Google 試算表的資料沒那麼多時，滑鼠捲一下不用花太久時間，總可找到需要的儲存格位置。

但是當累積到數百、數千筆資料時，如果不知道儲存格該搜尋什麼字串的話，那麼往下捲這個動作真的是要人命。而且 Google 試算表並非一次載入所有資料，為了節省網路傳輸量，Google 採取動態載入，大致上捲到 1000 行左右才會載入其餘儲存格。

總之一邊捲一邊找很容易讓自己心累，而且目前 Google 試算表沒有簡單的方法可以直接跳到指定行號。不過研究了一陣子總算有滿意的結果，請見本篇的分享。

(圖片出處: pixabay.com)

一、快速跳到指定行號的原理

1. 寫程式

如果會寫 Google Apps Script 的話，這件事並不困難，需要在 Google 試算表上面做個 UI 介面可以輸入行號，然後執行 script 即可。

可參考這個 stackoverflow 討論串「Google sheets jump to cell」


2. 製作索引行號

如果不用動到程式碼，比較簡單的方式是，為每一行加上行號數字，那麼按 Ctrl-F 直接搜尋行號，就能快速跳到該行了。

雖然 Google 試算表最前面就有顯示行號，但不能用來搜尋，必須我們自己找個欄位，該欄專門用來顯示行號才可進行搜尋。




以本站的「會員系統」表格為例，如上圖在試算表中加個「行號」的欄位，就能直接搜尋行號。

由於會員系統一定有會員編號，搜尋這件事不用另外花功夫。但沒編號的試算表，就必須另外利用「行號」的欄位充當索引來搜尋，以下來看看如何實現。

二、自動產生行號數字的方法

1. 手動拉儲存格

最簡單、大家都會的試算表操作技巧，手動填入 1、2 前兩個數字後，就能用拖曳的方式，拉出一整欄的行號數字。

但這方法有兩個很大的缺點：

• 有上百、數千行時，要拉很久的時間
• 而且將來只要試算表每新增一行，就得手動再拉一次來產生行號數字

總之這不會是一勞永逸的方法，最好能利用 Google 試算表提供的函數自動產生行號。


2. 用函數自動產生行號

經研究後，有 2 個函數可實現這個功能：

• ROW：使用方法參考官方文件「ROW」，這函數可傳回行號數字。
• ARRAYFORMULA：使用方法參考官方文件「ARRAYFORMULA」，這個函數可以一次處理多個儲存格，利用正確的語法，可自動產生一整欄的儲存格內容。

在想要開始產生行號的儲存格，例如想從第一行就開始產生行號，使用以下的語法即可產生一整欄的行號，會自動產生到最後一行：

=arrayformula(ROW(A1:A))




直接來看範例，上圖想要從 H2 的位置開始產生行號，在該儲存格填入圖中的語法即可 (把前面的 A1 改成 A2，其他都一樣)。




按下 Enter 後，行號瞬間全部填滿，是不是很省事呢？將來每次新增資料也會自動補上行號，完全不必再手動操作。

三、快速跳到某行

自動建立好行號後，將來要快速跳到指定行號就很方便了，按 Ctrl-F 直接搜尋行號，就能快速跳到該行了。


2019.8.30 補充：留言 #1 Darrent 提供了一個密技「網址列的尾端加上 &range= 再加上儲存格位址，例如： &range=A100 就可以跳到 A100」，如果搜尋次數不多時，用這招滿方便快速的。

更多「Google 試算表」相關技巧：

----
如這篇文章對您有幫助，請順手按個 +1 或分享，謝謝！

珍惜免費資源，才能長久使用﹍沒使用 Blogger 請避免拿來當圖床

September 5, 2019, 3:37 pm

≫ Next: 在網頁擺放 FB 即時通按鈕(免裝外掛)，讓訪客線上即時聯絡

≪ Previous: 讓 Google 試算表快速跳到指定行號

$

0

0

前陣子在某個非 Blogger 社團被 cue 到有關 Blogger 的問題，原來是有 WordPress 站長可能接到詢問，要如何減輕 WP 圖片的流量使用。

該站長找到的解決方案與 WP 無關，其分享文章介紹的免費圖床是 Blogger，建議其他 WP 使用者開個 Blogger 網站，上傳圖片後取得連結，再放到 WP 文章。如此可省下大量 WP 傳輸的流量，節省主機費用。

被這樣的事 cue 到有些哭笑不得，不過很多網路新手的確因為不了解，無論是網路、或商業世界的背後運作原理，而看到有免費的資源就用了再說，導致產生日後對自己或整個生態的悲劇，所以本篇藉這個機會說明，看似免費的網路世界要如何運作比較能夠長久。

(圖片出處: pxhere)

一、WP 平台的用途

首先我想先談談 WP，這件事應該是哪裡產生了誤會，很可能會有圖床困擾的 WP 站長，一開始選擇平台時就做了錯誤的決定，原因有可能是接觸到錯誤觀念，或是跟風跟錯朋友，或是誤信主機商的話。

在「Blogger 是否搬家到 Wordpress 的比較﹍部落格經營觀念釐清」我有說明過，部落格經營分三階段，當該階段的需求已經無法被滿足時，就適合搬到下個階段的平台。

基本上如果只是架「部落格」網站的話，Blogger 已經可以滿足所有能想像的需求。如果覺得還有部落格該有的功能，但自己用 Blogger 做不出來、改不出來，請找 WFU 一定可以處理。

當然也不是只有 Blogger 可以拿來架部落格，只要財力夠想用 WP 架也是個人自由。通常我推薦需要開始用網站營利、有商業需求，必須串金流、物流時，這方面 Blogger 缺乏現成的整套解決方案，那麼搬到 WP 就是適合的時機。

既然已經開始營利、有賺錢，我想不會付不起 WP 主機流量的費用。那麼如果對圖床費用感到拮据，以致於將腦筋動到 Blogger 或免費圖床的 WP 站長，要嘛表示其實沒賺到錢，有可能是選錯行業；要嘛有必要想想，其實你可能只是部落格網站，真正需要的是 Blogger 平台就好，一切都免費、有 Google 撐腰沒煩惱。

二、部落格只建議使用原生圖床

幾年前曾寫過「Blogger 使用 Flickr 當圖床，可能違規被停權 + 圖片消失的所有案例整理」，提醒站長們最好只用部落格原生圖床，避免使用任何外部免費圖床。這篇文章舉了許多例子，例如曾經 Xuite 整個網域被 Flickr 封鎖，也有個別網域因違規被封鎖。

這件事告訴我們，使用外部免費圖床時，永遠不知道何時圖片會被封鎖。因為是免費，主控權掌握在外部圖床手上，他們可以輕易地封鎖任何網域，無論是我們違規、或是同網域有人違規導致我們被牽連。

而今年更是發生「為何 Flickr 會刪除免費圖片額度？」，一大堆站長急著趕快搬圖片，若是網站有上千篇文章的話更是頭痛，沒找專業人士是無法處理的。搬圖床不是一件簡單的事，搞到甚至要搬家都有可能。

回頭來看文章開頭的事件，Blogger 上傳的圖片，原意並不是給其他部落格平台拿來當圖床用，就像痞客邦相簿也不是要給 Blogger 當圖床用。

若哪天 Google 偵測到怎麼有大量 WP 網站都是使用 Blogger 圖片，或是痞客邦發現相簿的圖片大量出現在不是痞客邦的網站，讀者覺得 Google 或是痞客邦，會不會想幫其他部落格出流量的錢？

Google 或痞客邦工程師要封鎖、限制圖床出現的網域，是非常簡單的事，就跟 Flickr 對付違規的網域一樣。到時這些站長就會很頭痛了，當圖片一被封鎖、全部打不開，屆時真的就很難搶救了。

三、免費資源請珍惜

再來看免費資源這件事，過去 10 年我也經歷不少網路大事件：

• 2013：Google Code 關閉
• 2016：Google Drive 檔案外連功能於 2016 年 8 月關閉

這些免費資源一一關閉，很大一部份的原因，是使用方式超出了免費資源其設計的原意，也就是不正常的用途。例如把以上兩者的空間拿來放各種影音檔，進行無本營利。

我想多數人其實不會濫用免費資源，但不可否認會固定有一些族群，四處尋找免費資源，想盡各種方式進行無本生意，進而榨光免費資源。

我們當然不是這樣的族群，但也無法阻止這類族群的存在。而對於免費資源我們能做到的，就是盡量約束自己、避免做出超出免費資源原始用途的事。只有這樣，才能盡量延長免費資源的期限。

四、有所分享，有所不分享

除了約束自己，我想到更深一層的作法，從源頭就阻斷濫用族群，讓他們找不到免費資源。

當年 Google Drive 停止外連後，我必須為網站的 js/css 檔外連找出路，最後找到了「免費空間最後一塊淨土﹍用 Github 存取網頁 JS/CSS 外連檔案」。雖然我寫了這篇文章，但決心不公開使用 Github 的秘訣，關鍵資訊放在免費會員看不到、讀取不了的地方。這麼做得以保存資訊，卻又不流通，只有少數人能知道如何使用免費資源。

今年寫的這篇「讓 Google Photo 實現各種相簿畫廊或輪播效果」，其實我已經知道如何程式化取得 Google Photo 外連，但最終決定只簡單描述，不公開技術，因為只有這樣，才能保全「Google 相簿」這個免費資源。

那麼最後給讀者一點小小建議，分享是好事也是我們的天性，不過分享免費資源使用方式之前請先三思，先衡量一下內容有沒有可能違背開發者的原意。如果會抵觸的話，請避免放在公開流通的地方，這份心意是出自對免費資源的珍惜，讓自己及他人可以用得長久，才不會成為網路蝗蟲的食物。

更多「免費空間」相關文章：

----
如這篇文章對您有幫助，請順手按個 +1 或分享，謝謝！

在網頁擺放 FB 即時通按鈕(免裝外掛)，讓訪客線上即時聯絡

September 10, 2019, 4:48 pm

≫ Next: 「線上看電視」網頁版﹍沒看第四台後的選擇，除了 Youtube 直播新聞還有「隨選隨看」完整節目頻道彙整

≪ Previous: 珍惜免費資源，才能長久使用﹍沒使用 Blogger 請避免拿來當圖床

$

0

0

前陣子在「CC0 免費圖庫搜尋引擎」右下角，放了一個「錯誤回報」的按鈕，讓訪客可以即時留言回報站方。

這類的浮動按鈕很醒目，效果會比導覽列或頁尾的「聯絡站長」這類連結好一些。如果是熟悉網站動線的訪客，一般會知道去哪找留言板，但可惜很多使用者不一定熟悉網路或網站的通用設計。

(圖片出處: pxhere.com)

一、Facebook 即時通外掛

所以 FB 即時通這類外掛，有效地成為線上聯絡的一種方案，常駐於頁面右下角，使用者想一對一談話時不需再翻遍整個網站、尋找留言的地方。

這個外掛的安裝教學可參考「為網站安裝 Facebook 即時通(messenger)外掛﹍顧客洽談機器人」。

而即時通外掛對站長而言，有可能成為缺點的情況是，如果網頁原本載入速度就不快，例如裝了太多外掛，或是網站各處的廣告擺太多，那麼每多裝一個外掛對於效能而言都是負擔。

本篇將提供的替代方案是，如何在不安裝外掛的情況下，也能使用 FB 即時通。

二、FB 即時通網址

使用 FB 即時通必須先建立一個 FB 粉絲團，然後即時通外掛會與粉絲團「聊天室」連結，所有談話記錄都儲存在聊天室。

以本站為例，粉絲團的網址為：

https://www.facebook.com/WFU.BLOG

取出自己的粉絲團紅色字串後，前面加上 "m.me/"就成了 FB 聊天室網址：

m.me/WFU.BLOG

有了這個 FB 即時通網址後，接下來就能自製不需外掛的即時通按鈕。

三、範例程式碼

1. 範例效果

請見本頁面右下角的浮動 FB 即時通圖示效果，點擊後會另開新頁，前往本站粉絲團即時通頁面。


2. 安裝程式碼

使用以下簡單的範例程式碼即可做出此效果：

<!--FB 即時通-->
<a href="https://m.me/WFU.BLOG" target="_blank"><img id="messenger" src="https://4.bp.blogspot.com/-g2z0IaIWe2g/XVpo-En_p6I/AAAAAAAAhgM/L3u57b4FweojgU_D1d05EqHZnU-S-t6TQCLcBGAs/w150/messenger.png" title="FB 即時通"/></a>
<style>
#messenger {
position: fixed;
bottom: 15px; /* 與下方的距離, 也可改為百分比, 即為距離螢幕下方的百分比 */
right: 15px; /* 與右方的距離 */
width: 60px; /* 按鈕寬度 */
height: 60px; /* 按鈕高度 */
opacity: 0.6; /* 按鈕原始透明度 */
z-index: 10;
cursor: pointer;
}
#messenger:hover { /* 滑鼠經過按鈕時 */
opacity: 1; /* 透明度 */
}
</style>
<!--Designed by WFU BLOG-->

• 紅色字串請改為自己粉絲團專屬字串
• 藍色即時通圖片網址可改為自訂的圖片網址
• 其餘的部分，如果對 CSS 熟悉可自行修改參數

3. 圖示使用須知



這個工具使用了上面這個即時通圖示，如果讀者有找小圖示的需求，建議可使用本站開發的這個工具，能一次搜尋各大免費圖庫：

免費素材搜尋引擎

但若圖片來自非 CC0 圖庫，請注意個別使用條款，通常會要求署名，下載圖片時會出現署名的連結語法，例如下面是上圖的署名範例：

圖片由 cesarstrings在 Pixabay上發佈

四、上下浮動的按鈕

右下角的 demo 按鈕還會上下浮動，由於此功能非必要效果，未列在範例程式碼之中，如需要這樣的動畫效果，請參考這篇「製作會上下彈跳的按鈕，吸引訪客注意也增加點擊的機率﹍CSS 動畫技巧」。

更多相關網站工具：

----
如這篇文章對您有幫助，請順手按個 +1 或分享，謝謝！

「線上看電視」網頁版﹍沒看第四台後的選擇，除了 Youtube 直播新聞還有「隨選隨看」完整節目頻道彙整

September 15, 2019, 3:26 am

≫ Next: Google 搜尋結果顯示的文章標題、摘要、縮圖，跟你想的不一樣(各種案例整理)

≪ Previous: 在網頁擺放 FB 即時通按鈕(免裝外掛)，讓訪客線上即時聯絡

$

0

0

去年(2018)跟「第四台解約」後，為了方便能隨時看新聞，做了一個方便切換電視頻道的網頁小工具，能隨選隨看 Youtube 上所有直播新聞的頻道，可說是最方便的線上看新聞解決方案。




一開始這只是個自己用的陽春新聞播放器，不過這段期間以來，各家電視台在 Youtube 頻道上傳的各種類型節目越來越齊全，「線上看電視」彙整的分類也越來越豐富，目前收錄的節目頻道已經多到看不完，而且還會自動播放最新一集的內容，從實用性來看已經可以當成相當完整的服務，因此決定公開釋出。

前往「線上看電視」

(圖片出處: pexels.com)

一、特點介紹

因為這工具原本是自用，在設計上以最方便自己操作的介面、流程為原則，同時也只篩選擁有版權的節目。

1. 載入速度最快

使用 Ajax 動態載入的方式，所有分類、頻道、節目切換播放的操作都不會重整頁面，執行速度非常快。


2. 分類完整



畫面上方可看到依照不同節目性質，完整的十多項分類群組。




如果分類群組的節目太多，還會使用小標籤進行細分，點擊小標籤即可開合節目頻道列表。

如上圖是數量龐大的「綜藝」群組，利用節目名稱首字的注音符號進行分類。

其他如「戲劇」群組，依照 "偶像劇"、"古裝劇"、"鄉土劇"等進行分類；例如「網紅」群組也十分龐大，使用了 "趣味搞笑"、"知識"、"生活"等等標籤。


3. 影片不會中斷

• Youtube 官網播放影片預設會插入廣告中斷，需要手動跳過廣告。
• 此工具利用 Youtube API 播放，官方預設不會插入此類廣告，所以不需手動跳過。
• 因此清單影片也能連續自動播放，不會被廣告中斷。

4. 隨選隨看

喜歡的節目隨時可播放最新的一集，也可挑選任意一集，不受時間限制。也能任意前進、後退跳轉，不怕上廁所漏掉精彩片段。


5. 注重版權

網路有許多可線上看節目的資源，但內容不一定合法、擁有版權。本站所有節目內容都來自 Youtube，雖然 Youtube 上也有許多未經授權的節目，但本站會嚴格篩選，不列入個人上傳的節目內容，因為無法判讀是否擁有版權。



播放本站任何影片時，都會附上原始連結、及版權所有人資訊，如上圖的影片，可看到紅框處標示「三立華劇 SET Drama」，代表這是官方釋出的影片，所以版權沒有問題。


6. 各種裝置都能播放

行動裝置無論是手機、平板，不需再安裝任何 APP，只要有瀏覽器都能打開本站看電視。

二、網頁版操作說明

1. 尋找節目技巧(排列順序)

• 收看受眾很多的「新聞」、「政論」分組，依照第四台頻道的順序排列。
• 其他分組則依照分類標籤排序，若無分類標籤則盡量將性質相近的節目放在一起。
• 若將來某分組的節目越來越多時，會視情況重新進行分類。

2. 播放節目基本操作

先點擊上方的分類群組，例如「政論」、「綜藝」，再點擊左側列表的節目名稱即可。



如果左側節目列表太長不好捲動，可參考上圖點擊左上方紅框處的「分類標籤」收合該分類的節目列表。

同時「分類標籤」的開合狀態會自動記憶，下次開啟網站時仍會維持之前的操作結果，對於選擇常看的節目頻道而言非常方便。

影片下方紅框的控制按鈕，分別可以執行「上一集」、「播放/暫停」、「下一集」、「全螢幕」。



3. 切換集數



播放戲劇、動漫卡通等節目時，若該 Youtube 播放清單已經按照順序排列好，如上圖紅框，影片下方會出現集數，除了可按上、下集切換按鈕，也可直接點擊集數跳到該集影片。




但多數的帶狀節目沒有集數，只能看到該集的節目名稱、標題摘要，此時如上圖右上角紅框，可以點擊影片右上角的播放清單──




會立即出現播放清單的所有節目列表，有的節目會標注播放日期，方便判斷要選擇哪一集來看。


4. 直播節目

如果該節目為「直播」的話，會在節目名稱後面加註 "(直播)"，例如大部分的新聞頻道，以及「音樂」群組等。


5. 節目、清單連結

每個影片下方都會附上節目完整名稱及連結，除了代表尊重出處之外，有時也可點擊該連結以獲得更多資訊。例如「非凡大探索」的連結除了標示時間點、節目內容，還詳細整理了店家資訊，是非常用心的節目，比光看電視還值得。

而如果是播放清單的節目，每個影片上方都有清單的連結，這個設計也非常重要，因為使用 API 產生的 Youtube 清單最多只能顯示 200 或 101 集，如想看超過的集數，則可點擊這個清單連結，到 Youtube 觀看。


6. 切換畫質

Youtube 去年變更政策，API 不再能控制畫質的切換，因此只能手動從播放器自行切換畫質。在網路連線狀況正常時，畫質預設多半 720P，但有時這樣的畫質切換頻道要等待較久的時間。

那麼操作上提供一個小技巧，如果是切換不需一直盯著螢幕的節目，例如「新聞」、「音樂」群組，可手動切換為畫質最低的 144P，這樣切換頻道速度會很快，也不需花費較大的網路傳輸量。

三、行動版操作說明

基本上大部分的操作跟網頁版一樣，但由於行動版設計的介面略有不同，以下為重點說明：

1. 選擇分類群組



手機由於寬度不夠，無法顯示所有群組，那麼上圖紅框處的群組，請用觸控方式「左右滑動」，來拖曳顯示所有群組。


2. 切換節目清單與播放器

由於手機寬度限制，只能將節目清單與播放器個別呈現在螢幕上，那麼要如何切換這兩個畫面呢？





請分別看上面兩張圖的左下角與右下角紅框處，設計了兩個翻頁按鈕，直接點擊就能切換到另一個畫面。

同時由於按鈕的位置在角落算是有點遠，因此另外設計了「手勢滑動」的操作方式，直接在手機上滑左、滑右，也能快速切換節目清單與播放器的畫面喔！

四、注意事項

1. 禁止營業使用的節目

本站提供的節目頻道，如自己觀賞都不會有問題，但部分頻道若拿來公開放映的話可能會產生侵權。



例如「中天」的大部分節目頻道都會有上圖紅框的版權聲明：「如有任何營業使用，必須事先取得書面同意」，因此若要拿 Youtube 影片在營業場所公開放映，請務必先閱讀該影片的版權聲明。


2. 無法播放的節目頻道

眼尖的訪客可能會發現，「新聞」群組怎麼沒有看到 "台視"、"民視"這兩台呢？



這是沒有辦法的事，如上圖，"民視"不允許在 Youtube 以外的網站播放影片，而 "台視"也是一樣，所以無論是「政論」、「戲劇」等等所有這兩台的節目，只能全部下架了。

五、推薦節目頻道

除了本站篩選的這些分類群組、節目頻道，如果您還有什麼想看的節目，歡迎留言告知，我會找找有沒有官方提供、符合版權的影片。

如果已經知道官方有新推出的優質節目，而想進行推薦的話也非常歡迎留言告知喔。

前往「線上看電視」

更多「網路線上工具」：

----
如這篇文章對您有幫助，請順手按個 +1 或分享，謝謝！

Google 搜尋結果顯示的文章標題、摘要、縮圖，跟你想的不一樣(各種案例整理)

September 19, 2019, 7:54 pm

≫ Next: Line 無法傳未讀訊息給自己後，待辦事項改用 FB Messenger 發給自己

≪ Previous: 「線上看電視」網頁版﹍沒看第四台後的選擇，除了 Youtube 直播新聞還有「隨選隨看」完整節目頻道彙整

$

0

0

Blogger 社團有幾個提問跟「搜尋結果顯示的文字、圖片」不如預期有關，例如：

• 縮圖相關：「用手機google搜尋時發現到blog文章的縮圖並不是封面的照片，而且用不同手機搜尋出現的縮圖還會不一樣，想問是否有方法可以指定某張圖來當搜尋的縮圖圖片嗎？」
• 標題相關：Kelsey 留言詢問「部分文章在Google Blogger文章設定中的標題與發佈後的顯示標題不同，例如我設定的標題為"XXXXXABCDE"，但Google搜尋後顯示為"ABCDEXXXXX"。不知道是否有什麼方式可以讓Google搜尋顯示正確的呢？」

這兩個狀況其實是同一種現象，Google 向我們展示在「搜尋不同關鍵字」時，提供當下最貼切的搜尋結果，而非總是單一結果，也可說是 AI 智慧搜尋的能力。


(圖片出處: pexels.com)

一、原理說明

根據「Google 各種搜尋結果不如預期的疑難雜症整理」→「Q4」：

1. Google 為了防止操作 SEO 的人，在文章標題塞滿關鍵字，會自動根據文章的內容與標題的關連性，來調整 "文章標題"的字串，那麼就可能在搜尋結果看到 Google 判定的文章標題。

2. 另一種情況是 Google 會根據使用者搜尋的 "關鍵字"，自動調整顯示出來的 "文章標題"。因此同樣的一篇文章，搜尋的字串不同，搜尋結果的標題也可能不一樣，這是為了讓「搜尋結果符合關鍵字」產生的現象。

這兩點可以完美解釋為何 Google 針對不同的關鍵字，會給與完全不同的搜尋結果。代表 Google 有能力從搜尋的關鍵字進行解讀，「使用者真正想要問的問題是什麼」，就算找的是同一篇文章，也能「根據不同問題給與對應的回答」。

一方面 Google 對於「文字語意」的分析能力已經十分強大無庸置疑，一方面 Google 對於「圖片」的解析能力到達什麼程度？

二、手機搜尋結果不同縮圖範例

其實 WFU 不常注意手機搜尋的結果，只知道網頁版一般搜尋結果不會有縮圖，若不是文章開頭 FB 社團成員詢問搜尋結果縮圖的問題，還真不知道原來手機搜尋有可能會附上縮圖，因此特別針對這個案例進行研究。

1. 什麼文章不會有縮圖

直接整理分析我測試的各種搜尋結果：

• 大部分文章都不會有縮圖，例如本站屬性為資訊、知識類的文章
• 美食旅遊類有可能會出現縮圖
• 如果美食旅遊類的文章，沒有正確設定 FB meta 標記、或是「結構性資料」，Google 會找不到縮圖資料來呈現在搜尋結果。
• Blogger 平台基本上範本已幫我們設定好了，可參考「Blogger 開始支援分享到 FB 顯示縮圖」，不必擔心縮圖不會出現這件事。

所以非 Blogger 平台的美食旅遊類文章需要注意，手機上搜尋結果想出現縮圖的話，需要檢查文章的網頁原始碼有沒有 og:image相關資料。


2. 預設縮圖為首圖

基本上 og:image抓的就是文章的第一張圖，所以把中意的圖放在文章最前面就對了。

以案主這篇文章「奧地利薩爾茨堡主教座堂」為例，在手機搜尋完整文章標題時，顯示的就會是文章中第一張圖：




3. 根據不同關鍵字顯示不同縮圖

而當在手機搜尋關鍵字「薩爾斯堡 大教堂」時，搜尋結果如下：




這個結果讓 WFU 非常驚訝，顯示的圖片完全不一樣，而且找了一下，這張圖位於該篇文章似乎是第十幾還是二十幾張圖的位置，非常後面。

但是以關鍵字「薩爾斯堡 大教堂」而言，這張圖的確是非常精確的選擇，能從外觀看出教堂的明顯特徵，會比首圖來得恰當。

這樣的技術讓 WFU 十分震驚，Google 除了會分析整篇文章的文字語意，也會分析所有圖片，還能精確識別個別圖片的意涵，提供給不同的關鍵字使用。

那麼我想站長們不必擔心縮圖的問題，Google 自然會提供給搜尋者最好的選擇。

三、搜尋結果不同文章標題範例

以下提供根據不同關鍵字，同一篇文章在搜尋結果顯示不同文章標題的案例。

例如本站這篇「Blogger 諮詢 | 架站 | 行動版 | 網頁設計 | 提案合作 」，搜尋關鍵字「Blogger 網頁設計」時，效果如下：




而當搜尋「WFU BLOG」時，額外出現的 6 個 sitelink 赫然發現了一篇「網頁設計」：




但我並沒有寫過「網頁設計」這樣的文章啊？點進去才發現就是前面那篇文章，代表 Google 自動將標題改成「網頁設計」這 4 個字了。

會有這樣的結果不是一天形成的，因為我以前沒看過這個標題，也許 Google 曾經為這篇文章顯示了各種不同的標題字串過，最後發現顯示「網頁設計」的點擊效果最好，代表來 WFU BLOG 的訪客有一部份是想要尋找「網頁設計」的資訊，而 Google 偵測到了這樣的需求，自動幫我改了標題。

所以我們也不需擔心網站的搜尋結果會出現什麼樣的文章標題，Goolge 自動會幫我們找出效果最佳的一種排列組合。我們需要費心的，只剩下如何在標題裡面放入各種使用者可能會搜尋的關鍵字。但請不要堆砌關鍵字，標題請放給 "人"看的文字敘述。

四、搜尋結果不同文章摘要範例

以這篇「部落格網站是否加強 SEO 就能帶來流量？」進行舉例，搜尋「部落格 SEO 流量 關係」的結果：



上圖搜尋結果的摘要，其實並不在文章本文之中，而是 Blogger 後台文章編輯器中「搜尋說明」所設定的內容，操作說明可參考「Blogger 只要做到這幾件事, 就能輕鬆加強 SEO 搜尋排名」→「三、文章優化」→「2. 文章說明」。

建議讀者每篇文章一定要不辭辛勞設定這些「搜尋說明」，內容不要複製貼上某段文章內容，另外用心寫一段可以增加關鍵字的說明，那麼如同上圖的搜尋結果，可增加文章被搜尋到的機會。




當把搜尋關鍵字改成「部落格 SEO 流量 關鍵」時，結果如上圖，Google 的摘要敘述另外抓到了一段「三、簡化經營要素 四、SEO 與流量的關係 五、提升流量的關鍵」，這是該篇文章的副標題。

因為我使用了「Blogger 文章自動產生大綱索引錨點區塊」，自動將文章所有副標題用 js 產生一個大綱區塊，而 Google 現在會索引 js 內容(不保證每個網站都會索引)，這些提前出現的大綱若有關鍵字，也會增加不少被搜尋到的機會。

以上簡單整理各種搜尋結果的範例，讀者可以清楚看出在不同關鍵字下，搜尋結果的變化，相信對 SEO 的原理可以更瞭解幾分。

更多 SEO 相關文章：

----
如這篇文章對您有幫助，請順手按個 +1 或分享，謝謝！

---

Line 無法傳未讀訊息給自己後，待辦事項改用 FB Messenger 發給自己

September 24, 2019, 5:10 pm

≫ Next: 文章更新速度與 Google 索引頻率、及 SEO 的關係

≪ Previous: Google 搜尋結果顯示的文章標題、摘要、縮圖，跟你想的不一樣(各種案例整理)

$

0

0

去年寫過這篇「用 Line 傳未讀訊息給自己，成為待辦事項﹍不用擔心已讀訊息忘了處理」，利用在手機上安裝兩個 Line，可以用第二個 Line 帳號發未讀訊息給主帳號，成為待辦事項。這個方法非常方便，出門在外用手機發的待辦事項，回到 PC 上只要打開 Line，看到有未讀訊息就知道還有事要處理。同時也不需要急著點開，可留著等進入工作狀態時再點開批次處理。

但是很可惜的是，最近 Line 強制所有帳號都需要更新到最新版本才能執行，不旦導致我的第二個 Line 帳號來不及進行搬移就報銷(使用 clone 產生的 Line 更新到最新版後會產生錯誤，完全無法使用，可參考去年那篇文章)，同時原本發待辦給自己的流程也無效了。

(圖片出處: pexels.com)

一、為何原本流程失效

去年用來複製 Line 的 APP 是「App Cloner」，已經無法成功雙開最新版 Line。我找遍所有 Andriod APP、也試過所有能雙開 Line 的 APP，有的不能複製最新版 Line，有的可以。

少數能夠成功雙開 Line 的 APP，沒有一個能夠像原本的「App Cloner」那麼棒，可以產生一個獨立運作的 Line。




如上圖藍色的「Line 2」是原本的「App Cloner」所產生，可獨立運作的第二個 Line。




在手機上各種 APP 進行分享時，會出現類似上圖的畫面，列出所有可分享的 APP。之前藍色的「Line 2」可以出現在這個分享列表之中，我便可以從「Line 2」發未讀訊息給自己的 Line 主帳號。

而現在所有最新的雙開 APP 所產生的第二個 Line，完全無法出現在上面的分享列表，所以也就無法分享未讀資訊給自己了。

這樣子會非常不方便，看到不錯的文章、任何資訊，只能手動操作例如複製網址到第二個 Line，無法像以前那麼方便，按分享就能選擇第二個 Line 帳號進行傳送。

二、手機安裝 FB messenger 及操作

最終找到的完美解決方案，是改用另一個即時通軟體「FB messenger」：

• FB 即時通不像 Line 一個帳號綁定一支手機、或一個帳號，所以不需要雙開、複製兩個 FB 帳號
• FB 即時通允許同時使用最多 5 個帳號，而且切換帳號非常方便
• 所以只要切換到一個不常用的 FB 帳號，發訊息給 FB 主帳號即可

瞭解以上的操作與原理後，出門在外用手機發待辦事項就非常簡單了，例如：

• 使用 RSS 閱讀器「gReader」看到不錯的文章
• 直接按分享，選擇「Messenger」
• 上圖畫面可看到，分享內容的文章標題、網址會自動產生，不用手動輸入
• 下方有太陽 Logo 的是 FB 非主要帳號，記得 Messenger 切成這個帳號
• Wayne Fu 才是主帳號，按「發送」就可將訊息傳給主帳號，成為未讀訊息

三、電腦上處理待辦事項

接下來的問題會是，如何在電腦上知道有 FB 傳來的未讀訊息、以及數量？可安裝這個 Chrome 套件：

• 名稱：Blue Messenger
• 教學：無須開啟網頁版Facebook，也能滑臉書動態、接收通知、聊天和PO文

安裝後這個外掛會常駐在 Chrome 右上角，登入 FB 後這個外掛會即時顯示是否有通知訊息。




如上圖，比對 FB 與紅框處的外掛圖示，訊息與通知會分別顯示數量，因此不會混淆。

將來外出發完待辦事項，回到電腦前打開 Chrome 就可看到通知。

四、與其他方案的比較

每個人都會有自己的一套發待辦事項的方式，對我而言本篇的流程是最方便、直覺的，最後順便整理一下其他方案的優劣：

• 建立私人 Line 群組：
  
  • 這是最早期流通的作法，對著私人群組傳訊息成為待辦事項。
  • 不方便的地方在於無法顯示未讀訊息，所以無從判別是否有新的任務
  • 必須定期檢視群組的內容，並重新判斷每個訊息是否已經處理過
• 使用「Line 待辦小精靈」：
  
  • 這算是個不錯的設計，安裝方便，把他加入好友就完成安裝
  • 不過使用數量有限制，也無法預期將來是否會收費
  • 我習慣有「未讀訊息」的顯示數量來提醒自己，而這方案沒有，因此不適合我
• 分享到 Evernote：
  
  • 在手機上分享到 Evernote 是很方便的
  • 但 evernote 一樣無法顯示未讀記事
  • 所以無法很直覺地從 evernote 收件匣，看出現在有沒有待辦事項
• 分享到 Email：
  
  • 這也是發待辦事項很簡便的作法，但缺點是分享時要輸入 email 帳號，流程沒那麼方便
  • 收件匣可以顯示未讀訊息
  • 其他不方便的地方是，必須逐則打開郵件看待辦事項
  • 跟即時通軟體相較之下，無法一眼看完全部的待辦事項，稍微麻煩一些

更多 Line 使用技巧：

更多 FB 使用技巧：

----
如這篇文章對您有幫助，請順手按個 +1 或分享，謝謝！

文章更新速度與 Google 索引頻率、及 SEO 的關係

September 30, 2019, 5:00 am

≫ Next: 讓相簿圖片在網頁上呈現「瀑布流」+「自適應」版型﹍jQuery 畫廊外掛

≪ Previous: Line 無法傳未讀訊息給自己後，待辦事項改用 FB Messenger 發給自己

$

0

0

幾個月前寫了這篇「網站管理員提交文章時，出現 "網址不在 Google 服務中"訊息怎麼辦？」，說明為何 Google Search Console 檢索的速度比較慢，導致出現錯誤訊息。沒想到這件事還有後續，而且發展出乎意料。

雖然已經寫了專文解釋，不過案主還是不斷詢問 Search Console 的相關問題。對話了許久才知道，原來她發現網站最新發佈的文章，Google 搜尋不到，懷疑是否網站管理員有哪裡設定不對，導致新文章無法被索引。

(圖片出處: pexels.com)

一、為何文章收錄時間變慢了？

1. 事發經過

事情發展大概是這樣：

• E：大哥～抱歉又有事情想請問～我的網站目前又出現檢索問題，提交sitemap顯示一切正常，但是輸入個別文章網址卻顯示不在索引內，即使重新申請檢索也沒有用～不知道您能否協助解決呢？感恩
• W：沒有什麼關係 可參考我這篇即可(文章開頭的連結)
• E：文章中提到的我都重新照做了一遍，但就是沒辦法改善...因為這次連搜尋也搜尋不到，完全看不出問題在哪裡，所以才又來請您幫忙～有一些奇怪的錯誤我看不懂(傳來 search console 圖)
• E：最新的兩篇都完全搜尋不到～目前唯一覺得比較有可能產生問題的是這個 (傳來 ads.txt 錯誤訊息的圖)
• W：我看可以搜尋到喔(傳給她 "site:文章網址"的圖) 不用那麼著急~ 只是時間晚了一點而已 可以放心了
• E：不是那篇...是9/22後發佈的文章喔～
• W：今天也才 9/23 別那麼急呀
• E：該怎麼說，這個問題之前從來沒有過，所以我才想是不是有什麼問題，及早發生及早解決 用site方式完全搜不到文章還是第一次

後面的對話先省略，原來經過這麼多回合的對話後，才終於知道案主的真正意圖，她以前發佈新文章後，都能很快地在 Google 搜尋到(也許是一天之內)，而現在往往要好幾天後才能搜尋到。所以開始懷疑是哪裡設定錯，但是自行辦案卻又找不到兇手。案主真正想知道的，就是要如何做，文章才能被 Google 迅速收錄。

所以從上一篇文章，一直到上面這段對話的最後一句為止，我們都在錯誤的線索上打轉。如果她能直接帶我到案發現場，就可省下這段時間了。


2. 文章收錄速度

其實我最近一年來也有發現同樣的現象，搜尋自己的最新文章時，往往要好幾天後才能看到，這在以前是沒有發生過的事。

所以我過去的認知其實跟案主類似：「權重比較大的網站，Google 索引的速度比較快，我的文章常常幾分鐘內就會被收錄」。

但以前沒發生過的事，不代表以後也不會發生；以前 Google 的工作量，也不等於現在 Google 的工作量。所以雖然發現文章被 Google 收錄速度變慢了，但並不會有不舒服的感覺。

我非常能體會，現在每天網站增加的速度有多快，也能想像每天全世界文章增加的數量，跟以前比絕對是天文數字。那麼 Google 伺服器一定得有所取捨，才有辦法處理這麼大的資料量。

二、部落格平台是否有影響？

那麼 Google 伺服器的取捨原則是什麼呢？什麼樣的網站會優先進行索引呢？


案主後來提出疑問：「我用WP的部落客朋友是沒有這個問題，所以我覺得很怪。」

我：「這跟 WP 沒什麼關係吧，你需要舉證所有 WP 網站都能搜尋到，而不是將一個 WP 網站的狀況，視為所有 WP 網站。」

案主：「我這裡問過五個」

我：「這五個網站的流量 跟你的比起來呢」

案主：「有兩個比我高」


看來事情有點蹊蹺，因為我不清楚案主朋友的 WP 網站狀況，所以無從置喙，而且 5 個網站終究是小樣本，說不定她朋友有做了什麼基本動作是她沒做的。除此之外唯一能想到的，大概是 WP 可能有自動提交文章給 Google 的外掛，也就是平常我們要到 Google 手動提交單篇文章的動作，WP 網站可自動執行。

但撇開外掛的因素，Google 索引網站文章的速度，不可能因為不同部落格平台而有所不同。首先要怎麼判斷哪個平台有資格優先索引呢？這種事若被公開來 Google 還不被罵翻。其次世界上平台那麼多，索引時從原始碼就一定看得出是什麼平台嗎？

三、文章更新速度的影響

其實只要瞭解 Google 搜尋引擎運作的原理，就可以知道爬蟲會多久來拜訪網站、進行索引。

• 如果一個網站平均一個禮拜會有一篇新文章，那麼爬蟲就不可能常常來檢查是否有新文章，也許到了差不多平均值的日子，才會派出爬蟲來。
• 如果網站久久才寫一篇，也許一個月，那麼爬蟲自然也不需浪費伺服器工作量，久久再來檢查一次就好
• 如果網站天天都有新文章，爬蟲也會怕錯過新文章，一定會天天報到，檢查是否有新文章
• 像新聞媒體這種幾分鐘就有新文章的網站，爬蟲更是無時無刻都在檢查，一有新文章絕對秒收

以上原理相當簡單易懂，想要文章被一天內快速收錄，就得做到天天有新文章，吸引 Google 前來索引。這樣的概念網路上很多，簡單舉兩篇文章：

• Google索引網站的頻率
• What Is Crawl Frequency?

本站更新文章的速度相當緩慢，目前將近一個禮拜才會有一篇文章，所以我也不會強求文章要被 Google 馬上收錄。而檢查過案主網站後台更新文章的速度後，發現近期的確比以往緩慢，難怪會發生本文的狀況。

四、有沒有必要刻意頻繁更新

1. SEO 顯著提升

本站的更新速度並非從以前到現在都一樣，也曾有某段時間更新比較頻繁，例如 2~3 天就有新文章。

由於本站的流量來源以 SEO 為主，那麼如果流量有變動時，很明顯就是 SEO 權重被 Google 調整，無論是往上或是往下。

而在更新頻繁的時期我也可以明顯感受到，網站流量有明顯的上升。這代表網站更新比較快時，除了 Google 索引的速度變快，還會提供網站額外的 SEO Bonus 獎勵，帶來平均值以上的流量。


2. SEO 提升只是短期現象

然而讀者不要誤會了，網站更新頻繁所帶來的流量，只是暫時現象，並不代表網站的 SEO 權重被永久提升。

舉個簡單的例子，在公司上班因為表現佳，老闆有兩種獎勵方式：

• 加薪：這是永久性的獎勵，每個月都會增加收入。單次金額可能較少，但長期來看總收入會增加很多。
• 給獎金：這是一次性的獎勵，雖然單次金額看起來很大，但長期來看對總收入增加不大。

對於「網站頻繁更新」這件事，Google 給予的只是獎金(Bonus)，你要持續做，才能持續拿到獎金，只要一停滯獎金就沒了。

網站真正需要努力的目標是獲得「加薪」，這得從實質加強文章含金量才有辦法做到，過去針對這個主題曾論述過一篇「部落格網站是否加強 SEO 就能帶來流量？」，各種 SEO 小技巧都不是長遠之計。


3. 追著紅蘿蔔的驢子

最後做個總結吧，雖然知道了「網站頻繁更新」可以獲得的好處，那麼我會鼓勵讀者做這件事嗎？分幾個方向作結論：

• 以部落格維生：如果吃穿靠寫部落格，那麼為了填飽肚子當然得真刀真槍，文章寫得多又寫得好是基本要求，任何 SEO 技巧也都需要用上，所以網站當然要更新得比別人快，文章也要比別人棒。
• 部落格是寫身體健康：如果寫部落格只是興趣，不影響正職工作，那麼 SEO 技巧不關注當然沒什麼關係，不必為了流量硬擠文章出來
• 想要多少賺一些廣告錢：我覺得這是最尷尬的一個族群，流量越多就代表廣告收入越多，雖然不以網站維生，但這族群也會想辦法鑽研各種 SEO 技巧，期待有任何增加外快的可能。那麼這個族群正好落入 Google 的圈套，Google 拿著各種短期增加 SEO 流量的紅蘿蔔在面前晃呀晃，如果追得越快、網站更新得越頻繁、文章寫得越多，自然而然幫 Google 帶來更多他想收集的索引內容，增加 Google 的營收。但是付出的時間、健康成本，跟獲得的廣告收益是否成正比，能否拿到基本時薪，我就不得而知了。

更多 SEO 相關文章：

----
如這篇文章對您有幫助，請順手按個 +1 或分享，謝謝！

讓相簿圖片在網頁上呈現「瀑布流」+「自適應」版型﹍jQuery 畫廊外掛

October 5, 2019, 6:09 am

≫ Next: Javascript 產生偽隨機數字的方法及應用

≪ Previous: 文章更新速度與 Google 索引頻率、及 SEO 的關係

$

0

0

這篇是「jQuery 相簿畫廊外掛 nanogallery2」系列文的第三篇，前兩篇分別介紹了：

• Grid 網格式排版
• Mosaic 拼貼式排版

接下來介紹剩餘的兩種版面效果，但是標題 "自適應版型"中文的字面跟英文原用語 "justified"比較難做連結，主要是網路上找不到相關的用詞，比較正確的描述是 "左右對齊"版型。

以文字來說 "左右對齊"很好理解，但圖片 "左右對齊"究竟是什麼狀況我想很難想像得出來，或許 "自適應"還比較能理解，不過沒關係後面會圖解說明。

一、版型效果

1. Justified 對齊式(自適應)



如上圖，雖然每張圖片大小比例不一、參差不齊，但很神奇的是，每一行的左右邊界圖片都能剛好切齊，因此整個版面看起來並不突兀，如同文字排版 justified 的左右對齊一般。

那麼作為畫廊(gallery)展示效果，Justified 對齊式是不錯的選擇，不必把每張圖片的尺寸比例調整一致，又能維持版面美觀。


2. Cascading 瀑布式



這個畫廊展示效果跟網頁版型中所謂的「瀑布流」很像，一方面圖片還沒全部顯示完之前，會以「無限捲動」的方式載入圖片，就像滑 FB 一樣，只要後面還有資訊就會不斷地載入。

一方面圖片往下產生的效果也很像瀑布流，左右根據圖片不同的比例，各自冒出來、下落的距離也不同。

如上圖，最終圖片完全載入後，底部是長短不一的，可能沒有那麼整齊畫一，但也是有人喜愛這種不落俗套的美感。


3. 其他相關外掛

我個人比較喜歡「nanogallery2」這個外掛，因為含括了所有常見排版方式。如果只需要特定版型的畫廊外掛，也是可考慮使用特定的外掛，以下推薦的兩個都滿不錯的：

• 對齊式：「Justified Gallery」
• 瀑布式：「Masonry」

二、Justifed 對齊式版型

官網提供了範例效果及程式碼，操作流程如下：

• 進入網頁「nanogallery2 demonstrations」
• 1. Select a demo family → 選擇「Gallery layouts」
• 2. Select demonstration → 按下「Justified gallery」

提供範例程式碼如下：

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<link href="https://unpkg.com/nanogallery2/dist/css/nanogallery2.min.css" rel="stylesheet" type="text/css"></link>
<script type="text/javascript" src="https://unpkg.com/nanogallery2/dist/jquery.nanogallery2.min.js"></script>
<div id="nanogallery1"></div>
<script>
$("#nanogallery1").nanogallery2({
thumbnailHeight: 200,
thumbnailWidth: "auto",
galleryLastRowFull: true,
items: [{
src: "https://4.bp.blogspot.com/-1g7zj-oB-s4/XFO0dywZTVI/AAAAAAAAYRk/_t7XrH7YtQoCp67gHxZ4pskAHX9TUnqHQCLcBGAs/s1600/cc0-image-stock-license.jpg",
srct: "https://4.bp.blogspot.com/-1g7zj-oB-s4/XFO0dywZTVI/AAAAAAAAYRk/_t7XrH7YtQoCp67gHxZ4pskAHX9TUnqHQCLcBGAs/w400-h200-n/cc0-image-stock-license.jpg",
title: "pic 1"
}, {
src: "https://2.bp.blogspot.com/-MQgmDdWOn5s/WoEcbqEIWPI/AAAAAAAAWXo/h8U_GHIW75obyskVvwgGQlD3ji0gjU7NACLcBGAs/s1600/will-google-close-blogger-business-analysis.jpg",
srct: "https://2.bp.blogspot.com/-MQgmDdWOn5s/WoEcbqEIWPI/AAAAAAAAWXo/h8U_GHIW75obyskVvwgGQlD3ji0gjU7NACLcBGAs/w100-h200-n/will-google-close-blogger-business-analysis.jpg",
title: "pic 2"
}, {
src: "https://4.bp.blogspot.com/-Vp6_fuEU8zM/V7vRUTEb-HI/AAAAAAAAOJE/9YVKsFPH6Tk1ADOnOK_yU44EXCthIY75gCLcB/s1600/blogger-free-consultant.jpg",
srct: "https://4.bp.blogspot.com/-Vp6_fuEU8zM/V7vRUTEb-HI/AAAAAAAAOJE/9YVKsFPH6Tk1ADOnOK_yU44EXCthIY75gCLcB/w200-h200-n/blogger-free-consultant.jpg",
title: "pic 3"
}, {
src: "https://1.bp.blogspot.com/-Kix19BaDmNE/Wy4Y_U_3uPI/AAAAAAAAXPY/nIwxapAva4QVDYpZLcFssWe4_q7KkDvVgCLcBGAs/s1600/mobile-detect-webview-fb-line-in-app.jpg",
srct: "https://1.bp.blogspot.com/-Kix19BaDmNE/Wy4Y_U_3uPI/AAAAAAAAXPY/nIwxapAva4QVDYpZLcFssWe4_q7KkDvVgCLcBGAs/w300-h200-n/mobile-detect-webview-fb-line-in-app.jpg",
title: "pic 4"
}, {
src: "https://1.bp.blogspot.com/-G607thP7cWc/XDg22TxSSUI/AAAAAAAAYLc/bWQMrxhgneEBSKKiJ3TCuqYnxpcAyofVACLcBGAs/s1600/picasa-url-parameter.jpg",
srct: "https://1.bp.blogspot.com/-G607thP7cWc/XDg22TxSSUI/AAAAAAAAYLc/bWQMrxhgneEBSKKiJ3TCuqYnxpcAyofVACLcBGAs/w200-h200-n/picasa-url-parameter.jpg",
title: "pic 5"
}, {
src: "https://1.bp.blogspot.com/-fuPZuDAdv4s/XGN84O7JSkI/AAAAAAAAYV0/1LcgeouMQ18tWegvK11vz1qHDweOLtXZACLcBGAs/s1600/github-api-upload-file.jpg",
srct: "https://1.bp.blogspot.com/-fuPZuDAdv4s/XGN84O7JSkI/AAAAAAAAYV0/1LcgeouMQ18tWegvK11vz1qHDweOLtXZACLcBGAs/w100-h200-n/github-api-upload-file.jpg",
title: "pic 6"
}, {
src: "https://2.bp.blogspot.com/-Bc-JyEZwpG4/W6LTpxNm2mI/AAAAAAAAXpg/Tf-GhNpvFLICCg_6ICW3y4Er4trMozW3gCLcBGAs/s1600/seo-fake-information-identification.jpg",
srct: "https://2.bp.blogspot.com/-Bc-JyEZwpG4/W6LTpxNm2mI/AAAAAAAAXpg/Tf-GhNpvFLICCg_6ICW3y4Er4trMozW3gCLcBGAs/w400-h200-n/seo-fake-information-identification.jpg",
title: "pic 7"
}, {
src: "https://3.bp.blogspot.com/-lo1NZ0KVZSU/WRrNvclwESI/AAAAAAAAPjQ/k50YaNha-1YlzwU0qtHwbhBoLfXPll1iACLcB/s1600/how-to-become-top-blog-writer.jpg",
srct: "https://3.bp.blogspot.com/-lo1NZ0KVZSU/WRrNvclwESI/AAAAAAAAPjQ/k50YaNha-1YlzwU0qtHwbhBoLfXPll1iACLcB/w300-h200-n/how-to-become-top-blog-writer.jpg",
title: "pic 8"
}, {
src: "https://4.bp.blogspot.com/-1g7zj-oB-s4/XFO0dywZTVI/AAAAAAAAYRk/_t7XrH7YtQoCp67gHxZ4pskAHX9TUnqHQCLcBGAs/s1600/cc0-image-stock-license.jpg",
srct: "https://4.bp.blogspot.com/-1g7zj-oB-s4/XFO0dywZTVI/AAAAAAAAYRk/_t7XrH7YtQoCp67gHxZ4pskAHX9TUnqHQCLcBGAs/w100-h200-n/cc0-image-stock-license.jpg",
title: "pic 1"
}, {
src: "https://2.bp.blogspot.com/-MQgmDdWOn5s/WoEcbqEIWPI/AAAAAAAAWXo/h8U_GHIW75obyskVvwgGQlD3ji0gjU7NACLcBGAs/s1600/will-google-close-blogger-business-analysis.jpg",
srct: "https://2.bp.blogspot.com/-MQgmDdWOn5s/WoEcbqEIWPI/AAAAAAAAWXo/h8U_GHIW75obyskVvwgGQlD3ji0gjU7NACLcBGAs/w200-h200-n/will-google-close-blogger-business-analysis.jpg",
title: "pic 2"
}, {
src: "https://4.bp.blogspot.com/-Vp6_fuEU8zM/V7vRUTEb-HI/AAAAAAAAOJE/9YVKsFPH6Tk1ADOnOK_yU44EXCthIY75gCLcB/s1600/blogger-free-consultant.jpg",
srct: "https://4.bp.blogspot.com/-Vp6_fuEU8zM/V7vRUTEb-HI/AAAAAAAAOJE/9YVKsFPH6Tk1ADOnOK_yU44EXCthIY75gCLcB/w300-h200-n/blogger-free-consultant.jpg",
title: "pic 3"
}, {
src: "https://1.bp.blogspot.com/-Kix19BaDmNE/Wy4Y_U_3uPI/AAAAAAAAXPY/nIwxapAva4QVDYpZLcFssWe4_q7KkDvVgCLcBGAs/s1600/mobile-detect-webview-fb-line-in-app.jpg",
srct: "https://1.bp.blogspot.com/-Kix19BaDmNE/Wy4Y_U_3uPI/AAAAAAAAXPY/nIwxapAva4QVDYpZLcFssWe4_q7KkDvVgCLcBGAs/w400-h200-n/mobile-detect-webview-fb-line-in-app.jpg",
title: "pic 4"
}, {
src: "https://1.bp.blogspot.com/-G607thP7cWc/XDg22TxSSUI/AAAAAAAAYLc/bWQMrxhgneEBSKKiJ3TCuqYnxpcAyofVACLcBGAs/s1600/picasa-url-parameter.jpg",
srct: "https://1.bp.blogspot.com/-G607thP7cWc/XDg22TxSSUI/AAAAAAAAYLc/bWQMrxhgneEBSKKiJ3TCuqYnxpcAyofVACLcBGAs/w200-h200-n/picasa-url-parameter.jpg",
title: "pic 5"
}, {
src: "https://1.bp.blogspot.com/-fuPZuDAdv4s/XGN84O7JSkI/AAAAAAAAYV0/1LcgeouMQ18tWegvK11vz1qHDweOLtXZACLcBGAs/s1600/github-api-upload-file.jpg",
srct: "https://1.bp.blogspot.com/-fuPZuDAdv4s/XGN84O7JSkI/AAAAAAAAYV0/1LcgeouMQ18tWegvK11vz1qHDweOLtXZACLcBGAs/w400-h200-n/github-api-upload-file.jpg",
title: "pic 6"
}, {
src: "https://2.bp.blogspot.com/-Bc-JyEZwpG4/W6LTpxNm2mI/AAAAAAAAXpg/Tf-GhNpvFLICCg_6ICW3y4Er4trMozW3gCLcBGAs/s1600/seo-fake-information-identification.jpg",
srct: "https://2.bp.blogspot.com/-Bc-JyEZwpG4/W6LTpxNm2mI/AAAAAAAAXpg/Tf-GhNpvFLICCg_6ICW3y4Er4trMozW3gCLcBGAs/w100-h200-n/seo-fake-information-identification.jpg",
title: "pic 7"
}, {
src: "https://3.bp.blogspot.com/-lo1NZ0KVZSU/WRrNvclwESI/AAAAAAAAPjQ/k50YaNha-1YlzwU0qtHwbhBoLfXPll1iACLcB/s1600/how-to-become-top-blog-writer.jpg",
srct: "https://3.bp.blogspot.com/-lo1NZ0KVZSU/WRrNvclwESI/AAAAAAAAPjQ/k50YaNha-1YlzwU0qtHwbhBoLfXPll1iACLcB/w300-h200-n/how-to-become-top-blog-writer.jpg",
title: "pic 8"
}]
});
</script>


以上程式碼展示效果如下：

三、Cascading 瀑布式版型

官網提供了範例效果及程式碼，操作流程如下：

• 進入網頁「nanogallery2 demonstrations」
• 1. Select a demo family → 選擇「Gallery layouts」
• 2. Select demonstration → 按下「Cascading gallery」

提供範例程式碼如下：

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<link href="https://unpkg.com/nanogallery2/dist/css/nanogallery2.min.css" rel="stylesheet" type="text/css"></link>
<script type="text/javascript" src="https://unpkg.com/nanogallery2/dist/jquery.nanogallery2.min.js"></script>
<div id="nanogallery2"></div>
<script>
$("#nanogallery2").nanogallery2({
"thumbnailLabel": {
"position": "onBottom"
},
"thumbnailHeight": "auto",
"thumbnailWidth": 200,
items: [{
src: "https://4.bp.blogspot.com/-1g7zj-oB-s4/XFO0dywZTVI/AAAAAAAAYRk/_t7XrH7YtQoCp67gHxZ4pskAHX9TUnqHQCLcBGAs/s1600/cc0-image-stock-license.jpg",
srct: "https://4.bp.blogspot.com/-1g7zj-oB-s4/XFO0dywZTVI/AAAAAAAAYRk/_t7XrH7YtQoCp67gHxZ4pskAHX9TUnqHQCLcBGAs/w400-h200-n/cc0-image-stock-license.jpg",
title: "pic 1"
}, {
src: "https://2.bp.blogspot.com/-MQgmDdWOn5s/WoEcbqEIWPI/AAAAAAAAWXo/h8U_GHIW75obyskVvwgGQlD3ji0gjU7NACLcBGAs/s1600/will-google-close-blogger-business-analysis.jpg",
srct: "https://2.bp.blogspot.com/-MQgmDdWOn5s/WoEcbqEIWPI/AAAAAAAAWXo/h8U_GHIW75obyskVvwgGQlD3ji0gjU7NACLcBGAs/w100-h200-n/will-google-close-blogger-business-analysis.jpg",
title: "pic 2"
}, {
src: "https://4.bp.blogspot.com/-Vp6_fuEU8zM/V7vRUTEb-HI/AAAAAAAAOJE/9YVKsFPH6Tk1ADOnOK_yU44EXCthIY75gCLcB/s1600/blogger-free-consultant.jpg",
srct: "https://4.bp.blogspot.com/-Vp6_fuEU8zM/V7vRUTEb-HI/AAAAAAAAOJE/9YVKsFPH6Tk1ADOnOK_yU44EXCthIY75gCLcB/w200-h200-n/blogger-free-consultant.jpg",
title: "pic 3"
}, {
src: "https://1.bp.blogspot.com/-Kix19BaDmNE/Wy4Y_U_3uPI/AAAAAAAAXPY/nIwxapAva4QVDYpZLcFssWe4_q7KkDvVgCLcBGAs/s1600/mobile-detect-webview-fb-line-in-app.jpg",
srct: "https://1.bp.blogspot.com/-Kix19BaDmNE/Wy4Y_U_3uPI/AAAAAAAAXPY/nIwxapAva4QVDYpZLcFssWe4_q7KkDvVgCLcBGAs/w300-h200-n/mobile-detect-webview-fb-line-in-app.jpg",
title: "pic 4"
}, {
src: "https://1.bp.blogspot.com/-G607thP7cWc/XDg22TxSSUI/AAAAAAAAYLc/bWQMrxhgneEBSKKiJ3TCuqYnxpcAyofVACLcBGAs/s1600/picasa-url-parameter.jpg",
srct: "https://1.bp.blogspot.com/-G607thP7cWc/XDg22TxSSUI/AAAAAAAAYLc/bWQMrxhgneEBSKKiJ3TCuqYnxpcAyofVACLcBGAs/w200-h200-n/picasa-url-parameter.jpg",
title: "pic 5"
}, {
src: "https://1.bp.blogspot.com/-fuPZuDAdv4s/XGN84O7JSkI/AAAAAAAAYV0/1LcgeouMQ18tWegvK11vz1qHDweOLtXZACLcBGAs/s1600/github-api-upload-file.jpg",
srct: "https://1.bp.blogspot.com/-fuPZuDAdv4s/XGN84O7JSkI/AAAAAAAAYV0/1LcgeouMQ18tWegvK11vz1qHDweOLtXZACLcBGAs/w100-h200-n/github-api-upload-file.jpg",
title: "pic 6"
}, {
src: "https://2.bp.blogspot.com/-Bc-JyEZwpG4/W6LTpxNm2mI/AAAAAAAAXpg/Tf-GhNpvFLICCg_6ICW3y4Er4trMozW3gCLcBGAs/s1600/seo-fake-information-identification.jpg",
srct: "https://2.bp.blogspot.com/-Bc-JyEZwpG4/W6LTpxNm2mI/AAAAAAAAXpg/Tf-GhNpvFLICCg_6ICW3y4Er4trMozW3gCLcBGAs/w400-h200-n/seo-fake-information-identification.jpg",
title: "pic 7"
}, {
src: "https://3.bp.blogspot.com/-lo1NZ0KVZSU/WRrNvclwESI/AAAAAAAAPjQ/k50YaNha-1YlzwU0qtHwbhBoLfXPll1iACLcB/s1600/how-to-become-top-blog-writer.jpg",
srct: "https://3.bp.blogspot.com/-lo1NZ0KVZSU/WRrNvclwESI/AAAAAAAAPjQ/k50YaNha-1YlzwU0qtHwbhBoLfXPll1iACLcB/w300-h200-n/how-to-become-top-blog-writer.jpg",
title: "pic 8"
}, {
src: "https://4.bp.blogspot.com/-1g7zj-oB-s4/XFO0dywZTVI/AAAAAAAAYRk/_t7XrH7YtQoCp67gHxZ4pskAHX9TUnqHQCLcBGAs/s1600/cc0-image-stock-license.jpg",
srct: "https://4.bp.blogspot.com/-1g7zj-oB-s4/XFO0dywZTVI/AAAAAAAAYRk/_t7XrH7YtQoCp67gHxZ4pskAHX9TUnqHQCLcBGAs/w100-h200-n/cc0-image-stock-license.jpg",
title: "pic 1"
}, {
src: "https://2.bp.blogspot.com/-MQgmDdWOn5s/WoEcbqEIWPI/AAAAAAAAWXo/h8U_GHIW75obyskVvwgGQlD3ji0gjU7NACLcBGAs/s1600/will-google-close-blogger-business-analysis.jpg",
srct: "https://2.bp.blogspot.com/-MQgmDdWOn5s/WoEcbqEIWPI/AAAAAAAAWXo/h8U_GHIW75obyskVvwgGQlD3ji0gjU7NACLcBGAs/w200-h200-n/will-google-close-blogger-business-analysis.jpg",
title: "pic 2"
}, {
src: "https://4.bp.blogspot.com/-Vp6_fuEU8zM/V7vRUTEb-HI/AAAAAAAAOJE/9YVKsFPH6Tk1ADOnOK_yU44EXCthIY75gCLcB/s1600/blogger-free-consultant.jpg",
srct: "https://4.bp.blogspot.com/-Vp6_fuEU8zM/V7vRUTEb-HI/AAAAAAAAOJE/9YVKsFPH6Tk1ADOnOK_yU44EXCthIY75gCLcB/w300-h200-n/blogger-free-consultant.jpg",
title: "pic 3"
}, {
src: "https://1.bp.blogspot.com/-Kix19BaDmNE/Wy4Y_U_3uPI/AAAAAAAAXPY/nIwxapAva4QVDYpZLcFssWe4_q7KkDvVgCLcBGAs/s1600/mobile-detect-webview-fb-line-in-app.jpg",
srct: "https://1.bp.blogspot.com/-Kix19BaDmNE/Wy4Y_U_3uPI/AAAAAAAAXPY/nIwxapAva4QVDYpZLcFssWe4_q7KkDvVgCLcBGAs/w400-h200-n/mobile-detect-webview-fb-line-in-app.jpg",
title: "pic 4"
}, {
src: "https://1.bp.blogspot.com/-G607thP7cWc/XDg22TxSSUI/AAAAAAAAYLc/bWQMrxhgneEBSKKiJ3TCuqYnxpcAyofVACLcBGAs/s1600/picasa-url-parameter.jpg",
srct: "https://1.bp.blogspot.com/-G607thP7cWc/XDg22TxSSUI/AAAAAAAAYLc/bWQMrxhgneEBSKKiJ3TCuqYnxpcAyofVACLcBGAs/w200-h200-n/picasa-url-parameter.jpg",
title: "pic 5"
}, {
src: "https://1.bp.blogspot.com/-fuPZuDAdv4s/XGN84O7JSkI/AAAAAAAAYV0/1LcgeouMQ18tWegvK11vz1qHDweOLtXZACLcBGAs/s1600/github-api-upload-file.jpg",
srct: "https://1.bp.blogspot.com/-fuPZuDAdv4s/XGN84O7JSkI/AAAAAAAAYV0/1LcgeouMQ18tWegvK11vz1qHDweOLtXZACLcBGAs/w400-h200-n/github-api-upload-file.jpg",
title: "pic 6"
}, {
src: "https://2.bp.blogspot.com/-Bc-JyEZwpG4/W6LTpxNm2mI/AAAAAAAAXpg/Tf-GhNpvFLICCg_6ICW3y4Er4trMozW3gCLcBGAs/s1600/seo-fake-information-identification.jpg",
srct: "https://2.bp.blogspot.com/-Bc-JyEZwpG4/W6LTpxNm2mI/AAAAAAAAXpg/Tf-GhNpvFLICCg_6ICW3y4Er4trMozW3gCLcBGAs/w100-h200-n/seo-fake-information-identification.jpg",
title: "pic 7"
}, {
src: "https://3.bp.blogspot.com/-lo1NZ0KVZSU/WRrNvclwESI/AAAAAAAAPjQ/k50YaNha-1YlzwU0qtHwbhBoLfXPll1iACLcB/s1600/how-to-become-top-blog-writer.jpg",
srct: "https://3.bp.blogspot.com/-lo1NZ0KVZSU/WRrNvclwESI/AAAAAAAAPjQ/k50YaNha-1YlzwU0qtHwbhBoLfXPll1iACLcB/w300-h200-n/how-to-become-top-blog-writer.jpg",
title: "pic 8"
}]
});
</script>


以上程式碼展示效果如下：

更多圖片展示工具：

----
如這篇文章對您有幫助，請順手按個 +1 或分享，謝謝！

Javascript 產生偽隨機數字的方法及應用

October 10, 2019, 5:04 pm

≫ Next: 讓 Blogger 文章標題及文末都出現編輯圖示，方便修改文章

≪ Previous: 讓相簿圖片在網頁上呈現「瀑布流」+「自適應」版型﹍jQuery 畫廊外掛

$

0

0

最近接到一個需求，想在網站顯示虛構的線上人數。一般來說，顯示線上訪客數有很多免費的第三方服務，不過案主會有這樣的需求，代表網頁顯示的數字想要膨風一點。

用 JS 產生隨機數字其實很簡單，但如果隨機產生的線上人數太離譜，一眼就被看穿的話，對網站聲譽其實不太好，所以這功能也不是那麼簡單就做得出來。

(圖片出處: pixabay.com)

一、設計原理

本篇說明大致的實現原理，未包含實作細節，不過提供的範例已經相當足夠了。

1. 隨機數字必須依照規則產生

首先頁面上顯示的線上人數，不可每次重新載入頁面就產生隨機數字。例如訪客進入首頁後，點進了一篇文章，相差不過幾秒，結果線上人數差異太大，很容易就被抓包。

若有人刻意測試連續重整頁面 5 次，結果看到 5 個不一樣的數字，一看就知道是造假。

所以這些隨機數字必須有個規則，例如在某特定時間內都是同樣的數字，假設能做到 5 分鐘內是同一個數字、下個 5 分鐘是另一個數字，這樣就成功了。


2. 限定數字區間

產生的數字也要有所限制，不能前 5 分鐘是 10 個人，下 5 分鐘是 1000 人，再來又變成 150 人，如此的劇烈變化。

能夠限定數字在某個小區間移動，例如 50 ~ 100，或是 25 ~ 50，都是相對比較合理的。

二、如何產生偽隨機數字

1. 偽隨機原理

原本隨機產生的數字每次都會不同，不過這篇「JS生成相同的随机数(伪随机数)」利用數學演算法，如果每次隨機數字的產生，是基於固定的一個「隨機種子」(seed)，就有辦法產生相同的隨機數。

原理這篇有詳細的說明，數學上使用的方法稱為「線性同餘方法」，不過我們可以不用瞭解這麼多，直接拿公式來套就好了。


2. 偽隨機範例

以下修改自前述教學網頁提供的範例程式碼：

var seed = 5,
rnd;

function seededRandom(max, min) {
max = max || 1;
min = min || 0;
seed = (seed * 9301 + 49297) % 233280;
rnd = seed / 233280;
return min + rnd * (max - min);
}

for (var i = 0; i < 10; i++) {
console.log(seededRandom());
}
使用 seededRandom 函數可產生 0~1 之間的隨機數字，最後用一個迴圈連續跑 10 次隨機結果，你會發現無論執行多少次，這 10 個隨機數永遠一模一樣。

而當 seed 的值改變時，就會產生另外 10 組隨機數，這也代表隨機數永遠與 seed 數值連動。

三、隨機線上人數範例

以下提供一個簡單的範例：

var maxVisitors = 100, // 最大訪客數
minVisitors = 50, // 最小訪客數
today = new Date(),
year = today.getFullYear(),
month = today.getMonth() + 1,
hour = today.getHours(),
minute = today.getMinutes(),
second = today.getSeconds(),
seed, visitors;

// 每 30 秒產生一個線上人數
if (second >= 0 && second < 30) {
seed = year * month * hour * minute * 1;
} else {
seed = year * month * hour * minute * 31;
}
visitors = seededRandom(maxVisitors, minVisitors);
alert(visitors);
function seededRandom(max, min) {
seed = (seed * 9301 + 49297) % 233280;
var rnd = seed / 233280;
return Math.round(min + rnd * (max - min));
}
參數修改請見註解說明，大致說明一下程式碼做了什麼事：

• 限定產生 50 ~ 100 之間的隨機數
• 每分鐘 0 ~ 29 秒之間產生的隨機數一樣，每分鐘 30 ~ 59 秒之間產生的隨機數也一樣。
• 可以快速不斷執行這段程式碼，會發現每過 30 秒才產生新的隨機數

更多 Javascript 相關文章：

----
如這篇文章對您有幫助，請順手按個 +1 或分享，謝謝！

讓 Blogger 文章標題及文末都出現編輯圖示，方便修改文章

October 15, 2019, 7:48 pm

≫ Next: 解析中華電信電話行銷技巧

≪ Previous: Javascript 產生偽隨機數字的方法及應用

$

0

0

為了方便站長們編修文章，Blogger 官方在後台提供了設定方法，可在文末指定位置顯示編輯文章的小工具圖示，點擊後可直接編輯文章，省下在後台搜尋指定文章再編輯的時間。

這功能算是很貼心了，但對我來說還不夠，因為捲到文末仍需要花一些時間，如果要做到最方便的話，我想在文章標題附近也放一個編輯圖示就很完美了。

(圖片出處: pixabay.com)

一、有需要常常編輯文章嗎？

或許有的讀者會覺得編輯文章的機會不多，偶爾花時間捲一下螢幕沒什麼，不過對於具備工程師特質的人來說，若常重複無謂的動作及時間，就會想辦法進行簡化、或批次化處理。

而且對我而言，其實修改文章的機會非常多，例如：

• 剛寫完一篇文章後：
  
  • 這是機會最多的時刻，我會從頭到尾念個幾次，反覆感覺是否有需要去除贅字、修改用詞的地方
  • 通常也會看到一些錯字要改
  • 反覆檢視之後，也比較能感覺出，哪幾段話需要特別上紅字
• 某些文章、或是懶人包，都是需要定期更新的，例如「Blogger 工具整理」、「作品集」
• 另外，一篇新文章產出後，文中若有部分內容與過去的某些文章關連，就必須找出舊文章，在適當的段落加入新文章的連結、補充相關內容。

以上這些動作做久了之後，會希望能按 Home鍵(或 go top 按鈕)跳到網頁開頭處，在文章標題旁有個按鈕可直接編輯文章。

以下就來看看如何同時在 Blogger 文末、及標題處，同時顯示文章編輯按鈕。

二、如何正常顯示文章編輯按鈕

1. 後台設定

首先進入 Blogger 後台 → 版面配置 → 網誌文章 → 編輯：

• 上方紅框處的「顯示快速編輯」一定要勾選，否則就算直接改範本也不會顯示出來
• 下方預覽圖可看到預設位置會出現在文末分享按鈕旁邊
• 可自行拖曳編輯圖示到其他位置，例如文章標題下方

雖然擺放位置很自由，但是只能出現在一個地方，有一好沒有兩好。

如果想要同時出現在文章標頭、以及文末，就必須修改範本才行。


2. 按鈕並非一定會出現

需要注意的是，就算按照以上說明正確設定，按鈕也不一定會出現：

• 如果是使用乾淨的官方範本，出現按鈕比較沒問題
• 如果使用非官方範本，由於範本內容被大改，則不一定會出現文章編輯按鈕
• 如果使用官方範本，但自己常常修改範本，也可能不小心覆蓋了相關的程式碼，導致按鈕無法出現

那麼請繼續參考後續的說明，來修改範本讓按鈕出現在指定位置。

三、修改範本

在修改範本之前，建議先閱讀「備份範本的訣竅」系列文章。


1. 首先按照前面的說明，在後台版面配置設定完畢。


2. 接下來的內容全部出自「Blogger 範本﹍文章區塊的程式碼 」，請隨時參閱。


3. 在「三、文章區塊」→「8. 快速編輯圖示」可找到，編輯圖示的程式碼為：

<b:include data='post' name='postQuickEdit'/>
接下來需要將以上程式碼，複製到文章標題、文末的位置。


4. 在「三、文章區塊」→「1. 文章標題」可找到文章標題的相關程式碼，可將編輯圖示的程式碼貼在這段程式碼後面、或自訂位置。


5. 在「三、文章區塊」→「3. 繼續閱讀」這段程式碼的後面，就是文末的開始之處。如果已經滿意後台版面配置預覽的編輯圖示位置，這裡不需重複貼編輯圖示的程式碼。


最後提醒一下，在「Blogger 推出全新自適應 RWD 官方範本」曾提及，官方 RWD 範本不建議任何修改，所以要修改範本的話，最好只改官方 RWD 範本以外的模版。

更多 Blogger 小技巧：

----
如這篇文章對您有幫助，請順手按個 +1 或分享，謝謝！

解析中華電信電話行銷技巧

October 20, 2019, 7:40 pm

≫ Next: 可練習英文聽力的 YouTube 經典卡通詳細整理

≪ Previous: 讓 Blogger 文章標題及文末都出現編輯圖示，方便修改文章

$

0

0

最近家人接到中華電信行銷電話，表示只要 xxx 元，上網速率就可以提升到 16M/3M。由於現在行銷電話太多，而碰巧我也很熟悉這個行業，因此那些行銷話術對我沒有任何作用。

聽起來再怎麼美好的電話行銷產品，記得別當下在電話中做決定就對了，一定要掛掉電話後仔細研究，真的有需要時日後再回電就是。

(圖片出處: pixabay.com)

一、進行光世代試算

查了一下家中目前的費率與速率：

• 目前的速率為 6M/2M，實際上是很久以前中華電信一路自動升上來的 (3M/768K → 4M/1M → 6M/2M)
• 目前 2019 對應的費率為一個月 621(網路+電路費)

而電話行銷中告知的內容為：

• 可升級到 16M/3M
• 一個月 617~627 (忘了確切數字是多少，總之在 621 的上下 10 元之間)
• 要綁約 2 年

這個方案一定是划算的，因為比目前 16M/3M 的牌告費率 673 少了約 50 元，只不過我的考量是：

• 中華電信的意圖是什麼？為何要提供比較優惠的方案？
• 6M/2M 是否已經不敷使用？是否一定要升等？

在行銷電話中有請家人詢問，2 年後 16M/3M 的費用怎麼算，得到的回覆是「以當時的優惠費率計算」，這是一個含糊不清的回答與話術，也代表此事需要仔細思考。

二、實際電話升等案例

我想到幾年前親戚被中華電信擺一道的事件，一開始大概是十多年前吧，由於具有教師資格，親戚可以用很便宜的費率申請某個教職員專案，跟我一樣使用最低等級的光世代速率，但是只要五百出頭的費用，印象中當年比我少了兩百多元吧，當時滿羨慕的。

過了好幾年後某一天，他拿到中華電信帳單後打開後大叫，怎麼變成七百多塊，那時還忙著跟他一起查是怎麼回事，也安慰他說如果錢算錯了趕快打中華電信 0800 電話，一定可以退回來的。

怎知他想了半天，結果說應該不用打電話，會有這樣的狀況主要是他平常收到帳單根本不會打開看，是這次特別打開看才發現的。他說道：

• 之前有一天好像有接到中華電信的行銷電話，說不用增加費用，就可以直接升到 20M/5M，問要不要升等
• 他想說不用錢當然好，就同意升等了

但我覺得事情不對勁，問他說電話裡面有沒有提到要綁 2 年約？綁完約後的價錢怎麼算？結果他說也沒什麼印象了，好像要綁約吧，也沒問 2 年後的費用。

實際上他跟我一樣沒有 20M/5M 的需求，日常使用量絕不會超過最低的 6M/2M，純粹聽到不用錢就可以升等，也沒想過之後會變成 20M/5M 的牌告價，不知道自己的教師優惠資格這麼輕易就不見了。

看來事情差不多要水落石出了，叫他把過去 2~3 年的帳單都找出來比對，最後果然是 2 年期間帳單是優惠費率，而期滿後就自動成為 20M/5M 的牌告費用。

三、中華電信的策略

回想起這件事後，發現中華電信非常有一套：

• 不但可以在特定時期，為了特殊目的祭出永久優惠專案，來籠絡特定族群、人士
• 之後還可以很巧妙、不漏痕跡地將這些永久優惠專案收回(利用電話行銷)
• 當電話行銷的 2 年綁約(口頭承諾)成立後，代表中華電信過去提供的爛合約(永久優惠專案)就一筆勾消
• 當 2 年綁約到期後，自動轉為市價的牌告費率，中華電信將來可永久賺到之間的價差
• 原本消費者永久可享受的優惠價差，因為電話中不加思索的「好」，2 年後就移轉為中華電信永久賺到的價差，過去幾年享受到的優惠很快就會被要回去並倒貼

當然，這招數不代表是中華電信發明的，所有電話行銷業者都有辦法套用這個思路。消費者永遠站在弱勢的一方，業者有專家、法律顧問可以針對民眾心理來設計話術，一般民眾也不清楚電話行銷這一塊的相關法律規定，不知道自己在電話中說的每個字語有什麼樣的效力。

同時總有一定比例的民眾不會每個月看帳單，畢竟每個月都是差不多的金額沒什麼好看的，而往往要很久之後才會發現帳單暴增的數字。

四、電話行銷產業

查了中華電信的光世代官網後，發現 6M/2M 已經下架了，速率最低的方案是 16M/3M，那麼我想這通電話行銷的企圖，大概是想把市面上殘餘的 6M/2M 清光吧！綁 2 年約後，我就不可能退回 6M/2M 了，因為這個產品早就不存在。

以文書處理的需求而言 6M/2M 已經足夠，上網看 720P、1080P 影片也不是問題，既然我沒有 2K、4K 螢幕來看更高端的影片，的確升 16M/3M 沒有那麼樣的急迫性。

以價性比而言，一個月多花不到 50 元可以用將近 3 倍的速率也不是不可以，不會負擔不起，但實際上現在不想升等，其實是其他的理由。

就我的角度看來，電話行銷產業主要利用資訊落差、知識落差、心理學理解落差，站在制高點與民眾角力，這是一場不公平的交易，跟詐騙集團的執行原理相同，利用心理學優勢、貪念及利益引誘人心，差別在於電話行銷是合法的。

當然，如果特別寫這篇文章針對電話行銷產業是不公平的，因為合法的詐騙產業中，電話行銷的毛利沒有其他的大，至於哪些領域是合法的、利潤更大更可怕的詐騙就不明說了，日常生活中很多都看得到，只是一般人察覺不出來。

而既然我察覺出中華電信的意圖了，那就很抱歉，並不想助長這樣的產業。

如果想清掉我的 6M/2M 方案，就直接幫我升等為 16M/3M 吧，跟以前 3M/768K 與 4M/1M 時升速一樣，反正目前我有沒有升等都沒差~

更多數位生活相關心得：

----
如這篇文章對您有幫助，請順手按個 +1 或分享，謝謝！

可練習英文聽力的 YouTube 經典卡通詳細整理

October 25, 2019, 6:04 pm

≫ Next: 忘了備份要如何救回部落格網站文章內容、圖片

≪ Previous: 解析中華電信電話行銷技巧

$

0

0

學習英文時，選擇適合自己程度的教材是最重要的，程度過低、過高都會事倍功半，甚至無法進步。

例如以前有人說多看歐美影集、電影、聽 ICRT 等等，長時間下來可以增進聽力，但實情是，當字彙不夠、根基不足時，這些再怎麼聽都不會進步，因為跟本聽不懂。

必須從聽力速度跟得上，內容、字彙能理解的教材開始，一步步建立聽力的基礎才行。幸運的是當前這個世代，YouTube 上有符合各種程度的英聽資源，免費就能循序漸進建立聽力的基礎。

一、為何要看英文卡通

以前的年代找適合程度的聽力教材不容易，不過現在 YouTube 就有許多官方釋出的英文卡通影片：

• 除了高畫質、不用擔心版權合法性
• 還附有英文字幕開關幫助學習
• 也可隨時按左、右方向鍵，快速跳轉重複聽某個段落

上面是知名英文教學 YouTuber 哥倫布的影片，他提到看英文卡通是一開始練習聽力最好的管道，同時也說明了理由及練習的方法，可以看一下這部分的內容。

那麼本篇就詳細整理目前 YouTube 上符合版權的英文卡通資源，有將近 20 個頻道，還有非常多的經典卡通可回味。

這些卡通全部都在「線上看電視」→「學習」→「英語卡通節目」以及「英語卡通資源」，隨時可切換不同的節目觀看，非常方便。

二、英語卡通節目

以下所有頻道的影片，會根據字彙程度、說話速度、聲音清晰度作大致的分級，一開始若不了解自己程度，建議從初級開始，逐漸往上挑戰。

而分級的程度並非對應實際英檢程度，程度高低只是相對性的，根據我大致的感覺判斷，可斟酌參考。

1. 海綿寶寶(SpongeBob SquarePants)

• 線上觀看：海綿寶寶
• 簡介：非常知名、受歡迎的美國卡通，不光是小朋友，其實很多成人喜歡看，也可以算是成人卡通。
• 程度：中高，速度快，字彙比較深，不過發音辨識算清楚。

2. 米老鼠(Mickey Mouse)

• 線上觀看：米老鼠
• 簡介：迪士尼的經典卡通，裡面也會看到其他熟悉的角色唐老鴨、高飛狗等等。
• 程度：初中，速度不快，某些卡通人物發音為了像動物而腔調很刻意，辨識起來比較吃力一些。

3. 佩佩豬(Peppa Pig)

• 線上觀看：佩佩豬
• 簡介：英國知名卡通，非常熱門，在 YouTube 上有全世界各種語言的官網。
• 程度：初級，說話刻意放慢速度，適合聽力入門。

4. 蜘蛛人(Spider-Man)

• 線上觀看：蜘蛛人
• 簡介：Marvel 漫威宇宙的一名超級英雄，卡通裡也會出現許多其他復仇者聯盟的角色，例如鋼鐵人、美國隊長、黑豹、洛基等等。
• 程度：中級，字彙、速度都算中等，咬字滿清楚的，入門上來之後很適合當聽力進階教材。

5. 藍色小精靈(The Smurfs)

• 線上觀看：藍色小精靈
• 簡介：經典美國卡通，這是童年的回憶啊，可以再次回味小精靈與賈不妙。
• 程度：初中，由於年代比較久遠，音質稍差，有些角色發音比較誇張，辨識比較吃力一些。

6. 泡泡孔雀魚(Bubble Guppies)

• 線上觀看：泡泡孔雀魚
• 簡介：很有名的加拿大卡通，節目各方面都製作地很有水準，不但畫質好、角色設計精緻，內容也非常有教育性，適合小朋友觀看。
• 程度：中級，語速中等，咬字很清楚，很適合做為聽力進階教材。

7. 飛天小女警(The Powerpuff Girls)

• 線上觀看：飛天小女警
• 簡介：美國華納的卡通作品，可愛簡單線條畫風，三個神力小女孩打擊犯罪的故事。
• 程度：中高，語速滿快的，適合晚點再來挑戰。

8. 碰碰狐(pinkfong)

• 線上觀看：碰碰狐
• 簡介：韓國製作的卡通節目，風格屬於線條簡單畫面乾淨，非常用心的幼兒影片。
• 程度：初級，語速刻意降慢，發音咬字清晰，自帶英文字幕，故事內容多元，絕佳的入門英聽教材。

9. 小豬奧莉薇(Olivia)

• 線上觀看：小豬奧莉薇
• 簡介：另一個以小豬為主角的卡通，畫風奇特，雖然選 HD 畫質，畫面仍刻意營造出有點霧霧的感覺。
• 程度：中高，語速稍快，有些角色口音辨識比較吃力。

10. 睡衣小英雄(PJ Masks)

• 線上觀看：PJ Masks
• 簡介：英國知名卡通，類似飛天小女警的人設，只是換成三個小男生，但是畫面質感強很多(類 3D)。
• 程度：中高，語速較快，雖然需要的英聽程度比較高，但是我喜歡英國節目的共通點「咬字很清楚」，所以是適合的高階教材。

11. 寶寶巴士(BabyBus)

• 線上觀看：BabyBus
• 簡介：中國製作的節目，但其實做的非常用心，質感畫質都很棒。
• 程度：初級，適合給幼兒看的節目，跟其他入門教材相比，唱歌的部分比較多，對話相對少很多。

三、英語卡通資源

這部分大多也是以卡通的方式呈現，但比較不是特定的卡通節目，而是專門經營兒童教學的頻道，或是該頻道製作的影片。

1. 愛麗斯夢遊仙境(Alice's Adventures in Wonderland)

• 線上觀看：愛麗斯夢遊仙境
• 簡介：這是知名的「BBC Learning English」所製作的兒童床邊朗讀故事，大部分為靜態畫面。
• 程度：初中，很輕鬆的聽經典童話故事。

2. 知名童話合集

• 線上觀看：知名童話合集
• 簡介：這是一個印度兒童頻道「Geethanjali Kids」製作的床邊故事，一共有這些知名童話：美女與野獸、傑克與豌豆、白雪公主、小紅帽、三隻小豬
• 程度：中級，咬字清晰，內建字幕，很好的聽力進階教材。

3. 芝麻街(Sesame Street)

• 線上觀看：芝麻街
• 簡介：從小就非常知名的美國兒童節目，大部分角色使用布偶來扮演。
• 程度：高級，語速很快，大部分木偶刻意裝出特別的音腔，導致非常難以辨識，可能外國人才容易聽得懂。

4. WOW ENGLISH TV

• 線上觀看：WOW ENGLISH TV
• 簡介：英國教兒童英文的頻道，大部分由男主持配合卡通特效演出
• 程度：初中，男主持的咬字滿清楚，也放慢速度，聽起來不吃力。

5. Treehouse Direct

• 線上觀看：Treehouse Direct
• 簡介：加拿大兒童頻道，卡通畫面質感做的很不錯。
• 程度：中級，發音清楚，不錯的聽力進階教材。

6. T-Series Kids Hut

• 線上觀看：T-Series Kids Hut
• 簡介：簡介資料看不出哪個國家，但口音聽起來像印度人製作的節目。畫面線條簡單，自帶字幕是優點。
• 程度：初級，刻意放慢語速，適合聽力入門，除了口音不太標準以外都不錯。

更多 YouTube 相關心得：

----
如這篇文章對您有幫助，請順手按個 +1 或分享，謝謝！

---

忘了備份要如何救回部落格網站文章內容、圖片

October 30, 2019, 5:51 pm

≫ Next: FB 不認識的人要求加好友，是否該同意？正反意見綜合分析

≪ Previous: 可練習英文聽力的 YouTube 經典卡通詳細整理

$

0

0

最近接到一個比較罕見的需求，案主表示 Blogger 每篇文章設定的「搜尋說明」(可參考「Blogger 文章設定」→「六、搜尋說明」)，在今年 5~6 月間的文章都不見了，詢問有沒有辦法可以救回。

以前曾寫過「Blogger 網站消失」、「Blogger 文章誤刪」的案例，這次的案例看起來比較輕微一些，至少文章還在，只是某些資訊消失了。

由於之前的案例發生在 4~5 年前，當時還不知道「Wayback Machine」(網站時光機)這個網路服務，否則的話，這個超強的網路服務有機會可以救回所有不見的網頁內容，可以說是目前最強的網頁救援武器。

當然，建立網頁備份的觀念才是終極解決方案，但是網頁會急著需要救援一定都是還沒想到要備份之下發生的憾事，那麼本篇就來看看如何操作這個工具。

一、網站時光機 Wayback Machine

1. 簡介

可參考 Wiki 的介紹「網站時光機」，這是一個非營利組織「網際網路檔案館」提供的服務，創辦人希望為網際網路提供「普遍取得所有知識」的途徑。

構想十分偉大，因為無償需要用來儲存的伺服器空間非常巨大，該網站進入後就有個 DONATE 按鈕，WFU 因為靠這個網站救回一些重要資料，也曾贊助過表達一點心意。


2. 教學文章參考

「免費資源網路社群」曾寫過這篇「Wayback Machine 網站時光機帶你重溫那些年」，除了簡單介紹這個網站，也提供了「網頁備份」的操作步驟教學心得。


3. 優缺點說明

有的站長或許習慣使用 Google 搜尋結果的「庫存頁面」功能來救援網頁，不過「庫存頁面」能做到的其實有限，否則 WFU 也不會對 Wayback Machine 心存感激了。Google 庫存頁面的優缺點在於：

• 索引速度會比 Wayback Machine 快
• 但只有一個版本，所以只會保留最新庫存頁面狀態
• 萬一要救援的網頁內容，最新狀態已經被 Google 索引，也就是錯誤的頁面內容已經被索引，那麼就看不到以前的正確頁面內容了
• 所以救援網頁要靠「庫存頁面」的話，手腳必須比 Google 還快才行

而 Wayback Machine 雖然是目前最強的工具，也不代表他可以 100% 救回所有頁面，因為：

• NGO 資源畢竟有限，不會保存世界上所有網頁
• 越熱門的網頁，Wayback Machine 的更新會越頻繁、保留的版本數也越多
• 不熱門的網頁，說不定只會有一個版本
• 也可能某些低流量的網頁，完全不會被 Wayback Machine 收錄

二、如何救回完整網頁內容

首先拿一篇文章當範例，說明如何利用 Wayback Machine 找回文章內容。我從 10 月的文章一路測試到 7 月底，終於找到三個月前有被收錄的文章，代表 Wayback Machine 索引速度很慢。

1. 取得網頁快取內容

範例文章為這篇「Adsense 申請 + 廣告無法顯示的各種疑難雜症整理」，在 Wayback Machine 首頁輸入該篇網址：

• Wayback Machine

• A：輸入要救回的網址
• B：如果有被收錄的話，記下這裡的收錄日期
• C：在月曆找到對應的日期，滑鼠移到日期上
• D：會出現收錄的時間點，點擊這個連結，會出現快取頁面

2. 取得網頁內容



上圖是快取頁面，如果只是要取得純文字，那麼直接從頁面上選取、複製即可。

如果要取得 HTML 碼的話，有兩種方式：

• 按滑鼠右鍵 → 檢視網頁原始碼 → 找到文章區塊的段落來複製
• 使用瀏覽器，例如「Chrome 開發人員工具」，因為可以收合 HTML 內容，處理比較方便

3. 調整 HTML 內容



並不是拿到快取頁面的 HTML 就能直接拿來用，因為裡面的連結全部被加上特定的字串，必須一一去除。請見上圖：

• 所有紅色底線的地方，可看出圖片網址或連結網址，前面都有 "http://web.archive.org/web/xxxxxxxxx"這樣的字串
• 可將內容複製到文書處理軟體，用全部取代的方式，一一去除這些字串，留下原始的網址連結。
• 紅框處可看到 <a name="more"></a>，原本是部落格文章「繼續閱讀」的程式碼，但被轉換成這樣的 HTML
• 要把紅框處字串改成 <!--more-->才能正確變成繼續閱讀標記

主要修改的地方有這些，改完才能將這些 HTML 碼貼回網站。

三、搭配 Feedly 使用

如果你的網站是部落格，那麼還有另一個救命仙丹「Feedly RSS 閱讀器」，只要有人訂閱過網站，Feedly 就會自動保留文章備份內容。

但 Feedly 不一定有 Wayback Machine 好用，以下是優缺點：

• Feedly 大致是 2013 年左右接下 Google Reader 的位置
• 在那個時間點之前的文章，伺服器多半沒有備份資料
• 所以 Feedly 能保存的資料比較少
• Feedly 網頁的內容會加料，不容易直接複製 HTML 碼
• 只適合救回文字及(圖片)連結

因為 Wayback Machine 有可能某些網頁沒有收錄快取，那麼 Feedly 可能就會是那些頁面的救星。

四、如何救回 Blogger 搜尋說明

回到開頭的案件，Blogger 每篇文章的「搜尋說明」，在頁面上是看不到這些內容的，那麼要如何找到「搜尋說明」呢？

在 Blogger 範本中，跟搜尋說明有關的 Blogger 語法是 data:blog.metaDescription，需要先到範本中看看，這個語法出現在範本中時的前後字串、段落是什麼，再到快取頁面尋找。

例如前面的範例網頁，網頁原始碼畫面如下：

• 以這個案例來看，「搜尋說明」的相關語法出現在字串 og:description附近
• 上圖紅框標起來的字串，正是在 og:description同一行的位置
• 那麼這些字串就是當初所設定的「搜尋說明」字串

五、補充說明

從本篇的案例來看，如果不是自己手誤、不小心刪除文章的相關資訊，那麼很可能是 Blogger 伺服器的失誤，導致部分資訊消失。這件事告訴我們不可完全信任網路服務，站長們有必要自己執行備份的任務。

經由本篇說明，我們可以了解到 Wayback Machine + Feedly 有辦法救回多數的頁面內容，但不一定是 100%。想要萬無一失的話，必須儘早養成備份網頁的習慣，而且是同步異地備份。

可參考「自動備份 Blogger 文章」，同時採取多個自動備份的方案，就比較不用擔心任何天災人禍了。

更多「網站工具」相關文章：

----
如這篇文章對您有幫助，請順手按個 +1 或分享，謝謝！

FB 不認識的人要求加好友，是否該同意？正反意見綜合分析

November 4, 2019, 6:18 pm

≫ Next: Google Apps Script 使用 XmlService 解析 XML 要注意的地方

≪ Previous: 忘了備份要如何救回部落格網站文章內容、圖片

$

0

0

前陣子寫了一篇整理文章，發到 FB 後有不少分享，應該是許多人剛好都有同樣的需求。同時間那一兩天 FB 也收到不少加好友的邀請，由於從他們的個人簡介看不出確切的來歷，例如以往會加我的通常是網路、部落格相關領域，那麼簡介至少會有網站的資訊。這樣的情形一時之間也無法決定要接受或是拒絕，只好暫時先晾著。

其實有幾種類型的好友邀請，很容易判斷決定：

• 大眼正妹頭像：看一下簡介、最新貼文通常會有色情聯絡訊息
• 無頭像：免洗帳號
• 無貼文：沒什麼動態、殭屍帳號

這些我會第一時間刪除邀請並向 FB 檢舉，但如果是正常帳號卻屬於陌生邀請的話，我的考量就比較多了。若同意加好友，跟我的連結性會是什麼？還是對方其實是有問題要問？加了好友會不會有什麼意想不到的壞事發生？

因為過去對 FB 的運作沒有很深入瞭解，這次決定研究一下，也可建立起在 FB 是否加陌生人好友的判斷準則。

(圖片出處: pixabay.com)

一、加陌生人為好友的壞處

基本上非好友傳來的私訊可能會被 FB 封鎖屏蔽，所以有些人可能會先送出好友申請再傳私訊。整理一下不想被加好友可能的想法：

• 會被推銷：可能被傳私訊進行推銷
• 會被加社團：FB 允許替好友強制加入社團
• 會被騷擾：可能被傳私訊聊天、騷擾
• 被邀請參加遊戲、抽獎：具體作法可參考「FB突然好多人加我朋友？這是怎麼回事？」
• 被詐騙：舉例同上一則連結
• 被監視一舉一動：有人不喜歡動態被盯著，有某些外掛可偵測到某些動態時自動通知
• 被用來攀關係(做為背書)：有些人會刻意加網路上較有名的人，在外招搖撞騙，或提高自己聲量
• 被看到私人資訊：有些照片、生日聯絡資訊等等不想被看到
• 首頁不想看到不相干人等的動態：FB 會用演算法出現不同朋友的動態，加一堆陌生人會導致增加不喜歡的動態的機率

如果同意加陌生人好友的話，需要解決以上所有不舒服的狀況。

二、加陌生人為好友的好處

由於本站提供了一些業務，說不定陌生人是有潛在案件要聯絡也說不定。且陌生人不一定都是壞人， 也可能對我們某項特質、技能感到有興趣，想要認識瞭解更多資訊，我們跟陌生人之間可能存在某種連結。

如果加了沒連結性的好友，壞處如前所述；而如果加了有連結性的好友，會有很多優點：

• 獲得關注：若我們的觀點被認同，可能會分享傳播出去
• 跟粉絲團原理相同：粉絲越多觸擊數也越多，當好友越多才有辦法增加觸擊數及擴散率
• 增加留言的機率：連結性好友多了才會增加留言機會，帶動更多留言，而留言是 FB 演算法中增加觸擊率更重要的因素
• 萬事問臉書：越多好友代表越可能有人幫忙回答、找答案
• 成為媒合者：我們的共同好友彼此原本可能是陌生人，但透過我們找到了連結性而牽上線，撮合許多事
• 流通資訊：可協助朋友或自己的資訊流通到不同圈圈

簡而言之也可看成人脈的流通，更多優點就不再贅述。也可參考「加入臉書朋友，不等於人脈！你還需要多做3步驟」

還沒加好友之前不容易知道有沒有連結性，加了就能增加可能性。

基於以上的優點，如果是自己主動加別人好友，其實效益更大、效率更好，路老闆的 FB online 遊戲，說明得更詳細：「如何快速增加 fb 優質好友」。

三、實名帳號與特定用途帳號

要不要加陌生人好友，除了分析優缺點，也需要看不同帳號的用途：

• 實際身份：
  
  • 一般來說實際的帳號，應該只會想加認識的人，不想加陌生人
  • 除非本身就是業務員，或是從是需要推銷、推廣的職務，才會需要加陌生人
• 網路身份：
  
  • 網路身份認識的人跟實際生活應該鮮少重疊，那麼這個帳號的好友應該本來就不是認識的人
  • 所以網路身份加陌生人的容忍度應該比較高
  • 但還是有必要進行過濾，不是阿貓阿狗都加
• 專門打卡：
  
  • 有人可能會建立專門用來應付店家打卡的帳號
  • 這類帳號跟殭屍帳號差不多，有沒有加陌生人應該差別不大

四、綜合考量

本站使用的 FB 帳號屬性算是「網路身份」，主要活動範圍在網路、部落格這個圈圈，也可做為接案用途。那麼整篇分析下來，發現「是否加陌生人好友」是很容易做決定的，第一段所有列出的壞處並不難解決：

• 會被推銷 → 看推銷什麼東西，如果無法產生連結性，直接剔除好友、或封鎖，因為他的目的只是替他自己推銷，不會替你傳播
• 會被加社團 → 看加什麼社團，如果無法產生連結性，直接剔除好友、或封鎖，因為他只是為了自己的目的
• 會被騷擾 → 直接剔除好友、或封鎖
• 被邀請參加遊戲、抽獎 → 直接剔除好友、或封鎖
• 被詐騙 → 直接剔除好友、或封鎖
• 被監視一舉一動 → 不是實際帳號，也沒什麼好監視的
• 被用來攀關係(做為背書) → 如果有人因此被騙，代表被騙的人判斷力待加強，也未跟我們求證，都成年人了，這不該是我們要付的責任
• 被看到私人資訊 → 不是實際帳號，沒什麼私人資訊，連大頭照都沒有
• 首頁不想看到不相干的人 → 加好友但取消追蹤就好

所以簡單做個總結：

• 以我的網路身份狀況，應該要加越多陌生人為好友越好
• 如果想要傳播個人、網站品牌、觀點，更應該多加好友
• 但需要過濾掉色情帳號、殭屍免洗帳號，以及純粹向我們推銷的帳號，這類好友對我們沒有幫助

更多 Facebook 相關文章：

----
如這篇文章對您有幫助，請順手按個 +1 或分享，謝謝！

Google Apps Script 使用 XmlService 解析 XML 要注意的地方

November 9, 2019, 4:14 pm

≫ Next: 合法線上第四台直播頻道 + 隨選隨看(VOD)戲劇電影動畫整理

≪ Previous: FB 不認識的人要求加好友，是否該同意？正反意見綜合分析

$

0

0

之前曾記錄使用 Google Apps Script(簡稱 GAS) 爬網頁資料，「解析 HTML 及操作 DOM 的技巧」，主要利用 GAS 的 XmlService 這個官方函數。

而最近爬 XML 頁面時，發現之前記錄的心得不敷使用，沒想到 XML 架構有點難以理解。因此花了點時間解決問題，也另外記錄一下心得。

(圖片出處: pxhere.com)

一、GAS 標準範例

首先看一下官方提供的標準範例，來自官網「XML Service」：

function parseXml() {
var url = 'https://gsuite-developers.googleblog.com/atom.xml';
var xml = UrlFetchApp.fetch(url).getContentText();
var document = XmlService.parse(xml);
var root = document.getRootElement();
var atom = XmlService.getNamespace('http://www.w3.org/2005/Atom');

var entries = root.getChildren('entry', atom);
for (var i = 0; i < entries.length; i++) {
var title = entries[i].getChild('title', atom).getText();
var categoryElements = entries[i].getChildren('category', atom);
var labels = [];
for (var j = 0; j < categoryElements.length; j++) {
labels.push(categoryElements[j].getAttribute('term').getValue());
}
Logger.log('%s (%s)', title, labels.join(', '));
}
}

以上需要注意的是紅字那兩行，getNamespace 是取得「命名空間」(namespace)之意，概念說明可參考 Wiki「XML命名空間」。

不是每個 HTML 頁面都有設定命名空間，同樣也不是每個 XML 頁面都有命名空間。之前解析 HTML 網頁時，剛好沒處理命名空間同樣可以正常執行，但這次解析 XML 頁面就踢到鐵板，所以如果 XML 頁面無法正常解析時，就必須注意紅字內容，檢查該頁面是否設定了命名空間：

• 先用 getNamespace 取得該 XML 頁面的命名空間
• 接著取得頁面任何元素，例如使用 getChildren 時，都需要加入命名空間的參數
• 否則可能什麼東西都取不出來

二、YouTube 播放清單 feed 頁面

直接以實際範例說明比較容易理解，例如下面是 YouTube 提供的影片播放清單 RSS Feed，公視「有話好說」XML 頁面：

https://www.youtube.com/feeds/videos.xml?playlist_id=UUgxXuXHJ4VwovSTvDiWlzZQ



從這個頁面可以爬到的資料相當多，例如影片 id、標題、作者資訊等等：

• A：紅色底線這裡，就是這個 XML 頁面的 namespace 命名空間
• B：此處的紅色底線是另一個困難的概念，這裡是 yt 這個命名空間
• C：如果要從此處的 videoId 元素取得影片 id 字串，請注意到有個前綴字串 yt，這就是該元素命名空間

以上就是使用 XmlService 會卡關的地方，以下來看範例程式碼。

三、爬取 XML 頁面範例程式碼

同樣以公視「有話好說」的 RSS Feed 當範例，嘗試以 GAS 來爬取 XML 頁面內容，取得每個影片的 id、標題：

(function() {
// 取得清單 feed 內容, 解析 xml 格式
var xmlUrl = "https://www.youtube.com/feeds/videos.xml?playlist_id=UUgxXuXHJ4VwovSTvDiWlzZQ",
xml = UrlFetchApp.fetch(xmlUrl).getContentText(),
doc = XmlService.parse(xml),
root = doc.getRootElement(),
atom = XmlService.getNamespace('http://www.w3.org/2005/Atom'), // 這個 feed 一定要有 namespace 才能讀取
yt = XmlService.getNamespace('http://www.youtube.com/xml/schemas/2015'), // 有 prefix 前綴 yt 一定要有 namespace 才能讀取
entries = root.getChildren("entry", atom), // 一定要加上 atom namespace 才能取得
i, videoId, programTitle;

// loop 所有影片
for (i in entries) {
// 取得影片 id, 影片標題
videoId = entries[i].getChildText("videoId", yt); // 一定要加上 yt namespace 才能取得
programTitle = entries[i].getChildText("title", atom); // 一定要加上 atom namespace 才能取得

Logger.log("影片 id = "+videoId);
Logger.log("影片標題 = "+programTitle);
}
})();
所有注意事項請直接看註解字串，並參照前面「二、YouTube 播放清單 feed 頁面」的說明即可理解。

參照此範例後，要取得此頁面其他欄位的資料，按相同邏輯加入參數即可抓到。

更多 相關文章：

----
如這篇文章對您有幫助，請順手按個 +1 或分享，謝謝！

合法線上第四台直播頻道 + 隨選隨看(VOD)戲劇電影動畫整理

November 14, 2019, 4:07 pm

≫ Next: 擴充 Blogger 官方聯絡表單，讓任何自製版面的表格或內容都能傳送訊息

≪ Previous: Google Apps Script 使用 XmlService 解析 XML 要注意的地方

$

0

0

製作「線上看電視」之後，整合了多數 YouTube 上可合法收看的直播頻道、節目，不過仍有一些合法、擁有版權的第四台直播節目節目，並沒有放在 YouTube。不時有使用者詢問能否新增某些知名的卡通動畫、台日韓劇等節目，由於版權的關係那些節目很難放上 YouTube，不過倒是可以在這些外部網站看到。

因此「線上看電視」特別在選單新增一個群組「外部」，用來存放這些外部網站的網址連結，方便愛用者找不到特定節目時，可以連到其他網站收看。

本篇整理列出許多外部合法資源，也包含了許多免費的隨選隨看(VOD)戲劇、電影、動畫節目，並依照性質分類，也會大致介紹該頻道有什麼熱門節目，也就是 YouTube 無法上架的內容。



以下所有頻道名稱即為外部連結，點擊即可前往觀看。不過不需要一一加入書籤，只要進入「線上看電視」後，點擊選單上的「外部」分類，即可顯示所有頻道資訊，可當成現成書籤使用。

一、綜合

• 台視
• 忠孝節義(歌仔戲)、蠟筆小新、我們這一家、航海王
• 中視
• 櫻桃小丸子
• 華視
• 哆啦A夢、烏龍派出所、名偵探柯南
• 民視第一台
• 民視台灣台
• 民視
• 大聯盟賽事
• 原民台
• 東森亞洲衛視
• 靖天日本台
• 日劇、日本相關節目
• 龍華日韓台
• 日韓劇
• 三立台灣台
• 三立都會台
• 台劇
• KKTV 免費綜合專區
  
  • 這個網站的分類不太好，各種類型免費、付費節目混在一起
  • 要單獨挑出免費節目只能進入這個「免費專區」的連結，但所有類型全部混在一起
  • 可免費收看的有動畫、台日韓劇
• Yahoo TV

二、新聞

• 寰宇新聞一台
• 寰宇新聞二台
• 華視新聞資訊台

三、綜藝

• LINE TV 免費中外綜藝
• 台日韓綜藝節目
• LiTV 免費綜藝
• 民視綜藝台
• 愛爾達娛樂台
• 龍華偶像台
• Yes 娛樂
• MTV
• 爆笑頻道
• 南方四賤客、歡樂嚇嚇叫
• 豬哥亮歌廳秀

四、戲劇

• LiTV 免費中外戲劇
• 東亞地區戲劇
• LINE TV 免費台劇
• 很多最新台劇
• LINE TV 免費韓劇
• 愛奇藝 免費連續劇
• 主要是東亞地區戲劇
• 公視戲劇
• 民視影劇台
• 金光布袋戲

五、電影

• LINE TV 免費電影
• 愛奇藝 免費紀錄片
• 影迷數位電影台
• 靖天電影台
• 龍華電影台

六、體育

• LINE TODAY NBA
• 每週 2、3、4 與緯來同步轉播
• Yahoo TV 中華職棒

七、兒少

• LINE TV 免費動畫
• 鬼滅之刃、刀劍神域、 蠟筆小新
• LINE TV 免費卡通
• 史奴比
• Yahoo TV 免費動畫
• 愛奇藝 動漫
• 柯南、小當家、寶可夢
• 有些最新集數免費，舊集數要付費。
• i-Fun 動漫台
• 進擊的巨人
• 龍華卡通台
• 數碼寶貝、航海王

八、食旅

• 亞洲旅遊台
• 民視旅遊台

九、知性

• History 歷史頻道
• CI 罪案偵查頻道
• CNEX 紀實頻道
• Love Nature
• SMART 知識頻道

十、學習

• 空中英語教室
• ELTV 生活英語台

十一、宗教

• Good TV 好消息

更多「網路電視」相關文章：

----
如這篇文章對您有幫助，請順手按個 +1 或分享，謝謝！

擴充 Blogger 官方聯絡表單，讓任何自製版面的表格或內容都能傳送訊息

November 20, 2019, 12:10 am

≫ Next: Google Apps Script 網頁爬蟲麻煩事交給 Cheerio 解決，輕鬆解析 HTML 與 XML

≪ Previous: 合法線上第四台直播頻道 + 隨選隨看(VOD)戲劇電影動畫整理

$

0

0

Blogger 官方「聯絡表單」是很棒的工具，提供了訪客傳送私密訊息的簡易管道。可惜的是制式版面只有三個欄位可以填寫(稱呼、郵件、訊息)，當然這已能滿足多數用途，但要客製就相當不容易。

過去寫了這篇「使用 Google 表單(自訂樣式) 取代 Blogger 聯絡表單」，結合 Google 試算表與後端 Google Apps Script(簡稱 GAS)，利用後端寄出郵件給自己，流程相對複雜，比較適合前端工程師實作。

前陣子有留言表示這個方案失效，但如果是熟悉 GAS 的工程師，我相信還是有辦法可以實現這個流程，瞭解原理就寫得出來。不過本篇要展示的方案，倒是與 Google 試算表或 GAS 都無關。

(圖片出處: pexels.com)

一、純前端擴充官方聯絡表單

要動到後端總是繁雜一些，如果能直接用官方聯絡表單來處理複雜表單、表格，就再好不過了。

前陣子處理一個購物車網站時，遇到這兩種需求：

• 聯絡表單需要加入「電話」欄位
• 購物車訂單內容需要傳送郵件通知站長

於是開始研究如何擴充官方聯絡表單，而想通原理後也不算困難，只要把自製表單的內容塞到官方聯絡表單，再進行傳送就完成了。

二、新增電話欄位

上圖範例直接修改 Blogger 官方聯絡表單的 HTML/CSS，除了新增一行「電話」欄位，也美化了整個表單。

來看看傳送表單之後，接收到的郵件：



郵件最下方可看到，這是一封來自「聯絡表單」工具的訊息，除了訪客填寫的內容，還多了電話資訊。

三、傳送購物車內容

前面是個比較簡單的修改，接下來是極為複雜的範例。



上圖是購物車結帳後的頁面，除了顧客下單後需要填寫的聯絡資訊，例如電話、地址之外，也需要將顧客的訂單細節記錄在郵件之內，例如：

• 品項名稱
• 數量、單價
• 總金額

來看看按下「送出訂單」會收到什麼內容。




一樣可看到這是一封來自「聯絡表單」工具的訊息，包含了所有顧客聯絡資訊，以及訂單詳細內容。

四、總結

由於本篇是極為客製的需求，因此無法提供通用的程式碼範例，但從範例可以看出，只需要有前端的 HTML/CSS/JS 技術，就可以改造 Blogger 官方聯絡表單工具，做出功能強大、比美「Google 表單」的功能，而且不需動到後端技術。

比內嵌「Google 表單」更好的地方是，客製聯絡表單不會破壞網站風格的整體性，可以讓網站看起來更有質感、更為專業。

那麼如有需要客製官方聯絡表單需求的站長，請再發案給本站即可。

更多 Blogger 官方工具使用技巧：

----
如這篇文章對您有幫助，請順手按個 +1 或分享，謝謝！