如何提交 Google 表單後, 跳轉到指定網址？

July 16, 2016, 9:11 pm

≫ Next: WordPress 如何快速搜尋(修改) 範本或外掛中的字串﹍String Locator

≪ Previous: 更換第四台業者心得﹍雖然「北都」給的優惠很多，但最後我下決定的因素是這個...

$

0

0

前陣子發佈了「使用 Google 表單取代 Blogger 聯絡表單」之後，最近接到一個需求：「希望當訪客填寫完 GoogleForm 後，點 "提交" 的按鈕，可以連結到另一個 Thank You Page 的感謝網誌，我會在感謝網誌裡放入轉換追蹤的CODE，用來統計轉換數」。

要做到這件事，最關鍵的是按下「提交」按鈕後，能否將網址跳轉到指定頁面。

其實為了維持網站的版面風格一致，就算不是為了這個案例的狀況，多數站長也會希望提交表單後，能跳到指定的、特別製作的感謝頁面，那麼以下就來看看怎麼進行。

(圖片出處: pixabay.com)

一、移植 Google 表單

首先按照「使用 Google 表單取代 Blogger 聯絡表單」的流程，從 Google 表單的原始碼中，擷取指示的 HTML 碼，移植到自己網頁的指定位置。

如果熟悉 CSS，可改成符合網頁風格的版面配置。

在進行下一步之前，務必先測試這個移植過的表單能否正常運作，確定自己能否收到填表後 Email 通知。

二、跳轉網址

這部分的原理是參照這個網頁「Google Docs Form redirect after submission」，不過我刪除了比較累贅的部分。

步驟 1：

接著修改移植過的 Google 表單程式碼，第一行應該是長得像這樣：

<form ... target="_self" ...>
請將紅色字串 _self改成 hidden_iframe


步驟 2：

然後在第一行 <form ...>之前，插入以下程式碼：

<iframe name="hidden_iframe" id="hidden_iframe" style="display: none;" onload="this.onload=function(){window.location='填入指定網址'}"></iframe>
請將綠色字串改為你要跳轉的網址即可。

三、自訂感謝頁面

也許你會想要在 Blogger 新增一篇文章當作感謝頁面，不過感謝頁面若是有側邊欄，可能看起來不夠簡潔。

想要專業一點的版面，或許這個頁面能去除側邊欄、或把文章區塊的寬度放到最大，是不錯的選擇。

那麼可以參考這篇「讓 Blogger 有快速載入的展示頁面」，另外也可參考「讓 Blogger 文章頁面以最大寬度呈現(隱藏側邊欄)」，看讀者喜歡哪種方式了。

相關文章：

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

---

WordPress 如何快速搜尋(修改) 範本或外掛中的字串﹍String Locator

July 23, 2016, 9:11 pm

≫ Next: Adsense 相關文章廣告 (相符內容功能) 使用心得

≪ Previous: 如何提交 Google 表單後, 跳轉到指定網址？

$

0

0

由於朋友經營了幾個 WordPress (簡稱 WP) 網站，之前幫忙處理版面配置、修改外掛、寫客製程式等等問題，在 Blogger 範本已經十分熟悉的前提下，面對 WP 範本的修改，一開始說實在很頭大。

例如要在範本或外掛中搜尋一個特定字串來修改，或是要找到網頁上的某個區塊，花費的時間多半是 Blogger 的十倍以上。

還好找到了這個 WP 外掛「String Locator」，可以快速解決以上問題，簡直是修改 WP 範本的救星。不過倒是沒看到什麼介紹的文章，那麼就來做個筆記紀錄一下吧。

一、修改 WP 為何不方便

1. Blogger 範本方便之處

Blogger 後台的範本編輯器，可看到所有的範本內容，那麼執行 "搜尋" 功能自然也方便，Ctrl - F就可找到需要的字串、註解等等。

雖然範本內容越來越多時，看起來會顯得雜亂，但 Blogger 範本編輯器的 "收合功能" 十分強大，可以將不想看到的區域折疊起來。

反正我們不太會去逐行看程式碼，多半只會使用搜尋功能而已，因此雜亂的問題其實影響不大。


2. WP 範本的優點

WP 範本的架構很有邏輯、分工清楚，所有範本內容會被分配到幾十個檔案之中：



上圖右邊密密麻麻的就是範本需要用到的檔案列表，截圖只截到約一半的數量而已。

WP 各種頁面會獨自使用一個檔案(文章、分類、封存、404...)，各種區塊會用到的有這些(header、sidebar、footer...)，以及各種函數、變數、CSS 等。

對於熟悉每個檔案內容的工程師而言，這種方式在管理上是有其優點的。


3. WP 範本的缺點

但這樣的架構在修改範本時，就十分麻煩了，不熟悉這些檔案的人，根本不知道要從哪個檔案下手。

假設很熟悉「Chrome 開發人員工具」的操作，利用工具找出了某個小工具位於什麼區塊，但依然很難知道這個區塊要去哪個檔案搜尋。

比較笨的方法就像我一開始，每個檔都搜尋一次字串，一一嘗試好不容易找到後、趕緊做筆記。

不要以為熟悉網頁架構後，需要的東西就能很快找到放在哪個檔案，例如 Meta 資訊多半放在 header.php 這個檔，其實最後你可能是在 function.php 找到、或是這些 Meta 跟本是由某個安裝的 FB 外掛產生的。

二、安裝 String Locator

• 官網：https://tw.wordpress.org/plugins/string-locator/

進入官網後，按下上圖紅色的 "Download" 按鈕即可下載。

將解壓縮後的目錄 "string-locator"，用 FTP 上傳到 /wp-content/plugins/這個目錄。




進入後台 → 外掛 → 可找到 String Locator → 如上圖，按「啟用」即可。

三、操作及範例

1. 操作說明

安裝完後，將來在後台 → 工具 → String Locator，就可開始搜尋。



如上圖，下拉選單可選擇要搜尋的地方：

• The whole WordPress directory：搜尋全部目錄 → 不建議使用，會耗費大量 CPU，通常會被主機強制中斷。
• Everything under wp-content：搜尋 wp-content 這個目錄 → 不建議使用，會耗費大量 CPU，通常會被主機強制中斷。
• 選擇特定主題：如圖中反白處，通常選擇網站的主題來搜尋，就能找到要修改的地方。
• All plugins：如果布景主題找不到，可選擇搜尋所有外掛、或是直接選擇特定外掛來搜尋。

接著輸入要搜尋的字串，按下「Search」按鈕即可。


2. 範例 1

假設要替換網站中的廣告，尺寸是 300x250，那麼試著搜尋 "300x250" 字串看看。



我們可看到有哪些檔案出現了 "300x250" 字串，而且連行號都標示出來，非常地貼心，直接按檔案就能編輯了。

不過由於搜尋結果太多，代表使用的搜尋字串不夠精確，無法正確找到要改的那一個。

最好是利用 Chrome 開發人員工具，找到區塊的 class、id 名稱、或是註解來搜尋字串，結果會比較精準。


3. 範例 2

假設要修改「分享文章到 Facebook 的 Meta 設定」，想看看 og:image跟縮圖有關的程式碼是什麼，進行 "og:image" 字串的搜尋：



一開始搜尋 "布景主題"，結果沒有搜尋結果，如上圖，改搜尋 "所有外掛" 後，才發現原來相關的程式碼，是位於「open-graph-protocol-framework」這個外掛之中。

四、小結

WP 安裝了 String Locator 這個外掛之後，在茫茫的後台檔案之中尋找字串，瞬間就能看到搜尋結果，在作業上真的非常方便，我認為是常修改 WP 範本的使用者，必定要安裝的外掛。

更多 WordPress 相關文章：

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

Adsense 相關文章廣告 (相符內容功能) 使用心得

July 26, 2016, 3:00 pm

≫ Next: 讓 Blogger 首頁能點擊圖片就進入文章頁面

≪ Previous: WordPress 如何快速搜尋(修改) 範本或外掛中的字串﹍String Locator

$

0

0

去年 Adsense 推出一個「相符內容功能」外掛，效果就跟一般部落格常安裝的相關文章工具類似，目的是用來增加訪客停留在網站的時間，就像常見的「Blogger 相關文章 V2」、「LinkWithin」等。

當時看到並沒什麼興趣，主要是這工具裝了也不能增加收入；若是談美觀的話，另一個工具「Blogger 隨機文章 V2 + 輪播」的效果更好。

不過前陣子在 +esor huang 大大的網站看到，這個「Adsense 相符內容功能」竟然有廣告出現，引起了我的好奇心。於是研究一下這個新功能，以下分享我的使用心得。

一、新增廣告功能

1. 廣告效果

這是從「電腦玩物」文章的截圖，可看到相關文章之中，穿插了幾個廣告：



如上圖紅框，廣告會標示為不同的網域。

點擊電腦玩物的相關文章不會有收益，但點擊廣告就會有收益了！這是何時開始有的好康呢？


2. 官網公告

根據這篇官網公告「Now you can also earn money with Matched content」，今年三月 Adsense 開放廣告出現在「相符內容功能」(Matched content)，這真的非常棒，根據官網說明「相符內容功能簡介」，簡單摘要優點如下：

• 每頁的 Google 內容廣告數量上限不涵蓋相符內容單元 → 意思為就算該網頁已經放滿了三(或四)個廣告，還是可以擺放「相符內容功能」
• 相符內容單元適用於手機、平板電腦和一般電腦 → 意思就是無論是橫躺或直立的長方形區塊，都能自動調整版面來產生相關內容，我們不用花腦筋設定廣告的區塊大小

既然這麼棒，就來試著安裝看看吧！

二、安裝遇到困難

其實要能讓「相符內容功能」出現廣告，需要過的關卡不少：

1. 第一項資格

根據官網說明「確認網站是否符合添加相符內容的資格」：

您的網站必須達到流量及不重複網頁數目的最低需求條件，才有資格加入相符內容。您可以到 AdSense 帳戶的「我的網站」部分，看看網站是否有資格加入相符內容。

如果 Adsense 有多個網站的話，請按照這個網頁的說明，進入「Adsense」→ 按齒輪圖示 → 設定 → 我的網站 → 相符內容 → 查看是否有列出符合的網域

如果流量少、網站文章數不多的話，這裡可能無法列出符合的網址。


2. 第二項資格



過了第一關後，如上圖紅框，建立新的廣告單元時，就會出現新的選項「匹配內容」。

不過根據官網英文公告「Now you can also earn money with Matched content」，在建立新的廣告單元並選擇「匹配內容」時，應該要有一個「允選廣告」(Allow Ads now)的按鈕，但我怎麼找都找不到啊！！

查了 Adsense 國外論壇後才發現，原來「允選廣告」這個按鈕不是每個人都看得到，官網原文是這麼說的：

We'll gradually roll this feature out to all Matched content eligible publishers across the globe over the coming weeks.

原來官方沒有全面開放這個功能，是 "逐步" 針對符合資格的站長開放。那麼 "符合資格的標準" 是什麼呢？


3. 測試結果

由於不知道標準為何，因此先試著安裝吧，看看會不會過一陣子能出現「允選廣告」的按鈕。

直接說結論，安裝之後，每天都進入 Adsense 去新建一個「匹配內容」的廣告單元，看看會不會出現「允選廣告」按鈕，經過一個多禮拜後仍然沒有著落，於是我放棄了使用這個功能。

我的猜測是，如果「免費資源網路社群」流量這麼大，「匹配內容」也沒有出現廣告的話，那麼暫時我還是等官方全面釋出這個功能再來使用好了，先裝回原本的「隨機文章+輪播」外掛至少版面比較美觀。

三、使用心得

雖然目前我沒用這個功能了，不過還是把使用心得紀錄一下，如果有通過資格的站長，就能參考一下。

1. 安裝步驟

這個功能要無腦安裝還是有些難度的，可能要對程式碼熟悉一點才能成功。首先參考官網說明「建立相符內容單元」的步驟，建立廣告單元。

接著如果要將程式碼放在文章後面的位置，以 Blogger 為例，可參考「Blogger 範本﹍(3) 文章及留言區塊的程式碼」→「三、文章區塊」→ 找找你想放的地方。

或是也可在後台新增「HTML / Javascript」小工具，將程式碼放進去後，將小工具拉到「網誌文章」的下方。(這樣會出現在留言區塊的下方)


2. 改 CSS 樣式

如果按照官方預設效果的話，多半跟網站樣式會不搭，那麼可參考「Adsense 廣告尺寸及版面配置優化技巧整理」→「一、廣告擺設通則」→「3. 其他設定細節」，來修改廣告的連結、邊框、背景等顏色。


3. 版面效果

這個「相符內容廣告」只要選擇使用 "自適應尺寸"，就可以有很好的效果，不必另外為如何設定尺寸而傷腦筋。

除了適合放在文章下方，採橫躺長方形的方式：

也可以放在側邊欄，直立長方形的效果也不錯：

以上不同的效果只要用相同的安裝碼就能展示出來，因此同樣也適用於行動裝置，算是非常方便的設計了。

更多 Adsense 相關技巧：

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

讓 Blogger 首頁能點擊圖片就進入文章頁面

August 2, 2016, 9:11 pm

≫ Next: 可商業用途及修改的高畫質免費 CC0 圖庫整理

