將 Google 行事曆排程顯示在網頁﹍FullCalendar CDN 安裝懶人包

December 28, 2016, 8:07 am

≫ Next: 如何使用 Google reCAPTCHA 防止網頁被留垃圾廣告訊息

≪ Previous: 使用 Blogger 免費範本(模版)，可能需要面對的問題有哪些？

$

0

0

過去一段時間，網站業務的排程經常處於吃緊的狀態，於是決定好好利用「Google Calendar」，把行事曆的排程顯示在網頁上，業主可查詢案件何時能進入排程、以及案件的時程區間。

基本上，Google 日曆預設就有提供嵌入網頁的語法，如果是功能取向的站長，不一定需要另外瞭解本篇介紹的外掛程式。

如果是形象網站，需要自己設計行事曆的版面、讓效果看起來更專業的話，例如去除 Google 官方 Logo、連結、樣式等等，那麼「FullCalendar」這個強大的外掛，除了最簡單的改版面，還能自己寫程式來設計各種功能。

由於連「Google Drive 都會中止外連功能」，一般的部落格站長，現在要裝各種外掛其實滿困難的，因為很難找到免費又穩定長久的網路空間。還好 FullCalendar 夠熱門，有免費 CDN 提供了各種版本的外連檔案，讓站長們不用擔心這個問題，本篇就來看怎麼進行。

點此看範例網頁

一、Google 行事曆

Google 行事曆的用途非常廣，需要在網站公開行程、排程，都會用得到本篇的內容。例如追星的粉絲，一定會希望大明星能在網頁放上各種通告行程；具有知名度的部落客、公眾人物，也可在網站放自己的行程，方便尋找合作機會的廠商瞭解何時可以接洽，搶先卡位排定檔期。

1. 內嵌語法

如果不想使用外掛、不介意版面的話，其實直接參考這篇「嵌入 Google Calendar」，有詳細的圖文說明，把 Iframe 語法放到網頁即可。


2. 使用 JS 操作

如果是前端工程師，很熟悉 JS 語法的話，可利用 Google Calendar API 取得行事曆中的事件，從返回的 JSON 格式資料，看要如何呈現在網頁上。

首先需要參考這篇「使用FullCalendar完全自訂嵌入式Google日曆樣式」，分別取得 "API 金鑰" 以及 "Google 日曆 ID"，接著以下的網址，就能取得 JSON 格式的資料：

https://www.googleapis.com/calendar/v3/calendars/Google 日曆 ID/events?key=API 金鑰

二、FullCalendar 安裝懶人包(CDN)

免費的 CDN 服務 Cloudflare 也提供了 FullCalendar 外連，而且各種版本一應俱全，請參考這個網址：

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

以下 WFU 以連結「Google 行事曆」為前提，整理了所有安裝 FullCalendar 需要用到的外連，請按步驟進行，安裝方式以 Blogger 來舉例：

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

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

<script src='http://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js'></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.17.1/moment.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.1.0/fullcalendar.css" rel="stylesheet"></link>
<link href="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.1.0/fullcalendar.print.css" rel="stylesheet" media="print"></link>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.1.0/fullcalendar.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.1.0/locale/zh-tw.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.1.0/gcal.min.js"></script>

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

三、執行 FullCalendar

1. 取得 API 金鑰 + Google 日曆 ID

由於我們的任務是結合「Google 行事曆」，並非單純安裝 FullCalendar，因此必須先取得 "API 金鑰" 及 "Google 日曆 ID"，請參考這篇「使用FullCalendar完全自訂嵌入式Google日曆樣式」的詳細圖文說明，取得這兩項重要資訊。


2. 執行程式碼

接著在網頁想要顯示 Google 行事曆的地方，加入以下程式碼(例如放在 HTML/Javascript 小工具、或新開一篇文章)：

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

A、C：這兩行的紅色字串必須一致

D：綠色字串請改為自己的 Google API 金鑰

F：綠色字串請改為自己的 Google 日曆 ID

H：如果想自訂行事曆高度的話，可修改藍色數字；不需要的話可刪除此行。

J~K：點擊行事曆中的事件時，網頁會跳到行事曆該事件的連接。我非常不太喜歡這樣的效果，因此設定了 eventClick 這個函數，如果熟悉 JS 的話，可以修改這兩行的內容，來呈現不同的效果；如果要維持預設效果，請刪除這兩行即可。


3. 範例效果

下圖是安裝到網頁的範例效果：




想要操作的話，也可前往範例網頁：

點此看範例網頁

四、FullCalendar 相關說明

FullCalendar 之所以強大，是因為提供了完整的各種函數，看得到的部分都可以自訂，不過要啃說明書也很累就是了，可參考官網文件說明：

• FullCalendar Documentation V2 & 3

如果閱讀簡體沒有障礙的話，這個網頁整理了很詳細的中文參數說明，非常需要客製化、且熟悉 JS 的讀者可以參考，相信可以大大縮短研究時間：

• Jquery FullCalendar(参数中文说明)

更多 jQuery 網頁小工具：

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

---

如何使用 Google reCAPTCHA 防止網頁被留垃圾廣告訊息

December 31, 2016, 8:07 am

≫ Next: 協助痞客邦搬家到 Blogger 流程紀錄 + 常見問題解決

≪ Previous: 將 Google 行事曆排程顯示在網頁﹍FullCalendar CDN 安裝懶人包

$

0

0

前陣子「Blogger 中文論壇」遭到垃圾訊息洗版，被機器人大量貼文，一次發了幾十篇，甚至有一次達到上百篇。雖說也不會造成太大困擾，因為 Blogger 後台一次能勾選 50 篇文章刪除，不用幾秒就全部消滅了，不過能夠事先預防總是比較省事。

於是想到 Google 的這個好工具「reCAPTCHA」，有了它，網頁的表單、留言等工具，就有辦法防堵廣告、垃圾訊息。

只不過，reCAPTCHA 不是設計給前端使用的工具，一般部落格想用的話，需要一點巧思及不錯的 JS 功力，本篇適合前端工程師參考。

(圖片出處: googleblog.com)

一、reCAPTCHA 運作原理

1. 前後端配合

這個工具主要給能夠控制後端的平台使用，因此「官網」目前只有提供 PHP 語言的範例而已。不過原理不難，理解後其他語言也不難套用。

它運作的方式為，如果有人用機器人留垃圾訊息，前端有個驗證碼介面，通過後會將使用者訊息送到 Google 伺服器。

若沒有通過驗證碼而逕自提交標單，後端會將留言者 IP 送到 Google 伺服器檢查，那麼就會發現沒有吻合的前端驗證資訊，那麼後端就可以中止表單的提交與執行。


2. 前端 + JS

從前面的原理可知道，前後端配合檢驗是最保險的機制。但是如果是 Blogger 這類只有前端的部落格平台，基本上無法建立前、後端配合的表單，只能使用官方提供、或第三方的表單，那就很容易遭到垃圾留言。

在沒有後端的情況下，其實 reCAPTCHA 也可以不依靠後端，純粹靠前端來執行。在這種情況下，其運作的原理為：

• 首先你要將表單的提交改用 JS 控制
• 提交之前必須讓程式執行 reCAPTCHA，跑出驗證碼的介面
• 等留言者通過驗證後，reCAPTCHA 允許執行成功驗證完的 callback 函數
• 最後將提交表單的 JS 程式，包在 callback 函數之中，送出表單

以上流程為純粹前端使用 reCAPTCHA 的方式，比起後端，它的風險就是厲害一點的使用者，如果有辦法看到 callback 函數的內容，那麼就被破解了，因為沒有後端作為把關。

雖然前端使用 reCAPTCHA 並不保險，但 JS 功力強一點的話，其實也沒那麼好破解，需要花不少時間。因此除非遇到針對性的駭客，不然我認為前端的方式已經夠形成嚇阻作用了。

二、申請 reCAPTCHA

那麼本篇就以我的使用經驗，提供前端執行 reCAPTCHA 的作法。

首先需要到官網申請 reCAPTCHA，而且需要註冊個人網域，這部分的流程請參考這篇「教你如何使用Google的reCAPTCHA驗證碼keys申請」，圖文說明得很清楚。

申請完之後，最重要的是記下你的 Site key，類似以下的字串：

6LfMbA4UAAAAAMCNO2YQ7AfRho8hoUxxxxxxxxxx

三、範例程式碼

首先你需要知道如何用 JS 控制你的表單提交，接著以下是範例程式碼：

<script src="https://www.google.com/recaptcha/api.js?onload=onloadCallback&render=explicit" async></script>

<div id="recaptcha_box"></div>

<script>
var onloadCallback = function() {
grecaptcha.render("recaptcha_box", {
"sitekey": "6LfMbA4UAAAAAMCNO2YQ7AfRho8hoUxxxxxxxxxx",
"callback": callback
});
};

function callback() {
/* 這裡可執行提交表單的動作
alert("恭喜你驗證成功");
*/
}
</script>

• 兩處紅色字串必須一致，這是 reCAPTCHA 載入後會執行的函數
• 兩處藍色字串必須一致，這是 reCAPTCHA 驗證碼介面會顯示的地方
• 綠色字串請改為你的 Site key 字串
• 最後 callback 函數內改為你的提交表單 JS 程式碼

下面提供一個驗證碼的效果，通過驗證後，瀏覽器會彈出 "恭喜你驗證成功" 的小視窗，證明 callback 在驗證成功後才會執行。

四、JS 加密

為了不讓 callback 函數的內容被輕易看到，有幾個方法，但這裡不做太深入的說明，把關鍵字問 Google 大神就會有更詳細的教學：

• 把 callback 放在匿名函數之中，就不會被輕易看到。
• 把全部的 JS 進行加密、混淆，變成一堆亂碼，可增加被破解的難度。

五、調整驗證碼難易度

雖說驗證碼可以阻擋垃圾訊息，但是驗證碼如果太困難，讓正常留言的讀者造成困擾的話，反而得不償失。

WFU 建議可以一開始的時候，將驗證碼難度設為最低，方便讀者留言；當發生大量垃圾留言的時候，再視情況逐步調高難度；等到垃圾留言一陣子都沒出現了，再把難度調回最低。這樣的操作原理，就如同「對抗 Blogger 垃圾留言全紀錄」一樣。



上圖是 Google reCAPTCHA 官網的設定畫面，紅框的區塊就是調整驗證碼難度的地方。

• 選擇「Easiest for user」代表最簡單
• 選擇「Most secure」代表最困難

通常選擇中等，就足以造成大量發垃圾留言的困難了，讀者可以視自己的狀況來機動調整。

更多資訊安全相關文章：

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

協助痞客邦搬家到 Blogger 流程紀錄 + 常見問題解決

January 7, 2017, 8:07 am

≫ Next: 自動備份 Blogger 文章的一些實驗，我找到了最佳方案

≪ Previous: 如何使用 Google reCAPTCHA 防止網頁被留垃圾廣告訊息

$

0

0

近期有一些痞客邦站長找本站協助，要搬家到 Blogger ，主要原因除了痞客邦為人詬病的廣告策略之外，也可參考「Google搜尋結果將調降自動跳出蓋版或插頁廣告的網站網頁排名」。另外則是有人說過 "痞客邦會大小眼，小咖的部落格比較容易不穩"，雖然我聽到的算是小樣本，不過金城老師在「這篇」也有提到痞客邦主機不穩的現象，那麼相信不會空穴來風。

不止 Pixnet，最近也有 Wordpress 讀者詢問 WP 搬到 Blogger 的可行性。如果根據本篇的流程，其實所有的部落格平台，只要有提供匯出文章的功能，那麼要搬到 Blogger 在技術上是可行的，不管圖床、文章連結、搬家後 SEO 等問題都可解決。

但請注意，本篇內容是由 WFU 協助搬家的角度來做紀錄，而非從使用者自行搬家的角度。如果讀者不需要本站的服務，而是想要自行處理所有搬家的問題，建議具有前端工程師的能力、可操作 Blogger API 為前提來閱讀。

(圖片出處: pixabay.com)

一、搬家流程

1. 大致流程

• 從痞客邦後台匯出文章
• 利用「Blogtrans」將匯出檔轉換成 Blogger 可匯入的 XML 格式
• 將檔案進行加工處理(例如繼續閱讀)、或是切割
• 將檔案匯入 Blogger
• 將文章中所有圖片上傳到 Picasa，並置換為新的 Picasa 圖片連結
• 將文章中所有原痞客邦文章連結，置換為 Blogger 文章連結
• 將痞客邦的人氣搬到 Blogger
• 原痞客邦的文章製作搬家畫面，包含網頁版及行動版

2. 需要提供的帳號

• 痞客邦：搬家過程需要操作 Pixnet API，需要痞客邦站長的帳號密碼才有權限操作，建議修改密碼後再提供給本站。
• Blogeer：上傳圖片到 Picasa 需要一個 Google 帳號來建立相簿，建議提供一個新建的臨時帳號，或者原帳號修改密碼後再提供給本站。
• Google Analytics：如果要搬人氣的話，由於 Blogger 沒有顯示文章人氣的功能，只能利用 GA 來當作瀏覽數，那麼還需要額外在 GA 後台設定，授權給本站處理 GA 數據。

以下紀錄整個流程，可能會遇到的問題及解決方法。

二、痞客邦匯出文章

1. 後台操作流程

痞客邦匯出文章的步驟，這篇「從Pixnet到Blogger的搬家步驟」有詳細的圖文說明。


2. Blogtrans 操作

Blogtrans 的基本操作，第 1 點的參考連結也有說明，以下提出一些會出問題的地方。



這個工具可以將留言與文章結合起來，請見上圖，每篇文章前面有 "+"、"-" 符號就代表留言與文章已經結合。

但上圖紅框所標示，選單中的 "結合留言至文章" 選項，這裡程式沒有寫好，導致我們無法知道這個選項的執行狀態，有沒有按過都不會顯示狀態。

因此匯出之前，先目測檢查一下文章前面有沒有 "+"、"-" 符號比較保險。

另外一個問題是，痞客邦的分類若是使用了特殊符號，匯入 Blogger 會產生錯誤。因此最好先檢查痞客邦的分類名稱，若有特殊符號的話，建議執行上圖的 "清除所有文章類別"。

三、Blogger 匯入文章

1. 常見問題

匯入 Blogger 可能會遇到的問題實在太多了，已經整理成這篇「Blogger 搬家匯入文章的各種疑難雜症整理」，重點有這些：

• 處理繼續閱讀失效的問題
• 匯入文章失敗的原因
• 匯入文章後，為何不能發佈
• 一次修改所有文章的字串

2. 切割檔案

匯入檔最麻煩的是，如果要搬家的文章太多，有數千篇，絕對無法匯入 Blogger，那麼預先使用 blogtrans 來分割檔案，這個過程真的是會要人命。

如果需要將匯入檔切割成比較小的檔案，來分批匯入，可向本站提出需求。


3. 匯入檔案

雖本站可代為處理、切割匯入檔，但本站不可代為匯入檔案，否則匯入的文章作者，就會變成 Wayne Fu 了。

因此請按照以下流程及注意事項，將所有切割後的檔案匯入 Blogger：

• Blogger 後台 → 設定 → 其他 → 匯入內容
• 最好保持網路傳輸狀態暢通，讓匯入檔案的視窗畫面停留在螢幕上，不要做其他事，不要執行其他會用到網路的程式，這樣畫面比較不會當掉
• 如果勾選 "自動發佈所有匯入的文章和頁面"，可一次發佈所有文章
• 如果不勾選、要手動發佈文章的話，請注意一天最多只能手動發佈 50 篇
• 如果在意 SEO 的話，可選擇手動發佈，一篇篇手動設定網址後再發佈，可參考「Blogger 只要做到這幾件事, 就能輕鬆加強 SEO 搜尋排名」→「三、文章優化」→「3. 文章網址」
• 1個網站 / 1個帳號/ 1個 IP / 1 天，能上傳的次數是有限的，大約 3~4 次，如果檔案太多個，要分好幾天才能處理完

四、本站處理項目

接下來的項目，都需要操作 Pixnet API 以及 Blogger API，因此只能由本站處理了：

• 將文章中所有圖片上傳到 Picasa，並置換為新的 Picasa 圖片連結；如果文章中的圖沿用痞客邦圖床的話，有可能會破圖。
• 將文章中所有原痞客邦文章連結，置換為 Blogger 文章連結；如果沒做這個動作的話，讀者點擊連結，又會跑回痞客邦的。
• 將痞客邦的人氣搬到 Blogger，與 GA 數據結合
• 原痞客邦的文章製作搬家畫面，包含網頁版及行動版；這個動作可以將流量導到 Blogger，詳情可參考「痞客邦搬家到 Blogger 後，SEO 問題要如何解決？」→「四、痞客邦的處置」

五、精簡自動化流程

以上內容就是本站目前處理痞客邦搬家到 Blogger 的流程，有一些步驟需要使用者或本站手動進行。

其實整個流程，要做到自動化是可以的，那麼就不需提供帳號密碼，可以由使用者自行操作。但是這需要額外開發搬家工具、製作操作介面，是很大的工程。

因為偶爾才會接到需求來幫讀者搬家，所以暫時就依照這樣的流程來進行。如果將來有大量使用者想搬到 Blogger，讓這件事產生經濟效益之後，同時也能減少搬家費用，那麼屆時再來研發了。

更多部落格搬家相關文章：

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

自動備份 Blogger 文章的一些實驗，我找到了最佳方案

January 7, 2017, 5:27 pm

≫ Next: 用 Google Apps Script 操作試算表 (1)製作資料庫 + 寫入資料

≪ Previous: 協助痞客邦搬家到 Blogger 流程紀錄 + 常見問題解決

$

0

0

天有不測風雲，未雨綢繆會比出了意外再四處奔走來得從容。相信部落格站長都同意，"文章" 是最重要的資產，雖然發生意外的機率不高，但只要有一次，絕對會痛不欲生，就像「Blogger 網站突然消失了怎麼辦？(網誌被刪除案例分析)」，或是「Blogger 文章不小心誤刪了怎麼辦？救回及善後技巧整理」。

幾年前曾寫過一篇「部落格文章如何全自動備份__IFTTT 應用」，不過前陣子 IFTTT 大改版，個人覺得介面、功能越來越難用，而且 IFTTT 有時同步會失敗，導致本站有不少文章沒有同步到，只好手動一篇篇補回。

說到底第三方服務終究不能太信任，免費的產品就算伺服器出了錯，我們還真的不能怎麼樣。"相對" 而言，至少 Google 是網路龍頭，自家相關的產品會比其他網路公司值得信賴一些。

最近教 Blogger 新手熟悉環境時，一項項介紹基本功能，意外發現了絕佳的 "自動備份文章" 方案，不但安全、可靠、又簡便，完全可以取代原本的 IFTTT 服務，請看本篇 WFU 的各項實測紀錄。

(圖片出處: pixabay.com)

一、最佳備份管道

在開始之前，需要先建立一些基本觀念，請先參考「部落格文章如何全自動備份__IFTTT 應用」，瞭解以下幾點：

• 備份文章有哪幾種可行的方法
• 最佳的備份管道，是將全部文章，備份到另一個 Blogger 網站。
• 備份到另一個 Blogger 網站的優點在哪裡
• 如何備份舊文章
• 需要建立多種自動備份的管道，避免依賴單一備份方案。

二、Blogger 文章自動備份的密招

在 Blogger 後台 → 設定 → 以電子郵件傳送，如下圖的畫面：



這裡 Blogger 提供了兩個非常實用的功能，可參照圖中 A~B：

• A. 使用電子郵件張貼：將文章內容寄到這個自訂字串的 email 後，網站就會自動發佈文章
• B. 電子郵件張貼至：網站發佈新文章時，會自動寄到這裡填入的 email，相當於將文章備份在這個 email

這兩個功能其實平常用不太到，但因為 WFU 在教導新手時，必須先讓新手瞭解文章備份的重要性，因而解說到這兩個功能時，突然聯想到好幾個點子，可以用來自動備份文章，於是馬上進行測試。

三、測試失敗的方案

第一個想到的點子，流程如下：

• 建立一個新 Blogger 網站，專門用來存放舊網站的文章。
• 在新網站的 A 處，設定一個可以發佈新文章的 email 字串
• 在舊網站的 B 處，填入新網站 A 處的 email

這麼一來，舊網站只要一發佈文章，就會寄 mail 到新網站，自動發佈新文章，這不就達成全自動備份的功能了嗎！

正為這個點子沾沾自喜的時候，沒想到立刻就卡關了──



原來 xxx.xxx@blogger.com 這格式、用來發佈 Blogger 文章的 email 網址，Google 不允許發出這樣的郵件...

雖然一開始就失敗，但這個構想還有許多工具可以當替代品，建立不一樣的備份文章流程，以下繼續看我的實驗。

四、利用 Gmail 自動備份文章

這次改為測試將 Gmail 作為中介站，在舊網站的 B 處，填入 Gmail 的郵件地址：




接著進入這個 Gmail 的設定畫面



在「轉寄和 POP/IMAP」這個分頁，按上圖的「新增轉寄地址」，填入新網站 A 處你設定的 email。

系統會馬上寄一封信要求確認，到新網站可看到一篇新文章：



按下上圖指示的連結，即可開通這個轉寄 email。


回到 Gmail 的設定畫面， 選擇「篩選器和封鎖的地址」這個分頁 → 建立新篩選器

• 寄件者：填入 no-reply@blogger.com
• 主旨：填入 [你的網站標題]

然後按右下角「根據這個搜尋條件建立篩選器 »」




如上圖，勾選「轉寄給：」，並選擇剛剛驗證過的轉寄 email。

最後按下「建立篩選器」即可。

將來只要舊網站發佈新文章，就會啟動這個全自動的備份流程：

舊 Blogger 網站自動發信到 Gmail → 自動轉寄到新網站 → 新網站自動發文

五、利用 FeedBurner 自動備份文章

這次測試將 FeedBurner 作為中介站，首先你的舊網站，必須先在後台 → 版面配置 → 安裝過「透過電子郵件追蹤」這個小工具，可參考「Blogger 讓讀者以 Email 訂閱最新文章」，自訂這個小工具的版面樣式。

以本站為例，在舊網站的這個小工具，填入新網站 A 處你設定的 email：



這個動作的意思就是，用新網站來訂閱 FeedBurner 的文章。

很快的，FeedBurner 系統會馬上寄一封信要求確認，到新網站可看到一篇新文章：



按下上圖指示的連結，FeedBurner 之後就會開始寄文章囉！

將來只要舊網站發佈新文章，就會啟動這個全自動的備份流程：

FeedBurne 自動發信到新網站 → 新網站自動發文

六、兩種方案比較

本篇介紹了兩個可行的 Blogger 全自動備份文章方案，都比 IFTTT 來得可靠，大致比較一下兩者的特點：

1. FeedBurner

• 最推薦使用的方案
• 設定流程短、操作簡單
• 要隔天才會備份新文章
• FeedBurner 不是 Google 的賺錢產品，未來性比較不確定

2. Gmail

• 設定流程長、不熟悉電腦操作可能會設定失敗
• 可當作備案使用
• 可立即備份新文章
• Gmail 應該是與 Google 同進退的產品，不太可能收起來

因此讀者可先使用 FeedBurner 的方法來備份網站文章，將來若有不測時，再改用 Gmail 方案來備份即可。

更多 Blogger 使用技巧：

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

用 Google Apps Script 操作試算表 (1)製作資料庫 + 寫入資料

January 10, 2017, 11:18 pm

≫ Next: 其實 Google 相簿依然是 Picasa，你可能不太相信

≪ Previous: 自動備份 Blogger 文章的一些實驗，我找到了最佳方案

$

0

0

過去曾寫過「利用 Google 試算表當小型資料庫﹍讀取+寫入+搜尋」等 4 篇系列文，簡單列一下該系列使用方案的優缺點：

• 讀取、搜尋資料時，需要發佈或分享試算表，因此適合安全性較低的資料。
• 查詢資料很方便，Google 提供了各種 API，也可使用資料庫 SQL 語法。
• 因為有 API，所以程式比較好寫。

本篇開始的系列文，將使用 Google Apps Script (GAS) 來操作試算表，優缺點則完全相反：

• 不需發佈或分享試算表，適合安全性高的資料。
• 查詢資料不方便，免費的 API 有限制。
• 如超過 API 使用限制、又不想付費，搜尋程式就要自己寫。

因此本系列文，比較適合進階的前端工程師參考，需要具備 HTML / JS / JQUERY 基礎。

(圖片出處: pixabay.com)

一、GAS 運作原理

先簡單說明一下原理，每個 Google 試算表都提供了指令碼(GAS)的功能，可寫 script 來操作讀取、寫入的流程。

Google 更強的地方，是可以將每個試算表的指令碼發佈成網頁應用程式，直接從外部來呼叫程式，也就是從我們的網頁/部落格，直接傳送 get/post 請求給發佈的網頁應用程式，就能控制試算表的讀取、寫入了。

既然讀者是為了安全的資料傳輸，而選擇本系列文的操作方式，那麼本系列文只說明 post 請求的處理方式。

而 GAS 處理 post 請求的函數為 doPost，之後會以此來舉例。

二、製作試算表

因為是寫給進階使用者看的，就不提供詳細的圖文說明了，製作試算表這簡易的過程，用文字應該就可以了：

• 進入「Google Drive」首頁、登入帳號。
• 按「新增」→ 選擇「Google 試算表」
• 填入試算表標題
• 試算表第一列填入自訂的欄位標題
• 工作表名稱建議改用英文，例如 "sheet1"，方便程式操作。

這些步驟很簡單就完成了，效果就像以下這個試算表，本篇將以此來當範例說明：

• https://docs.google.com/spreadsheets/d/106tP9D89pnEgvZTuM3_ahMJRPjCSD3qthth-GEhGMIE/edit?usp=sharing

三、使用 GAS 寫入試算表

製作完試算表後，按「工具」→「指令碼編輯器」，就可以開始寫 Apps Script 了：




上方的標題請修改，紅框標示的區塊，就是執行 Apps Script 指令碼的地方：




可參考以下的範例程式碼：

var ss = SpreadsheetApp.getActiveSpreadsheet(),
sheet1 = ss.getSheetByName("sheet1"); // "sheet1" 改成你的工作表名稱

function doPost(e) {
var para = e.parameter, // 存放 post 所有傳送的參數
method = para.method;

if (method == "write") {
write_data(para);
}
if (method == "read") {
// 這裡放讀取資料的語法 下一篇說明
}

}

function write_data(para) {
var name = para.name,
sex = para.sex,
remark = para.remark;
sheet1.appendRow([name, sex, remark]); // 插入一列新的資料
}
簡單說明一下運作方式：

• doPost 會處理傳過來的 post 請求
• post 傳送的參數會放在 e.parameter，以物件方式儲存
• doPost 為了同時處理讀取、寫入的請求，傳遞的參數 method 的值分成 "write" 或 "read" 來處理
• 參數 method 給予 "write" 值時，執行 write_data 函數，寫入試算表
• 傳送的參數名稱與 para 的屬性名稱要吻合，才能讀到資料；例如參數名稱是 name，就要用 para.name 來讀取
• 最後用內建函數 appendRow 插入一列新資料

為了測試 doPost 能否正常運作，可以執行下面這個測試函數：

function test(){
var e = {
parameter:{
"method": "write",
"name": "Wayne",
"sex": "male",
"remark": "測試寫入功能"
}
}
doPost(e);
}


四、部署為網路應用程式

儲存程式碼後，按「檔案」→「管理版本」，可以進行管理：



填寫備註文字後，按下「儲存新版本」，請記下你要發佈的版本號，如上圖是 "1"。


按下確定後，按「發佈」→「部署為網路應用程式」：



選擇版本號，選擇「任何人，甚至是匿名者」，按「部署」→ 允許所有權限




如上圖，記下自己的網路應用程式網址，就像下面這樣的格式，之後會用到：

https://script.google.com/macros/s/AKfycbxN6sBikcLtDNxzZU1-hrylbGUzJ1qD2yXjZjmiw9ra7hPHPgo/exec

五、用 jQuery 送出 post 請求

熟悉 jQuery 操作的話，可使用 Ajax 來傳送 post 請求，以下是個簡單的範例：

<script src='//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js'></script>
<script>
$.ajax({
type: "post",
data: {
"method": "write",
"name": "Wayne",
"sex": "male",
"remark": "測試寫入功能"
},
url: "https://script.google.com/macros/s/AKfycbxN6sBikcLtDNxzZU1-hrylbGUzJ1qD2yXjZjmiw9ra7hPHPgo/exec" // 填入網路應用程式網址
});
</script>
以上 url 參數紅色網址字串，請改為自己的網路應用程式網址。

method、name、sex、remark 等參數名稱，需要與 GAS 的設定一樣。

想要測試效果，直接執行以上程式碼，重整本篇文章頁面，就可看到資料寫入下面這個範例試算表了：

六、用表單送出 post 請求

除了用 JS 控制，更常見的是使用表單傳送資料，以下是一個簡單的 form 表格範例 HTML 碼，用來輸入要寫入試算表的資料：

<form action="https://script.google.com/macros/s/AKfycbxN6sBikcLtDNxzZU1-hrylbGUzJ1qD2yXjZjmiw9ra7hPHPgo/exec" method="post" target="hidden_iframe">
<input type="hidden" name="method" value="write" />
<input type="text" name="name" placeholder="填入稱謂" title="填入稱謂" /><br/>
<input type="text" name="sex" placeholder="填入性別" title="填入性別" /><br/>
<input type="text" name="remark" placeholder="填入註解" title="填入註解" /><br/>
<input type="submit" value="提交" />
</form>
以上紅字的網址參數請改為自己的網路應用程式網址。

method、name、sex、remark 等參數名稱，需要與 GAS 的設定一樣。


效果類似下面這個表格，可自行測試。輸入資料後，重整本篇文章頁面，就可看到資料寫入前面的範例試算表了。

看完 GAS 寫入試算表資料庫的教學後，下一篇要說明的是讀取試算表的功能。

更多 Google Apps Script 相關文章：

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

其實 Google 相簿依然是 Picasa，你可能不太相信

January 18, 2017, 4:41 am

≫ Next: 取得 Google 相簿圖片外連更好的方法﹍轉換為 Picasa 連結

≪ Previous: 用 Google Apps Script 操作試算表 (1)製作資料庫 + 寫入資料

$

0

0

自從「Google 宣布關閉 Picasa」之後，這段期間以來，每隔一陣子就需要跟案主、讀者安撫或解釋，是否該繼續使用 Picasa 圖床，要不要擔心 Google 把 Picasa 收起來。

說真的，比較需要擔心的反而是 Flickr 圖床的免費用戶，因為「Yahoo 被 Verizon 收購」後，部分業務將改名為 "Altaba"，而「Flickr 則歸入 Verizon 名下」，未來動向尚不明朗。相對來說，比較需要考慮搬圖床的反而會是 Flickr 用戶，也許搬到 Picasa 還比較安全一些。

前陣子因為「協助痞客邦搬家到 Blogger」，需要把其他圖床搬到 Picasa，所以研究了 Picasa API 的操作，最終瞭解到 "Google 相簿" (Google Photo) 與 "Picasa" 的關聯性，結論正是本篇的標題──

• Google Photo 就是 Picasa

相信以下內容足以回答所有對 Picasa 有疑惑的讀者，不用擔心 Google Photo 與 Picasa 要如何抉擇的問題。

一、選擇 Google 相簿或 Picasa？

案例 1：縮圖異常

大約半年多前的一個案例，案主的 Blogger 首頁文章縮圖、或側邊欄小工具縮圖，看起來總是糊糊的，原來是圖片改用 Google+ 相簿(Google Photo 的前身)，導致原本處理縮圖的程式無法處理。

WFU 告訴案主只要圖片一律從後台上傳，也就是使用 Picasa 圖床，程式就不會有問題了。但她對 Google 宣布 Picasa 關閉一事非常擔心，就算解釋了半天，也讓她看了我撰寫的 Picasa 相關文章，依然無法放心使用 Picasa。