≪ Previous: Adsense 相關文章廣告 (相符內容功能) 使用心得

$

0

0

最近接到一個需求：「能不能點擊首頁文章的大圖，就直接跳到文章網址？否則要點 "繼續閱讀" 才能進入」。仔細想想的確很有道理，這才是友善的操作介面設計，以前怎麼都沒想過！

於是現在 WFU BLOG 首頁文章封面圖，改為以最大尺寸呈現，並且加上文章頁面的連結。以下就來看看要怎麼做到這樣的效果。

<< 請注意！本篇文章含會員加值文章內容，需點數兌換 >>

(圖片出處: pexels.com)

一、增加點擊率

跟 "繼續閱讀" 相比，封面圖的面積不但大多了，附上文章的超連結後，訪客的滑鼠也不必移動太遠就能按到，可說是非常友善且直覺的設計。




而且，大大的封面圖對於吸引點擊，有十足的加分效果。就像 Facebook 分享文章時，如果能產生大縮圖，那麼吸引點擊的效果，根據實測統計，將遠勝只顯示文章標題(沒有縮圖)的效果。

控制 FB 分享文章產生縮圖的技巧，可參考：

• 分享文章到 Facebook 的 Meta 設定﹍縮圖+標題+摘要+作者資訊
• 選擇喜歡的圖片當作 Blogger 文章封面圖

許多 Blogger 非官方範本也是利用這樣的原理，在首頁以卡片式的版面呈現，每篇文章只顯示大縮圖及文章標題，且點擊圖片就能直接進入文章頁面，類似 Blogger 動態檢視範本的某些版面。




上圖為「雅痞書店」的效果，採取類似的設計方式，而且點擊標題、縮圖、繼續閱讀這三處都能跳到文章頁面，可減少讀者操作上的時間。

二、修改範本的方法

有兩種方式可以達成本篇的任務，第一種比較麻煩，範本內容要大改，如果對程式碼、或 Blogger 範本、或 HTML/CSS 不熟悉的話，很有可能發生災難，請小心操作以下的內容。

在修改範本之前，如果第一次安裝本站工具的讀者，建議先閱讀「備份範本的訣竅」系列文章。

1.使用判斷式

製作的原理是使用 Blogger 判斷式語法，請先瞭解「Blogger 頁面判斷式的各種應用」，接著運用「Blogger 頁面判斷語法__五個實用範例說明」→「三、在首頁顯示自訂尺寸縮圖及文章摘要」，就可完成約 80% 的工作了。

摘要一下我們要做的事：

• 將原本顯示文章內容的區塊，利用判斷式，在首頁時重新安排版面。
• 例如將版面設定為，依序顯示文章標題、文章中的第一張圖、摘要。
• 最後利用 CSS 美化版面。

2.實際範例

請先依照「Blogger 頁面判斷語法__五個實用範例說明」→「三、在首頁顯示自訂尺寸縮圖及文章摘要」，做完第 2 點之前的動作。

接著將第 2 點的程式碼，改為以下內容：

<b:if cond='data:blog.url == data:blog.homepageUrl'> <!--首頁時使用縮圖及文摘-->
<b:if cond='data:post.firstImageUrl'> <!--檢查文章是否使用圖片-->
<div class='home-thumbnail'> <!--可用 home-thumbnail 這個 class 設定封面圖 CSS 樣式-->
<a expr:href='data:post.canonicalUrl' target='_blank'><img expr:src='data:post.firstImageUrl' /></a> <!--使用文章第一張圖當作封面圖 點擊後連往文章網址-->
</div>
</b:if>
<div class='home-snippet'> <!--可用 home-snippet 這個 class 設定文摘 CSS 樣式-->
<data:post.snippet/> <!--文摘-->
</div>
<b:else/> <!--非首頁時，使用 Blogger預設版面-->
<data:post.body/> <!--文章內容-->
</b:if>
<!--<data:post.body/>--> <!--此行為註解、保留原本的程式碼-->
基本上所有的說明及修改方法，都標示在綠字的註釋，就不另外解釋了。

如果熟悉 Blogger 判斷式、HTML、CSS，可以根據自己的需求，來修改首頁的版面配置。

三、簡易的 JS 程式碼

1. 提醒

第二種修改方法比較簡單，算是懶人包，加入一段 JS 碼即可自動幫封面圖加上連結。

不過採用這個方法之前需要先提醒一下：

• 若採第一種方法，版面比較整齊畫一
• 若採第二種方法，繼續閱讀之前沒有放圖片的話，首頁就不會出現圖片
• 會採第二種方法的站長，通常每篇文章的編排有固定格式，例如文章開頭就是封面圖，接著才是文字
  

2. 準備動作

確定採第二種方法的話，一樣請先備份範本。

接著到後台「範本」→「編輯 HTML」，游標點進範本區塊，按 Ctrl-F 搜尋 </head>這個字串，找到後在此字串的前一行，插入以下程式碼：

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>

可參考「引用 jQuery 的注意事項」，檢查範本是否已安裝過 jQuery，如果已經安裝過請刪除此行，以免重複安裝。


3. 安裝程式碼

然後在範本中，繼續搜尋 </body>這個字串，找到後在此字串的前一行，插入以下程式碼：

存檔後即可看到效果。

想先看效果的話，也可前往 WFU BLOG 的首頁、或標籤頁面，按下封面圖即可前往文章頁面。

四、聯絡表單

如果是兌換加值文章內容的讀者，使用上有任何問題請用下面的表單與我聯繫：

更多 Blogger 使用技巧：

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

可商業用途及修改的高畫質免費 CC0 圖庫整理

August 6, 2016, 2:33 am

≫ Next: Blogger 使用 Pagespeed Insights 網站速度效能檢測心得

≪ Previous: 讓 Blogger 首頁能點擊圖片就進入文章頁面

$

0

0

經營部落格或網站，為了尋找、使用合適的圖片，得花上不少時間與心思，畢竟圖片是吸引注意力及增加訪客停留時間的重要因素。過去一向使用 Google 來搜尋圖片，因為這是樣本資料庫最大，且最省時省力的方式。但其實這麼做有風險，因為我們沒有足夠的時間來找出每張圖片、每個網站的使用條款，並仔細研讀。

雖然 WFU 一向把 Credit 歸於原作者(標示出處)，然而萬一某張圖片的條款註明了「不可修改」，那麼 "標示出處" 的作法顯然還是不夠；而若是沒有習慣標示出處的話，很有可能利用 Google 搜尋找到了可修改、再利用的圖片，但沒發現圖片的使用條款註明必須 "標示出處"，將來是有可能成為隱憂的。

最萬無一失的作法，是全面採用 CC0 (放棄著作權)、Public Domain(公眾領域) 的免費圖庫，且最好是高畫質(能吸引目光)，除了商業用途之外，還能對圖片進行編修。本篇整理了許多高畫質、收藏量豐富的 CC0 免費圖庫，可解決網站使用圖片上的問題，並會持續更新。

CC0 免費圖庫搜尋引擎

一、為何需要整理 CC0 圖庫

1. Google 圖片搜尋

雖然近期 Google 搜尋圖片時提供了「標示為允許再利用且可修改」的選項，如下圖紅框：



籃框標示的圖片來自 wikipedia，看起來應該安全？不過我們點入之後會發現如下：



下方紅線標示的小字為「圖片可能受版權保護」，表示我們還需要點進網站，尋找網站、或圖片作者的版權宣告條款，以確認這張圖片能使用到何種地步、或是否需要標示出處。

這代表什麼呢？就算我們選擇了看似最安全的「標示為允許再利用且可修改」，依然無法安心使用圖片、無法縮短處理圖片的時程。所以結論為，建立 CC0 圖庫的口袋名單，才是站長們處理圖片最快速的方法。


2. CC0 及 Public Domain

CC0 與 Public Domain 的定義有些微差異，詳情可參考「公眾領域貢獻宣告」與「公眾領域標章」。不過基本上只要我們使用了 CC0 或 Public Domain 的圖片後，就可以安心的對圖片做這些處置：

• 商業使用
• 任意修改
• 不必標示出處

雖然標示出處在條款上並非必須要件，不過相信把功勞歸於該當之人，長遠來看，對他人或自己都是受益者，足以產生正向的良性循環。這在專業領域算是倫理道德規範，只是不具強制力，需要自我要求就是了。

需要注意的地方為，CC0 雖然原作者放棄了著作相關權利，但不代表可以將著作權佔為己有，不可將圖片下載、或經過編修後，逕自宣稱「我才是圖片的原創者」，或「版權所有請勿盜用」之類的。得了便宜還賣乖，相信這不需太過著墨，普羅大眾也知道是天理不容之事。


3. 圖庫的使用方式

有了圖庫的口袋名單之後，將來要搜尋圖庫時，就不必一個個進入該網站。比較簡單的方法，是利用 Google 搜尋或「自訂搜尋」，就能搜尋出該網站的圖片，將來 WFU BLOG 也會提供更簡便的搜尋工具。

2015.4.7 補充：請使用「CC0 免費圖庫搜尋引擎」，可一次搜尋本文的所有圖庫。


不過前提是，這個圖庫網站必須願意讓 Google 進行索引。有的圖庫網站必須註冊才能搜尋、或是禁止機器人爬取，那麼這類的網站就無法成為便利的口袋名單了。

以下 WFU 針對各個免費圖庫進行篩選，列出來的網站都是檢視過條款或聲明，至少符合 CC0 的使用方式，並且多數圖片能被 Google 索引。

二、收藏量大的 CC0 高解析圖庫

用 Google 搜尋關鍵字 "CC0" 就能找到很多圖庫網站資料，以下的名單依照圖片被 Google 收錄的數量來排序，同時這些都是水準很高的圖庫：

1. Pixabay

收藏量最大的 CC0 圖庫，被 Google 索引的數量也最多，達 100 萬張以上。網站介紹可參考「Pixabay 免費相片、向量圖與藝術插圖素材圖庫」




2. Pexels

雖排名第二，但索引數量剩 1/100，約 1 萬。網站介紹可參考「Pexels 免費高品質圖片」




3. Unsplash

索引數量為 4,480，網站介紹可參考「Unsplash 高解析度免費圖庫素材」。




4. Picjumbo

索引數量為 3,310，網站介紹可參考「Picjumbo 高畫質照片素材」。




5. Finda Photo

索引數量為 3,010。這個網站滿特殊的，可以依照顏色、標籤來搜尋免費使用的照片。但這個網站算是搜尋引擎，並非自己提供圖片，而是收錄其他 CC0 網站的圖片。




6. Splitshire

索引數量為 1,840，圖片主要為自然景觀、戶外場景。




7. Pickupimage

索引數量為 1,740，這個網站的特別之處在於可選中文語系，且設定為中文後，便能以中文來搜尋。不過他並非真的對圖片內容以中文來索引，而是將英文索引內容翻成中文，看似可以用中文搜尋而已。




8. Stokpic

索引數量為 1630，網站介紹可參考「Stokpic 可用於商業用途」




9. Stocksnap

索引數量為 1,460，網站介紹可參考「StockSnap.io 免費圖片素材圖庫」

三、候補 CC0 圖庫

以下列表暫不專門介紹，主要列出 Google 索引數量，將來視情況調整權重。

• Littlevisuals：1,260
• Lifeofpix：1,240
• Publicdomainarchive：1,220
• Morguefile：1,220
• Jaymantri.com：769
• Foodiesfeed：751 → 都是食物...
• Streetwill：405
• Zerospace：301 → 台灣網站，自行收錄國外 CC0 圖片
• Gratisography：254
• Realisticshots：210 (2015.4.6 新增)
• Snapwiresnaps：375 (2015.6.6 新增)
• Snapographic：285 (2015.6.6 新增)
• Startupstockphotos：203 (2015.6.6 新增)
• 視介-免費圖庫網→ 台灣網站 (2015.6.6 新增)
• Librestock (2016.3.9 新增)
• 攝圖網 (2016.3.9 新增)
• Barn Images (2016.3.9 新增)
• Travel Coffee Book (2016.3.9 新增)
• Skuawk (2016.3.9 新增)
• Goodfreephotos (2016.3.9 新增)

四、補充

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

更多免費圖庫相關文章：

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

Blogger 使用 Pagespeed Insights 網站速度效能檢測心得

August 8, 2016, 9:11 pm

≫ Next: Blogger 熱門文章 V2﹍卡片式縮圖 + 自適應尺寸 (RWD)

≪ Previous: 可商業用途及修改的高畫質免費 CC0 圖庫整理

$

0

0

經營部落格的站長們，一開始在意的是門面(版面)是否美觀；過一陣子之後，注意力可能會轉移到網站的效能、載入速度能否更快，其中最常使用的檢測工具就是 Google 的「PageSpeed Insights」。

這個 Blogger 中文論壇貼文詢問「Pagespeed Insight 分數很低怎麼辦 ?」，其實這類問題的詢問度很高，那麼就藉這個機會一併整理回答。

(圖片出處: pixabay.com)

一、Blogger 空白網站測試結果

先來看看一個空白的 Blogger 網站，Pagespeed 會拿到幾分。

這是「WFU BLOG 的備份網站」，用途在於「自動備份主站文章」，網站自從建立後，沒動過任何地方，因此版面十分醜陋。