沒辦法人微言輕，那時候還沒有本篇的研究成果，只好客隨主便了。


案例 2：讀不到圖片

幾個月前的一個架站案件，需要客戶提供圖片放在 Blogger 網頁上，結果發現她給我的圖片是看不到的，但她自己卻是看得到。客戶當然不相信這樣的事，於是請她使用 Chrome 無痕模式，就看到叉燒包了。

這是很慘的一件事，代表所有的訪客其實都看不到圖片。檢查了圖片網址，原來是使用了 Google Photo 的連結，那麼想必是權限設定出了問題，不小心設成私人連結。

但請她自行改成公開連結後，依然是看不到圖片，搞半天仍是不知道如何讓圖片能夠被看到，我的結論大概是，Google Photo 的權限設計可能不夠親民，要拿來當圖床會有一定的風險，因為使用者就算權限設錯了，自己是無法察覺的。

問案主為何使用 Google Photo 的連結，她的回答一樣是聽說 Picasa 關了，所以將來盡量不用 Picasa 會比較安全一些。

自然我又得花時間來解釋這件事，不過倒是開始覺得，Google 的確達到他的目的了，Google 成功地讓很多站長不敢用 Picasa 圖床。

二、Google 相簿的 RSS Feed

好的，瞭解不使用 Picasa 當圖床會產生的問題後，開始來說說研究過程了。

操作 Picasa API 需要一些帳號的基本資料，例如 "帳號 ID"、"相簿 ID"。WFU 找到了這個工具網站「Google Photos RSSerator」，登入並授權後，即可取得 Google Photo 的帳號 ID 及 相簿 ID：

• https://casper.baghuis.nl/google-photos/Google-Photos-RSSerator.html

如上圖，登入後可取得所有相簿的列表，左邊的紅框就是你的帳號 ID，右邊紅框是個別相簿的 ID。

這個網頁直接對著某個相簿的 "Public" 按鈕按下去，可以將該相簿設定為「公開」狀態，但任何資料或狀態變更，FEED 都需要一段時間才會更新。

有了這兩組 ID 字串，就可取得該相簿的所有圖片資料。根據這篇「How to get a Google Photos RSS feed」，Google Photo 的 FEED 網址格式如下：

http://photos.googleapis.com/data/feed/api/user/帳號 ID/albumid/相簿 ID

如果你的相簿設定為公開，那麼這個 FEED 網址就能被開啟。以我的這個「CC0 免費圖庫搜尋引擎」相簿為例，Google Photo 的 FEED 網址如下：

• http://photos.googleapis.com/data/feed/api/user/108990319112241335296/albumid/6133799070585847873

這個相簿只有一張圖片而已("wfublog-logo-8abeb7-adverse.png")，有興趣點進這個網址的話，搜尋 "picasa" 字串會看到許多相關網址喔~

另外，在這個 Google Photo Feed 網址可找到這張圖片的網址為：

https://lh3.googleusercontent.com/-HMdsE9lr2f0/WHm48DSHCuI/AAAAAAAAO7s/GjwkPTnHGqke59fCSrE0__CGKK1c6nf7wCHM/wfublog-logo-8abeb7-adverse.png
熟悉 Picasa 的讀者應該很眼熟，其實這就是 Picasa 圖床的網址格式。

為何 Google Photo 的 Feed 資料裡面，沒有 Google Photo 格式的圖片網址，反而只有 Picasa 格式的圖片網址呢？

三、Picasa 的 RSS Feed

接下來我們來看看 Picasa 的 RSS FEED，會有什麼樣的發現。從前面介紹的「Google Photos RSSerator」網站，每個相簿的最右邊有一欄 "FEED"，很意外的，那個 FEED 網址，竟然不是 Google Photo 的，反而是 Picasa 的，格式如下：

https://picasaweb.google.com/data/feed/base/user/帳號 ID/albumid/相簿 ID

同樣用我的「CC0 免費圖庫搜尋引擎」相簿來舉例，Picasa 的 FEED 網址如下：

• https://picasaweb.google.com/data/feed/base/user/108990319112241335296/albumid/6133799070585847873

比較兩個 FEED 內容，你會發現：

• 除了少部分的標籤格式不同，主要內容大同小異。
• 同一張圖片的網址可能都一樣(有時看不一樣)，都是 Picasa 圖床的網址架構。

四、Google Photo 與 Picasa 的關聯

由於這兩個地方的 FEED 會有同樣的圖片資料，那麼是否 Google Photo 會將資料自動同步到 Picasa？我又繼續做實驗。

在 Google Photo 建立新的相簿、丟入新的圖片後，利用「Google Photos RSSerator」將該相簿設定為公開，使用本篇的方式進入兩處的 FEED 網址，結果跟前面的實驗結果一樣，兩處都可看到一樣的圖片資料。代表 Google Photo 的相簿建立後，Picasa 相簿也會有一份鏡射資料。

那麼我得到的結論大致是這樣：

• Google Photo 多了一些 Picasa 沒有的功能，那麼部分 FEED 格式也必須不一樣
• 由於大部分 FEED 內容都相同，Google Photo 比較像 Picasa 加強版，主要功能還是得靠 Picasa 的機制來運作
• 所以 Google Photo 看似是功能更多、更強大的另一個圖床，但其實骨子裡就是 Picasa

五、舊瓶新裝的 Google Photo

因此，在 Google Photo 的華麗外型之下，引擎依舊是 Picasa，沒有了這具引擎，Google Photo 跑車是上不了路的。

Blogger 後台上傳的圖片，不會出現在 Google Photo，但會存放在 Picasa 圖床，可以想像成 Blogger 與 Google Photo 是共用同一款的引擎，只不過 Google Photo 的外殼包裝比較美觀。

那麼我想，看到這裡，應該沒有所謂是否需要把圖片搬到 Google Photo 放，會比較保險、安全、長久，這樣的問題了，因為所有的圖片，都是放在 Picasa！

六、Google 的意圖為何？

前面有提到，我認為 Google 成功地讓很多站長不敢用 Picasa 圖床，那麼為何如此呢？

也許如同「Google Drive 關閉外連」事件，這兩件事是一體的兩面，都能有效減少圖片外連的流量，算是 Google 的節流措施，減少伺服器的資源使用。

由於這個主題也很龐大，下一篇會接續探討下去。

• 取得 Google 相簿圖片外連更好的方法﹍轉換為 Picasa 連結

更多 Picasa 相關文章：

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

取得 Google 相簿圖片外連更好的方法﹍轉換為 Picasa 連結

January 18, 2017, 4:36 am

≫ Next: Facebook 留言框最簡單快速的安裝方式 + 常見問題整理

≪ Previous: 其實 Google 相簿依然是 Picasa，你可能不太相信

$

0

0

在所有圖床之中，Google 相簿(Google Photo) 的圖片連結，可說是最詭異的一個，從網址字串你很難辨識出這是什麼，沒有路徑結構、沒有檔名，字元數多到相當於一篇小品文章。這樣的連結型態，相當不適合用來當圖片網址，也不利於 SEO。

在上一篇「其實 Google 相簿依然是 Picasa」，我們知道了 Google Photo 只是批上外皮的 Picasa，在 Google 相簿的 RSS FEED 資料之中，其實全部都是 Picasa 連結。

那麼本篇將會介紹一個途徑，可以脫掉 Google Photo 的外皮，直接取得 Picasa 連結。

一、為何 Google 相簿的連結搞這麼複雜？

1. 原始相簿圖片連結

首先來看如何取得 Google Photo 的圖片連結，以我的這個「CC0 免費圖庫搜尋引擎」相簿為例，點開圖片後，對著圖片按右鍵 → 複製圖片網址：



取得的圖片外連網址如下：

https://lh3.googleusercontent.com/Tg3sAZARB_8LhJfdn9hxQ1wwx05ejX0q3R2wUJXPXPlwjhHwr3yjNzBGq6RxwHpoKBnGiJW0g9jTjY6B8mDjItzSjJfdSAcXr1vMAmslI-EJ0F_Poiv3Nbg7U30QTvupVhVxTOf5aFG_7j5rEGCNIVnX_oBuwdQcEax0z-QMf_PEupWWpzzZmCjH5r5utMs5P8O6Ifv7b8gn8O2HHpTI2ZTBpZ-cdOTenVWgv3VHrbAgqBEM_m0MvV3OYdSXYdeYMpR1tm40rTmiDwWYDLnW-xRYVUtNpepKTxStK7N3kF1uCqhyrhIiyNHZV3ScTRVvTKfT7Uwz8H8QmOqoMoMRNip1Sexyl8I6KHz6sYEHBz_8jevwJV1Z9Wb8XToREhWHhT5yVkZDyJAQTxLHYyfjuHbB1JYQj60wlt2PJa9HZ5CEbvWxKbHWyqzuA2z_uekiuzmTUBLWTT48-EAGZmHIiedmok5tGjnf1LWC2yS61VgwFQHIb2CsABeKAtgEVGF-KHcrwgOH8ODHLWG_HD50Inmmr1QoHr2Ts5wo56ag7pEgoz7xEXY8IGXudUfqGsdYJM2P6rvHIob2PGsivmxjeJuHfSGZHAkaWZNLHzku7JHHEdEQ_1sQ=s200-no
這個連結雖然長得奇怪，不過是可以用來放在網頁上顯示圖片的。


2. Google 相簿圖片連結的缺點

這麼長的網址形式不但沒有任何優點、看不出用途，而且缺點很多：

• 沒有檔名，代表檔名無法被索引，所以較難獲得搜尋而來的流量。
• 字串太長，導致 HTML 碼難以閱讀。
• 圖片數量多時，也讓網頁的 HTML 內容大大膨脹，很可能導致該網頁的重要內容無法被索引，因為機器人爬網頁時，每個網頁只能索引一定的位元數。

3. Google 的意圖

以上都是不利於 SEO 的因素，而我推測這也是 Google 的精心設計，讓 Google Photo 的圖片連結擁有不利於 SEO 的特質，其目的就是「其實 Google 相簿依然是 Picasa」→「六、Google 的意圖為何？」提到的：

如同「Google Drive 關閉外連」事件，這兩件事是一體的兩面，都能有效減少圖片外連的流量，算是 Google 的節流措施，減少伺服器的資源使用。

在意 SEO 的站長就不會喜歡使用 Google 相簿當圖片外連，那麼 Google 讓使用者自主性地不使用 Google 相簿當圖床，順勢節省了伺服器的流量與頻寬。

既然我們知道了 Google Photo 的 FEED 仍然存放 Picasa 外連，那麼有沒有辦法可以將原本冗長的外連字串，轉為 Picasa 格式的網址字串呢？

二、使用 Blogger 文章編輯器

這是 Blogger 使用者專有的福利，能夠從 Blogger 後台做到這件事。如果你還沒有 Blogger 網站的話，那麼就到「blogger.com」 申請一個新網站，再繼續以下的操作：



Blogger 後台 → 按「新文章」→ 切換到「HTML」模式 → 按「插入圖片」按鈕 (如上圖紅框)




點選「Google Album Archive 中的相片」這個分頁，除了可看到 Blogger 網誌的相簿名稱，也會列出所有 Google Photo 中的相簿。

換言之，在這個地方你可以看到所有存放在 Google 的圖片，看到比 Google 相簿更多的內容，因為 Google 相簿看不到 Blogger 上傳的圖片。

接著選擇任一 Google Photo 的圖片，上傳選項記得選 "原始大小"。




成功的話，會出現像上圖的 HTML 碼，反白的部分，也就是 img 標籤中 src 屬性的字串，就是轉換過來的 Picasa 圖片網址字串。

上圖的 Picasa 網址字串如下：

https://3.bp.blogspot.com/-dt7tHb2_GC0/WHxts9HJfyI/AAAAAAAAO9Y/AiM2gsxhfB0anLZ4kYqYr6-eEwOgxNGMACPcB/s1600/wfublog-logo-8abeb7-adverse.png
可以試著跟前面同一張的 Google 相簿圖片連結比對一下，貼到瀏覽器看看，是不是顯示一樣的圖片。

使用這樣格式的 Picasa 圖片外連，對網頁的 SEO 就不會造成傷害了。

三、如何快速找出你要的圖片

雖然 Blogger 文章編輯器藏著這麼棒的轉換網址功能，但卻未必好用，因為當圖片數多的時候，保證使用滑鼠會捲到讓手指抽筋。

「Google 相簿官網」的上方有個搜尋框，你可以搜尋相簿名稱、圖檔名，或是參考 「Google 相簿的 16 招搜尋照片密技」。



回到 Blogger 後台的畫面，上圖這裡也有個搜尋框，看似貼心，但其實只做了一半，這個搜尋框無法搜尋所有的圖片。

基本上這個搜尋框是直接複製「Google 相簿的搜尋框」功能，WFU 測試的結果，它只能搜尋 Google 相簿而已，所有 Blogger 上傳的圖片都搜尋不到！

另外補充一點，Google 相簿上傳新圖片後，由於 FEED 一段時間才會更新，因此搜尋功能不會馬上就能搜尋到新圖片，有可能要等幾個小時。

四、如何搜尋 Blogger 上傳的圖片

對於 Blogger 使用者而言，每次要找圖片都得用滑鼠一直捲，這樣也不是辦法，有沒有可能使用搜尋的方式來找到圖片呢？

關於這一點，有一套流程可以做到這件事，可參考這篇「Picasa 關閉之後, Blogger 要如何管理圖片？」，先設定將 Google 相簿的圖片同步到 Google Drive 後，就可以利用 Google Drive 的搜尋功能，以圖片檔名進行搜索了。

然後這件事要儘早做，因為開始同步後的圖片才能在 Google Drive 搜尋到，同步之前的圖片就沒辦法了！

五、後記

本篇介紹的方法大概可以稱做 "堪用"，操作起來速度不會快，不過偶爾要處理幾張圖時，是絕對沒問題的。

原本想說既然知道如何操作 Picasa API 了，乾脆來寫個圖片網址的轉換工具。不過轉念一想，Google 特地把 Google Photo 的連結搞成這樣，就是不想讓使用者輕易地使用圖片外連，好節省伺服器的流量。

那麼這樣的轉換器寫下去，說不定 Google 只好祭出其他的強硬手段了。然後其實我也不常使用 Google 相簿，所以就打消了這個念頭囉~

更多 Picasa 相關文章：

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

Facebook 留言框最簡單快速的安裝方式 + 常見問題整理

January 22, 2017, 8:07 pm

≫ Next: PTT 停止 RSS 功能後，如何繼續訂閱個版文章﹍FEED43 自製 RSS 教學

≪ Previous: 取得 Google 相簿圖片外連更好的方法﹍轉換為 Picasa 連結

$

0

0

「FB 留言外掛程式」是協助架站時，安裝率滿高的一個工具。過去已經寫過「Facebook 留言板安裝懶人包」，由於 FB API 改版多次，加上現在的 API 版本已經支援 RWD，決定將安裝程式碼改得更為精簡，比舊版的 code 少了一半以上，本篇可以視為「FB 留言框安裝懶人包 V2」。

大體來說，部落格站長要安裝 FB 留言板是很困擾的事，依照官方安裝教學很難成功，因為官方程式碼是針對單篇文章網址，那麼每篇文章要怎麼出現留言板就很麻煩。就算有辦法讓每篇文章都出現留言框，但有人留言後又收不到通知，等於跟沒裝一樣。

因此本篇除了提供最簡單的安裝方式，也會用 FAQ 的方式，逐一回答常見的問題如何解決。

點此看範例網頁

一、安裝懶人包

1. 部落格平台

基本上，台灣的免費部落格平台因為無法修改範本，所以無法管理留言(也收不到留言通知)。本篇的安裝懶人包，只適合 Blogger、WP 等可以修改範本的平台。

而無法修改範本的部落格平台，請參考「FB留言板安裝懶人包__留言email通知」來安裝這個版本。


2. 安裝程式碼

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

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


如果是 Blogger 平台的話，直接儲存後就可使用了，FB 留言框會自動出現在 Blogger 官方留言板上方。

非 Blogger 平台，可刪除 B、V 這兩行。

如果想放在別的位置，以下參數修改請參照以上程式碼行號：

C：藍色字串 "light" 代表淺色背景；若網站為深色背景，可改為 "dark"。

C：藍色數字 5 代表顯示 5 則留言，可改為自訂的留言數量。

G：紅色字串 "comments" 為 Blogger 官方留言板的 HTML 元素 ID 字串。若 FB 留言板要出現在別的位置，請更改為其他區塊的 ID 字串。如果別的區塊沒有 ID、而是 Class 的話，因以上原始碼沒有壓縮，請自行修改程式碼套用。

H：目前的 FB API 版本為 2.8，將來若 2.8 版被淘汰時，可將此數字改為更新的版本。


想要先看安裝後的效果，可前往展示頁面：

點此看範例網頁

二、如何管理留言？

安裝完 FB 留言框後，允許修改部落格範本的站長(Blogger、WP 等平台)，請繼續以下流程來設定，就可以管理留言、以及收到留言通知。

1. 取得 FB 管理者 ID

進入這個網址：http://findmyfacebookid.com

輸入 Facebook 帳號的網址後，按下「Lookup Numeric ID」即可取得管理者 ID。


2. 取得 FB 應用程式 ID

參考這篇教學「申請 Facebook 應用程式 APP ID 流程」即可取得。


3. 修改範本

在範本中找到 <head>字串，在後面一行插入以下程式碼：

<meta content='100006369xxxxxx' property='fb:admins'/>
<meta content='457090704xxxxxx' property='fb:app_id'/>
第一行的紅色字串請改為為自己的管理者 ID。
第二行的紅色字串請改為為自己的應用程式 ID。

儲存後即完成所有設定，如果範本中已經安裝過這兩行，就不要再重複安裝。




如果都設定正確的話，以後 FB 留言框就會出現「審核工具」的按鈕，如上圖紅框的位置。

三、如何收到留言通知？

如果以上流程都進行順利的話，只要有人使用網站的 FB 留言框留言，那麼當你進入 FB 網站時，就會收到留言通知，就像下圖這樣：




如果一直都沒有收到留言通知的話，可以試著檢查以下幾點：

1. FB 留言工具的設定頁面

進入以下網址：

• https://developers.facebook.com/tools/comments/

如上圖，選擇你之前建立(或管理)的應用程式名稱，例如我為本站建立的名稱為 "WFU BLOG"。




借用之前使用的圖片，上圖的「啟用通知」檢查是否為 "開啟"。


2. FB 偵錯工具

設定完「二、如何管理留言？」的流程後，FB 並不會馬上更新每個網頁的快取，因此短時間之內可能無法收到留言通知。

可參考「分享文章到 Facebook 的 Meta 設定」→「Q7：更改後 FB 還是顯示原來的資訊？」，利用 FB 偵錯工具，檢查我們設定的 Meta 資訊(管理者 ID 及 App ID)，是否已經被 FB 收錄。

如果快取資料沒有抓到正確的 管理者 ID 及 App ID，那麼強制更新快取，就可以收到留言通知了。

四、如何收到即時的留言通知？

所謂的留言通知，是指進入 FB 網站後，才能看到留言訊息的通知。那麼不常上 FB 網站的人，不就無法即時知道何時有人用 FB 留言框留言了嗎？

很多公司或店家會在網站放 FB 留言框，能夠越快收到 FB 留言訊息，代表越快有成交機會，因此即時的 FB 留言通知會有特定市場的需求性。

如果不排斥裝各種 APP 或外掛的話，可參考「安裝各種平台的 Messenger 即時通」，在不同的瀏覽器、不同的行動裝置安裝 FB 即時通 APP，不用進入 FB 網站就能收到通知。

如果留言需要即時的 Email 通知，可安裝「FB留言板安裝懶人包__留言email通知」這個版本。

五、為何無法審查留言？

走完本篇的安裝流程後，有可能會發現 FB 留言板無法出現「審核工具」的功能。

這個狀況跟無法收到留言通知的原因類似，可能是 FB 尚未更新快取的原因。那麼可依照「三、如何收到留言通知？」→「2. FB 偵錯工具」的步驟進行，強制更新 FB 快取即可。

六、如何讓留言與 FB 粉絲團同步？

這也是詢問率很高的問題，不少站長都希望讀者使用 FB 留言板時，能夠自動將留言同步到 FB 粉絲專頁。

可參考這篇「讓 Facebook 留言框與粉絲團的留言能夠即時同步」的步驟進行，試試看能否成功。


以上大致整理了 FB 留言板使用上常見的問題，日後若還有其他實用的 FAQ，會在本文持續更新。

更多 Facebook 相關文章：

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

---

PTT 停止 RSS 功能後，如何繼續訂閱個版文章﹍FEED43 自製 RSS 教學

January 30, 2017, 7:16 pm

≫ Next: 用 Google Apps Script 操作試算表 (2)搜尋、讀取資料庫

≪ Previous: Facebook 留言框最簡單快速的安裝方式 + 常見問題整理

$

0

0

除了使用「RSS 閱讀器」(例如 Feedly) 來訂閱各種網站的最新文章，PTT 的個版也是非常重要資訊來源。例如 WFU 會訂閱 Web_Design(網頁設計) 版，可以了解這個領域的同好最近有什麼新訊息、或討論哪些問題。

訂閱 PTT 個版已經好幾年了，但去年 12 月下旬，突然間發現我的 RSS 閱讀器，從 PTT 而來的訂閱源不會新增文章，這下麻煩大了，因為我訂閱了好幾個版，不能從 RSS 閱讀器看討論串是很浪費時間的一件事。

到 PTT 站務相關的版查了一下，不少人問這件事，但站方完全不理會，推測是為了節省伺服器資源，乾脆關閉這項功能。

沒辦法，免費的 BBS 服務我們是沒什麼立場要求什麼，只好研究一下怎麼自製 RSS 了，有需要的讀者，請按本篇教學進行，就能重新訂閱所有你想要的個版了。

以下先簡單介紹一下訂閱 PTT 的優點，想直接製作 RSS 請跳至「二、免費線上服務 FEED43」。

一、訂閱 PTT 的好處

首先花一點篇幅介紹一下這個小眾、幾乎快失傳、但威力強大的聚合資訊藝術。

RSS 閱讀器的最大優點是，不用進入個別網站、BBS，就能在同一個地方，看到所有網站的最新內容。同時，快速掃瞄、跳過沒興趣的標題，也能節省大量時間。

有的讀者可能認為 PTT 不提供 RSS 沒什麼了不起，把喜歡的個版加入「我的最愛」，進 PTT 後一個個點進去看就好了，花不了多少時間。

這樣的說法不能說不對，應該說這是階段性的現象。當訂閱來源數量不大時，那麼進入 PTT、跟進入 RSS 閱讀器的時間，可能差距不大。

WFU 訂閱的 RSS 來源有幾百個，PTT 的幾個看版只是其中一小部分。為了知道 PTT 個版有沒有新文章，必須另外花登入的時間去一個個檢查。

當 RSS 閱讀器將所有資訊聚合在一起後，我在閱讀最新文章時，在點進內容之前，不一定會知道這篇是出自 PTT，也就是說我省下了例行性的 PTT 登入登出動作，以及檢查是否有新文章的動作，長久下來是非常可觀的時間。

瞭解 RSS 閱讀器的優點後，最後推薦使用行動裝置來看 RSS，例如 Android 上的「gReader」，某些沒有全文輸出的 RSS，他可以直接讀取網頁內容來看全文，所以訂閱 PTT 也可看到全文。

對於有使用 Evernote 的讀者，參考這篇「Android 裝置擷取 RSS 資料」，可以即時把 gReader 的文章轉到 Evernote。

二、免費線上服務 FEED43

「FEED43」是個老牌的免費服務，可以將任何網頁內容轉成 RSS FEED，只不過操作上可能要有一點 HTML 語法的基礎，比較能知道到底在做什麼。

因為是老牌子，網路上已經有很多教學文章，關於介紹、操作、說明，請直接參考這篇「Feed43 - RSS Feed產生器」就好，本篇不再詳細解說原理。

三、自製 PTT 個版 RSS

由於 PTT 每個版的網頁格式是一樣的，因此只要能設定一個版，其他的就能舉一反三，請按以下步驟：

1. 找出網頁版網址

首先找到看板的英文名稱，例如「網頁設計」版的英文版名是 "Web_Design"。

那麼這個板的網頁版網址就會是：

• https://www.ptt.cc/bbs/Web_Design/index.html

把以上網址的 "Web_Design" 字串置換成你的看板英文名稱，測試一下是否能進入網頁版畫面，成功的話，就可以進入下個步驟。


2. FEED43 註冊 + 建立 FEED

請先完成註冊的流程，除了可以管理自己的 FEED，RSS 更新時間也會比較快。



接著按下上圖紅框的「Create your own feed」，開始自製 RSS FEED。


3. 操作流程



A：在這裡填入 PTT 個版的網頁版網址

B：語系請輸入 uft-8

C：按下「Reload」，會載入這個頁面。





在上圖紅框處，貼上以下內容：

<div class="title">
{*}
<a href="{%}">{%}</a>
{*}
</div>
{*}
<div class="date">{%}</div>
{*}
<div class="author">{%}</div>

按右下角的「Extract」，會篩出我們需要的資訊。




紅框上方那個區塊的內容會自動產生，有需要可自行調整。

紅框之中的區塊：

• Item Title Template*: → 填入 {%2}
• Item Link Template*: → 填入 {%1}
• Item Content Template*: → 可隨意填，也可如圖填入 "日期：{%3} 作者：{%4}"

按右下角「Preview」




最後產生預覽畫面，將紅框中的連結複製起來，使用你的 RSS 閱讀器訂閱這個 RSS 連結即可。

四、補充

根據本篇流程產生的 RSS 內容，跟原本 PTT 站方提供的 RSS 相比，少了摘要內容。但其實沒什麼差別，因為站方原本提供的摘要字數少得可憐，有跟沒有是一樣的。總之，RSS 最重要的文章連結能夠取得就行了。

建議參考「一、訂閱 PTT 的好處」推薦的使用方式，例如安裝 Android 裝置的 gReader 這個 APP，就能取得每篇文章的全文輸出內容，包含所有推噓文，閱讀起來會比較方便。

更多 PTT 使用相關技巧：

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

用 Google Apps Script 操作試算表 (2)搜尋、讀取資料庫

February 4, 2017, 8:07 pm

≫ Next: Windows 筆電投影(追劇)心得﹍微軟無線顯示轉接器

≪ Previous: PTT 停止 RSS 功能後，如何繼續訂閱個版文章﹍FEED43 自製 RSS 教學

$

0

0

接續上一篇「用 Google Apps Script 操作試算表 (1)製作資料庫 + 寫入資料」的流程後，本篇來看如何用 Google Apps Script (GAS) 搜尋、讀取寫入試算表的資料。

(圖片出處: pixabay.com)

一、使用 GAS 搜尋試算表的方案

1. 試算表內建函數

很不幸的，試算表沒有內建任何跟搜尋有關的 GAS 函數，我想這無可厚非，畢竟是免費的服務，如果把搜尋功能做得太強，那會把 Google 自己的伺服器搞得累死，還沒有錢賺。

不得已，關於利用 GAS 來搜尋試算表的資料，就要看個人的功力了，多半只能每次都讀取整個試算表的資料，然後慢慢篩出自己要的資訊來。


2. BigQuery

另外一個選擇是引用 Google 提供的「BigQuery API」，那麼就可以使用 SQL 語法來查詢試算表資料，程式寫起來比較方便。

不過 BigQuery 在免費使用下是有每日配額限制的，可參考官網「Quota Policy」，可以想成每日免費查詢 1000 次(細節以官網為準)。

在使用量不大的情況下，引用 BigQuery API 是 ok 的，那麼可參考這篇「Big Query And Google Spreadsheet Integration」的教學來操作。

如果使用量非常大的話，那麼我相信你的服務是可以賺錢的，花點錢提升 Google 的配額限制，是應該的、且划算的。

二、使用 GAS 讀取試算表

本篇在免費的前提下，未採用 BigQuery 的查詢方式(避免偶爾的流量爆衝而導致網頁程式失效)，改為提供一個簡易的查詢範例。

1. read_data 函數

上一篇的 GAS 程式碼範例，寫了兩個函數：doPost 及 write_data。我們可以接在原本的程式碼後面，新增一個 read_data 函數，內容如下：

function read_data(para) {
var query = para.query,
rowLength = sheet1.getLastRow() - 1, // 列數
columnLength = sheet1.getLastColumn(), // 欄數
allData = sheet1.getRange(2, 1, rowLength, columnLength).getValues(), // 取得所有儲存格資料
queryData, queryMessage, i;

for (i in allData) {
if (allData[i].indexOf(query) > -1) {
queryData = allData[i];
break;
}
}

queryMessage = "稱謂：" + queryData[1] + " 性別：" + queryData[2] + " 註解：" + queryData[3]; // 回傳字串
return ContentService.createTextOutput(queryMessage);
}
簡單說明一下運作方式：

• 利用試算表內建函數找出儲存格的欄數、列數
• 撈出所有儲存格資料
• 逐列比對，如果某列包含了要搜尋的字串，取出該列所有資料
• 返回處理過的字串，包含該列儲存格資料
• 字串要怎麼處理，請自行修改程式碼
• ContentService.createTextOutput() 的使用方法，後面會說明。

2. 呼叫 read_data

接著是呼叫 read_data 這個函數，以下是修改後的 doPost 函數內容：

function doPost(e) {
var para = e.parameter, // 存放 post 所有傳送的參數
method = para.method;

if (method == "write") {
write_data(para);
}
if (method == "read") {
return read_data(para);
}

}
其實就是新增紅字這一行就可以了，這行程式碼會回應 post 請求，送出查詢結果的字串，返回網頁端。

接下來的步驟請參考「上一篇」→「四、部署為網路應用程式」的流程，將新的 GAS 版本發佈為網路應用程式。

三、用 jQuery 送出 post 請求

以下範例程式碼，用 jQuery 的 Ajax 方法來傳送 post 請求，查詢範例試算表中，包含儲存格有 "Mary" 字串這一列的資料：

<script src='//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js'></script>
<script>
$.ajax({
type: "post",
data: {
"method": "read",
"query": "Mary"
},
url: "https://script.google.com/macros/s/AKfycbxN6sBikcLtDNxzZU1-hrylbGUzJ1qD2yXjZjmiw9ra7hPHPgo/exec", // 填入網路應用程式網址
success: function (e) {
alert(e);
}
});
</script>
以上 url 參數紅色網址字串，請改為自己的網路應用程式網址。

method、query 等參數名稱，需要與 GAS 的設定一樣。

想要測試效果，直接執行以上程式碼即可，查詢成功時，瀏覽器會 alert 訊息，也就是前面 GAS 所設定返回的字串訊息，就像下面這個範例試算表中，"Mary" 那一行的資料。

四、讀取的資料型態

現在來說明 ContentService.createTextOutput() 這個內建函數要如何使用。

1. 回傳字串：回傳的資料如果需要是 "字串" 型態的話，使用預設的語法 ContentService.createTextOutput(字串) 來處理即可。

2. 回傳其他型態的資料：實際上，大部分會需要回傳的資料型態，往往不是字串這麼簡單。官網的說明文件「Content Service」提供了很詳細的操作說明，例如 RSS、JSONP 等。

這裡只舉例常見的 JSON 物件，對應的回傳語法：

ContentService.createTextOutput(JSON.stringify(這裡是整理好的 JSON 物件)).setMimeType(ContentService.MimeType.JSON);

以上 GAS 最重要的讀取、搜尋、寫入功能，都已說明完畢，下一篇會說明其他處理試算表要注意的地方。

用 Google Apps Script 操作試算表系列文章：

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

Windows 筆電投影(追劇)心得﹍微軟無線顯示轉接器

February 7, 2017, 7:19 pm

≫ Next: 讓每個網頁都能自動調整寬度，省下手動縮放的麻煩﹍Chrome 套件 Zoomy

≪ Previous: 用 Google Apps Script 操作試算表 (2)搜尋、讀取資料庫

$

0

0