測試結果如下：



上圖可看到，在範本最乾淨的狀態下，電腦版測試結果也只有 87 分，不能再高了...




展開需要改善的項目，參照上圖 A~D：

A：並非所有 JS 都適合改成非同步執行，對程式碼不熟的話，這一項最好別亂動。你也可以將 JS 的位置往後移，來修正這個項目。但究竟可以移到哪裡、才不會影響網站相關程式的執行，這需要專業知識，沒把握請不要自己來。

B：這些 CSS 都是 Blogger 會自動載入的檔案，我們動不了

C：Blogger 平台對於這一點，也是動不了

D：唯一可以自行處理的是壓縮 HTML，可參考「將範本中的 HTML/Javascript/CSS 最佳化處理」、「活用 HTML/Javascript/CSS 格式化及壓縮工具」→「三、HTML 推薦的壓縮工具」。

不過壓縮 HTML 帶來的後果，是範本內容難以閱讀，且網站能提升的效果，其實是不足以感覺得出來的。

二、WFU BLOG 測試結果

接著獻醜了，下面是 WFU BLOG 的測試結果。由於本站的性質之故，必須展示多種 Blogger 工具、外掛，很多 JS 實在無法精簡，因此分數比較慘烈：



1. 最佳化圖片

這一項應該扣了很多分，有太多圖片沒有縮小尺寸、或增加壓縮率。(這一點之後在「7. 實驗結果」會有進一步的測試)

我抱持的理由，請參考「網頁圖片該怎麼處理, 顯示效果會比較清楚？」，由於使用者的螢幕越來越大，在網頁效能與顯示清晰的圖片兩者之間，我選擇了後者(當然圖片也有經過一定的壓縮)。

另一方面，熱門大站比較需要對伺服器的流量、頻寬斤斤計較(會影響支出成本)，所以最好每張圖片都最佳化；而 Blogger 平台沒有流量限制，不會有什麼太大的影響。

為了不影響訪客讀取網頁的順暢度，我採用的對策是安裝「圖片延遲載入﹍Lazy Load 安裝懶人包」，那麼 Pagespeed 這個項目就可以略過了。


2. 清除前幾行禁止轉譯的 JS/CSS

同之前「空白網站測試結果」，這一項有一些 CSS 外連檔案是我們動不到的，而 JS 的部分如自己不能處理，只能選擇忽略。


3. 使用瀏覽器快取功能

同之前「空白網站測試結果」，Blogger 平台對於這一點無能為力。


4. 啟用壓縮功能

Blogger 平台對於這一點也是無能為力。


5. 壓縮 JavaScript

如果是自己的外連 JS，當然可以壓縮；但如果是外部的 JS 連結，我們依然無能為力。

需要壓縮 JS 的話，可參考「活用 HTML/Javascript/CSS 格式化及壓縮工具」，文章有推荐的工具。


6. 減少伺服器回應時間

這個...實在不是我管得著的事...



7. 實驗結果

第 1 項「最佳化圖片」的建議修正作法，看了 Google 列出的圖片連結，發現幾乎都是首頁的輪播圖片。因此我做了一個實驗，暫時將首頁輪播功能關閉，而重新測試的結果如下：



真是讓我大吃一驚，分數簡直突破天際，比空白測試網站還多了 1 分！

相信這個結果讀者心理應該都有底了，一些 Blogger 平台無法處理的修正項目，其實遠比不上進行這個項目就好。那麼接著來歸納一下，「網頁效能優化」真正有效的作法與結論。

三、提升網站速度最重要的因素

1. Pagespeed 的參考性

• Pagespeed Insight 提供的改善建議，具有一定的參考性，可以讓我們多瞭解一些知識。
• 不過對 Blogger 平台而言，很多項目是我們動不了的。
• 有些項目就算我們花了時間去改善，其實對效能的增加不一定感覺得出來。
• 我的結論為，不用花太多時間在設法增加 Pagespeed 的分數。
• 相對而言比較重要的是，瞭解下面第 2 點的概念就好。

2. 最重要的兩個因素

其實過去我寫了一系列關於提升網站效能的文章，可參考「網站效能」這個標籤。其中最重要的是「優化網站效能該注意哪些事? (1)最關鍵的考量因素」，裡面提到影響網頁載入速度的是：

• 首要因素為「圖片」
• 次要因素為「Javascript 外掛」
• 任何其他因素的影響，只要 CPU、瀏覽器夠力，人體不一定感覺得出來。

3. 圖片

從本篇的實驗結果，相信讀者都看得出來，圖片影響 Pagespeed 測試分數的結果是多麼巨大，跟我相關系列文章的論點是吻合的。

只要網頁少用圖片、少用大圖、適當壓縮，載入速度就可以明顯地感受出來。

網站各處的小圖示，建議使用「Font Awesome 圖示字型」，就可減少大量的 HTTP 連線請求時間。

有的站長在 Blogger 首頁沒有設定繼續閱讀、或是設定顯示了幾十篇文章，導致首頁顯示了一大堆圖片的話，那麼載入速度自然就慢了。


4. JS 外掛

網站非必要的外掛盡量不要裝。

廣告能少放就少放，廣告需要 JS 才能執行。有的站長外掛裝的不多，但光是放一大堆廣告，載入速度就有得受了。

更多的是站長使用了非官方範本，而範本中內建了一大堆外掛，程式可能還寫得很粗糙，就算站長熟悉程式碼也不一定知道如何刪減。那麼使用了非官方範本的站長，就要有心理準備，提升網站效能是不容易的事。

四、小結

看了本站的測試報告，也許 Blogger 站長們可以對 Pagespeed 的分數報告放寬心了，大部分的項目我們改善不了，有些能做的，也不一定可以提升效能。

真正需要做的，圖片的部分，站長們可以參考本篇的建議來自行處理。

而 JS 的部分，能夠自行判斷如何取捨的話就沒問題。如果不清楚如何處理 JS、且有預算的話，可以再跟本站進行諮詢。

相關文章：

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

Blogger 熱門文章 V2﹍卡片式縮圖 + 自適應尺寸 (RWD)

August 15, 2016, 9:07 pm

≫ Next: Facebook 粉絲團的訊息無法收到 Email 通知？可安裝各種平台的 Messenger 即時通

≪ Previous: Blogger 使用 Pagespeed Insights 網站速度效能檢測心得

$

0

0

幾年前寫的「Blogger 熱門文章＋任意尺寸縮圖」，由於修改方式比較複雜，不熟悉程式碼的讀者，有可能不小心會把範本改壞。

本篇 V2 版，除了可算是懶人包，安裝十分簡單，版面也比較有設計感。以下先介紹改版特點，想直接安裝可跳至「二、準備動作」。

點此看範例網頁

(圖片出處: magicmockups.com)

一、改版特點

• 可自訂縮圖比例
• 縮圖寬度會自動符合區塊寬度，有 RWD 效果
• 版面設計為卡片風格
• 無縮圖的文章可使用預設縮圖
• 可使用排行編號效果

這次的改版嘗試使用不同的版面效果，不顯示文章摘要，只顯示縮圖及標題。

如果習慣使用傳統的版面方式，可參考「舊版的樣式」，自行修改 CSS。

二、準備動作

在修改範本之前，如果第一次安裝本站工具的讀者，建議先閱讀「備份範本的訣竅」系列文章。

安裝程式碼之前，請務必先進行以下動作：

1. 取消文章摘要

編輯自己的「熱門文章」小工具：

• 勾選「圖片縮圖」
• 不要勾選「片段」(取消文章摘要)

2. 找出小工具 ID

後台「範本」→「編輯 HTML」，游標點進範本區塊，按 Ctrl-F 搜尋你的熱門文章工具標題(例如 "熱門文章")



如上圖紅框，記下你的小工具 ID，通常會是 "PopularPosts1"，之後會用到。


3. 安裝 jQuery + CSS

在範本中繼續搜尋 </head>這個字串，找到後在此字串的前一行，插入以下程式碼：


<script src='//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js'></script>
<!--熱門文章 V2-->
<style>
#PopularPosts1 {
display: none;
}

.PopularPosts .item-thumbnail-only {
position: relative;
}

.PopularPosts ul {
list-style: none;
padding: 0;
}

.PopularPosts li {
list-style: none;
padding: 10px 0;
}

.PopularPosts .item-thumbnail {
width: 100%;
margin: 0;
float: none;
}

.PopularPosts img {
padding: 0;
width: 100%;
transition: all .7s;
-webkit-transition: all .7s;
-moz-transition: all .7s;
}

.PopularPosts .item-title {
position: absolute;
bottom: 10px;
left: 10px;
right: 10px;
padding: 5px;
z-index: 5;
background-color: #24373F;
opacity: .9;
color: #fff;
text-align: left;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}

.item-title a {
color: #fff;
text-decoration: none;
}

.PopularPosts .item-index {
position: absolute;
top: 10px;
left: 10px;
width: 20px;
line-height: 20px;
text-align: center;
padding: 3px;
z-index: 5;
color: #fff;
background-color: #24373F;
font-size: 16px;
font-weight: 700;
transition: all .7s;
-webkit-transition: all .7s;
-moz-transition: all .7s;
}

.PopularPosts li:hover img {
opacity: .7;
}
</style>

第一行綠色字串可參考「引用 jQuery 的注意事項」，檢查範本是否已安裝過 jQuery，如果已經安裝過請刪除此行，以免重複安裝。

紅色字串的格式為 "#" (井字符號) + 熱門文章小工具的 ID 字串，請檢查 ID 是否為自己之前記下來的字串。

其餘 CSS 參數，如果熟悉 CSS 的話可自行更改樣式。

三、安裝程式碼

接著請搜尋 </body>這個字串，找到後在此字串的前一行，插入以下程式碼：



以下參數修改請參照以上程式碼行號：

D：紅色字串改為自己的熱門文章小工具 ID

E：設定縮圖的長寬比例

F：若文章沒有縮圖時，會出現自訂縮圖，請將藍色字串改為自己的縮圖網址。

G：預設左上角會出現排名序號，若不需要序號請將參數改為 "N"

存檔後即可看到效果，也可先看以下網頁的展示效果：

點此看範例網頁

四、相關熱門文章工具

1. 熱門文章輪播

在網站上方隨機輪播熱門文章有很好的效果，可參考這篇「標頭 Banner 隨機輪播熱門文章」。


2. 配合 Owl Carousel 外掛

如果將「最熱門 jQuery 圖片輪播外掛 Owl Carousel」放在標頭，不但能做出輪播效果，還有左右拖曳、導覽的特效，更能吸引訪客目光。


3. 更多熱門文章

官方的熱門文章工具，最多只能顯示 10 篇文章，若想顯示更多的話，可參考這個「Blogger 百大熱門文章排行」。

五、常見 FAQ

日後若有常見問題，會持續補充在此。

Q1: 為何文章無法正常顯示縮圖？

Ans: Blogger 的縮圖功能，需要使用 PICASA 圖床才能自動產生，因此使用其他圖床的話，這個小工具很可能無法正常顯示縮圖。建議參考「選擇喜歡的圖片當作 Blogger 文章縮圖」，在 Blogger 後台上傳圖片，放在文章最前面的位置，就一定能顯示縮圖了。


更多實用工具：

• 本站使用的 Blogger hack 及工具整理

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

Facebook 粉絲團的訊息無法收到 Email 通知？可安裝各種平台的 Messenger 即時通

August 19, 2016, 9:07 am

≫ Next: 替換 Blogger 所有預設留言頭像圖示 (CSS 技巧)

≪ Previous: Blogger 熱門文章 V2﹍卡片式縮圖 + 自適應尺寸 (RWD)

$

0

0

其實 Facebook 聊天室的訊息，在以前是可以設定為「以電子郵件通知」。但 WFU 不知從何時開始，就沒收到過 Email 通知了。

原以為是我曾經取消訂閱郵件通知，不過試了很久都找不到答案，最後在這個國外討論串「How do I turn on email notifications for messages?」才知道，是 FB 官方拿掉了這個功能！

少了這個功能還挺麻煩的，因為不少委託案件是從粉絲團的「發訊息」功能留言(也等於是聊天室、收件匣)，在少了 Email 即時通知的情況下，往往要進入 FB 網站時才會發現有留言。我想有經營 FB 粉絲團的話，應該會有解決這件事的需求。

一、FB 即時通

大致觀察了一下，FB 訊息停止收到郵件通知，大約是一年前；從前面的國外討論串留言內容，感覺上也是差不多的時間點。

推測是近來 FB 為了搶即時通市場，想盡辦法用各種方式，誘使使用者在各種平台、行動裝置安裝 FB 即時通的 APP 或外掛。

那麼拔掉「以電子郵件通知即時通訊息」這個功能，就是合理的解釋了，讓我們無法即時接收訊息後，只有安裝官方的 APP 或外掛才行，這就達到 FB 要擴大即時通市佔率的目的了。雖然對這個結果不舒服，不過免費的服務還能怎麼樣呢？

二、FB 即時通各種版本

以下整理各種平台、裝置，安裝 FB 即時通的版本：

• Chrome 外掛
• Windows 桌面板
• MacOS 桌面板
• Linux 桌面板
• Andoird App
• iOS App