現在網路有不少影音平台可以線上追電視劇、歐美影集，不必侷限於第四台的播出時刻，也不必浪費時間看廣告，還可以一次追完好幾季。比起過去為了等一集，常常得苦苦等上一個星期，真是太幸福了。

然而網路雖然方便，但無論是盯著電腦螢幕、或是行動裝置，強烈的背光遲早會讓眼睛、健康受到嚴重傷害，因此我開始蒐集資訊，研究從筆電將畫面投影到電視的方法，就能大大減輕眼睛的負擔。

前陣子為了暌違三年的「福爾摩斯第四季」，決定購買「微軟無線顯示轉接器(wireless display adapter)」來線上觀看，以下記錄我抉擇的過程以及使用心得。

(圖片出處: microsoft.com)

一、投影配備比較

雖然坊間有許多一千元以下的選擇，淘寶也可以找到不少，不過為了節省徵信的時間，只比較了兩個較為知名的產品：

1. Chromecast

Google 的 Chromecast 的售價約 NT. 1350，他的投影原理比較不一樣，需要有 Wifi 環境才能使用，例如播放 Youtube 影片時，並非由筆電或行動裝置來播放，來是下指令給 Chromecast，在 Chromecast 裝置上直接播放，所以裝置比較省電，無線傳輸的速度不會受到影響。

在播放效果這方面，會是 Chromecast 比較好。但不是每個 App 或程式都能下命令給 Chromecast，需要支援 Chromecast 的程式或 App 才能執行，所以用途會比較受限。


2. 微軟無線顯示轉接器

這款的定價為 NT. 1990，算是比較正規的投影功能，使用 Miracast 技術，不需要 Wifi 環境就可操作。

播放影片的動作由筆電或行動裝置執行，所以比較耗電，在電視或螢幕上的播放效果，會受到無線傳輸的頻寬或硬體的限制影響。

而「微軟無線顯示轉接器」的優點是泛用性高，Windows 的任何程式都可以執行，會有比較大的應用空間，不像 Chromecast 會受到 App 支援度的限制。

另外考慮到將來也可以利用筆電投影，來打造家庭 KTV 的環境，因此雖然這款產品價位較高，但我相信有其價值。

二、購買心得

1. 省錢管道

雖然官方定價、或 Pchome 等各大線上購物網站，都是 1990，不過利用 findprice 比價網站，很快就找到了低於 1500 的價位，其實已經跟 Chromecast 相去不遠，因此馬上就下單購買。


2. 他牌使用效果

跟家人聊到他的同事，有買一千元以下的無線投影棒，比較奇怪的是，不是播放網路影片，而是在播放硬碟影片時，投到螢幕上的畫面會卡卡的。

相信算是一分錢一分貨，買大廠牌的產品會比較穩一些。


3. 開箱

由於網路已經有許多開箱文章，需要圖文說明可參考這篇「一線搞定電視連手機」，內含 Chromecast 與微軟無線顯示轉接器的開箱比較。

三、安裝心得

1. HDMI 接頭

HDMI 不像 USB 可以「熱插拔」，否則一千多塊瞬間燒掉是會很心疼的，插上微軟無線顯示轉接器之前，要先確認使用的 HDMI 埠尚未通電。

不過一開始我仍然卡關了一個鐘頭，遲遲無法跟筆電正常連線，一度以為買到機王了。

經過不斷地交叉測試，才發現原來我插上的 HDMI 埠，剛好是我家電視三個 HDMI 埠之中，有問題的那一個，換了另外兩個埠就正常了，這個坑可以提供讀者參考。


2. 正確安裝流程

最保險的流程是：

• 關閉電視
• 一端插入 HDMI 埠
• 如果電視有 USB 插槽就接上另一端；沒有的話另一端需要找 USB 電源來插。
• 打開電視，切換到正確的 HDMI 埠
• 等個幾秒鐘讓無線顯示轉接器開機，成功的話，會看到下圖畫面：

四、使用心得

1. Win8 筆電操作

使用 Win8 以上的筆電，連接轉接器會比較沒問題。

確定無線顯示轉接器已經在電視或螢幕上開機，有畫面顯示後，在 Win8 以上的裝置，按 Win + K→ 選擇「投影」，如下圖：



連線成功的話，最下方紅框會多出「連線到不同的顯示器」的選項，請點擊這裡。




系統會尋找無線顯示轉接器，找到後如出現類似上圖紅框的字串「MSDisplayAdapter_0c」，點擊後即可投影到螢幕，電視上會出現整個 Windows 系統的畫面，可開始進行遠端操作。

比較不方便的是，系統不會自動記憶、自動連結轉接器，因此第二次以後要使用的時候，以上流程還是要重跑一次，算是小小的麻煩。

如果操作上還有問題，可能需要上官網尋找「疑難排解說明」。


2. CatchPlay 影片播放

終於進入主題了，主因算是為了在 CatchPlay 看最新一季的 Sherlock，而買了這個無線轉接器。在滿懷期待之下開始播放影片，結果似乎怪怪的──

影片畫質是很好沒錯，但每隔一陣子就會開始繞圈圈，然後才能繼續平順地播放。

感覺上 CatchPlay 播放的應該是 1080p 的影片，不曉得是我的頻寬不夠、或是 T100 筆電的 CPU 不夠力、還是無線轉接器的傳輸頻寬不夠？導致 1080p 的影片無法順暢地投影到電視。

退而求其次，只好改上其他提供歐美劇的網站，最高解析度只有 720p，但是播放起來就非常順常，完全不會延遲！其實 720p 的畫質我覺得就 ok 了。


3. Win7 使用有困難

由於桌機、準系統要接的線太多，也曾考慮用無線顯示轉接器來串接桌機與 HDMI 螢幕，可節省一條螢幕線。

可惜的是 Win7 系統要有一個能與「無線顯示轉接器」規格相容、能夠投射訊號的發射器，才有辦法連接轉接器，而我目前還沒能找到這樣的周邊設備。

如果能讓微軟這款產品也能支援 Win7 的話，那麼另外再買一條也是有其價值的。

五、補充

需要特別提的是，這款微軟的產品，不支援蘋果的相關平台，例如 MacOS、iOS 都不支援，所以 Apple 的行動裝置就不能接這台投影了。

Android 的手機可以支援投影，因此用行動裝置來操作，會比筆電更為方便，隨時可用、不用等開機時間。

不過手機看影片的耗電量很大，如果長時間追劇的話，我認為筆電還是有比較大的優勢，畢竟筆電有外接電源，打字也比較方便。

那麼讀者可根據自己的使用時間長短，選擇手機或筆電投影，來決定最合宜的操作。

更多 3C 產品心得分享：

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

讓每個網頁都能自動調整寬度，省下手動縮放的麻煩﹍Chrome 套件 Zoomy

February 14, 2017, 8:07 pm

≫ Next: 讓搜尋結果排除你不想看到的網站﹍自製 Google 搜尋引擎教學

≪ Previous: Windows 筆電投影(追劇)心得﹍微軟無線顯示轉接器

$

0

0

使用 Full HD (1920x1080)的寬螢幕後，瀏覽網頁會有個小困擾，需要常常手動按 Ctrl +放大網站的寬度，否則可視範圍及文字會過小。

如果是常逛的網站，其實調整過一次後，瀏覽器會記住設定，也就麻煩第一次而已。不過如果有這麼一個程式，可以自動偵測網頁寬度，並放大或縮小到螢幕寬度，對於使用者來說，不是非常方便貼心嗎？就不用每次逛到新網站，便需要手動調整大小。

最近下定決心要尋找這樣的程式，是因為使用了雙螢幕，而且兩個螢幕大小不一樣，導致 Chrome 記憶的縮放比例，在不同的螢幕尺寸，仍需要重新調整。若是沒有自動調整網頁寬度的程式，那麼切換螢幕的過程，真會變成整人遊戲！

本篇紀錄了我測試不同 Chrome 套件的心得，就算是沒有操作雙螢幕的使用者，也可以節省許多操作瀏覽器的時間喔。

一、多種 Chrome 套件測試

在 Chrome 商店測試了多種 Zoom 相關的套件，大部分效果都很差，篩選到最後只剩兩個比較有用：

1. Zoomy

• https://chrome.google.com/webstore/detail/zoomy/jgfonhdeiaaflpgphemdgfkjimojblie/related?hl=zh-TW

這個套件是目前來說效果算比較好的一個，優缺點如下：

• 根據套件說明介紹，它的功能是可以自動放大網頁到符合螢幕寬度(意思是沒有針對"縮小"網頁來設計)
• 我的感覺是，某些網頁的寬度判斷上會有錯誤
• 可以設定不執行的網頁，這是很重要的功能。

由於下一個套件目前還不夠完善，本篇會先說明 Zoomy 的使用技巧。


2. Zoom Page WE

• https://chrome.google.com/webstore/detail/zoom-page-we/bcdjhkphgmiapajkphennjfgoehpodpk

這個套件我認為功能比第 1 個強，但可惜目前還不符合我的需求：

• 可以放大、也能縮小網頁，以符合螢幕寬度
• 但是必須手動執行，無法自動執行
• 不會記憶網頁狀態，每次載入頁面都要重新手動執行

我有留言給作者建議增加自動執行的功能，若將來實現的話，就可以取代 Zoomy 這個套件。

二、Zoomy 效果

上圖是本站還沒安裝 Zoomy 之前，Chrome 瀏覽器的縮放比例設定為 100% 時的畫面。




安裝之後，打開 WFU BLOG 可看到網頁已經自動符合螢幕寬度，不用手動調整。

上圖可看到縮放比例仍然是 100%，代表這個外掛的原理，是利用 CSS 來動態設定網頁寬度。

測試了一些常去的網站，例如 Facebook、Stockq，都能自動調整沒什麼問題。

三、如何排錯

1. 縮放出問題的網頁



但不是所有網頁都不會出錯，例如上圖是「Livia's Wonderland」的畫面，雖然 Chrome 一樣是 100% 的縮放比例，但很奇怪最右邊的圖片沒完全顯示，下方的捲軸還可往右捲一段距離。

大致交叉測試後，解決的方法如下：

• Chrome 會記憶我們逛過的網站，所調整的縮放比例
• 執行 Zoomy 後，若發現某些網站縮放比例效果不佳，按 Ctrl -縮小寬度到正常為止
• 將來再次載入該網站後，縮放比例會被記憶，Zoomy 的縮放效果也會維持正常

2. 小螢幕使用技巧

這部分的心得分享給雙螢幕使用者，如果兩個螢幕大小差很多時，例如我的小螢幕是 1024x768 的黑白螢幕，那麼 Chrome 會記憶縮放比例這件事，變成是感覺很差的體驗。

因為小螢幕調好之後，回大螢幕就亂掉了；等大螢幕調回來，再切小螢幕又不行了，簡直是無間道。

參照第 1 點的原理後，雙螢幕是有解決辦法的：

• 安裝 Zoomy 後，先在大螢幕開啟常去的網頁
• 若網頁不正常，則手動調整縮放比例，讓 Chrome 記憶起來
• 那麼再用小螢幕看時，Zoomy 就能發揮效果，可以顯示正常的寬度比例。

上圖是本站在 1024x768 黑白螢幕的畫面，縮放比例一樣是 100%，Zoomy 正常運作的結果。

四、不執行的網頁

不是每個網頁都適合外掛執行，因為外掛都是用 JS 寫的，有時 JS 會打架、或是引起無法想像的現象。

而使用了 Zoomy 一段時間後，發現只要是頁面有 Iframe，那個 Iframe 的尺寸可能就怪怪的；或是要操作 Iframe 的話，結果可能會不如預期。

例如 Blogger 使用者一定需要在後台作業、或修改範本，但我安裝了 Zoomy 後，編輯範本就很慘了，因為永遠無法選取我想標示的文字，這就是出意外的狀況。




解決方法如上圖，進入 Zoomy 的設定選項畫面，填入所有不執行的網域後，按「Save」即可。

排除 blogger.com 後，就能正常操作 Blogger 範本了。

更多 Chrome 相關文章：

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

讓搜尋結果排除你不想看到的網站﹍自製 Google 搜尋引擎教學

February 14, 2017, 5:28 pm

≫ Next: 長時間看電腦螢幕，需要護眼族群的救星﹍富士通反射屏購買及安裝心得

≪ Previous: 讓每個網頁都能自動調整寬度，省下手動縮放的麻煩﹍Chrome 套件 Zoomy

$

0

0

網站逛多了之後，相信我們會有自己的一份口袋名單，某些網站就是比較沒我們的緣，特別不想看哪些類型的網站。

有時我們就只是想好好的看個文章，但可能整個版面到處都是讓人分心的浮動區塊，或是不時彈跳出一個視窗來嚇人，這類網站就可能成為黑名單。

如果能在上網找資料時，讓搜尋引擎將這些黑名單排除於搜尋結果之外，自然是再好不過的事了。本篇將會說明如何一步步打造自己的搜尋引擎，保證能有最滿意的搜尋結果。

點此看範例網頁

(圖片出處: pixabay.com)

一、哪些網站會讓人想排除？

其實有不少情況，會讓人不想上某些網站，例如：

• 如果你討厭內容農場的話，可能會希望搜尋結果排除農場網站
• 明明文章不長，但硬是分成好多頁來賺廣告的網站
• 很多人詬病的蓋版廣告大宗 → 痞客邦網域所有網站
• 各種干擾閱讀的效果、彈跳視窗、突然滑出的區塊
• 塞滿廣告的網站
• 每點一個連結，硬是跳出假裝成安全檢查的頁面，多賺幾個廣告曝光機會的網站

除了以上，也許還有你個人私心不想看到的網站種類。

二、自製 Google 搜尋引擎

為了讓自己有乾淨的搜尋結果，WFU 做了一個「排除干擾閱讀的網站」搜尋引擎，請按照以下流程，你也可以自製這樣的搜尋引擎。


1. 進入「Google 自訂搜尋」官網：

• http://www.google.com/cse/

如上圖，按下「Add」新增一個搜尋引擎。


2. 建立引擎，按下圖 A~D 順序



A：隨便填個網址，不填沒辦法建立引擎，之後再取消即可。

B：選擇語系

C：設定名稱

D：按下「建立」


3. 基本設定



如上圖畫面，點擊「編輯搜尋引擎」→「選擇引擎」→ 紅框處的「設定」→「基本資訊」分頁

建議開啟「圖片搜尋」選項，才能搜尋圖片。




畫面往下拉，按上圖 A~D 順序──

A：選擇「搜尋整個網路，但特別強調收錄的網站」

B：勾選當初設定的網站

C：按「刪除」，這樣才能搜尋整個網路

D：最後按下「進階」，準備設定排除的網站




畫面出現了排除網站的選項，按下圖中 A 處的「新增」按鈕，會出現新的視窗。

按 B 處的「排除大量網站」

在 C 處填入所有你的黑名單網域，按「儲存」。




回到原來的設定畫面後，記得捲到最下方，按「更新」。

接著將畫面捲到中間的位置，如上圖，按 A 處的「公開網址」，會出現紅框的網址，這就是你的自訂搜尋引擎網址。

紀錄下來、並加入書籤，以後就可以用這個網址，取代 Google 搜尋引擎了。

需要先看做出來的效果如何，請看這個範例網址：

排除干擾閱讀的搜尋引擎

三、其他設定

以上是最簡單的設定，如果需要進階設定，可參考以下相關文章：

1.「Google 自訂搜尋」：所有相關設定，例如外觀風格、搜尋排序、取得安裝在網站的程式碼。

2.「Google 自訂搜尋與 Adsense」的連結」：瞭解如何連結自己的 Adsense 帳號，以及如何關閉廣告。

更多 Google 搜尋相關技巧：

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

長時間看電腦螢幕，需要護眼族群的救星﹍富士通反射屏購買及安裝心得

February 19, 2017, 8:07 pm

≫ Next: 護眼神器富士通反射屏﹍讓 Windows 作業環境最佳化

≪ Previous: 讓搜尋結果排除你不想看到的網站﹍自製 Google 搜尋引擎教學

$

0

0