為了這件事而必須多裝一個 APP 或外掛、多吃一份系統資源(記憶體)，真的非常值得商榷，建議評估自己的需求後，找出最少的安裝方案。

一般而言，行動裝置 App 能少裝就少裝，但如果是商家的話，為了不漏接做生意的訊息，還是得安裝。

因為我主要的作業地點是 PC，而開了機一定會使用 Chrome，所以選擇安裝 Chrome 外掛就好，以下簡單介紹 FB 即時通的 Chrome 版本。

三、Chrome 外掛

安裝完這個外掛後，Chrome 右上角會出現上圖紅框的圖示，只要有人在我們的 FB 粉絲團留下訊息，這裡會立刻顯示數量，讓我們知道有新的訊息。




進入設定畫面 →「General Settings」，這裡的兩個選項都可以取消勾選。

比較重要的是紅框這一個，建議要取消，否則的話──




每次開啟 Chrome，就會出現上圖這個 FB 即時通視窗：




接著是「Notifications」這個設定，可根據個人需求，勾選你想收到的通知。如果只需要收到「即時通」的訊息，那麼只要勾選第 1 項 "Chat Notifications" 就好。

其餘的設定，「Premium Features」是付費功能，其中有一項是「桌面通知」，也就是關閉 Chrome 後仍能收到通知。其實沒多少錢，有需要的讀者可以購買。

不過，真的想收到「桌面通知」也不一定要付費，可以直接下載前面提到的「桌面版」軟體，那麼也不需要安裝 Chrome 外掛了。唯一的疑慮是，「桌面版」FB 即時通並不是官方的產品，需要考慮一下！

更多 Facebook 相關文章：

更多 Chrome 相關外掛：

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

---

替換 Blogger 所有預設留言頭像圖示 (CSS 技巧)

August 22, 2016, 9:07 am

≫ Next: Blogger 長期免費諮詢﹍優惠方案申請

≪ Previous: Facebook 粉絲團的訊息無法收到 Email 通知？可安裝各種平台的 Messenger 即時通

$

0

0

最近忽然發現，Blogger 預設的留言頭像有了變化，原本匿名留言的頭像，是無臉孔的圖案，但現在則變成完全空白。

除了這點可能會造成版面不佳，另外其他的預設圖示 (例如 Blogger 帳號的圖案) 尺寸只有 16x16 (px)，各種大小不一及完全空白的圖示，對於訪客的視覺感受也很差，會讓 Blogger 網站看起來不夠專業。

於是花了點時間解決這些現象，而且只用到 CSS 技巧，不必寫 JS 就能處理，不會影響網頁效能，值得讀者按本篇教學來修改。

點此看範例網頁

(圖片出處: magicmockups.com)

一、解決方法

1. 造成的影響



先來看看以前的「匿名」頭像，長得像上圖一般。




接著來看看現在留言區塊的效果：

• 最上面是 WFU 的頭像，Blogger 對有設定頭像的圖示，預設以 35x35 (px) 的大小顯示；請注意頭像的 CSS 設定了外框 (border) 效果，為了顯眼特別改成黑色外框。
• 紅框標示 A 處為「匿名」圖像，現在變成了空白圖片；無帳號留言的頭像，也是一樣的效果。請注意當頭像設定了外框的 CSS 後，那麼無論 IMG 標籤是否有圖案，都還是會有外框，導致會看到圖中難看的一小撮正方形外框。
• 紅框標示 B 處為 Blogger 帳號、沒設定頭像的圖示，以 16x16 (px) 大小的預設圖案顯示。如果是以 Open ID 身份留言，也是會出現這個尺寸的圖案。

所以在同一個畫面，三種留言身份，會出現三種尺寸的圖案，這樣的視覺效果，是不是很糟糕啊？


2. CSS3 語法

要動態修改網頁上的 IMG 標籤內容，也就是替換頭像圖示這件事，過去只能寫 JS 才能辦到。有看到「優化網站效能該注意哪些事? (1)最關鍵的考量因素」的讀者就會知道，網站的 JS 能少用就盡量少用。

CSS3 語法其實有替換圖片內容的技巧，但缺點是低版本的 IE 不支援。好不容易過了這麼些年，IE11 以下的瀏覽器已經被淘汰地差不多了，現在基本上 WFU 都是無視 IE11 以下的訪客，反正比例已經不高，寫程式時可以安心地採用新時代的語法。

那麼以下就來看看，如何以 CSS 技巧，取代 JS 來置換 Blogger 的預設頭像，改成各種美觀的圖案吧！

二、CSS 語法修改

在開始之前，我們要準備 3 種圖示，來替換官方頭像。或者，你也可以直接使用 WFU 提供的圖片網址。請依以下步驟：

• 後台範本 → 自訂 → 進階 → 新增 CSS

新增以下 CSS 內容：

/*修改留言頭像*/
.comments .avatar-image-container {
overflow: visible
}
.avatar-image-container img {
width: 35px;
height: 35px;
border-radius: 3px;
box-shadow: 0 1px 7px #666;
border: 1px solid #fff;
background: #fff;
}
.avatar-image-container img[src*='img/blank.gif'] {
content: url('//2.bp.blogspot.com/-nEPh_CvgECk/VhiRpiuYUHI/AAAAAAAAMqM/HdjiVlRXC6U/s35/wfublog-comment.jpg'); /*自訂匿名頭像*/
}
.avatar-image-container img[src*='img/b16-rounded.gif'] {
content: url('//4.bp.blogspot.com/-81dIbOmU9O4/UB_ufwAvb0I/AAAAAAAADj8/1Y4HFMVzx4Q/s35/blogger.png'); /*自訂 Blogger 帳號頭像*/
}
.avatar-image-container img[src*='img/openid16-rounded.gif'] {
content: url('//1.bp.blogspot.com/-sI74_lyKtUE/UB__t_YIVMI/AAAAAAAADms/X_25WXcYZhk/s35/openid.png'); /*自訂 Open ID 頭像*/
}
藍色的圖片網址，可改為自訂的圖案，請參照綠色註釋的文字來修改。

以上的修改，會強制將每個頭像圖案，顯示為 35x35 (px) 的大小，讓版面整齊一致。

另外，這些 CSS 邊框、圓角、陰影效果，就是目前 WFU BLOG 使用的參數，如果熟悉 CSS 可自行修改。

修改完後，按右上角的「套用至網誌」即可。

想先看頭像效果的話，可前往範例網頁：

點此看範例網頁

更多 Blogger 留言相關文章：

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

Blogger 長期免費諮詢﹍優惠方案申請

August 23, 2016, 9:07 am

≫ Next: [WP外掛] 讓網頁根據訪客語言設定, 自動轉換簡繁文字

≪ Previous: 替換 Blogger 所有預設留言頭像圖示 (CSS 技巧)

$

0

0

Blogger 使用者無論在是架站或使用上，由於「Blogger 沒有客服」，很多問題都不得不自行摸索。

現在 WFU BLOG 將提供 Blogger 使用者，獲得長期免費諮詢的機會，沒有時間限制，意思就是說，WFU 將成為你 Blogger 網站的長期顧問，解決各種疑難雜症。

不過這樣的好康是有條件限制的，請參閱本篇的說明。

(圖片出處: picjumbo.com)

一、原始 Blogger 諮詢模式

1. 官方範本問題

WFU 經常會收到讀者的私訊提問，如果是官方範本相關的問題，由於泛用性高，我會撥時間回覆。

而基於網路資訊共享的精神，公開資訊可讓所有人受益，以及讓我花費的時間效益最大化，這些私訊提問基本上我會丟到「Blogger 中文論壇」。


2. 收費方案

如果詢問的主題是 CSS、非官方範本、行動版問題，由於沒有泛用性，幾乎都是 case by case 的狀況，相較之下我的時間只會化為一位提問者的效益，那麼 WFU 會要求使用者付費。

目前的收費方案細節，可參考「BLOGGER 網頁版 / 行動版 客製化作業流程」→「三、Blogger 諮詢費用」。

二、免費諮詢方案

要獲得免費諮詢的權利，請閱讀以下內容：

1. 申請條件

• 曾經委託本站案件，有過合作關係，金額不限。
• 沒有合作過的話，可參考本站「服務項目」，擇一發案給本站。
• 意思就是說，先成為本站的客戶，就有機會獲得網站長期顧問。

2. 網站複審

• 提出申請後，會觀察一下申請網站的現況，主要目的為排除看起來沒有在營運、感覺停滯了的網站。
• 其餘審查程序，在提出申請時會告知。

3. 名額限制

• 由於個人的時間有限，能服務多少個網站，目前我也無法估算。
• 因此當申請網站的數量，達到時間運用的飽和時，為了維持品質，會終止新的申請。
• 當雙方有不可抗拒的因素發生時，可互相申請終止此項長期諮詢方案。

三、聯絡表單

有意申請本項服務的讀者，請填入相關資料，提交以下表單即可：

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

[WP外掛] 讓網頁根據訪客語言設定, 自動轉換簡繁文字

August 30, 2016, 9:07 am

≫ Next: 免安裝外掛, 直接破解網頁「鎖右鍵+防複製」的方法 (使用書籤)

≪ Previous: Blogger 長期免費諮詢﹍優惠方案申請

$

0

0

之前寫過「讓網頁根據訪客語言設定, 自動轉換簡繁文字 (切換按鈕升級版)」這個版本，因為有朋友的 WordPress 網站需要這個功能，所以改寫了本篇的版本。

雖然 WordPress 也可以直接安裝原版本，但有種種原因值得改為優化後的 WP 版本，以下會簡單介紹，而想直接安裝的話，可跳至「二、上傳 JS 檔」。

一、WP 改版特色

1. JS 外連

原本的 JS 檔外連放在 Google Drive，但因為「Google Drive 檔案外連功能將於 2016 年 8 月關閉」，且 WP 網站有自己的主機空間，因此放在自己家即可。


2. 判斷語系

原來的版本需要藉助第三方服務，才能獲得比較精確的語系判斷。而 WP 本身有主機運算，可以直接正確地判斷出訪客的語系。


3. 視情況才載入字庫

原版本的執行一律會載入字庫檔，但由於字庫檔非常龐大，且 WP 的流量會影響到費用的開銷，因此 WP 版本改寫了程式碼，只有偵測到需要轉換語系時，才動態載入字庫檔。

二、上傳 JS 檔

1. 下載 JS 檔

安裝程式碼之前，需要先下載這個 JS 檔，內含簡繁字庫：

• chinese-ts-auto-switch-wp-min.js

2. 上傳 JS 檔

接著將這個 JS 檔上傳到你的網路空間，也許是「Dropbox」。或者上傳到 WP 網站的目錄，讀取速度會比較快。

例如可以用 FTP 上傳到 WP 放外掛的目錄：

• /wp-content/plugins

如果上傳到別的目錄，請記住這個 JS 檔的路徑，之後會用到。

三、安裝程式碼

接著到 WP 後台 → 外觀 → 主題編輯器 → 編輯「footer.php」→ 搜尋 </body>這個字串，找到後在此字串的前一行，插入以下程式碼：

以下參數修改請參照以上程式碼行號：

D：如果你的網站是正體(繁體)，保持預設值 1 即可

E：如果你按照前面說明，將 JS 檔上傳到 "/wp-content/plugins" 這個目錄，那麼藍色網址字串就不用更改。如果你的 JS 檔外連路徑不一樣，請修改藍色字串。

存檔後即可生效。

四、驗證效果

有幾個方法可以驗證網站是否能自動轉換簡體、繁體：

• 找大陸朋友開你的網站測試
• 自行將瀏覽器的主要語系改為簡體，也許需要重開瀏覽器，再看自己的網站

如果想先看簡繁切換的效果，也可前往範例網頁：

點此看範例網頁

更多 WordPress 相關文章：

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

免安裝外掛, 直接破解網頁「鎖右鍵+防複製」的方法 (使用書籤)

August 31, 2016, 9:07 am

≫ Next: Blogger 隨機文章 V2 + 輪播效果

≪ Previous: [WP外掛] 讓網頁根據訪客語言設定, 自動轉換簡繁文字

$

0

0

之前介紹的「破解 "鎖右鍵+防複製" 的 Chrome 外掛」，+Pulipuli Chen 布丁大留言表示，Quick Javascript Switcher 無法破解 CSS 的 "防複製" 語法。

雖然 CSS 這件事不難處理，不過若是為了一項小小任務而裝了兩個外掛、或是準備兩套方案的話，感覺有點殺雞用上牛刀。因此當時就計畫研究，能否只用一個最簡單的方法(使用書籤)，就能同時破解 JS/CSS 相關的「鎖右鍵+防複製」語法。

以下大致說明破解的原理，想直接安裝請跳至「二、安裝書籤」。

一、解決過程及原理

1. 破解 CSS

「防複製」的 CSS 語法不長，利用 JS 動態加入一段新的 CSS 參數，覆蓋原本的 CSS 參數就破解了。


2. 利用書籤

原本的「Quick Javascript Switcher」外掛最有機會一次解決這個問題，只要能加入「1. 破解 CSS」的語法即可。可惜這個外掛並非針對本篇主題而設計，所以終將無法實現。