對於電腦工程師、文字工作者等，這類需要長時間盯著螢幕上班的族群，幾年下來除了眼睛乾澀、不舒服，也代表肝臟受了很大的影響。基本上現在的螢幕背光，一代做的比一代更亮，就算有濾藍光這類的產品(或鏡片)，充其量都只是治標而已。

要真正治本、保護眼睛，就得摒棄螢幕強烈的背光，使用類似 E-ink 電子墨水的產品「Kindle」。但 E-ink 有先天上的一些限制，螢幕會有殘影、更新速度慢，所以目前只能用於電子書閱讀器。

日前在淘寶找到一位專業玩家，自行 DIY 改裝了富士通已經停產多年的平板反射屏裝置，變身成為電腦外接螢幕，這款螢幕的特點就是：

• 沒有背光
• 沒有 Eink 的缺點(殘影、更新速度慢)
• 反應速度跟一般螢幕一樣快

不過這螢幕有一些先天上的缺陷，之後會說明，但是它已經足以解決我最大的背光問題，這樣就夠了。而這些缺陷，我會逐一紀錄解決的過程與心得。

如果你也想改善眼睛的問題，系列文有兩篇，第一篇是我的購買及安裝心得，第二篇是作業系統及軟體的調校心得。

(圖片出處: taobao.com)

一、反射式液晶顯示屏

首先有必要瞭解一下什麼是反射屏，比較完整的說法叫做「反射式液晶顯示屏」，由於沒有背光，這樣的螢幕要看到文字，完全只能藉由自然光(陽光)、或足夠的光線，照到螢幕上後反射才能照亮螢幕、讓螢幕上的文字被看見。如果光線不足的話，這螢幕是完全無法使用的。

由於我需要長時間打字、或寫 code，因此多年來不斷在尋找適合長時間使用的螢幕，例如：

• 日本有出過專門打字輸入的裝置：但中文輸入無法套用到這樣的機器
• E-ink 改裝為螢幕：在解決殘影、及刷新速度問題之前，還無法成為選項
• 醫療級的灰階螢幕：一方面是天價，一方面還是有背光
• Pixel Qi 螢幕：前幾年一直關注這產品，可以關閉背光，但一直無法量產，最後就消失了...

最近一次蒐集無背光螢幕的資訊時，首次看到了「富士通反射屏」這個關鍵字，原來這是日商 FUJITSU 的平板產品，但令人訝異的是，這產品由於市場反應不佳，早在 2009 年就停產了~

那麼我手上買到的這款螢幕，是怎麼來的呢？

二、淘寶專業賣家

這位淘寶專業賣家，在這個網頁說明了他如何改造螢幕的故事：

• 富士通全反射屏顯示器

原來 WFU 的狀況跟這位賣家差不多，但他比我多了技術跟行動力，直接把這樣的無背光螢幕給改造了出來，用的正是全世界僅存的「富士通反射屏」平板庫存，讓這樣的平板可以外接電腦，成為護眼螢幕。

知道這個資訊以後，雖然不知道用起來效果如何、到底光線怎麼樣才算充足？種種問號很多，但是只要能解決眼睛的問題，枝枝節節的各種狀況相信都有辦法解決。

大概看了一下賣家的產品，發現有 3~4 個價位的不同螢幕，因為賣家說他兩年做了 1 千多台，也許不同價位的產品，就是不斷改良的版本吧？

沒有考慮多久，直接對最貴的那一款就把卡刷下去了，不為什麼，因為 Xdite 說「在中國，他x的貴就是好，最貴的選項買下去就對了~」記住這點準沒錯！

三、購買過程

我下單的網址是這一個產品：

• 墨水屏护眼显示器-电纸书电子书全反射富士通无辐射无蓝光

價格是 RMB 1,298，螢幕尺寸為 10.1 吋。

下單隔天去三峽逛老街，沒想到接到一通越洋電話，說是淘寶賣家，原來他發了 QQ 給我都沒回應，趕緊告訴他回家會看訊息，同時不免欽佩中國淘寶賣家做事業的積極認真。

必須說他是個非常好的賣家，出貨前特地先告知這款螢幕的缺點有哪些，例如光線不足的話效果很差等等，要我確定真的能接受才出貨。

這些其實我都有做過功課，自然是瞭解的，不過順便就問了一些其他問題：

• 多款不同價位螢幕的差別在哪裡 → 彩色、黑白的差別，螢幕材質的不同
• 為何黑白的比較貴 → 這款黑白的螢幕會讓眼睛看起來比彩色的舒服
• 以前的版本有人反應 HDMI 插頭的問題，這個版本改善了嗎 → 對，這個版本已經改善

是黑白或彩色我不是很在意，主要是能長時間打字、或看螢幕就好，既然這款螢幕看起來比其他款舒服，那麼就請賣家出貨了。

四、安裝螢幕

由於系列文的內容很長，開箱紀錄決定省略，想看開箱的讀者可直接參考這篇「干眼症患者救星：FUJITSU 富士通反射屏显示器」。

賣家的設計很貼心，這台螢幕的設計可使用 HDMI、VGA、各種你能想像的接頭，還包含了 USB 插孔。

其實安裝過程一波三折，一度想說是不是拿到故障品了，我測試過筆電、PC 來接，訊號都無法投射到螢幕。最後拿了一台多媒體播放器碰運氣，剛好這台裝置外接螢幕的選項可選擇 720p、1080p 等解析度，結果就可正常顯示。

因此我推測筆電、PC 外接這台螢幕無法成功的原因，在於螢幕解析度設定錯誤。

經過一番波折及交叉測試之後，以下是我建議的螢幕調整設定：

• 因為現在大多使用高解析度的寬螢幕，電腦對新螢幕的設定值也可能是高解析度，一開始若單獨接上這台富士通螢幕，可能跟我一樣無法顯示。
• 我原本的大螢幕用 DVI 接頭，另外用 HDMI 接富士通螢幕，至少在雙螢幕之下可以先顯示其中一個。
• 如上圖設定，螢幕能顯示之後，趕快將富士通螢幕設定為 1024x768 的解析度，不要設定任何其他解析度，這是最沒有問題的設定。
• 建議不要使用延伸桌面，操作上會有很多坑要踩，最好如上圖，讓每個螢幕都單獨顯示就好
• 只有 1024x768 這個解析度，桌面寬度才不會超出螢幕範圍，造成操作上的麻煩

這顆螢幕背面有 5 顆按鈕，但沒有說明書，按出來的功能也常常會超出你的預期，建議讀者不要研究這些按鈕的任何功能，只要螢幕能正常顯示後，就再也不要去動他了，未來只需要開關螢幕就好，免得自找麻煩。

五、處理周邊

確定產品沒問題、搞定最關鍵的螢幕設定後，終於鬆了一口氣，不過接下來還有很多問題需要解決。




跟左邊的 Eizo 24" 相比，右邊的 10" 真是非常迷你，下一篇會說明如何調整作業環境，讓文字在這麼小的螢幕下，如何看起來比較舒服。




其實這款螢幕改到這一版，我覺得以 DIY 的水準已經做得非常棒了，很多面向都考慮到了。例如螢幕這麼小，使用者可能多半是由上往下看。請見上圖，螢幕可以往後彎曲到快要跟桌面平行了，所以可視角的調整是很有彈性的。

而上圖左上角圈起來的地方，可看到賣家做工精細的一面，已經用到鋼琴烤漆的水準，螢幕邊框的質感很好。

可惜這一點與保護眼睛的初衷背道而馳，鋼琴烤漆的強烈反光足以讓這個螢幕的保護效果幾乎被抵銷掉，眼睛看了不舒服，建議還有下一版的時候，使用霧面的邊框就好。




所以 WFU 拿出了家裡的黑色防水膠布，仔細地把邊框全部貼起來，這樣就不會反光了。

眼尖的讀者應該還會看到，上圖插了兩個不知什麼裝置？如果你準備使用 Win8 以上的筆電來外加這款螢幕的話，可以考用使用「微軟無線顯示轉接器」，利用無線傳輸 HDMI 訊號，就可少接一條拖油瓶的 HDMI 線了。

六、處理光源

接下來是最重要的環境光源問題，沒使用過「無背光反射屏」的話，一定無法想像這款螢幕，在光源不足的情況下，效果有多麼慘，這也是賣家出貨前，強烈要求再三確認此點，才會出貨的原因，同時這也是為何富士通在 2009 就不敢再生產這種螢幕的主因。

不過我相信會買這款螢幕的讀者，絕對有足夠的毅力來解決光源的問題，因為跟眼睛、健康比起來，這真的不算什麼。




我首先找了家裡的立燈來測試，放在身後往前投射，覺得效果不是很好。




懷疑燈泡的瓦數不夠、才會不夠亮，於是買了 27w 這麼亮的燈泡，依然改善地不夠多，因此我認為是投射角度與距離的關係。




最後拿出檯燈，調整了各種能夠想像的角度與距離之後，找出了最佳解大概是在上圖的位置，同時螢幕的角度也要調整如上圖，這樣螢幕看起來的效果，就跟看 E-ink 電子書差不多了。(P.S. 後面拿東西遮住大螢幕，才不會反光)

同時眼睛跟過往比較來，非常明顯地不容易感到疲勞，可以有效地拉長作業時間與休息間隔。而且除了工作上的用途，我也需要長時間上網蒐集、查找資訊，或是放鬆一下逛逛 PTT，現在這些事也都可在這個螢幕進行，甚至用它來玩玩小遊戲，都不用怕造成眼睛負擔了！

以上紀錄完螢幕的設定與周遭環境的配置，接下來下一篇，會說明作業系統、軟體等等要如何調整，可以讓這款反射屏螢幕用起來更順手。

更多 3C 產品心得分享：

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

護眼神器富士通反射屏﹍讓 Windows 作業環境最佳化

February 22, 2017, 8:07 pm

≫ Next: Blogger 付費範本網站整理 + 建議事項

≪ Previous: 長時間看電腦螢幕，需要護眼族群的救星﹍富士通反射屏購買及安裝心得

$

0

0

上一篇「富士通反射屏購買及安裝心得」雖然已經可以讓螢幕開始使用，不過後續需要調校的事項還很多，想要讓眼睛看得舒服的話，無論是作業系統、使用的各種軟體，都需要進行微調。

需要微調的主要原因為，這是一款黑白螢幕，文字看起來最舒服的情境，是採用 "白底黑字"，模擬成電子書的環境，最好不要有灰階的顏色。

如無法純粹白底黑字，那麼就盡量調成高對比的配色。瞭解這個最重要的原則後，由於 WFU 使用 Windows 系統，以下一一來看 Windows 下如何進行調校。如果是其他系統，請參照一樣的原則來調整。

(圖片出處: taobao.com)

一、切換雙螢幕佈景主題

如果不使用雙螢幕的話，例如單獨搭配一台小小的準系統，可省去切換螢幕的麻煩。但一開始有可能螢幕無法顯示，那麼請按照第一篇的說明，先接雙螢幕把解析度設定正確後，再使用單螢幕。

無論如何使用單螢幕的構想不是那麼實際，因為看不到彩色，要處理某些事就很困難(圖片相關的作業)，那麼以下還是來看看雙螢幕的切換技巧。

1. 製作黑白佈景主題

主螢幕使用的佈景主題，切換到富士通反射屏後，一定看起來沒那麼舒服，因此我們需要另外製作一個 "黑白" 佈景主題。

在 windows 桌面按右鍵 → 個人化



如上圖，右下角有個 "白底黑字" 的佈景主題，選擇這個可讓眼睛看起來最舒服。

接著有必要加大字體，讓 10" 螢幕的文字看起來不那麼吃力。

請按最下方的「視窗色彩」，可調整各個地方的字體大小。

全部調整完後，記得套用，讓設定生效。



2. 切換佈景主題

套用過後的佈景主題，在「我的佈景主題」列表中，會自動命名為 "未儲存的佈景主題"，按右鍵選「儲存佈景主題」，儲存為自訂的名稱，例如 "黑白"。

接著進入這個 windows 系統目錄：

C:\Users\使用者名稱\AppData\Local\Microsoft\Windows\Themes



如上圖，可看到我原本的佈景主題 "WFU" 以及新建立的 "黑白" 兩個 .theme 檔，分別對這 2 個檔案按右鍵 → 建立捷徑 → 貼到桌面。

將來只要在桌面按這兩個捷徑，就能立即切換佈景，改變背景顏色、文字大小等設定值，非常地方便。


3. 重新啟動軟體

切換不同佈景時，因為文字大小改變過，有些軟體的文字不會跟著切換，看起來不是那麼舒適。

例如我常使用的 Evernote、Chrome，都會受到影響。

不過只要先關閉軟體，再重新開啟，文字大小就正常了。

二、處理桌面圖示

切換佈景主題後，另一個麻煩的地方，就是桌面的捷徑圖示會亂掉。以我的作業習慣，常用的捷徑我會希望保持在同樣位置，找起來會比較快。

為了解決這個問題，找到這篇「解決 Windows 7 桌面圖示亂亂跑的問題」，這個技巧很厲害，從來不知道在桌面按右鍵 → 重新整理，這個選項可以記憶圖示的位置。

不過用了一段時間後，覺得這招似乎有時有用、有時沒用，也抓不太出規律為何。



最後覺得還是遷就小螢幕的圖示位置會比較方便，上圖是切換到大螢幕後的圖示位置，集中在左上區塊。

雖然空間無法完全利用，但只要不去動圖示位置，只在切換到小螢幕後再調整位置，那麼圖示就一定不會亂跑了。

三、文書處理軟體

Office 文書處理軟體，預設就是白底黑字，因此可以無痛接軌。

我另外常用的軟體還有 Notepad++、Sublime Text 等等，在大螢幕使用時，習慣使用 Solarized Dark 這類的佈景主題，眼睛看起來比較舒服，且這些佈景主題也會根據不同類型的檔案文字、程式碼語言，而顯示不同的顏色，有助於迅速辨識。

但 Solarized Dark 在富士通反射屏的效果是很可怕的，那麼建議改用 Solarized Light 或其他淺底深字的佈景，效果比較好。

四、瀏覽器配色

使用瀏覽器上網時，雖然大部分的網站都是淺底深字，但少部分網站會使用暗黑色系，那麼在富士通反射屏螢幕會什麼都看不到的，可說是一片漆黑。

那麼建議 Chrome 瀏覽器必須安裝「高對比模式套件」，例如這一個：

• https://chrome.google.com/webstore/detail/high-contrast/djcfdncoelnlbldjfhinnjlhdjlikmph?hl=zh-TW

可參考上圖的這些選項：

• 平常在逛網頁時，可按「停用」關閉功能，或選擇「一般」。
• 若遇到深底的網頁，可「啟用」功能，選擇「反轉色彩」，就可變成淺底深字。
• 若是不深不淺的網頁，那麼試試其他選項，看看效果會不會好一些。

五、Chrome 其他套件

還有一些 Chrome 實用套件，建議可以搭配使用：

1. 縮放文字

可參考這篇「讓 Chrome 只放大縮小文字」，按汪 Zoom Text Only 這個套件，就能不改變網站寬度大小，單獨縮放文字。


2. 自動調整網站寬度

切換雙螢幕後，使用瀏覽器會有很大的困擾，因為同一個網站，寬度必須不斷地調整。那麼可參考這篇「讓每個網頁都能自動調整寬度，省下手動縮放的麻煩」，安裝 Zoomy 這個套件，解決這個難題。

六、PTT 背景顏色

「PTT」也是我查資料的重要來源，有時一用就很久，導致眼睛很不舒服。

為了讓 PTT 在富士通反射屏螢幕下有最好的效果，建議按以下步驟修改顏色配置：

選項 → 快速 BBS 選項 → 設定 BBS 畫面色彩



上圖是每種顏色我的設定效果，照著上圖來設定不同的深淺顏色，以後 PTT 閱讀起來就很舒服，長時間使用也不傷眼了。

七、小結

依照本篇的原則，來調整作業系統環境，相信可以打造出眼睛看起來最舒服的配色。

不過由於「富士通反射屏螢幕」只能算是權宜之計，因為是拿 10 吋平板改造而來，螢幕尺寸過小，但這世界上也沒有更大的反射屏庫存可以改造了。

如果有廠商願意量產更大尺寸的反射屏，那將是我們這個族群的福音。希望越來越多人重視眼睛的問題，讓這個市場變大，也希望有朝彩色無背光的科技能有所突破，讓大眾不再需要被這問題所困擾。

更多 3C 產品心得分享：

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

---

Blogger 付費範本網站整理 + 建議事項

March 2, 2017, 8:07 am

≫ Next: 用 Google Apps Script 操作試算表 (3)延遲寫入資料庫 + 使用族群

≪ Previous: 護眼神器富士通反射屏﹍讓 Windows 作業環境最佳化

$

0

0

之前曾寫了一篇「使用 Blogger 免費範本，可能需要面對的問題有哪些？」，提醒有意找 WFU 架站的讀者，避免套用免費範本後再來發案，因為對雙方而言，等於都抱著不定時炸彈。

所以近期有些案主，會向我詢問哪裡可以買 Blogger 付費範本。為了節省搜尋範本的時間，本篇整理了許多付費範本的資訊，無論是自架站、或是發案，都可拿來參考。

一、為何要用付費範本

如果預算考量第一、或是要自架站的話，WFU 在「Blogger 諮詢／架站」→「2. 架設 網頁版／行動版」，整理了不少 Blogger 免費範本的網站可以參考。

不過再簡單歸納一下使用免費範本可能會遇到的狀況：

• 範本版權無法移除
• 程式碼會加密 → 導致不容易 debug
• 程式碼品質不佳
• 殘留無用的 JS/CSS
• 作者不會持續維護免費範本
• 範本使用的外連檔案隨時可能失效

當然也可能運氣很好，一直都沒遇到大災難，因此認為免費範本就很好用了。

但是將來網站成長到一定規模後，到時出的包導致網站開天窗，一時之間又找不到人立即解決，這時的損失就不是網站草創初期的錯誤能夠比擬。就像最近發生的蝶戀花車禍重大事故，cost down 加上一連串的意外，會造就難以想像的傷害。

二、付費範本網站整理

1. Sora Templates

• http://www.soratemplates.com/

這個網站的範本算是最便宜的，大多 USD 7 以下，有一百多個範本可選，還算不少。


2. Templateclue

• http://blog.templateclue.com/

這個網站的範本價位大多 USD 11 以下，目前範本數不多，不到 30 個，但是平均水準不錯。


3. Templatezy

• http://www.templatezy.com/

這個網站的範本價位大多 USD 10 以下，目前範本只有 30 個，特點為全部自適應，除了平均水準不錯，還有一些非常特殊用途的版型，光是逛逛也很有趣。


4. Kaizen Template

• http://www.kaizentemplate.com

這個網站的範本也包含免費的，要特別篩選出付費範本的話，請點上面這個連結。

付費範本數目前將近 120 個，價位大致落在 USD 15 ~ USD 21。


5. Templateism

• http://www.templateism.com/

這是最貴的一個付費網站，範本數目前 55 個，看起來是均一價 USD 30。

至於說貴的有沒有道理，個人感覺其功能上還不一定有前面的強，也許是主打售後服務。



6. PBTemplates

• http://www.premiumbloggertemplates.com/

這個網站的範本也包含免費的，要特別篩選出付費範本的話，請點上面這個連結。

付費範本數看起來很多，其實大部分點進去後，都是跳到另一個網站 themeforest，感覺上是拿別人網站來充數。

自己出的範本則算很便宜，USD 10 而已，那麼下面會特別介紹 themeforest 這個網站。

三、Themeforest

• https://themeforest.net/

這網站是非常大宗的範本集散地，但也包含了各種平台，所以不容易只篩選出 Blogger 的範本，必須搜尋 "blogger" 這個字串，才能列出相關的範本，可以點上面這個連結比較方便，就是搜尋 "blogger" 的結果。

但是這個網站要非常小心，這個搜尋結果頁面有這些特點：

• 雖然是搜尋 "blogger" 字串，但偏偏很多 WP 範本的敘述，也塞入了 "blogger" 這個字串，所以參雜了非常多的的 WP 範本
• 因此請仔細閱讀英文敘述、或分類說明，看到有 Wordpress、WP 的字樣就跳過，免得買錯範本無法安裝在 Blogger 上
• 但也不是沒有 Wordpress 字樣，就代表 Blogger 可以使用，還是要看分類、敘述說明
• 搜尋頁面做得很棒，價格、評等、銷售量一目了然
• 但是搜尋結果沒有製作縮圖，只能一個個點進去看
• 看到太誇張的價格，例如 USD 40~50 或以上，通常就是 WP 範本，這也是一種篩選方式
• Blogger 範本的價格通常在 USD 10~30 之間

總而言之，這個網站的範本數量非常龐大，但是英文不夠好的話，建議還是逛前面幾個網站就好，免得買錯範本傷了荷包。

四、購買付費範本補充事項

最後補充幾點：

1. 在國外網站買範本，通常使用 paypal 交易，也可使用 paypal 來刷卡，而這過程都是使用英文，建議英文有一定的基礎比較不會操作錯誤。

2. 既然花了錢，建議購買自適應(RWD)範本，讓網站在各種不同螢幕尺寸、行動裝置都能有比較好的呈現效果。如不知道怎麼判別範本有沒有 RWD 效果，可在頁面搜尋 "responsive" 這個字串，看看是否出現在敘述當中。

3. 下拉選單是很多人需要的功能，但常常選到一個沒有下拉選單功能的範本。購買時記得從 DEMO 頁面玩玩該範本的選單，能夠跑出下拉選單的範本再來購買。

更多 Blogger 範本相關文章：

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

用 Google Apps Script 操作試算表 (3)延遲寫入資料庫 + 使用族群

March 1, 2017, 11:25 pm

≫ Next: 如何從 Blogger 範本網站挑到理想的版型，且不會出錯

≪ Previous: Blogger 付費範本網站整理 + 建議事項

$

0

0

過去在相關的系列文曾多次說明，Google 試算表適合當成小型資料庫來使用，不建議當成真正的資料庫來運作，也就是不能拿來作為規模比較大的商業使用，為什麼呢？

試算表是免費的服務，在運作上、效能上自然比不上獨立運行的主機。而且 Google 提供的某些 API 也有每日配額的限制，除非付費提升額度。

除了以上提到的限制，試算表在寫入資料時，是採取平行運算。這也就是說，發生了同一時間、多筆寫入請求時，是有可能產生意想不到的錯誤、或很難診斷的 bug。

本篇除了說明如何解決這個大問題，也大致介紹一下，適合使用 Google 試算表來當資料庫的族群。

(圖片出處: pixabay.com)

一、適合使用的族群

既然拿試算表當資料庫的限制很多，問題也不少，為何還要採用這樣的方案呢？主要的原因當然是「免費」。

實際上，架設資料庫伺服器的環境及成本太高，一旦架設後，無論你有沒有使用，每個月就是要燒錢。不管提供的服務是賺錢或賠錢，都要持續支出這一項固定成本，如果期初沒有一定的資本額，是很難做這樣的投資。

雖然試算表資料庫的效能不佳，不過有些族群，不需要資料庫有多好的效能，也沒多大的流量，那麼就很適合使用，例如：

• 因教育目的而使用
• 新創事業
• (比較小的)中小企業
• 個人使用

以 "新創事業" 來說，創新的服務其實能否存活都是未知數，也許 1~2 年內就倒了，大手筆建置資料庫也滿冒險的。那麼 Google 提供的各種免費服務也算是「天使投資人」，如果事業真的做成功了、流量起來了、有賺到錢了，那麼看要付費放寬 Google 的額度限制，或是再來考慮架設自己的資料庫環境也可以。

如同 +Pulipuli Chen 在「利用 Google 試算表當小型資料庫 (4)」的留言，Google 等於免費提供 "Backend as a Service"、"Serverless" 這樣的環境，在事業初期省去很多處理後端的麻煩事，可以專心在前端發揮各種想像力、創造力。

二、延遲寫入的必要性

試算表使用初期，在流量不大時，很難發生時間相近時，有多筆寫入資料的請求，很可能相隔幾小時才有一次寫入資料的機會。

但知名度提升、或舉辦活動時，就會常常發生幾秒鐘之內需要寫入多筆資料，類似演唱會要搶票的狀況，那麼試算表會發生什麼狀況呢？

以最常見的「會員系統」來舉例，每新加入一個會員，會員編號就要順編下去。而順編之前，要先知道試算表原本有幾筆資料，假設查到原本有 10 個會員，編號就要從 11 開始。

當短時間內同時有兩、三個會員加入，由於試算表處理請求是平行運算，這幾個寫入資料的請求，可能同時查到原本有 10 個會員，導致這 3 個新會員，編號都成了 11 號，這就麻煩了。

因此處理試算表的各種請求，平行運算會是個麻煩，必須想辦法變成依序處理，才不會造成各種邏輯錯誤。

三、延遲語法

Google 發現試算表同時寫入的問題後，發佈了這篇「Concurrency and Google Apps Script」說明，使用「Lock Service」用來解決平行運算的問題。

從字面上看，取名 Lock 意味把時間鎖住的意思，主要有兩種用法，以下都用官方範例來說明：

1. 強制等待一段時間

function test() {
var lock = LockService.getPublicLock(); // 啟動 LockService, 凍結試算表其他動作

lock.waitLock(30000); // 凍結 30 秒

// 這裡的程式碼，是凍結期間所有要做的事情

lock.releaseLock(); // 解除凍結
}
所有的使用說明，請看註解文字即可。

事情都做完後，執行 lock.releaseLock()，可以讓其他平行運算的程式開始執行。

這段程式碼的風險是，我們設定凍結的秒數期間，有沒有辦法做完所有的事？如果不行的話，時間一到，其他的平行運算就會開始動作。


2. 測試等待一段時間

為了解決上述的風險，官方提供另外一個方式，讓我們可以知道凍結期間有沒有完成任務，請見以下範例：

function test() {
var lock = LockService.getPublicLock();

if (lock.tryLock(30000)) { // 嘗試凍結 30 秒
// 這裡的程式碼，是凍結期間所有要做的事情
} else {
// 凍結期間萬一事情沒做完，也許可以寄 email 通知給自己
// Gmail API 的參數分別是 email, 主題, 內容
GmailApp.sendEmail("自己的 email", "凍結失敗", "凍結 30 秒還不夠");
}
}
使用說明請看註解文字。

這一段利用 lock.tryLock() 來嘗試凍結一段時間，如果發現事情來不及完成時，則執行備案的程式碼，例如寄 email 通知給自己，好知道要進入試算表資料庫檢查看看，是否有異狀或慘劇發生。

四、小結

官方提供的延遲語法，看起來仍然無法完美地讓平行運算改為依序執行，只能根據自己長久累積的經驗，來嘗試究竟應該設定多久的延遲時間。當然，如果把數字設得很大也是一種解決方式。

不過跟以往比起來，已經能解決多數狀況了。在熟悉本系列文後，我相信 Google Apps Script 搭配試算表，可以成為幾近完美的小型資料庫方案。

用 Google Apps Script 操作試算表系列文章：

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

如何從 Blogger 範本網站挑到理想的版型，且不會出錯

March 4, 2017, 5:55 pm

≫ Next: 覺得蓋版廣告很討厭嗎？教你從搜尋結果排除干擾閱讀的網站(各種平台的技巧)

≪ Previous: 用 Google Apps Script 操作試算表 (3)延遲寫入資料庫 + 使用族群

$

0

0

把 Blogger 基本功能都摸熟之後，許多站長可能會將注意力轉向模版的改造，把自己的家裝潢地跟別人不一樣，甚至有的站長會固定每 1~2 年就換一次版型。

不過挑選範本的確是一件很吃力又傷神的工作，要從那麼多個範本網站、數以百計的模版中，挑出完全符合需求、而且要看得順眼的標的，這個難度應該不會輸給填寫志願表的抉擇。

範本如果沒有挑對，除了自己修改起來麻煩，甚至就算請人處理也不一定能解決。根據 WFU 多年來協助 Blogger 架站的經驗，本篇就來整理一下，挑選範本有沒有什麼速成的方法，能否有一套 SOP 流程來篩選出心目中的理想範本。

(圖片出處: templatezy.com)

一、最節省時間的挑選方式

從範本網站挑選非常花時間，那麼最有效率的作法，是平常在網路上一邊搜尋資料時，一邊注意一下有沒有吸引你目光的版型，如果剛好是 Blogger 平台，就可以想辦法取得這個版型的資訊，然後列入口袋名單紀錄起來。

1. 辨別 Blogger 網站

要能一眼認出是 Blogger 網站，也是需要經年累月的功力。基本上 Blogger 是自由度非常高的平台，熟習程式語言的工程師，都有辦法把 Blogger 網站改得讓爹娘認不出來。

提供幾個簡易的辨識方法：

• 看文章頁面的網址結構，是不是 "網域/西元年份/月份/xxx.html" 這樣的格式，通常 Blogger 才會採這樣的結構
• 若有站長從 Blogger 搬到 WP ，為了讓原文章網址能繼續生效，有可能繼續採用原網址格式
• 那麼為了保險起見，可以檢視網頁原始碼，搜尋看看有沒有 "blogger.com" 的網址字串，有的話就比較能確定是 Blogger 網站

2. 取得版型資訊

有的 Blogger 網站套用版型後，頁尾會留下版型的相關連結、或版型名稱，那麼可以從這些資訊去找到這個範本要從哪裡下載或購買。


3. 檢查網頁原始碼

不過會修改範本的站長，多半會把頁尾的版型資訊移除掉，那麼只好找找網頁原始碼，還有沒有保留版型的資訊。

以「第一動漫」這個網站為例，檢視原始碼後可看到下面這段內容：



根據這些版型名稱、網址等相關資訊，相信就能 google 到出處了。

二、縮小篩選的母體

如果要從範本網站來逐一挑選，最好能夠縮小樣本的母體數量，以下為建議的方式：

• 從付費範本下手，可以少看很多版型，節省時間
• 買付費範本也可過濾掉有問題的免費範本
• 而且付費範本的平均水準比較高
• 推薦的付費範本網站可參考這篇「Blogger 付費範本整理」

三、列出所有需求

挑選範本之前，最好先了解自己的需求、必要的功能有哪些，並做成列表，一邊挑的時候才有依據可以比對、篩選。

可參考以下常見的需求，並紀錄自己需要的部分：

• 浮動導覽列：這個功能的優點可參考「讓部落格導覽列選單能浮動置頂」
• 導覽列下拉選單：網站的文章越來越多之後，導覽列遲早會需要下拉選單，甚至是多層選單，效果可參考「Blogger 多層下拉選單實作」
• 自適應導覽列：多數版型的導覽列並不會有自適應功能，那麼導覽列項目一多時，在小尺寸的螢幕，版面看起來就會是悲劇。由於行動裝置越來越普及，現在挑版型時，「自適應導覽列」的效果就會是個重點。
• 輪播功能：現在很多版型的輪播功能越做越炫，為了適合行動裝置使用，有的會支援拖拉功能，可參考「最熱門 jQuery 圖片輪播外掛 Owl Carousel」
• 數字分頁：這也是非官方範本的常見功能，效果可參考「Blogger 數字分頁導覽」
• 跑馬燈：有的站長會喜歡這項功能，即時顯示最新公告等訊息，不過這樣的範本不多見。
• Instagram 外掛：在網站底部展示自己的 Instagram 照片，不過這樣的範本一樣不多見。
• 社群分享按鈕：這算是基本配備了，主要就是看按鈕的樣式順不順眼。不過外國常用的跟我們不太一樣，都還要再改就是了。
• 自適應(RWD)範本：建議一定要挑自適應範本，除非不在意行動裝置的訪客。

四、篩選範本的重點

釐清自己的必要需求後，接著就是進入範本網站，一個個把 DEMO 網頁給按出來，按照以下的要點來篩選：