在不靠外掛的情況下，CSS 的問題已經解決，而「鎖右鍵+防複製」的 JS 語法，只好一一針對各種可能的寫法，來寫對應的 JS 進行破解。

能成功的話，最後將這些語法封裝到一個「書籤」連結之中，有需要的時候再叫出來執行，就不會像 Chrome 外掛套件，無論是否執行，都會在背景佔用記憶體。


3. Allow Copy 外掛

自己造輪子還滿累的，不過運氣不錯在這個 Chrome 外掛「Allow Copy」執行的時候，利用「Chrome 開發人員工具」看到了程式原始碼，包含了 JS / CSS 的破解語法，列出完整內容如下：

/* Allow Copy */

var c = "* { user-select: text !important; -webkit-user-select: text !important; }";
var s = document.createElement("style");
s.type = "text/css";
if(s.styleSheet){s.styleSheet.cssText = c;}
else{s.appendChild(document.createTextNode(c));}
document.getElementsByTagName("head")[0].appendChild(s);

window.getSelection=null;

document.body.setAttribute('oncopy','null');
document.body.setAttribute('oncut','null');

function $$$clean(el, t){

console.log("Allow Copy has cleaned an object.");
var h = '';

el['on'+t] = null;

if(el.getAttribute && el.getAttribute('on'+t)){
el.setAttribute('on'+t, null);
}

if(window.jQuery) window.jQuery(el).unbind(t);
if(el.observe) el.stopObserving(t);

if(el.style){
el.style.webkitUserSelect = "text";
el.style.userSelect = "text";
}

if(h=el.outerHTML){
if(h.match(/on(contextmenu|selectstart) *= *["'][^"']*(return|alert)[^"']*["']/gi)){
el.outerHTML = h.replace(/on(mouseup|mousedown|contextmenu|selectstart) *= *["'][^"']*(return|alert)[^"']*["']/gi, '');
}
} else if(el.parentNode) {
h = el.parentNode.innerHTML;
if(h.match(/on(contextmenu|selectstart) *= *["'][^"']*(return|alert)[^"']*["']/gi)){
el.parentNode.innerHTML = h.replace(/on(mouseup|mousedown|contextmenu|selectstart) *= *["'][^"']*(return|alert)[^"']*["']/gi, '');
}
}
}


function $$$check(event){

// Basic, general disabling
var d = null;
var el = event.target||event.srcElement;

if(event['stopPropagation']){
event.stopPropagation();
}

$$$clean(document, event.type);

if(el){
while(el){
try{
$$$clean(el, event.type);
//if(el.wrappedJSObject) $$$clean(el.wrappedJSObject, event.type);
} catch(e){}
el = el.parentNode;
}
}

return event;
}

var events = ['contextmenu','selectstart'];

for(var i=0;i<events.length;i++){
document['on'+events[i]] = $$$check;
document.addEventListener(events[i], $$$check, true, true);
}

var m = document.createElement('img');
document.getElementsByTagName('body')[0].appendChild(m);
m.src = "data:image/png;base64,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";
m.style.position = 'fixed';
m.style.top = '12px';
m.style.right = '12px';
m.style.opacity = 1;
m.style.width = '64px';
m.style.height = '64px';
m.style.zIndex = 9999999;

for(var i=1;i<20;i++)
{
setTimeout("m.style.opacity="+((20-i)*(1/20))+";", i*40);
}
setTimeout("m.parentNode.removeChild(m);", 21*40);

if($ !== undefined) {$("body").unbind('copy');}
有興趣可自行研究，經測試多個網站後都能成功破解「鎖右鍵+防複製」功能，因此決定以上述程式碼為藍圖。

先去除無用的 JS 後，進行優化、補足更完整的 CSS 參數設定，再進行壓縮，製作出方便、體積更小、不佔記憶體的書籤來使用，就不必安裝這個套件了。

二、安裝書籤

有兩種安裝方式：

1. 最簡單的方法，直接將上面這個連結用滑鼠拉到書籤列，遇到「鎖右鍵+防複製」的網頁時，執行這個書籤即可。

2. 如果使用 Mac 電腦，無法用拖曳的方式製作書籤，那麼可按以下的步驟手動製作書籤：

• 先隨意新增一個書籤
• 對著上面的連結「將此連結拖曳到書籤列或加入書籤」按右鍵 → 複製連結網址
• 對著新書籤按右鍵，編輯書籤的連結
• 將連結網址的內容貼上 → 儲存

三、範例網頁

想要測試一下效果的話，可前往這個展示網頁：

點此看範例網頁

展示網頁分別使用 JS / CSS 語法封鎖選取複製的功能，使用 Chrome 外掛「Quick Javascript Switcher」可關閉 JS 功能，但無法解決 CSS 語法的問題。

執行本篇提供的書籤後，就能執行選取複製的功能了。

因此這個書籤額外的好處是，當 Chrome 以外的瀏覽器沒安裝外掛時，直接使用這個書籤一樣可以破解「鎖右鍵+防複製」的功能。

四、補充

1. 覺得書籤好用的話，主要功勞歸於「Allow Copy」這個外掛，請幫其按星等即可。

2. 由於大部分程式碼來自於「Allow Copy」這個外掛，本篇其實沒有必要隱藏這個書籤連結，因為原始碼都已經公佈了。

3. 刻意要求讀者加入會員、才能看到隱藏內容，這麼做的原因是為了延續上一篇的概念「矛與盾之爭」，"防複製" 與 "保護著作權" 的取捨：

• 製作便利的破解書籤是為了讓讀者瞭解，網路的本質在於分享，同時 "阻止複製" 並不存在簡易的方法。
• "保護著作權" 的方法並非只有 "防複製"，還有非常多招數可用，例如本篇展示的會員功能。
• 更多方法可參考上一篇的內容，或是本站標籤「著作權保護 」的文章，也有一些小工具可參考。

更多「著作權保護」相關文章：

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

Blogger 隨機文章 V2 + 輪播效果

September 3, 2016, 9:08 am

≫ Next: 讓 Facebook 首頁動態只出現「搶先看」貼文

≪ Previous: 免安裝外掛, 直接破解網頁「鎖右鍵+防複製」的方法 (使用書籤)

$

0

0

前陣子介紹完最熱門的 jQuery 輪播外掛「Owl Carousel」，聯想到部落格文章結束處，經常會配置的 "推薦文章" 工具，例如「相關文章」，如果搭配輪播功能的話，應該會有不錯的效果。

要進行輪播之前，得先隨機抽出足夠的樣本數，而 "相關文章" 的樣本母體來自於相同標籤的文章，數量有時會不夠，因此本篇選擇將輪播功能，搭配同樣適合放在文末的「隨機文章」，這樣子抽樣母體比較大(整個網站的文章數)。

同時 "隨機文章" 加了新的版本號 V2，版面、樣式上也做了一些改變，以下先介紹改版的特點，想直接安裝請跳至「二、安裝 jQuery 及 CSS」

點此看範例網頁

一、隨機文章 V2 介紹

可參照 DEMO 網頁的效果，V1 的特點大致有這些：

• 可抽樣網站所有文章，超過 500 篇也可處理
• 自適應螢幕寬度
• 可自訂縮圖長寬比例，縮圖會自動調整寬度
• 可排除特定標籤字串的文章不顯示

這個版本 V2 新增的特點如下：

• 文章標題放在圖片底部，版面設計比較美觀
• 可自訂輪播文章總數、及顯示的文章數
• 可手動切換上下篇輪播文章
• 也可用滑鼠拖曳輪播文章
• 可設定是否自動輪播
• 可設定輪播的間隔時間
• 可無限輪播，不會有捲到頭、尾之後卡住的現象

二、安裝 jQuery 及 CSS

如安裝過舊版隨機文章，請完整移除所有程式碼。

在修改範本之前，如果第一次安裝本站工具的讀者，建議先閱讀「備份範本的訣竅」系列文章。

1. 請到後台「範本」→「編輯 HTML」，游標點進範本區塊，按 Ctrl-F 搜尋 </head>這個字串，找到後在此字串的前一行，插入以下程式碼：

<script src='//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js'></script>
<style>
/*隨機文章V2*/
.rndPost2_caption {
font-size: 16px;
font-weight: bold;
line-height: 20px;
text-align: left;
margin: 10px 0;
}
#rndPost2_main {
position: relative;
margin: auto;
}
#rndPost2_main,
#rndPost2_main *,
.rndPost2_left,
.rndPost2_right {
box-sizing: border-box;
}
.rndPost2_left {
float: left;
}
.rndPost2_right {
float: right;
}
.rndPost2_left,
.rndPost2_right {
width: 35px;
margin: 0;
padding: 5px;
text-align: center;
cursor: pointer;
opacity: .6;
transition: all .7s;
-webkit-transition: all .7s;
-moz-transition: all .7s;
}
.rndPost2_left:hover,
.rndPost2_right:hover {
opacity: 1;
}
.rndPost2_left img,
.rndPost2_right img {
width: 25px;
}
.rndPost2_post {
display: inline-block;
padding: 5px;
font-size: 12px;
}
.rndPost2_post a {
display: block;
position: relative;
opacity: .8;
transition: all .7s;
-webkit-transition: all .7s;
-moz-transition: all .7s;
}
.rndPost2_post a:hover {
opacity: 1;
}
.rndPost2_post img {
display: block;
max-width: 100%;
padding: 5px;
background: #FFF;
webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, .3), 0 0 40px rgba(0, 0, 0, .1) inset;
-moz-box-shadow: 0 1px 4px rgba(0, 0, 0, .3), 0 0 40px rgba(0, 0, 0, .1) inset;
box-shadow: 0 1px 4px rgba(0, 0, 0, .3), 0 0 40px rgba(0, 0, 0, .1) inset;
}
.rndPost2_title {
position: absolute;
bottom: 5px;
left: 5px;
right: 5px;
padding: 5px;
z-index: 5;
background-color: rgba(0, 0, 0, 0.5);
color: #fff;
text-align: left;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
</style>
第一行綠字可參考「引用 jQuery 的注意事項」，檢查範本是否已安裝過 jQuery，如果已經安裝過請刪除此行，以免重複安裝。

其餘的部分，如果對 CSS 熟悉可自行修改參數

三、安裝程式碼

接著請搜尋 </body>這個字串，找到後在此字串的前一行，插入以下程式碼：


以下參數修改請參照以上程式碼行號：

F：設定全部要輪播的文章數量

G：設定一次顯示的文章數量

H~I：設定縮圖的長寬比例，若要使用正方形的話，請將 H、I 行的數字改為 1 即可。

J：若不要自動輪播功能，請將參數改為 false。

K：設定每幾秒切換一次輪播效果

L：可自訂顯示的大標題字串

M：橘色字串請改為自訂的「無縮圖替代圖片網址」

N~O：橘色字串可改為自訂的「左右箭頭圖示網址」

P：如果不需要排除特定標籤的文章(整個網站的文章都想顯示)，請刪除括號內的字串，留下括號 []即可。預設的字串以本站來舉例，代表所有樹狀標籤中包含 "站務" 字串的標籤文章、以及所有包含 "休閒" 字串的標籤文章，都不會出現在隨機文章中。

Q：此工具預設會出現在留言區塊之前。如果要擺到到別的位置，請將字串改為 "." + class 名、或是 "#" + id 名稱。


儲存後即可看到效果，也可前往範例網頁觀看：

點此看範例網頁

四、常見 FAQ

日後若有常見問題，會持續補充在此。

Q1: 有些文章無法顯示縮圖？

Ans: Blogger 的縮圖功能，需要使用 PICASA 圖床(G+ 相簿)才能自動產生，因此使用其他圖床的話，這個小工具很可能無法正常顯示縮圖。建議參考「選擇喜歡的圖片當作 Blogger 文章縮圖」，在 Blogger 後台上傳圖片，放在文章最前面的位置，就一定能顯示縮圖了。


Q2: 小工具使用後無效果，只有顯示隨機文章推薦？

Ans: 這是留言 #2 遇到的狀況，因為使用了較舊的 jQuery 版本，將版本改為 2.0.0 後就可正常執行了。


更多實用工具：

• 本站使用的 Blogger hack 及工具整理

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

讓 Facebook 首頁動態只出現「搶先看」貼文

September 6, 2016, 9:07 am

≫ Next: 接案經驗談：不斷要你報價，以及提出極低預算的業主

≪ Previous: Blogger 隨機文章 V2 + 輪播效果

$

0

0

這個工具是依據我個人使用 FB 習慣所製作的，不一定適合每個人，如果剛好你的使用模式跟 WFU 類似的話，那麼可以嘗試看看。

FB 目前首頁動態的貼文內容，如果花點時間與耐心來設定的話，是完全可以只出現指定追蹤對象的動態。

不過有的時候，或許你會希望有更多的彈性，例如時間不夠時，會希望只看到「搶先看」的必要資訊；而時間足夠時，可以多瀏覽一下「搶先看」以外、朋友的最近動態。

如果這樣的彈性是你希望的 FB 使用方式，那麼可依照本文操作來使用這個工具。

一、FB 自訂動態消息

1. 追蹤的數量太多時

第一個動作要花一點時間，但是，如果你加的朋友、社團、粉絲頁太多，有數千個以上，為了節省操作時間，我會建議你停止瀏覽本篇文章，另外使用一個閒置的 FB 帳號，只追蹤你需要的對象、社團、粉絲頁等等，這樣就可以確保 FB 首頁動態都是你需要的資訊。

還有，另外使用別的瀏覽器登入這個閒置的 FB 帳號，免得帳號切換很麻煩。


2. 自訂動態消息的顯示內容

好的，能夠繼續看下去的讀者，接下來會有大量的滑鼠點擊操作。



進入 FB 網址 → 右上角倒三角形 → 動態消息偏好設定



排定優先查看的對象 → 選擇「搶先看」的對象 → 按「完成」




接著就是苦差事了，進入「取消追蹤用戶以隱藏其貼文」後，一個個從「朋友」、「粉絲專頁」、「社團」，點擊取消追蹤的對象，讓這些對象的動態，不會出現在首頁。

如果你有幾百個要點擊的話，這要花不少時間，因為 FB 沒有提供「全部取消追蹤」的功能。


3. 首頁動態

完成以上設定後，如果你有「搶先看」以及其他「追蹤對象」的話，那麼首頁的動態就會出現這些內容。

如果在某些情況下，例如你只有 5 分鐘看 FB，會希望只看到「搶先看」的內容，那麼請繼續以下的操作，來安裝本文分享的工具。

二、製作書籤工具

以下的輸入框，分別填入你的「搶先看」名單，請注意這幾點：

• 一個輸入框只填入一個 FB 帳號名稱
• 建議直接從 FB 帳號複製貼上，因為大小寫有分，例如我的 FB 帳號字串為 Wayne Fu
• FB 帳號字串的前後不要有空格

最多可輸入 10 筆資料，填好後按下「送出」，會自動產生一個書籤連結。

有兩種安裝方式：

1. 最簡單的方法，直接將上面這個連結用滑鼠拉到書籤列，在逛「FB 首頁」時，執行這個書籤即可。

2. 如果使用 Mac 電腦，無法用拖曳的方式製作書籤，那麼可按以下的步驟手動製作書籤：

• 先隨意新增一個書籤
• 對著上面的連結「將此連結拖曳到書籤列或加入書籤」按右鍵 → 複製連結網址
• 對著新書籤按右鍵，編輯書籤的連結
• 將連結網址的內容貼上 → 儲存

三、常見 FAQ

使用上有問題可留言提出，日後若有常見問題，會持續補充在此。

Q1: 要如何檢查書籤連結中的「搶先看」名單？

Ans: 可對著標籤按右鍵編輯內容，查看網址字串，會看到類似以下的字串內容：

...var d=['字串1','字串2',...'字串10']
這就是你的「搶先看」名單。

更多 Facebook 相關文章：

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

接案經驗談：不斷要你報價，以及提出極低預算的業主

September 13, 2016, 9:07 am

≫ Next: 為 UL LI 項目清單輕鬆加入圖示的各種 CSS 技巧﹍使用 Unicode + Font Awesome 字型

≪ Previous: 讓 Facebook 首頁動態只出現「搶先看」貼文

$

0

0

前陣子有個案主想製作 Blogger 網站，討論了滿長的時間，但最終提出來的預算十足讓我錯愕。

其實預算不足的案主所在多有，拋一兩句來詢價的也不少，但這次的案例，特殊在一開始規格拉得很高，但一直提不出預算、沒有明確需求、不斷要求報價，導致花了不少溝通時間，結果最後拋出的是 2 根香蕉，那麼只好請他另尋高明的猴子了。

不過我是很正面看待這件事的，這樣的情況既然發生過，代表將來要想辦法避免。因此將案例紀錄下來，以後遇到相似場景時，請業主先參考這篇文章，對雙方都是好事。

(圖片出處: pixabay.com)

一、事發經過

以下根據時間順序，附上相關對話截圖，但去除業主個資：



在 FB 粉絲團收到訊息，一開頭就提到 "英文設計的客製化"，感覺是不小的 case。

不過無論大小 case，一開始的 SOP 都是讓客人瞭解我的「網站製作作業流程」，包含收費區間資訊。接著業主必須提供給我「需求文件明細」，才有辦法進行報價。

你對我的底線先有詳細的瞭解後，接下來換我瞭解你了，第 1 次詢問發案的預算，不過案主沒反應。




案主給了 2 個網站的版型當參考，這對進行的方向是有幫助的，但不足以進行報價，因為沒有提供「需求文件明細」。如果案主只是想瞭解大概的行情，那麼我都有提供收費區間的資訊了，因此再次請客人提供「需求文件明細」。




前面不是跟我說 "介紹之前看過了"，怎麼又問報價呢？沒關係，收費區間資訊再貼一次給你看，讓你知道套版做比較便宜，刻網站比較貴。

順便第 2 次詢問客戶預算。




場景轉換到 Line，由於客人尚無法提供需求明細，只好第 3 次提醒客人，有預算比較能建議適合進行的方式。

從客人的回答，感覺是要找出最便宜的製作方式。其實也沒什麼關係，套版花的時間比較少，反而省事。




對話實在太冗長了，抓到機會，第 4 次再問客人的預算，他的回答瞬間讓時間凍結了...

嗯，一個提出 "英文設計的客製化"、"有沒有公司電話"、"希望面對面談" 的客人，提供的範例網站都是高水準、有質感的版型，其中一個還不是 Blogger 網站的樣式，最後端出的預算是 NT. 2000！

如果有任何單位能接這種價格的話，不知道一個月得接幾十個案子才能過活...

二、客製網站的基本認知

很明顯的，這個客人的心態是，把製作網站這件事，當成逛菜市場，認為提出一個網站，就要報一個價格出來。

就像是從這一攤問到一顆鳳梨多少錢，就可以再去別攤問出另一個價格，然後從兩個價格，看是要跟哪一攤繼續殺價。

實際上，製作網站是相當客製化的產品，不是蘿蔔、青菜這些規格統一的食物。

今天客人拿一個網站來要求報價，但最後不可能按著這個網站完全照抄吧！一定會有很多地方想變更配置、顏色、功能...等等。那麼，在無法知道這些需求之前，要如何報價呢？

網站想拿到統一的價格，那就只能選擇跟別人一模一樣的版型。網站想要跟別人不一樣，那就得花量身打造的費用，必須先提供詳細的客製需求資料，才有辦法進行獨一無二的估價。

三、信任才是合作的關鍵

這件事還沒結束，後面還有一段對話：



他看了我的反應之後，才暗示預算可以到 1 萬，等於是將預算提高了 5 倍。

看起來是有了討論的空間，但這個客人的應對方式投機性十足，也打破了我對他的信任感，我想，這不是個跟我屬性相合的客戶。因此，如上圖對話回絕了這個案子。

四、選擇長久合作的客人

選擇能夠長久合作的客戶，是維繫工作品質的重要因素。而能否長久合作，需要建立在「互相信任」的基礎上。

遇到能互相信任的好客人，不但溝通愉快、提供資訊詳細，付款時程依照承諾，節省我們許多作業時間，生產線足以承接更多案子。

遇到價格至上、各種小地方想盡辦法佔便宜的客人，溝通起來耗時間，不時突然這裡凹你幫忙處理一下、那裡追加一個任務要你便宜算，打亂整個作業排程，等到付款時還會「推拖閃躲飄」，浪費我們更多額外時間，也壓縮到處理其他案子的時間。

如果在詢價階段，就能感受出這個客人，擁有我們不喜歡的屬性時，最好就快刀斬亂麻，把時間花在好的案件。不然的話，就是將價格拉高，把未來額外花費的時間成本都要估算進去。

當然，客人有比價的權利，他可以選擇預算之內的合作夥伴。而我們也有選擇客人的權利，如果希望善待自己的話，慎選客人是必須的。

網站服務項目：

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

---

為 UL LI 項目清單輕鬆加入圖示的各種 CSS 技巧﹍使用 Unicode + Font Awesome 字型

September 14, 2016, 9:07 am

≫ Next: 稍後閱讀，各種推送到 Kindle 的技巧整理﹍Chrome 網頁圖文 + Evernote 記事 + RSS 閱讀器

≪ Previous: 接案經驗談：不斷要你報價，以及提出極低預算的業主

$

0

0

前陣子接到一個需求，希望在所有 UL LI 項目(列表)清單之前，插入一個小圖示。而且這個圖示，需要將來可以很方便地自行替換。

假如網頁的 UL LI 項目早已做好，那麼一個個手動加入 IMG 標籤的圖片，不但很麻煩，日後也不方便維護(更換圖示)。

其實這件事使用 CSS 技巧就能很簡單完成，一次可替 UL LI 所有項目清單增加、或是更換圖示。本篇將介紹三個解決方案，每個都很方便操作、值得參考，不過建議讀者先有一些基本的 CSS 概念再來練習。

(圖片出處: pixabay.com)

一、CSS CONTENT 屬性

這件事最早的 CSS 技巧是使用 Background 屬性來設定背景圖案，不過稍微有點麻煩，需要調整圖片的尺寸、位置，以及設定文字與圖示的距離，有很多參數要細調。

現在 IE 舊版瀏覽器終於淘汰地差不多了，一些 CSS 新屬性終於可以放心拿出來用。只要使用「content + 偽類」就能輕鬆做到這個效果。

1. 使用前

這是一段 UL LI 清單的範例語法：

<ul class="css3_content">
<li><a href="http://www.wfublog.com/2014/08/web-chinese-font-choice.html" target="_blank">網頁中文字型除了微軟正黑體, 還有這些好選擇！</a></li>
<li><a href="http://www.wfublog.com/2016/04/google-drive-disable-direct-link.html" target="_blank">Google Drive 檔案外連功能將於 2016 年 8 月關閉, 站長須即早準備</a></li>
<li><a href="http://www.wfublog.com/2015/04/facebook-meta-og-setting-thumbnail-title-description-author.html" target="_blank">分享文章到 Facebook 的 Meta 設定﹍縮圖+標題+摘要+作者資訊</a></li>
<li><a href="http://www.wfublog.com/2015/11/win8-win10-ctrl-space-language-switch.html" target="_blank">讓 WIN8 / WIN10 能用 CTRL + SPACE 切換中英輸入</a></li>
<li><a href="http://www.wfublog.com/2016/04/owl-carousel-jquery-slider-cdn.html" target="_blank">最熱門 jQuery 圖片輪播外掛 Owl Carousel﹍CDN 安裝懶人包</a></li>
</ul>


原始效果大致如下：

• 網頁中文字型除了微軟正黑體, 還有這些好選擇！
• Google Drive 檔案外連功能將於 2016 年 8 月關閉, 站長須即早準備
• 分享文章到 Facebook 的 Meta 設定﹍縮圖+標題+摘要+作者資訊
• 讓 WIN8 / WIN10 能用 CTRL + SPACE 切換中英輸入
• 最熱門 jQuery 圖片輪播外掛 Owl Carousel﹍CDN 安裝懶人包

2. 使用後

現在網頁加入以下的 CSS 參數：

.css3_content li {
list-style-type: none;
}
.css3_content li:before {
content: url("http://www.wfublog.com/favicon.ico");
vertical-align: middle;
margin-right: 5px;
}
藍色圖片網址可改為自訂圖示網址，使用此 CSS 參數的效果如下，清單項目之前可出現自訂圖案：

• 網頁中文字型除了微軟正黑體, 還有這些好選擇！
• Google Drive 檔案外連功能將於 2016 年 8 月關閉, 站長須即早準備
• 分享文章到 Facebook 的 Meta 設定﹍縮圖+標題+摘要+作者資訊
• 讓 WIN8 / WIN10 能用 CTRL + SPACE 切換中英輸入
• 最熱門 jQuery 圖片輪播外掛 Owl Carousel﹍CDN 安裝懶人包

3. list-style-image

OL、UL 等清單標籤，另外有個參數 list-style-image 可更簡單的完成此事，語法教學可參考「CSS list-style-image」。

以上先使用「content + 偽類」來介紹，是因為泛用性更高，這個技巧不限於 OL、UL 等清單標籤，其他 HTML 標籤也適用，因此這個技巧比較實用。

而且接下來要介紹的方案，也都是「content + 偽類」的應用，效果更佳，因此目前為止的內容就當作暖身之用。

二、使用 Unicode 當作圖示

使用圖檔需要花費 HTTP 請求、等待網路傳輸，如果需要的圖案可以從 Unicode 字型之中找到，那麼網頁效能會稍微好一點。

可從這篇「Unicode 表情圖案(emoji ) + 特殊符號字元一覽表」，找到需要的圖案後，記下 CSS 這個欄位的字串內容。

1. 使用前

可參照「一、CSS CONTENT 屬性」→「1. 使用前」的範例語法，但是將 class="css3_content"改為 class="unicode_list_image"。


2. 使用後

假設選擇的 Unicode 圖示為「照相機(camera) 」，查到的 CSS 字串為「\1F4F7」，請在網頁加入以下 CSS 參數：

.unicode_list_image li {
list-style-type: none;
}
.unicode_list_image li:before {
content: "\1F4F7";
margin-right: 5px;
}
紅色字串就是照相機 Unicode 圖示對應的字串，使用以上 CSS 參數的效果如下：

• 網頁中文字型除了微軟正黑體, 還有這些好選擇！
• Google Drive 檔案外連功能將於 2016 年 8 月關閉, 站長須即早準備
• 分享文章到 Facebook 的 Meta 設定﹍縮圖+標題+摘要+作者資訊
• 讓 WIN8 / WIN10 能用 CTRL + SPACE 切換中英輸入
• 最熱門 jQuery 圖片輪播外掛 Owl Carousel﹍CDN 安裝懶人包

3. 注意事項

由於不同的瀏覽器、作業系統，對 Unicode 的支援度都不一樣，為了能讓訪客都看得到選擇的 Unicode 圖案，最好從這個網頁「Emoji Unicode Tables」來挑選圖案。

看最左邊那一欄的圖案，如果可以顯示，則該圖案在大部分作業系統、瀏覽器都能顯示。如果不能顯示(出現方塊)，代表這個圖案比較新，不一定能在大部分作業系統顯示。

三、Font Awesome

為了解決 Unicode 作業系統支援度的問題，使用 Font Awesome 這套圖示字型會是更好的解決方案。現在 WFU BLOG 已將整個網站的所有小圖示，改用 Font Awesome 顯示，使用教學可參考「圖示字型 Font Awesome 進階使用方式教學」。

熟悉使用方法後，可從這篇整理的「使用 Font Awesome 圖示速查表(cheat sheet), 安裝快速不麻煩」，找到需要的圖案後，記下 CSS 這個欄位的字串內容。


1. 使用前

可參照「一、CSS CONTENT 屬性」→「1. 使用前」的範例語法，但是將 class="css3_content"改為 class="fontawesome_list_image"。


2. 使用後

假設選擇的 Font Awesome 圖示為「照相機(camera) 」，查到的 CSS 字串為「\f030」，請在網頁加入以下 CSS 參數：

.fontawesome_list_image li {
list-style-type: none;
}
.fontawesome_list_image li:before {
content: "\f030";
font-family: fontAwesome;
margin-right: 5px;
}
紅色字串就是照相機 Font Awesome 圖示對應的字串，使用以上 CSS 參數的效果如下：

• 網頁中文字型除了微軟正黑體, 還有這些好選擇！
• Google Drive 檔案外連功能將於 2016 年 8 月關閉, 站長須即早準備
• 分享文章到 Facebook 的 Meta 設定﹍縮圖+標題+摘要+作者資訊
• 讓 WIN8 / WIN10 能用 CTRL + SPACE 切換中英輸入
• 最熱門 jQuery 圖片輪播外掛 Owl Carousel﹍CDN 安裝懶人包

四、總結

本篇的三個方案各有優點，雖然 WFU 偏好 Font Awesome，但不代表其他兩者沒有優點，大致做個總結：

• 使用圖片：好處是不需查表，可以使用彩色圖片(另外兩個只能上一種顏色)。
• 使用 Unicode：使用作業系統現有的 Unicode 圖示，節省網頁 Http 傳輸(不需載入圖片、不需載入 Font Awesome 這樣的外部字型)。
• 使用 Font Awesome：沒有 Unicode 跨作業系統支援度的問題，圖案選擇性很多。

讀者可根據以上歸納，來選擇符合需求的對應方案。

更多 CSS 相關技巧：

更多字型相關文章：

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

稍後閱讀，各種推送到 Kindle 的技巧整理﹍Chrome 網頁圖文 + Evernote 記事 + RSS 閱讀器

September 21, 2016, 9:07 am

≫ Next: 電子書閱讀器 Kindle 8 購買及使用心得

≪ Previous: 為 UL LI 項目清單輕鬆加入圖示的各種 CSS 技巧﹍使用 Unicode + Font Awesome 字型

$

0

0

最近使用多年的 Kindle DX 9.7" 功成身退，買了兩個月前剛出的 Kindle 8，雖然螢幕小很多(只有 6")，不過最重要的是有了 Wifi 功能，不必再依靠會降低使用意願的 USB 傳輸線。

為了保護眼睛、減少看背光螢幕(包含行動裝置)的時間，當逛到內容比較長的網頁圖文、或是 RSS 閱讀器有值得 "稍後閱讀" 的長篇文章時，就可以利用 Wifi 自動推送到 Kindle 來閱讀。

因此花了一些時間研究如何完備這些流程，請見本篇的整理。

• 電子書閱讀器 Kindle 8 購買及使用心得

一、傳送網頁圖文到 Kindle

1. 官方 Chrome 外掛

Amazon 官方提供了 Chrome 外掛「Send to Kindle for Google Chrome」，可將網頁內容傳送到 Kindle。

不過不曉得哪裡有問題，使用時總是出現錯誤訊息。查看了其他使用者的意見，才發現大家都有同樣問題。有人提供了解決方法：「將瀏覽器的語系改成英文即可。」

原來是語系的問題，台灣的使用者還真可憐，由於正體中文市場小，Kindle 不但沒有出繁體介面，連帶官方外掛也不管台灣使用者的語系問題。

為了這個外掛而更改瀏覽器的語系，這個犧牲未免太大，因此另尋別的方案。


2. Chrome 外掛 Send to Kindle

查詢之後，這是最多人使用的外掛：

• Send to Kindle (by Klip.me)

安裝及設定教學可參考這篇「把你瀏覽的網頁內容傳送到Kindle的Chrome外掛」，步驟說明地很詳細。

執行時，按下外掛圖示後，網頁會出現預覽畫面，只留下文章區塊，網頁不必要的部分，例如廣告、側邊欄都會去除。

如果不需要擷取全部的文章內容，還可自行刪減不必要的部分，再進行傳送。

傳送到 Kindle 的時間不一定，有時很快，有時要幾分鐘，也許跟使用時段、網路是否塞車有關。

這個外掛可以傳送網頁圖片，不過有時會看不到圖片，一方面跟 Kindle 的限制有關，傳輸容量不能太大；一方面可能跟上一點類似，跟使用時段、網路是否塞車有關。


3. Evernote 網頁擷取外掛

一般的情況，傳送網頁文章使用「Send to Kindle」這個外掛就夠了。如果有特別的用途，例如整理旅遊、美食等資訊，需要匯整多個網頁，然後在 Evernote 整理成一篇完整的文章，再傳送到 Kindle，那麼就需要使用這個 Chrome 外掛：

• Evernote Web Clipper

• 安裝教學：Evernote web clipper (for Chrome)
• 使用教學：Evernote Web Clipper 整合 Clearly

擷取網頁時，會出現如上圖的畫面：

• 右上紅框會自動擷取文章標題
• 選擇「簡化文章」，則只會顯示文章內容，排除網頁不必要的部分
• 如果要同步到 Kindle 的話，建議設定相同的標籤，例如 "kindle"

最後按「儲存」即可傳送到 Evernote，而且外掛會記住設定，以後不需要每次都重新設定。

不過這個外掛只是將網頁存到 Evernote 而已，不會傳到 Kindle，目的是方便蒐集資料。要如何讓 Evernote 自動同步到 Kindle，請繼續往下看。

二、傳送 Evernote 到 Kindle

1. 文件格式問題

雖然 Kindle 官方提供了一組 email 帳號，讓我們用傳送郵件夾帶附檔的方式，把文件傳送到 Kindle。但經過我多次測試，常常無法正常傳送：

• Kindle 只能支援特定格式的文件，而我傳送的信件，常被 Kindle 告知文件格式錯誤
• 為了測試文件能否傳送到 Kindle，常常得等好幾分鐘才能得到答案，十分麻煩。
• 連最簡單的 txt 檔都會報錯(根據這個討論串「txt檔傳送到kindle」，是編碼的問題，要手動改成 ANSI 或 UTF8)

後來找到這個服務，可以傳送 Evernote 的記事到 Kindle：

• En2kindle

這樣以後就簡單多了，任何圖文內容可直接貼到 Evernote，自動轉換成 Kindle 能讀取的格式，再經由這個服務自動同步到 Kindle，再也不用擔心格式不相容的問題了。


2. En2kindle 操作說明

大致說明一下「En2kindle」這個服務如何使用：



請依照以上 A~E 的順序──

A：選擇分頁「send-evernote-to-kindle」

B：點擊按鈕「Link my Evernote」，輸入帳號密碼、進行 Evernote 授權

C：進入「Kindle 官方設定網址」，找到「Approved Personal Document E-mail List」這個區塊：



點擊「Add a new approved e-mail address」按鈕，新增 "kindle@en2kindle.com" 這個 email，如上圖紅框。

D：同樣在「Kindle 官方設定網址」，找到「Send-to-Kindle E-Mail Settings」這個區塊，找到自己設定的 kindle 郵件網址，填入這個欄位

E：最後一步，篩選哪些記事要同步到 Kindle，看要設為特定的記事本名稱、或是特定標籤都可，如圖我設定的篩選條件是依照標籤名稱 "kindle"。

最後按下「Save」即可。




以後將 "kindle" 這個標籤拉到捷徑，所有要同步到 Kindle 的 Evernote 記事，選取後直接拖曳到這個標籤，就能一次為這些記事加上 "kindle" 這個標籤，並自動同步到 Kindle 了。

補充：後來發現此服務只能試用一星期，之後需要付 USD 6 / 年。

三、傳送 RSS 閱讀器文章到 Kindle

使用 RSS 閱讀器，看到好文、但內容很長需要詳讀時，也有技巧可以同步到 Kindle。

1. 同步到 Instapaper

「Instapaper」是滿有名的 "稍後閱讀" 服務，大部分 RSS 閱讀器應該有辦法可以分享到 Instapaper。

例如我在平板常用的「gReader」閱讀器，有按鈕可以直接傳送文章到 Instapaper，所以這部分請讀者根據自己使用的軟體，找出對應的選項功能。


2. Instapaper 同步到 Kindle

Instapaper 本身內建同步到 Kindle 的功能，只需要設定正確即可，這方面的操作教學可參考這篇「用 Instapaper 推送文章至 Kindle」。

以上 2 點都設定好後，就可將 RSS 閱讀器文章推送到 Kindle 了。

四、小結

「稍後閱讀」也是一種待辦事項，需要靜下心時才能處理的「待詳讀」任務。

以上介紹了多種使用 Kindle 稍後閱讀的管道，因此 Kindle 不僅僅能夠閱讀電子書而已，還是很好用的數位輔助工具，讓我們眼睛需要離開螢幕時，也能安心地處理這些「待詳讀」的事項。

更多 Evernote 相關技巧：

更多 Chrome 相關文章：

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

電子書閱讀器 Kindle 8 購買及使用心得

September 21, 2016, 9:07 am

≫ Next: 解決 Blogger 行動版導覽列選單上「首頁」的異常現象

≪ Previous: 稍後閱讀，各種推送到 Kindle 的技巧整理﹍Chrome 網頁圖文 + Evernote 記事 + RSS 閱讀器

$

0

0

使用多年的 Kindle DX 終於到了壽終正寢的時刻，為了眼睛著想，生活不能沒有 E-Ink 的電子書閱讀器。可惜 Amazon 已經不出 9.7" 的大尺寸，現在一律只有 6"，但規格版本之多，令人目不暇給，要如何選擇還真有點頭疼。

那麼本篇就紀錄一下 Kindle 購買的注意事項、版本比較，為何選擇 Kindle 8，以及操作使用的心得。

(圖片出處: pixabay.com)

一、版本差異

1. 不同系列比較

Kindle 在兩個月前 (2016/7) 推出了第 8 代 (8th generation)，而每代大致又能分成三個系列，其中的差異為何，可參考這篇「Kindle 有三種，價格大不同！」，簡單整理如下：

• Kindle：最便宜、解析度 167ppi、無背光
• Kindle PaperWhite：價格中等、解析度 212ppi、有背光
• Kindle Voyage：最貴、解析度 300ppi、自動調整背光

主要差別算是解析度，如果需要看圖片、漫畫等等，那麼就要花大錢買 Voyage 了，否則解析度不佳看起來會很痛苦的！

除此之外，還分成有廣告(便宜 USD20)、無廣告，以及有 3G、無 3G(只有 Wifi) 的分別。

最後我選擇最低階的 Kindle、有廣告、只有 wifi 的裝置，因為：

• 以看文字為主
• 廣告是在休眠時出現，不影響閱讀
• 不需要 3G，相信我，沒有人會想用 Kindle 上網的！

2. 第 7 代、第 8 代差別

這篇「Kindle 8 (2016): tech specs, comparisons, reviews, and more」有 Kindle 8 詳細的介紹，其中也有與 7 代的規格比較，主要的差別是這樣：

• Kindle 7：(Ram)記憶體 256MB、尺寸大一點、稍微重一點、不支援藍芽
• Kindle 8：(Ram)記憶體 512MB、尺寸小一點、稍微輕一點、支援藍芽

看到記憶體多一倍，立刻決定購買 Kindle 8 了，其他的差別不太重要。


3. 補充說明

由於我的購買需求不用最高規格，因此以上的規格資料只適用於大致辨認不同版本的區別。如果需要購買頂級 Kindle，官方還有出 Oasis 旗艦款，其他將來最新出的 PaperWhite、Voyage 版本也可能有不同的規格，建議再上官網查詢相關資料。

二、購買心得

1. 購買管道

由於 Kindle 沒有正體中文版本，所以只能經由代購才能買到，看是要美版、日版、還是從大陸買簡體版。想當初買 Kindle DX 時，跟代購交涉、與等待的時間，足足花了好幾個星期，真的挺累人的。

台灣現在有家專門賣 Kindle 現貨的電子書商店，在 PcHome 可搜尋到，不用花等待的時間，當然就要讓人家賺一手，Kindle 8 賣 NT. 3700，不便宜就是。

我的運氣不錯，在露天找到一個專賣 Kindle 的賣家，也算是代購，不過 Kindle 8 他剛好有現貨，只賣 NT. 2999，而且面交地點離我家也不遠。相較之前 Kindle DX 等了近一個月，這次早上查資料、中午用 Line 聯繫，下午五點就拿到了，非常開心~


2. 辨識真偽

代購有一定的風險，不一定是賣家蓄意詐欺，也有可能是 Kindle 本身型號太多、讓人容易搞錯，不小心給到別的機型，很多事都非常難講。

用郵寄的方式若搞錯機子，後續處理起來可就煩人了；面交可以避免這一點，但我們得先學會怎麼辨識真偽。




上圖是 Kindle 盒子的外殼，紅框處可以看到註明是 "8th generation" (第 8 代)，算是可以比較安心。

但外殼是可以拆卸的，且外殼沒有序號，萬一是拿別的產品外殼來套怎麼辦？




最保險的方法還是要看序號，Kindle 盒子是有封條的，看盒子比較準。上圖紅框可看到封條貼紙的產品序號 DSN：G000K90.... 這樣的號碼。

由於 Kindle 8 太新了，各處都找不到序號資訊，只找到這個是目前 Kindle 產品序號更新最快的網頁「Kindle Serial Numbers」，從這裡看到的資訊：

• 序號 G000K9：Kindle Basic 2 (Black)

雖然沒有 "8th generation" 的字樣，不過序號及描述 "Kindle Basic 2 (Black)" 是吻合的，因為 Kindle 8 算是第 2 次出的入門(basic)機型，可以確定沒有買錯。



3. 保護套

由於沒用過觸控式的 Kindle，不曉得休眠後這麼麻煩，除了要按電源鍵，還要滑動螢幕才能解鎖。

所以建議加 500 元買個含磁扣功能的保護套，開合時自動休眠與解鎖，使用起來方便多了。

三、操作技巧

1. 初次使用

可參考這篇「全新 Kindle 入門版火熱開箱」，有詳細的圖文說明，從開箱到註冊、基本使用方式等等。


2. 觸控手勢

可參考這篇「Kindle Paperwhite新手入門簡易操作說明」，由於 Kindle 操作上不需任何按鍵，完全依靠觸控以及手勢來完成，因此有必要瞭解各種手勢操作的技巧，操作才會快速。

不過內建的手勢不夠多，使用頻率極高的 "上一頁" 功能沒有手勢可做到，官方應該開發更多的手勢功能，就像瀏覽器的手勢外掛一樣。


3. 操作技巧

這幾篇文章很實用，可讓 Kindle 用起來更順手：

• Kindle 新界面中容易让人迷惑的几处小变动
• 很常用！隐藏在 Kindle 中的几个便捷操作
• 沒有這20條技巧，你的Kindle只能用來蓋泡麵

4. 將各種內容傳送到 Kindle

依照這篇「稍後閱讀，各種推送到 Kindle 的技巧整理」，就能將網頁的詳細圖文、Evernote 記事、RSS 閱讀器的文章，快速地傳送或同步到 Kindle，有空時再慢慢詳讀。


5. Kindle 教學

更多 Kindle 的實用教學文章，可拜訪這個 Kindle 專門網站：

• Kindle伴侣

四、使用心得

以下簡單摘要各方面 Kindle 8 的使用心得：

1. 優點：很輕巧、攜帶方便、觸控靈敏、反應速度不錯、查中英翻譯功能方便。

2. 上網：沒有正體中文的輸入法，就算 Kindle 提供了體驗版瀏覽器功能，在只能打英文的情況下，連搜尋中文字都沒辦法，幾乎什麼事都不能做。因此如前所述，沒什麼人會想用 Kindle 上網的，如果有人真的用得下去，未免太克難了...

3. USB 傳輸：使用官方的傳輸線接 Win7，竟然無法連上 Kindle 來讀取資料夾，這可能是人品問題。改用舊的 Kindle DX 傳輸線，沒想到就連上了，是否該慶幸我有兩台 Kindle...

4. Wifi 傳輸：官方不提供 FTP 的方式傳檔(除非越獄)，也只能用 email 傳檔、或「三、操作技巧」→「4. 將各種內容傳送到 Kindle」的方式，但時間上就得等上幾分鐘。更麻煩的是，傳送的文件格式，可能會被 Kindle 打槍，請參考「稍後閱讀，各種推送到 Kindle 的技巧整理」→「二、傳送 Evernote 到 Kindle」→「1. 文件格式問題」。想要立即傳輸，只好找 USB 線插上。

5. 電力：除了要 Wifi 傳輸檔案的時候，其他時間要記得關閉 Wifi，也就是使用飛航模式，否則電力會掉很快的。

更多 3C 產品使用心得：

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

解決 Blogger 行動版導覽列選單上「首頁」的異常現象

September 28, 2016, 9:07 am

≫ Next: 過場效果華麗的 jQuery 圖片輪播外掛 Camera﹍CDN 安裝懶人包

≪ Previous: 電子書閱讀器 Kindle 8 購買及使用心得

$

0

0

前陣子接到一個委託，表示 Blogger 行動版的導覽列選單，「首頁」這個項目沒有反應。

其實這個問題很久以前就有發現，只是自己的行動版沒有使用官方的「網頁」小工具，所以沒有深究這個問題。

這次有這個機會來審視一下這個異常現象，才發現要解決的話，還真是出乎意料的棘手，因此紀錄一下解決過程。

<< 請注意！本篇文章含會員加值文章內容，需點數兌換 >>

一、異常現象

直接說結論，Blogger 行動版的導覽列，也就是「網頁」小工具，程式沒有寫好，而且有 Bug。

1. 異常現象：例如進入文章頁面後，點擊「首頁」這個選項，會沒有反應，無法跳轉到首頁。

2. Bug：如果編輯「網頁」小工具，取消勾選「首頁」這個項目，行動版依然會自動產生一個首頁，而且仍然會發生第 1 點的異常現象。

3. 其他按鈕：如果編輯「網頁」小工具，例如新增一個項目「Home」，連結指向首頁，拉到原本「首頁」這個項目的上方，那麼「Home」這個連結在文章頁面依然是沒有反應。

二、解決方法

三、聯絡表單

加值文章關閉留言板功能，使用上有任何問題請用下面的表單與我聯繫：

更多行動版相關技巧：

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

過場效果華麗的 jQuery 圖片輪播外掛 Camera﹍CDN 安裝懶人包

September 28, 2016, 9:07 am

≫ Next: 本站 Blogger 即日起關閉訪客自刪留言功能

≪ Previous: 解決 Blogger 行動版導覽列選單上「首頁」的異常現象

$

0

0

之前曾介紹「Camera 圖片輪播外掛安裝及使用詳解」，他值得推薦的特色不少，除了多樣的炫麗過場特效，幾乎各種想得到的效果都能自訂，更重要的是支援 "自適應" 寬度，這在行動裝置是非常重要的。

可惜的是這個外掛不容易安裝，需要支援目錄式的網路空間(其實幾乎所有輪播外掛都是如此)。上一篇介紹了 Google Drive 的安裝方式，但由於「Google Drive 檔案外連功能將於 2016 年 8 月關閉」，所以原方法失效。當 Google 也不玩了之後，網路上也很難再找到支援目錄式的免費網路空間了。

好消息是，現在有 CDN 提供了官方檔案，不必再尋找網路空間，就能安裝 Camera 這個圖片輪播外掛，請見本篇的教學說明。

點此看輪播範例

一、CDN 檔案

1. CDN 優點

檔案放在 CDN 不但不需擔心網路空間的問題，而且傳輸速度還更快，因為 CDN 會偵測靠我們距離最近的節點來傳輸。


2. CDNJS

這是非常知名的 CDN 服務「CDNJS」所提供的 Camera 檔案連結列表：

• https://cdnjs.com/libraries/Camera

• 如果要引用特定檔案，可直接複製連結
• 目前看到的版本是 1.3.4，也只有這個版本
• 雖然標示可使用 jQuery 1.9.1 以上版本，但實測後發現會當掉，建議使用 jQuery 1.8.2 或以下的版本

二、安裝懶人包

如不知道要引用哪些檔案，可直接使用以下整理好的連結。

在修改範本之前，如果第一次安裝本站工具的讀者，建議先閱讀「備份範本的訣竅」系列文章。

以 Blogger 為例，請到後台「範本」→「編輯 HTML」，游標點進範本區塊，按 Ctrl-F 搜尋 這個字串，找到後在此字串的前一行，插入以下程式碼：

<script src='//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/Camera/1.3.4/scripts/jquery.mobile.customized.min.js'></script>
<script src='
https://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/Camera/1.3.4/scripts/camera.min.js'></script>
<link href='https://cdnjs.cloudflare.com/ajax/libs/Camera/1.3.4/css/camera.min.css' rel='stylesheet' type='text/css' media='all'></link>
第一行可參考「引用 jQuery 的注意事項」，檢查範本是否已安裝過 jQuery，如果已經安裝過 1.8.2 以上的版本，請刪除其他版本，以免重複安裝。

存檔後即完成所有需要檔案的連結引用，接下來要說名如何放輪播內容的 HTML 碼，以及執行輪播的參數設定。

三、使用方式

在任何想要展示輪播圖片的地方，加入以下程式碼。例如在「首頁公佈欄」的位置，新增一個「HTML/Javascript」小工具，拉到文章區塊上方，加入以下程式碼即可。

以下說明請參照以上程式碼行號，以及對照「camera 官網的說明」：

B：綠色字串可自訂，但必須與 I 行綠色字串一致。藍色字串為 skin 色系的參數，不設定也沒關係，要使用的話請參考官網 SKINS 部分的說明。

C~F：這區間為一張圖片的所有參數，請複製這個區間的程式碼，要輪播幾張圖片，就在 F 行與 G 行之間插入幾組程式碼，為了避免複製錯誤，特別在 C、F 行頭尾的 div 用橘色標記起來。

C 行詳解：

• data-src：藍色字串請改為自己的圖檔網址
• data-target="_blank"：連結另開新視窗，不需要可刪除
• data-link：綠色字串請改為外連網址。若不需連結可刪除這組參數。
• data-thumb：填入縮圖網址，若不需縮圖可刪除這組參數。

D~E：這兩行為字幕說明內容，若不需字幕可刪除這兩行

D：藍色字串為字幕效果，可使用的參數請參考官網 CAPTIONS 部分的說明

E：請改為自訂說明字串

I：綠色字串請 B 行綠色字串一致

J：time 代表每張圖片顯示時間，紅字參數 3000 代表 3 秒，若改為 1 秒請置換為 1000。

K：固定圖片的高度為 400px，藍色字串可改為自訂像素值，若不需固定高度請刪除此行。

L：預設圖片的過場效果為隨機，若要自訂效果，可放入一組或多組字串，請參考官網說明「fx: 'random'」的部分，有三十多種，例如要放入多組可將字串改為 'simpleFade, mosaic' 這樣的形式，彼此用小寫逗號隔開。

M~N：代表使用縮圖導覽。若不需要請將 pagination 參數改為 true，以及將 thumbnails 改為 false。


需要更多參數或其他效果，請參考官網說明；增減參數時要注意，J~N 行每個參數之間用小寫逗號隔開，最後一個參數之後不可有逗點。

也可參考以下官方 DEMO 網頁，更瞭解 camera 能實現哪些效果：

基本效果

輪播影片

全螢幕

四、Blogger 圖片處理(Picasa 圖床)

這件事對 Blogger 來說不是好消息，雖然使用 CDN 安裝很方便，但 CAMERA 官方提供的安裝檔，實際上跟 Blogger 後台上傳的圖片(也就是 Picasa 圖床)是相衝的，圖片會無法顯示。那麼為何上一版 WFU 提供的「Camera 圖片輪播外掛安裝及使用詳解」沒有這情形呢？因為我改過了官方原始碼，讓 Blogger 圖片可以相容。

為了要讓 Picasa 圖床的圖片正常顯示，那麼得更改一下安裝方式，在「二、安裝懶人包」這裡的程式碼，有 3 個 cdnjs 連結的 js 檔，請將這 3 個 js 檔連結刪除，改用上一版我提供的檔案，這樣就沒問題了。不過這個流程是有點麻煩的，請按以下步驟：

• 「Camera 圖片輪播外掛安裝及使用詳解」→「三、Google Drive 安裝準備動作」→「1. 複製懶人包」，這裡有我提供的 Google Drive 資料夾路徑，內有 17 個檔案。
• 將其中的 camera-all.js 這個檔案下載
• 放到你的 Dropbox 資料夾
• 利用「Dropbox 外連產生器」，取得這個檔案的外連網址
• 將原本 3 個 cdnjs 連結的 js 外連，改成你的 Dropbox 外連，這樣就可以了

更多 jQuery 網頁效果：

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