• 最重要的是版面配置順眼，若區塊的位置不合意則直接淘汰，因為改區塊是很麻煩的事，有很大的機率會把範本改壞。
• 配色不順眼倒是沒關係，顏色、CSS 樣式這些都很容易修改的。
• 可以挑 3~5 個最順眼的(或多一點也可以)，進入最後決選。
• 從進入最終名單的範本，逐一比對之前列出的所有必要需求，符合越多項的越好。
• 因為符合越多項，代表將來要改的地方越少；若要找人改，費用也比較少。
• 但是比對需求時，導覽列的功能要放最高權重，因為自適應導覽列的修改是最麻煩的，最好是遷就範本預設效果。
• 自適應的導覽列，任何細微的調整，改起來都可能是大工程，不一定看得出作者的程式邏輯，所以常常會改壞。
• 擺第 2 權重的則是輪播功能。
• 除了這兩項之外，其他的需求功能都算好改。
• 篩選範本時，務必逐項測試自己需要的功能，免得買了才發覺效果不太一樣，例如下拉選單這功能。
• 自適應效果也必須測試，可以在瀏覽器按 Ctrl、+、-來調整螢幕大小，看看在不同尺寸下是否功能正常。

五、小結

以上就是我挑選及修改範本的濃縮心得，相信可以協助讀者節省很多時間。

其實 Blogger 付費範本的 CP 值實在太高了，有買過 WP 範本就會知道價差有多少。而這一點點的費用，就可以得到不輸 WP 的質感，避免選到有問題的範本，省下可觀的挑選時間，最重要的是預防將來的未爆彈。

如果無法自己修改範本、處理所有範本問題的話，那麼本篇會是比較建議的挑選範本流程。

更多 Blogger 範本相關文章：

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

覺得蓋版廣告很討厭嗎？教你從搜尋結果排除干擾閱讀的網站(各種平台的技巧)

March 7, 2017, 7:18 pm

≫ Next: 快速學會部落格文章下標題的技巧﹍找回右腦自然學習能力

≪ Previous: 如何從 Blogger 範本網站挑到理想的版型，且不會出錯

$

0

0

過去一年以來，搜尋時如果出現的是痞客邦網站，開始成為一種不舒服的瀏覽體驗，因為一段時間後，所有痞客邦網頁都會自動彈出蓋版廣告。

其實我不反對廣告，我也認為網路運行的機制需要有廣告，才足以支撐這個能夠免費運作的架構，否則查資料、使用圖片等等，都只能上付費網站了。

但比較不能接受的是閱讀或操作被干擾、及中斷，因此不止蓋版廣告，所有妨礙閱讀的網頁設計，例如彈跳視窗、突然出現的滑動區塊等等，我認為使用者可以不用忍受這些行為，用行動作出抵制。

於是研究了一下各種平台的作法，本篇將分享如何設定黑名單，減少我們上網時，看到特定網站、網域的機會。例如將痞客邦的網域列入黑名單，那麼搜尋的結果，將自動屏蔽這個網域的所有網站，以得到較佳、較友善的閱覽體驗。

一、不舒服的閱覽體驗

雖然痞客邦的蓋版廣告為人詬病，不過真正成為壓垮駱駝最後一根稻草的事件是，最近用行動裝置搜尋資料時，逛到一些知名的 3C 資訊網站，閱讀體驗十分之差，把內心的火都點燃了起來。




這是案情比較輕微的狀況，文章捲到一定程度後，會出現彈跳視窗，但很難關閉，必須將滑鼠移到右上角小小的叉叉，才能關閉這類擾民的訂閱畫面。




上圖紅框這個浮動廣告真的很不好，畫面捲動時它也一直會停留在那個位置，永遠會遮住部分閱讀的文字，偏偏我的閱讀習慣、視線也差不多會一直在那裡。




這個最誇張，所有 Combo 綜合技一起來，畫面從上到下計有：

• 頂部浮動區塊
• 浮動廣告
• 彈跳 Adsense 廣告
• 底部浮動廣告

這也讓我下定決心研究，如何在各種平台搜尋資料時，排除這些網站。

二、網頁版排除方法

1. Chrome 套件



Google 出了一個很好用的 Chrome 套件「Personal Blocklist」：

• https://chrome.google.com/webstore/detail/personal-blocklist-by-goo/nolijncfnkgaikbjbdaogikpmpbdcdef?hl=zh-TW

安裝之後，這個套件可以將我們的黑名單網站，在搜尋結果裡面隱藏起來。例如封鎖痞客邦網域後，第 1 頁原本 10 篇文章有 4 篇是痞客邦網站，現在隱藏這 4 篇後，只會看到6 個搜尋結果。


2. 使用方法

有 2 種設定方式，第 1 個方式比較直覺、方便，例如這是搜尋結果的畫面：



如上圖紅框，每個搜尋結果都會自動出現一個「Block xxx.xxx」的按鈕，按下去後這個網域就會自動加到黑名單之中，將來這個網域在搜尋結果會被屏蔽。




如果想要手動輸入屏蔽的網域，如上圖，點擊外掛的圖示，出現設定畫面後，按紅框處的「Import」，就能一次輸入所有要排除的網域了。


3. 其他瀏覽器

其他的瀏覽器或許能找到屏蔽網站的外掛，但不一定能找到屏蔽搜尋結果的外掛，那麼不使用 Chrome 的話，只好參考下面行動版的排除方法。

三、行動版排除方法

上面介紹的方法，只有 Chrome 適用，接下來介紹的方法，可套用到任何平台、任何瀏覽器。

1. 使用 Google 自訂搜尋引擎

請按照這篇「讓搜尋結果排除你不想看到的網站」，利用「自製 Google 搜尋引擎」的方式，將這個搜尋引擎的網址加入各個平台、各個瀏覽器的書籤，取代原本的 Google 搜尋引擎。

這樣搜尋出來的結果，可以排除所有自己設定、會干擾閱讀的網站，或是不想看到的網域。


2. 網頁版跟行動版要分開處理

讀者可能會有疑問，既然可以自訂 Google 搜尋引擎的話，為何還要介紹 Chrome 套件「Personal Blocklist」？

這是因為行動裝置的使用者越來越多，很多網站會針對行動版有特別的配置與設計。

有的網站其實網頁版看起來很正常的，但是行動版就不乖了，有不少干擾閱讀的區塊、廣告等等。那麼我們可以在行動版的搜尋結果排除這些網站，而網頁版不排除。

所以我建議網頁版可使用 Chrome 套件「Personal Blocklist」，建立一組名單，其他環境則使用「Google 自訂搜尋引擎」，建立另一組名單。

或者是，如果你不常用 Chrome 的話，乾脆建立多個「Google 自訂搜尋引擎」，分別儲存網頁版的黑名單、及行動版的黑名單，讓自己在不同平台都能有不同的搜尋引擎可使用，也是一個可行的方法。

更多友善使用者體驗相關文章：

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

快速學會部落格文章下標題的技巧﹍找回右腦自然學習能力

March 14, 2017, 9:07 pm

≫ Next: 免費空間最後一塊淨土﹍用 Github 存取網頁 JS/CSS 外連檔案 + 使用技巧

≪ Previous: 覺得蓋版廣告很討厭嗎？教你從搜尋結果排除干擾閱讀的網站(各種平台的技巧)

$

0

0

對於部落格類型的網站，如果是為了提升搜尋排名，我認為把時間或資源投注在各種 SEO 技巧，或是研究 SEO 新技術，這樣的投資報酬率，可能遠遠不及專注於文章內容的提升，以及加強文章下標的能力。

「內容為王」這是大家都知道的，但持續產出優質內容並不容易，也需要長時間不斷吸收新的知識。相對之下，下標題倒是比較簡單，是有可能在短時間之內習得這項技能。

其實關於「下標」，網路已經有很多的教學文章，而且連下標產生器都有了，本篇就不重複相關的知識。從教學文章我們可獲得條列式的具體下標「作法」，本篇則是要分享「心法」，算是有科學研究佐證的快速學習方法。如果還沒練習過下標的讀者，可以參考這個不一樣的方式。

(圖片出處: stocksnap.io)

一、正規下標教學

以前借過一本下標的書，類似教科書或經典書，裡面的章節列出了幾十種下標的類型及範例，看沒多久就頭昏眼花，這可能是我越級打怪的結果，應該要找一本入門、類似科普這樣的書來看。

如果循正規的方式來學習部落格下標的概念，可以先參考這幾篇淺顯易懂的文章：

• 如何寫部落格: 文章下標５大原則與懶人公式
• 論下標
• 文章下標題十大心法

接著是站長們最關心的，對 SEO 有幫助的下標技巧：

• 邁向王者之路的 SEO
• 如何寫出一篇具有SEO效果的開箱文 （一） 標題的下法
• 如何寫出一篇具有SEO效果的開箱文 （二）內文的撰寫
• 擊敗內容農場，3個撰寫電商文案的核心重點

二、我的下標能力如何形成？

這篇談下標，但是我的文章很少使用下標技巧；雖然會看下標的文章、心得，但主要出自於研究的興趣，且經營部落格，就該多瞭解部落格的相關主題。

為什麼我的文章很少用下標技巧呢？主要也是因為網站的定位，這裡就是我的筆記資料庫，大部分的文章是方便自己搜尋用的，下的標題自己將來能夠搜尋得到最重要，自然不必刻意為了 SEO 對標題進行裝飾。

那麼缺乏練習的情況下，WFU 有辦法確定自己是有下標能力的嗎？

剛開始寫部落格時，我想是沒有的，但現在的話，我認為是有的。難道寫久了、又不使用下標技巧，這個能力就會自己生出來嗎？

我想，看完本篇的內容，讀者可以知道真正的關鍵在哪裡。

三、為什麼學習新事物很困難？

大家應該可以接受，幼童時期學習能力是最強的，不管什麼都學得很快，給小孩子背唐詩、三字經等內容，絕對比大人背得快。

原因是，這個階段幼兒的邏輯能力未發育成熟(左腦掌管)，所有的學習都是依賴右腦來完成(掌管情感)，而右腦的運作就是直接複製貼上，不進行分析辨識，也不與過去經驗比對(左腦掌管)。

而成年人為什麼學習能力較差？因為左腦的邏輯能力成熟後，就會接管 "學習" 這件事，再也不複製貼上，每學習一件新的東西，就會進行分析解剖，有沒有曾學過的事物可以比對，一旦找不到熟悉的經驗供比對，腦袋就會卡住，然後學習地很痛苦，就像我一開始讀那本下標的教科書一樣。

關於「左腦右腦」的科普知識，可參考這篇「左腦右腦」，相信就能理解以上說的情形。

有了以上基本認知後，很多事情就會豁然開朗，為什麼學第二語言這麼難？為什麼公司培養新人，喜歡剛畢業的學生？

剛畢業的社會新鮮人，等於一張白紙，交代任何事情都會複製貼上(右腦先決)，學起來是很快的。有過幾年歷練的上班族，如果要當新人訓練，會不斷拿過去經驗來比對(左腦先決)，就會這件事也卡、那件事也卡，讓訓練缺乏效率。

四、複製右腦學習環境

所以，經由科學實驗，最有效率的學習方式，就是複製右腦的學習環境，可參考這本書：「狡猾的讀書法」，他就是關閉左腦的運作，運用右腦來記憶，這樣的學習會比使用左腦節省更多時間。

同樣的，想要學英文，去補習班上課、聽空英等等，就算花了幾年的時間，效果都比不上去國外一個月，看是出差、打工、或是住在接待家庭都可以，因為泡在滿是英文的環境，你的左腦來不及起太大作用，不會迸出來干擾學習，整個氛維會讓你的右腦不斷對每句話複製貼上，語言自然而然就學起來了。

那麼回到主題，要怎麼營造一個適合右腦運作的環境，來最有效率地學會「下標題」這件事？

五、RSS 閱讀器

先來聊聊「RSS」這項快失傳的藝術品，我在「PTT 自製 RSS 教學」→「一、訂閱 PTT 的好處」有介紹 RSS 的優點。由於我寫資訊類型的部落格，在經營初期，會訂閱各大資訊網站的 RSS。

其中「電腦玩物」是初期最喜歡看的網站，基本上在 RSS 閱讀器之中， +esor huang 寫的文章大部分也都是最容易吸引目光，會比其他網站還更讓我想點開。

後來才知道，Esor 是中文系的背景，那麼也難怪他的文章標題會下得有一定水準，我也算是找到一位下標的好老師。

看了幾年的 RSS 下來，某一天我在為自己文章下標題時，不自覺口裡冒出了一句很 Esor 式的標題，大概是在那個 Moment，我覺得好像學會下標了...

說 "學會" 好像也有點突兀，因為我並沒有真的去學這件事，但這個能力似乎自己產生了。

那麼事後歸納起來，我的確是為自己建立了一個右腦的學習環境，只不過這是一個緩慢的、不自覺的學習經驗，未經優化的歷程。

六、學習下標 SOP

結合這些經驗後，我認為是可以做出一個有效率、優化後的下標學習 SOP 出來：

• 找出跟自己網站同類型的部落格，而且文章標題是你想學習的，全部用 RSS 訂閱起來
• 使用 RSS 閱讀器，從第一篇開始看標題，一直看到最後一篇。
• 必須慢慢看，不可速讀。一邊看的時候，一邊朗讀出來，念個 3~5 遍，才換下一篇。
• 不一定要每篇都朗讀，覺得會吸引你點擊的才朗讀(不用思考，讓右腦去感覺及決定這件事)，也就是只學習值得學習的標題。
• 看標題的時候，不要去分析為什麼標題下得好，也不要去想這標題到底是哪個點吸引我、讓我想點擊，總之就是關閉左腦思考，完全交給右腦複製就對了。
• 累了就休息一下，不過最好複製語言學習的模式，讓自己把時間連續泡在學下標的環境，會比斷斷續續學習更有效率。
• 看完一個網站後，再繼續其他網站。全部網站都看完後，重頭再來一次，加深大腦的肌肉記憶。

七、補充要點

1. 使用右腦學習法，無法學到像是教科書上歸納的重點。但其實每個人都有自己教會自己的能力(自教能力)，或是說自我理解的能力，因此等這項能力形成之後，每個人都有辦法再來歸納出屬於自己的重點，不一定要事前先學會別人歸納的重點。


2. 學習部落格下標，還是得知道一些基本的搜尋引擎運作知識，例如標題字數要在 25 字之內、穿插關鍵字等等，這些基本知識在「一、正規下標教學」提供的相關教學連結都有提到，請再大致瞭解一下即可。


3. 理解本篇的原理後，一樣可以套用在其他各式標題的學習，例如：

• 想要學習農場下標法，可以整天泡在農場網站看標題，很快就能學會各式吸精下標法。
• 想要學習新聞下標，那就泡新聞網站。
• 想要學廣告行銷文案，可以泡 FB 首頁一直重整，或是有大量廣告出沒的網站，Yahoo 首頁一直重整應該也可以試試。

4. 如前所述，本站文章標題沒使用特別技巧，因此不推薦訂閱本站 RSS 來學習下標。不過為了讓文章有說服力一點，證明 WFU 是會下標的，某些特別想推廣理念、或是認為比較有曝光價值的文章，我還是會稍微炫技一下，例如這篇「更換第四台業者心得﹍雖然"北都"給的優惠很多，但最後我下決定的因素是這個...」，這段時間以來，從搜尋引擎而來的訪客，日流量常常超越本站第一名的文章「網頁中文字型除了微軟正黑體, 還有這些好選擇！」。

八、後話

以上部落格下標的學習 SOP，算是把我幾年之間，間續看 RSS 閱讀器的流程，濃縮在幾天內、密集地執行完。這很像是職業選手，必須長時間密集重複單調的基本動作，直到身體形成「肌肉記憶」，在上場比賽時，可以讓身體不需思考，就做出 "反射性" 的動作。

在短時間密集、大量吸收品質好的標題字串後，我相信將來需要下標時，大腦是有辦法迅速迸出吸引目光的標題構想，不必花太多時間絞盡腦汁，這也是撰寫本文的目的。

這樣的能力，其實還不到專業的地步，不過以寫部落格文章的立場，我認為這樣就可以了，足以節省不少時間。如果要做到專業性的下標，到時就需要回歸正統的學習方式，不過有了先前打下的基礎，相信學起來就會比較順手了。

更多 SEO 相關文章：

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