Quantcast
Channel: WFU BLOG
Viewing all 787 articles
Browse latest View live

Blogger 範本__(一)各種註解方式及區塊的修改

$
0
0
這個系列的文章共有三篇,目的是為了方便修改 Blogger 範本時,可快速找到正確的修改區塊。先前發表的「讓Blogger能顯示 "單篇文章瀏覽數"」,由於這個小工具每個人想擺放的位置不一定都一樣,如此要說明擺放位置變的異常困難。

於是將範本的各個重要區塊的程式碼整理了一下,並附帶簡單說明,這樣以後除了說明方便,有篇文章可以隨時參照,自己也可將範本中的每個區塊加上註解,搜尋起來就非常迅速了。


一、範本註解方式

如果常常修改範本的話,建議在自己範本的每個區塊都加上中文註解,這樣以後只要搜尋中文註解的字串,就能很快找到對應的程式碼。

並且,範本的官方原始碼最好不要真的刪除改用註解的方式讓原始碼沒有作用即可。若將原始碼覆蓋掉,而當新裝的程式碼有問題時,除非有備份檔,否則就很難恢復原狀了。

以下內容節錄自發表在「Blogger中文社群的討論串」:

1. HTML 的註解語法:

<!-- 註解內容 -->
以上的註解內容將不會被執行。例如小工具標題的程式碼為 <h2><data:title/></h2>,若要讓標題不顯示,當然可以把這段程式碼刪除,不過建議用這樣的方式:

<!--<h2><data:title/></h2>-->

2. CSS 的註解語法:

/* 註解內容 */
例如範本中 CSS 區塊可能會看到

body {
color: $(body.text.color);
}

想要改文字顏色的色碼時,記得把原來的預設值寫到註解裡面──

body {
color: #aaaaaa ; /*預設值為 $(body.text.color)*/
}

這不是一個很好的舉例,只是為了說明概念,因為Blogger後台有更好用的改顏色工具。


3. Javascript 的註解語法:

◎ 單行註解方式:

// 註解內容

◎ 多行註解方式:

/*
註解內容
*/



二、Blogger 各區塊的語法格式

1. 配置圖:先來張 Blogger 版面配置的簡圖──



在上圖中,導覽列、網誌文章、側邊欄等等,都是一個完整的區塊,而每個區塊則分別可以塞進許多小工具,例如側邊欄的「網誌存檔」、「關於我自己」都是小工具。


2. 語法結構:每個區塊的 Blogger 語法結構都一樣,類似下面這樣:

<b:section.....>  // 這是區塊的開始
<b:widget.....>  // 第一個小工具的開始
<b:includable.....>  // 小工具的第一段程式開始
.
. 程式碼只能擺在這個區間
.
</b:includable>  // 小工具的第一段程式結束
<b:includable.....>  // 小工具的第二段程式開始
.
. 程式碼只能擺在這個區間
.
</b:includable>  // 小工具的第二段程式結束
.
. (更多程式段落)
.
</b:widget>  // 第一個小工具的結束
<b:widget.....>  // 第二個小工具的開始
<b:includable.....>
.
. 程式碼只能擺在這個區間
.
</b:includable>
.
. (更多程式段落)
.
</b:widget>  // 第二個小工具的結束
.
. (更多小工具)
.
</b:section>  // 這是區塊的結束


3. 註解程式碼:任何的 HTML、JS、CSS 程式碼,在 Blogger 語法所建構的區塊之中,只能擺放在以上「程式碼只能擺在這個區間」的位置,說的更精確一些,也就是擺放在 <b:includable.....> 與 </b:includable> 的區間。

因此要註解程式碼的話,也是得遵循這個規則,依照「一、範本註解方式」的方法,例如 "樹狀標籤程式碼" 要註釋頭尾位置,註釋擺放的位置及方法可參考以下──

<b:includable.....>
.
<!-- 樹狀標籤開始 -->
樹狀標籤程式碼
<!-- 樹狀標籤結束 -->
.
</b:includable>



三、修改小工具的設定

再參考一次版面配置的簡圖──



如上圖紅圈之處,我們會發現小工具的左邊,若有藍色活頁孔洞的話,那麼這個小工具就能 "任意拖拉、移動位置",而且編輯該小工具時有 "移除" 的選項。

對於 Blogger 預設不讓我們移動、移除的小工具,只要在範本裡更改了參數,就能達到這個目的。以頁尾的「內容出處」為例,找到這個小工具的程式碼:

<b:widget id='Attribution1' locked='true' title='' type='Attribution'>
把小工具裏 "locked" 這個參數的值 'true' 改成 'false' 即可,效果如下圖:



上面可看到,「內容出處」這個小工具的藍色活頁孔洞出現了,這樣就可以從編輯畫面將它移除了。我的作法是另外用一個「HTML/JAVASCRIPT」小工具取代,這樣才能塞得下我所有要擺的提示文字、版權宣告、圖案等等。不過吃果子要拜樹頭,Google 免費提供我們部落格平台,該給的 Credit 還是留給人家,「Powered by Blogger」這樣的文字我還是會留著。

只是,Blogger 預設不讓我們移除的小工具,先不要看了本篇就急著移除,請看完下面一篇之後再決定哪些是否移除,之後會一個個說明。


Blogger 範本」系列標題:
一、各種註解方式及區塊的修改
二、標頭、導覽列、側邊欄、頁尾區塊的程式碼
三、文章及留言區塊的程式碼

➢➢快速選單:

用 Google Takeout 備份 Blogger 網誌資料

$
0
0
Google Takeout」是 Google 提供的一個服務,用來將旗下產品的雲端資料匯出,例如 YouTube、Picasa、雲端硬碟等。

最近這個服務新增了「Blogger」的匯出功能,也是本文要介紹的內容;至於 Takeout 的詳細介紹及其他產品匯出,可參考「Google Takeout 完美支援你的所有 Docs 文件單鍵下載」、「Google Takeout 現已支援 YouTube 匯出,提供打包下載你上傳過的原始影片檔」。


一、Blogger 後台備份功能

其實 Blogger 不是沒有匯出網誌的功能,在後台 → 設定 → 其他 → 匯出網誌,如下圖──



依以上步驟即可對 Blogger 進行備份,儲存的檔案格式為 .xml



二、Google Takeout 的功用

既然 Blogger 本身已經有匯出網誌的功能了,那麼 Google Takeout 另外推出「匯出 Blogger」這功能的意義何在呢?

如果很少使用 Google 其他產品的話,的確不需要 Google Takeout,直接在 Blogger 後台備份即可;不過如果是 Google 產品愛好者,在雲端儲存了大量資料,例如 G+、YouTube、Picasa、文件、聯絡人等等,應該是會定期使用 Takeout 來備份資料。

如此在匯出資料時,可順便一起匯出 Blogger 進行備份,節省進入 Blogger 後台的時間,也算是 Google 一個小小的貼心服務。



三、Takeout 匯出 Blogger 的步驟

1. 登入 Google 帳號,進入這個網址:

https://www.google.com/takeout/


2. 如下圖 A~C 順序,按下「選擇服務」→「Blogger」→「設定」



上圖「預估檔案數量」為 7,代表我全部的 7 個部落格。


3. 以下載一個網誌為例,如下圖 A~C 順序,按「下載一個網誌」→ 「選擇要下載的網誌」→「建立封存」




4. 下載時間視網路連線狀況而定,稍等一下直到顯示下圖中的綠字「完成」為止,接著按「下載」。




5. 可能會要求重新輸入登入密碼



輸入密碼後,出現儲存畫面,檔案類型為 zip。解開 ZIP 檔,以本站的匯出檔為例,檔名為 "Blogger_調校資料庫─WFU_BLOG.atom",格式為 .atom



四、使用 Takeout 的備份檔匯入 Blogger

在「一、Blogger 後台備份功能」我們知道 Blogger 匯出的檔案格式為 .xml,而 Takeout 匯出的檔案格式為 .atom,那麼這個 atom 檔能匯入 Blogger 嗎?

經測試後,發現 Blogger 匯出的 .xml 檔與 Takeout 匯出的 .atom 檔大小一致,估計內容是相同的;因此,在 Blogger 後台使用「匯入網誌」──



如上圖,雖然系統提示檔案需要用 (.xml) 格式,但我們還是能夠選取 .atom 檔來匯入

經多次測試,若萬一不行,將這個 .atom 檔名改成 .xml,就能成功匯入了

利用 Google 問卷(試算表)當小型資料庫__更新版__(二)讀取、儲存資料庫

$
0
0

(Pic from: veryicon.com)
由於本文為更新版的內容,主要是修正舊文的參數,關於重要的原理、Json 資料格式、使用要點等內容便不再重複,請直接參考舊文「利用 Google 問卷(試算表)當小型資料庫__(二)讀取、儲存資料庫」,以下直接利用「上一篇」 取得的參數來進行資料庫的讀取與寫入。


2013.3.20 公告

最近發現 Google 又封鎖了本文經由問卷儲存資料的功能,因此目前仍是只有舊版試算表(問卷)能正常運作。在我找到新的方法之前,需要此功能的讀者,請留下你的email,如 email 不想公開,可使用「私密留言」留下 email 及註明這件事。

請注意,將來新的方法我不會公開發佈,避免發生這兩篇更新版的結果,因此只有留下 email,日後我才會個別通知。


二、讀取資料庫

1. 轉換為 Json 格式:

根據「上一篇」→「一、製作資料庫」→ 第 14 個步驟,我們得到「https://spreadsheets.google.com/feeds/list/0AikclfTTti-0dGFNMHRKdFVIaG12eE9wbUdkS1NYYXc/od6/public/basic?alt=rss」這樣的字串。

將這一行改為以下字串:

https://spreadsheets.google.com/feeds/list/0AikclfTTti-0dGFNMHRKdFVIaG12eE9wbUdkS1NYYXc/od6/public/values?alt=json-in-script

2. 分析 Json 內容:

將改過的字串貼到網址列,從瀏覽器顯示的 Json 格式資料,依照「舊版的方法」,問卷問題的資料將儲存在以下的位置:

json.feed.entry[0].gsx$問題標題.$t
在「上一篇」中我們設定了兩個問題標題 "Q1" 及 "Q2",因此這兩個問題的資料將分別儲存在:

json.feed.entry[0].gsx$q1.$t
json.feed.entry[0].gsx$q2.$t

請注意標題 "Q1" 及 "Q2" 都被自動轉換成小寫 "q1" 及 "q2" 了,因此之後使用 javascript 讀取資料時也必須用小寫的參數。


3. 印出資料庫內容:

接下來使用以下簡單的 javascript 就能呼叫試算表資料轉換的 Json 格式,呈現在自己的網頁:


B:設定處理 Json 的函數名為「test」,括弧內的參數建議設定為 json。

C:變數「a」抓出資料庫內儲存的資料組數。

E~F:設定變數「b、c」抓出每筆資料的儲存欄位

G:印出每筆資料

K:最重要的一行,綠色字串就是步驟 1 我們更改後的字串;紅色字串代表把抓出來的 Json 格式資料傳送給要執行的函數;藍色字串必須填上處理 Json 資料的函數,就是 B 行的 test 函數。

可以開一篇文章貼上程式碼看看跑出來的結果。



三、寫入資料庫

1. 利用網址傳送資料:我們在「上一篇」→ 第 7 個步驟得到的字串「https://docs.google.com/forms/d/1iVpKF_oArILEsQmjar5Ds4Zd7IRiurx6osjuiSTltbA/formResponse

再配合第 8 個步驟得到的字串──

第一筆資料:entry.146652736
第二筆資料:entry.2142316379


假設我們第一筆資料填入 "WFU BLOG",第二筆資料填入 "http://wayne-fu.blogspot.com",那麼可組合成以下字串──

https://docs.google.com/forms/d/1iVpKF_oArILEsQmjar5Ds4Zd7IRiurx6osjuiSTltbA/formResponse?entry.146652736=WFU BLOG&entry.2142316379=http://wayne-fu.blogspot.com&submit=Submit
注意以上綠字的各種符號,網址填入參數必須以「?」問號開始,每筆參數、資料以「&」符號隔開,參數與資料之間使用「=」等號,最後填入「&submit=Submit」結束;

將以上字串貼到網址列按下 Enter,再回到試算表一看:



兩筆資料均順利寫入試算表!


2. 寫入資料注意事項:

  • 第 1 點的舉例只傳送兩筆資料,如果問卷有多個問題,依照以上格式將所有問題依序塞入字串即可。
  • 當使用 javascript 傳送資料時,為了避免某些字元在網址列被辨識錯誤,字串最好經過 escape 轉換,確保能成功存入試算表。


3. 動態傳送資料:使用 Iframe 來傳送資料的提示方法請參考「舊版文章」→「二、寫入資料庫」→「3. 動態傳送資料」。



四、資料庫應用舉例

舊版文章提供了「推文系統」 當作應用的舉例,目前而言比較近期的作品「部落格即時留言板 WYBOARD」會是較好的例子。

只是這兩個當作應用範例的話,程式仍是過於龐大,不是那麼淺顯易懂。將來有機會的話會弄個簡易範例,易於資料庫讀取、寫入的實際運用說明。

取代 Blogger 搜尋小工具__新版「Google 自訂搜尋」

$
0
0

(Pic from: refurbishnotebook.blogspot.com)
最近使用 Blogger 官方的「搜尋框」小工具時,忽然發現所有的字串搜尋都顯示 "沒有結果"!於是逛了一下別的 Blogger,竟然不少網站有相同的現象。雖然不知道是什麼原因,不過既然非單一事件,那應該是 Google 的問題了。

在網路上尋找合適的替代方案,結果發現「Google 自訂搜尋」最近更新了介面、且發佈了新版安裝碼,一用之下太滿意了,當場決定換掉原本使用的 Blogger 官方小工具。簡單歸納一下「新版 Google 自訂搜尋」的優點:

1. 動態載入安裝碼 執行速度快
2. 可選擇類似「燈箱」(lightbox)的顯示效果
3. 可與 Google Adsense 連結 增加廣告收益
4. 可自訂版面顏色配置
5. 搜尋結果可顯示縮圖

以下先比較一下 Blogger 各種搜尋方案的優缺點,若想直接安裝請跳到「二、安裝 Google 自訂搜尋」


一、Blogger 各種搜尋方案比較

1. 導覽列搜尋框:如果沒有把 Blogger 官方導覽列隱藏起來的話,那麼可以在網頁最上方看到這個搜尋框。
  • 優點:真正的站內搜尋工具,保證可以搜尋到部落格每一篇文章的內容。
  • 缺點:每次搜尋都需要重整頁面,執行速度極慢。
  • 補充:可參考「增加站內的全文搜尋」這篇文章,就能在網頁中的任何地方擺放這個搜尋框,接著可把官方導覽列隱藏起來。

2. Blogger 搜尋框小工具:可在 Blogger 後台安裝小工具時選「搜尋框」來安裝。
  • 優點:使用動態載入,顯示結果速度快,不用重整頁面。
  • 缺點:其搜尋資料庫其實就是「Google 網誌搜尋」,這個資料庫不是很好,因為年代比較久遠的文章通常沒被收錄,所以經常搜尋不到;另外,其搜尋結果無縮圖。
  • 補充:如本文開頭所提,本站的文章經由這個小工具,已經完全搜尋不到任何內容了。

3. Google 自訂搜尋:本文介紹的工具。
  • 優點:如本文開頭所述。
  • 缺點:其搜尋資料庫為「Google 搜尋引擎」,萬一網站某些文章沒被 Google 搜尋引擎收錄,就會搜尋不到。





二、安裝「Google 自訂搜尋」

1. 首先登入自己的 Google 帳號,然後進入「Google 自訂搜尋」的首頁:

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



如上圖,按下「建立自訂搜尋引擎」。


2. 按下圖 A~C 的順序──



A:輸入自己部落格的網址
B:選擇語言
C:按下「建立」

2013.3.12 補充

根據這個「Blogger中文社群討論串」,輸入 Blogger 網址時請勿輸入轉址後的網址,也就是不要輸入 "xxx.blogspot.tw" 這樣的網址,要輸入 "xxx.blogspot.com" 這樣的網址,以免遇上發文者的情況──永遠只有一筆搜尋結果。



3. 按照下圖字母順序──



按「設定」→「基本資訊」→ 輸入要顯示的名稱

D:由於免費版會在搜尋結果加入廣告,如果是公司行號的話,可以有付費方案,能夠選擇不放廣告,也能有其他更進階的選項。

免費版若想要在搜尋結果不出現廣告,請參考下一篇的各種設定方式。

E:如果是圖片為主的部落格,可以在這裡開啟圖片搜尋的選項。

F:這裡是新版介面的貼心設計,隨時能在這個區塊測試搜尋結果。


4. 如果沒有「Google Adsense」帳號的話,這個設定可以先跳過;不過廣告相關的主題,仍將整理在下一篇一起說明──




5. 如下圖,按下「外觀和風格」→「版面配置」──



這次「新版 Google 自訂搜尋」增加了第一個選項「重疊」,這便是開頭所提的「燈箱」(lightbox)效果,也是我最喜歡的顯示方式,速度快又美觀。

如果想選用其他效果,這次的介面改得非常友善,所有的安裝步驟說明的非常仔細,只要按下「儲存並取得程式碼」,就會有對應的詳解。


6. 接續上個步驟,按下「儲存並取得程式碼」後,出現以下畫面──



按照網頁上的中文敘述,安裝到自己的後台範本中即可。不過,推薦一個最簡單的安裝方式,就是在 Blogger 後台新增一個「HTML/Javascript」小工具,把圖中紅框的程式碼複製過去,再把小工具拉到版面想顯示的位置即可。

如果安裝到 Blogger 範本中有疑問,新版介面還很貼心地準備了右上角紅框的「檢視 HTML 範例」,按下就有說明。


7. 如果想要調整版面配置的話,如下圖依序按下「外觀和風格」→「主題」──



選擇了任一種樣式之後,右方的搜尋框會立即顯示效果,因此可以一一嘗試各種主題樣式。

另外,也可選擇「主題」右邊的「自訂」,有更多的版面細項設定。

待版面細項都決定後,按下方的「儲存」即可,不必選擇「儲存並取得程式碼」,因為這些版面設定是儲存在雲端的 Google 帳號資料庫,而非放置在安裝程式碼中。


8. 如果搜尋結果不想出現文章縮圖的話,可以在下圖的「外觀和風格」→「縮圖」來關閉;不過這麼優的功能應該不太會關掉吧~




9. 如果想讓介面更中文化一些,可以到下圖的「搜尋功能」→「進階」──




分別按下上圖中的「Relevance」、「Date」字串來進行修改──




分別將「Relevance」改成「相關性」(或自訂字串)、將「Date」改成「日期」,並按下「儲存」。結果將如下圖──



以上的操作過程,只針對將 Blogger 的搜尋小工具置換成「Google 自訂搜尋」的必要步驟。其實「Google 自訂搜尋」還有一些其他的強大功能,如果對於這個工具有其他的需求,那麼可以嘗試一下各種選項,開發出更強大的應用。



三、搜尋效果畫面

將「Google 自訂搜尋」安裝到部落格後,來試試看效果。一般而言,站內搜尋的字串通常不會是熱門的關鍵字,那麼是不太會出現廣告的。

假設在本站搜尋「推文」這個字串,可看到以下的燈箱搜尋效果──



1. 右上角排序的方式出現了自訂的中文字串

2. 文章若有圖片則會顯示縮圖,效果很好。

3. 這次的搜尋字串非熱門關鍵字,搜尋結果沒有出現廣告;不過仍會有出現廣告的機率


假設在本站搜尋「三國志」,可看到以下的燈箱搜尋效果──



由於「三國志」這個關鍵字太熱門,"鐵定" 會出現對應字串的廣告。在這樣的情況下,訪客若點擊了廣告,收益將歸 Google 所有。

俗話說「肥水不落外人田」,與其這樣,這種收益還不如自己賺;只要有 Google Adsense 帳號,此時的收益便可歸自己所有

由於篇幅的關係,「Google 自訂搜尋」廣告相關的主題待下篇敘述,同時也提供不顯示廣告的操作心得。


新版 Google 自訂搜尋」系列標題:
一、安裝步驟
二、連結 Google Adsense 及關閉廣告

➢➢快速選單:

新版「Google 自訂搜尋」與「Google Adsense」的連結及如何關閉廣告

$
0
0

(Pic from: oqzigen.blogspot.com)
接續「上一篇」,本篇的內容為處理「Google 自訂搜尋」的廣告相關操作。


一、「Google 自訂搜尋」無廣告的申請條件

「Google 自訂搜尋」會不定時出現廣告,申請者有以下身份時,可讓廣告不出現:

1. 公司行號付費版

如同「上一篇」→「二、安裝 Google 自訂搜尋」→ 步驟 3 的畫面──



上圖 D 按下「升級到 Site Search」後,填寫公司行號資訊,可申請使用付費版,將廣告畫面關閉。


2. 免稅、慈善機構



如上圖,在「企業」的選項裡,如果公司的身份是「免稅或慈善機構」,可以在這個畫面選擇關閉廣告的顯示。不具備這樣的身份而在這裡選擇關閉廣告,可能需要比較大顆的心臟~


3. Google Adsense 帳號

如果有 Google Adsense 帳號的話,請參考本文之後的步驟,能夠關閉廣告的出現,而不必擔心第 2 點 Google 的抽查、索取證明。





二、連結 Google Adsense 帳號

1. 如同「上一篇」→「二、安裝 Google 自訂搜尋」→ 步驟 4 的畫面──



依照圖中字母的順序,按下「賺取收益」→「開啟」→ 填入資料 → 選擇語言 → 「送出」,即可將「Google 自訂搜尋」與「Google Adsense」帳號作連結。


2. 如果上面步驟 C 的 "電子郵件"、"郵遞區號"、"電話後 5 碼" 等項目不確定正確的資訊,請進入自己的 Google Adsense 帳號:

https://www.google.com/adsense/v3/app?hl=zh#account



參考上圖紅框的部分,在「首頁」→「帳戶配置」裡面,分別能找到需要填寫的資料:

登錄電子郵件:"電子郵件"

地址:可找到 "郵遞區號"

電話:"電話後 5 碼"


3. 送出申請後,系統會寄一封信到上個步驟的郵件地址,內容大致類似以下:

您好,您曾經透過 www.google.com/cse 申請使用 AdSense,因此收到這封電子郵件。要透過 www.google.com/cse 使用 AdSense,您必須授權 www.google.com/cse 存取您 AdSense 帳戶中的廣告程式碼和報告。請按照下列連結進行相關設定:https://www.google.com/adsense/a?u=xxxxxxxx&s=xxx&d=xxxxx.....
按下上面的連結後,稍待一段時間讓系統處理。


4. 等系統處理完後,回到「Google 自訂搜尋」的設定畫面──



如上圖,在「設定」→「賺取收益」的畫面,如果出現「這個帳戶連結到以下 Adsense ID:pub-xxxxxxxx」的話,代表 Google Adsense 帳號已經連結成功,之後有訪客點擊「Google 自訂搜尋」的廣告時,收益就會算在我們的帳號上。

如果不想要搜尋畫面出現任何廣告,那麼可以在此畫面中,如下方紅框所示,在「廣告版面配置」的選項,選擇「關閉」即可。如果想賺取收益的話,小心這裡不能選擇「關閉」。



三、無廣告的搜尋結果

如「上一篇」的搜尋顯示畫面,"三國志" 是個非常熱門的廣告關鍵字,以此字串在本站搜尋必定會出現廣告──




當我們連結了 Google Adsense 帳號,並在「廣告版面配置」選擇「關閉」廣告後,再來搜尋 "三國志" 這樣的字串──



如上圖,廣告消失了。

因此,無論是否要賺取廣告收益,「Google 自訂搜尋」結合「Google Adsense」是一步進可攻、退可守的活棋。


新版 Google 自訂搜尋」系列標題:
一、安裝步驟
二、連結 Google Adsense 及關閉廣告

➢➢快速選單:

Blogger 範本__(二)標頭、導覽列、側邊欄、頁尾區塊的程式碼

$
0
0
本篇的內容為 Blogger 範本各個區塊的程式碼整理,包含除了文章區塊外的所有區塊(標頭、導覽列、側邊欄、頁尾區塊),並附帶簡單說明。建議參考系列文「第一篇」,在範本中加上註解,如此日後搜尋、修改都很方便。

以下大標題依照範本中出現的順序排列──


一、官方導覽列

<b:widget id='Navbar1' locked='true' title='導覽列' type='Navbar'>
<b:includable id='main'>
.
. 官方導覽列程式碼
.
</b:includable>
</b:widget>

1. 這個區塊可參考這個「Blogger中文社群討論串」將其隱藏起來。

2. 建議不要刪除「官方導覽列」這個小工具,因為裡面的程式碼綁定了一些重要功能,例如 "小工具的快速編輯圖示";如果把「官方導覽列」刪了,會導致這些圖示消失而無法快速編輯。因此如果不想看到「官方導覽列」,建議隱藏就好。



二、標頭區塊(HEADER)

1. 整個區塊的範圍

<b:widget id='Header1' locked='true' title='WFU BLOG (標頭)' type='Header'>
.
.
</b:widget>

以上為整個區塊程式碼的範圍;title 後面的藍色字串是自己部落格的名稱。

可參考「第一篇」,將 locked 的參數由 "true" 改為 "false",便可將「標頭」區塊拉到別的位置。

實際的應用可參考「將 Blogger "標籤" 小工具放在導覽列實作」,讓「標頭」區塊的位置跑到「網頁」小工具的下方。


2. 網站名稱

<b:includable id='title'>...</b:includable>
在標頭區塊中,以上區間為顯示 "網站名稱" 的程式碼;其中代表網站名稱的字串為 <data:title/>


3. 網站敘述

<b:includable id="description">...</b:includable>
在標頭區塊中,以上區間為顯示 "網站敘述" 的程式碼;其中代表網站敘述的字串為 <data:description/>



三、水平功能導覽列("網頁"小工具)

<b:widget id='PageList1' locked='false' title='網頁' type='PageList'>
.
.
</b:widget>

1. 這個區塊是指官方的「網頁」小工具,以上為整個區塊程式碼的範圍。

「網頁」小工具最好不要移除,否則將來要裝回去可能困難重重,請參考這個案例:「Blogger 中文社群討論串

因此如果不想顯示官方「網頁」小工具的話,可以在後台選擇將其隱藏起來,如下圖:




2. 如何將「網頁」小工具改成下拉選單,是詢問度很高的功能,可參考以下兩篇文章:



四、側邊欄

側邊欄小工具的程式碼結構都差不多,請按以下範例程式碼舉一反三即可。


以上 A~M 為一般小工具的程式碼結構。

A:紅色字串為小工具的標題字串,通常在範本裡搜尋標題字串就能找到目標小工具區塊。

B:如果這個小工具只有一個程式區段,那麼結構就會是 B~L行這樣,B 行的 id 名稱會是 'main';如果有多個程式區段,那麼就會有多個類似 B~L 行的結構,但是起始的 id 名稱會不同。

C~E:顯示小工具標題的程式碼;如果不想顯示小工具標題,將 D 行註釋起來即可,就像這樣:<!--<h2><data:title/></h2>-->

F~K:這個區間為小工具真正執行的程式碼;如果是「HTML / Javascript」小工具的話,G~I只會顯示 <data:content>,這個字串代表輸入到「HTML / Javascript」小工具的所有程式碼。

J:這一行代表「快速編輯的小圖示」,不過不一定總是在這個位置。

「側邊欄小工具」必須小心的是,儲存在小工具的內容,似乎沒有辦法備份,萬一不小心刪除了小工具,裡面的資料就再也無法恢復!例如我曾誤刪了「網誌清單」小工具,結果裡面的所有網址連結再也無法恢復,只能憑印象一個個手動增加回去,但結果就是一些好網站的網址還是忘了...

因此填入側邊欄小工具的內容,例如各種網址連結資料、「HTML / Javascript」小工具的程式碼,都得自己另外備份才保險。



五、頁尾版權宣告

<b:widget id='Attribution1' locked='true' title='' type='Attribution'>
<b:includable id='main'>
.
.
</b:includable>
</b:widget>

這個小工具如果刪除的話,倒是沒什麼危險性。刪除的方法及替換方式請直接參考「第一篇」→「三、修改小工具的設定」即可。

接下來,下一篇要介紹的是範本裡最重要的「文章及留言區塊」程式碼。


Blogger 範本」系列標題:
一、各種註解方式及區塊的修改
二、標頭、導覽列、側邊欄、頁尾區塊的程式碼
三、文章及留言區塊的程式碼

➢➢快速選單:

電影播放時間自動通知__(一) RSS 訂閱__Yahoo Pipe 應用

$
0
0

(Pic from: yoursitegraphics.com,bodhih.com)
你也喜歡看電影嗎?長久以來,為了查詢第四台電影播放時間,往往需要花費許多時間。由於頻道業者能提供的節目時刻表,大多是未來的二~四星期,為了找出哪些好看的電影,我們只能定期不斷地做 "主動查詢" 的動作

為了讓「看電影」這件事更有效率,我的構想是,能否有一個程式或機制,輸入所有想看的電影清單後,系統能自動在節目播映之前送出通知,那麼我們就能提早將這件事放入行事曆,或進行預錄的排程。在 Android 平台上有 APP 提供這項服務,可惜目前我還未使用這平台,因此在 PC 上得另尋他法。

最終找到的方案為使用「Yahoo Pipe」來完成這項任務,本系列的內容為利用訂閱 Yahoo Pipe 製作的 RSS feed,來通知自選電影的播放時刻,而這個 RSS 會自動在兩天前通知電影播放時刻

以下先大致說明原理,若想直接看 RSS 的操作及訂閱請直接跳到「二、修改自選電影清單」


一、製作原理

1. Yahoo Pipe 介紹:這算是最強大的 RSS 製作工具,他很難上手,但能做到所有其他 RSS 工具做不到的程式化操作,想瞭解多一點可參考這幾篇文章:

2. 取得網頁資料:「Fetch Page」是 Yahoo Pipe 的一個強大功能,能夠抓取網頁資料存成 RSS。利用這個功能,可以找到一個電影節目表的網頁,例如固定將兩天後的節目表網頁燒成初始的 RSS。

3. 過濾關鍵字:Yahoo Pipe 的「filter」功能可過濾關鍵字,只要設定一組喜愛的電影名稱清單,每當 RSS 內容出現這些關鍵字時,才過濾出含關鍵字的節目表,這才是最終的 RSS 內容。

4. 訂閱 RSS:可用 RSS 閱讀器或是 email 來訂閱最終的 RSS 內容,如此我們需要的自選電影播放時間表,就會自動在播放前傳送給我們,再也不需要花時間上網查了!



二、修改自選電影清單

請按以下的步驟操作──

1. 為了使用 Yahoo Pipe,請先申請 Yahoo 帳號並登入。

2. 為了方便設定及操作,我已經用 Yahoo Pipe 做好一個公開使用的模組:

http://pipes.yahoo.com/pipes/pipe.info?_id=12a68ce40413af1fad08bed6d8d7182b



請點上圖紅框的「View Source」進入編輯電影清單的畫面。


3. 下圖最重要的是右上角的「String Builder」,其他的框框及水管都不必管──



在紅框裡面的預設字串為「神鬼認證|軍官與魔鬼|機械公敵|功夫|以愛之名|絕地任務」,這便是自選電影清單的格式:
  • 每個電影字串名稱之間以 "|" 隔開
  • 絕對不要有任何空格除非就是要以空格當字串來處理
  • 最後一個字串的後面不要再有 "|"
將這裡的字串改為自訂要追蹤的電影清單即可,且建議可以依序先填一些兩天~五天後的電影名稱,來測試 RSS 訂閱效果;待電影播放過之後,這裡的字串隨時都可以修改。


4. 字串修改完以後,依順序 A. 先按右上角的「Save a copy」──



左上角可看到 Pipe 名稱前自動多了個 "Copy of" 的字串,接著 B. 按下「Properties」,可修改 Pipe 的名稱及敘述(這裡假設名稱改為 "自選預約電影清單"),最後按「OK」。




如上圖,依序 A. 按下「Save」→ B.「Run Pipe」


5. 現在這個新的 Pipe 經過儲存後,將會出現在自己的 Yahoo Pipe 帳號裡面──



以後要修改電影清單的字串時,從圖中的「Edit Source」進入,接續步驟 3 的動作即可。

這個圖還有幾點重要的事項:
  • A:為了日後修改電影清單方便,可對「Edit Source」按滑鼠右鍵複製連結網址,將這個網址加入瀏覽器「我的最愛」,每次要修改電影清單時點這個連結即可。
  • B:請對「Get as RSS」按滑鼠右鍵複製連結網址,供之後訂閱 RSS 或 EMAIL 之用。
  • C:這個圖能夠預覽 RSS 的內容,就像圖中 List 的「2013-3-26 HBO 自選電影通知」這個篩選結果。不過由於 Yahoo Pipe 的更新通常需隔五分鐘以上,若曾對 Pipe 的內容修改、按 save 儲存後,這個預覽畫面在五分鐘內仍會是舊的預覽內容,直到約五分鐘後才能顯示新的預覽畫面。


三、使用 RSS 閱讀器訂閱

使用 Yahoo Pipe 製作完 RSS 後,最方便的訂閱方式便是使用 RSS 閱讀器,在這裡推薦使用「Google Reader」 來訂閱;「這篇文章」有 Google Reader 的簡介,以下為訂閱的操作步驟──

1. 登入 Google 帳號,進入 Google Reader 網頁:

http://www.google.com.tw/reader/view/



按左上角「訂閱」,輸入「二、修改自選電影清單」→「步驟 5」→「B 點」的網址。


2. 如果之前在「二、修改自選電影清單」→「步驟 3」輸入清單時,沒有先填一些二~五天後的電影名稱,那麼此時的訂閱暫時還不會有任何通知;如果清單裡已經有二天後的電影,那麼此時就會有兩天後的電影播出時刻表。

以下這個圖是填入一些測試的電影節目名稱後,逐日依序出現的 RSS 通知,從右方的日期可看出,兩天前就收到了通知:




3. 以今天 3/25 為例,會收到 3/27 的自選電影通知,點開「2013-3-27 HBO 自選電影播放通知」看看效果──



上圖可看到橘色粗體、斜線的字串便是自選電影清單裡的字串,會特別標示出來。如果不是使用 Google Reader 的話,別的 RSS 閱讀器不一定支援橘色字體的 CSS 語法

另外此圖可看到,節目表是由「大豐有線電視」的網頁提供,點選連結會直接跳到當日的節目表網頁。



四、RSS 閱讀器的缺點

本篇介紹了 Google Reader 訂閱自選電影的 RSS 流程。相信有關注 Google Reader 的話,應該會知道 Google 日前宣布了 2013/7/1 會中止 Google Reader 的服務。

不過這並不打緊,因為使用 RSS 閱讀器訂閱自選電影並非最佳選擇,主要的原因為:

1. RSS 閱讀器更新的速度並不快。以 Google Reader 為例,熱門的 RSS feed,也就是很多人訂閱的 RSS,幾乎每分鐘都會檢查有無更新;但若很少人訂閱的 RSS,會好幾個小時才檢查一次。而本文的自選電影清單 RSS,對於每個使用者而言,都是獨一無二的 RSS(使用自訂的電影清單),代表這都是只有一個人訂閱的 RSS,因此 Google Reader 檢查的間隔會非常久。

2. 根據本文所製作的 RSS,如果沒有天天打開 RSS 閱讀器時,例如曾經連續五天未使用 Google Reader,那麼過去五天的自選電影時刻通知是會被跳過去的

根據以上兩點,如果沒有習慣使用 RSS 閱讀器(非重度使用者)、或是怕 Google Reader 停止服務的讀者,請參考下一篇用 EMAIL 訂閱自選電影清單的流程。另外下一篇也會說明如何操作「預先測試 Yahoo Pipe 篩選電影清單的結果」。

電影播放時間自動通知」系列標題:
一、RSS 訂閱__Yahoo Pipe 應用
二、EMAIL 訂閱__IFTTT 應用

➢➢快速選單:

電影播放時間自動通知__(二) EMAIL 訂閱__IFTTT 應用

$
0
0

(Pic from: yoursitegraphics.com,bodhih.com,crunchdot.com)
接續「上一篇」,本篇先介紹如何測試 Yahoo Pipe 的電影篩選結果,然後說明用 Email 訂閱 RSS 的最佳方案。


一、Yahoo Pipe 成果測試

1. 在 Yahoo Pipe 接來接去的水管之中,最後一條水管一定要接到最下方的「Pipe Output」區域,才能生成 RSS。把所有水管連接好後,想要預覽 RSS 生成結果也很簡單,如下圖,把畫面拉到最下方,滑鼠對著「Pipe Output」點下去,讓他成為 "橘色",那麼下方的灰色分隔視窗就會產生結果供預覽──



如圖可以看到,當初這是 3/23 做的測試,根據原本的電影清單字串,篩選出了「2013-3-25 HBO 自選電影播放通知」這個結果(兩天後的電影)。


2. 上圖只顯示了 RSS 的標題,想看 RSS 內容的話,可先把標題左邊的箭頭點開,再把 "description" 的箭頭點開──



上圖就是點開後的 RSS 內容,符合電影清單字串的部分,會以 "橘色、粗體、斜體" 顯示。


3. 根據以上的示範操作,若想測試一下這個系統,預覽自己選定的電影清單字串,可以找一下兩天後第四台播放的電影名稱字串,替換掉預設的字串,再按「Pipe Output」就能預覽結果。


4. 一點小提醒,如上一篇所提,變更電影清單字串並儲存以後,舊的 Pipe 通常間隔五分鐘才會真的寫入資料庫。如果想要讓變更立即生效,那麼有個小訣竅,不要按「Save」來儲存,改按「Save a copy」,另存一個 pipe,就可立即寫入資料庫



二、操作 IFTTT 使用 EMAIL 訂閱 RSS

1. IFTTT 介紹

上一篇」曾提到 RSS 閱讀器有先天的缺陷,沒打開就不一定會更新。因此如果能改用 EMAIL 訂閱 RSS,那麼就能保證每個電影播放通知都會收到。

經測試之後,最佳的方案為「IFTTT」,這個網路服務的意思為 "If This Then That" 的縮寫,代表指定某個網路服務 A 的某個條件後,觸發另一個網路服務 B,整個流程經設定後會在雲端自動完成。藉由這個服務,我們可以設定當有「新的 RSS」時,觸發「寄送 EMAIL」這個動作,且 IFTTT 最棒的一點是,他每隔 15 分鐘便檢查一次,算是我找到的服務裡面最快的了。

想多瞭解 IFTTT,可參考這篇文章:「ifttt 讓你手上的網路服務比別人聰明,讓網際網路自動做很多事


2. IFTTT 設定流程

如何註冊帳號,請參考上面那篇文章連結。申請完帳號後,請按以下圖示的步驟操作──



上圖依序按「Create」→「this」




選「Feed」




選「New feed item」




在「Feed URL」裡面,填入「上一篇」→「二、修改自選電影清單」→「步驟 5」→「B 點」的連結網址

然後按「Create Trigger」




按「that」




選「Email」




按「Send me an email」




「Subject」與「Body」可以使用預設的內容,也可以調整 email 的格式;例如「Body」裡面其實可以留下 "EntryContent" 就好,將後面 "<br>....." 到最後的字串全部刪除。

然後按「Create Action」




「Description」可以填一些備註的內容,也可以直接按下「Create Recipe」,完成設定,系統會每隔 15 分鐘進行檢查。




如果想強制系統馬上檢查 RSS,可以如上圖先按「My Recipes」,再按下剛剛建立的項目。




接著按下「Check Now」就能強制系統進行檢查 RSS 有無更新。

另外如果按「View activity」,會顯示系統曾執行過的動作列表。



三、EMAIL 畫面

來看看 Gmail 收到通知的畫面──



1. 從右方的日期可看出,電影播出兩天前就收到了通知。

2. 從最新的兩封 email 來看,凌晨 0:14 就收到通知,符合 IFTTT 每 15 分鐘檢查一次的規律。

使用本篇的方案,除了不會漏掉任何一封通知,還能夠以最快的速度收到通知,因此 IFTTT 是個值得推薦、值得花一些時間上手的好服務。


電影播放時間自動通知」系列標題:
一、RSS 訂閱__Yahoo Pipe 應用
二、EMAIL 訂閱__IFTTT 應用

➢➢快速選單:

三國志11__251 陶謙開局__固守小沛大作戰

$
0
0
PTT KOEI 板有人詢問 251 陶謙小沛開局,以下為發表於該板的內容──

趁連假期間解一下這個開局。由於 step by step 的製作耗時,本篇針對重點說明,不過相信讀過部落格其他戰記的朋友應該可以看得懂。


一、以「陣」癱瘓下邳

小沛有個簡單、威力強大(有點作弊)的開局方式。在壽春東方的大塊土地,被劃分為下邳的領土,如果在這個區域建「陣」,下邳會派出守軍繞道小沛 → 壽春來攻擊陣,如此就能讓下邳與壽春不斷交戰。



操作方法如上圖,開局後陶謙帶隊走進壽春,引出兩隊。接著移動到壽春邊界最西處。




等陶謙站著不動被消滅,同回合另一隊可溜進壽春境內。




接著移動到壽春東方的下邳境內建「陣」。




之後呂布軍為了攻擊陣,會持續進入壽春境內,下邳與壽春的威脅同時消失,只剩北海比較有攻勢。以小沛的將領素質、數量,要吃下北海算是易如反掌吧!

只是,對於「下邳會出兵繞道打壽春東方的陣」這個設定,個人覺得不合理,畢竟這兩處不算是同一塊土地,這麼做算是太過欺負 AI。因此想看看小沛是否有比較合理的防守技巧。





二、以「火球」封鎖通道

小沛這四戰之地不下壽春,最麻煩的是下邳往小沛的通道,而其他每個方位的威脅還算有解。

1. 壽春:

五月一到壽春就會進攻──



如果在上圖通道擺「陣」,配合左方經濟區的建設一同卡住 ZOC,壽春會判斷此路非常難行而繞道陳留這條路。




小沛可在 5/1 搶先進入陳留境內,引出陳留守軍。




之後壽春繞道陳留的部隊,會與陳留守軍火拼。只要陳留、壽春分屬不同勢力,小沛就能利用以上的步驟與技巧,控制這兩個勢力不斷廝殺。

只是,依據行軍部隊方針的不同,部分壽春部隊會無視敵軍直衝小沛,可能還是會有一小撮部隊跑進小沛,而必須進行短兵相接。壽春這方面無法保證 100% 不必防守。


2. 北海:

由於北海人少,很晚才會進攻小沛,如果想賺技巧 P,可視戰況來決定是否跟北海交戰。



如果不想跟北海交戰,可以在上圖位置建兩個土壘,將來北海進攻小沛時,就會繞道下邳,剛好被呂布軍吃乾抹淨。


3. 下邳:

對於只有一格通道的防守,使用火球可以做到完全封鎖 AI 的進攻。可參考「194 呂布 固守濮陽大作戰」→「三、火鳳燎原」的操作要點。

對於通往下邳的通道,只要 5/1 起派出足夠的人手,每回合重複「做火球」→「點火」→「滅火」→「做火球」... 這樣的循環,遲早可以燒到呂布派不出進攻部隊。

這個方法的缺點是,每回合有不少機械化操作,每個月得花費 600 金。直到呂布發不出兵之前,都會使小沛的經濟處於拮据狀態。



三、以「言毒」封鎖通道

前面兩個策略,都是過去已經寫過的思路,這次真正在思考的是,能否利用小沛的人力特質,來完成防守?

最後發現利用陳珪的「言毒」,可以完全封鎖往下邳的一格通道,且每個月可省下火球的 600 金,如此小沛的經濟發展不會受到阻礙。

首先,壽春方面的防守,請參照「二、以 "火球" 封鎖通道」→「1. 壽春」



於 5/1 前,在圖中位置建軍樂台,但不可完成,保持接近完成的耐久度即可。

等到 5/1,搶在呂布出兵前,陶謙帶一擊必殺的士兵數(1~500兵),進入下邳城兩格內;另一人同樣帶一擊必殺的士兵數(1~500兵),例如派張闓,就算被抓也不可惜,站在圖中位置。




下邳出陣的第一個部隊(張遼),必消滅陶謙(君主不用擔心被俘虜);第二隊(魏續+貂蟬)必消滅兵力一擊必殺的張闓;若出了第三隊(宋憲)以上則會攻擊陣。

稍微解釋此佈陣的用意,只要圖中下邳第二個出陣的隊伍(魏續+貂蟬)沒有陳宮,這個戰術就算成功了八、九成:

1. 如果呂布會出陣,應該都會第一個出陣。陶謙的犧牲可確保「呂布+陳宮」的組合不會出現在圖中魏續的位置。

2. 陳宮若不與呂布組隊,通常是單獨出陣,但陳宮武力不高,那麼下邳第二個出陣的通常輪不到陳宮。

3. 陳珪的智力在呂布軍中只輸陳宮,只要按本回合的操作方式,陳宮將很難出現在下邳第二個出陣部隊,這代表圖中魏續這個位置的部隊,必中陳珪(智82)的「偽報」,即使有貂蟬(智81)也是沒輒。

4. 如果不小心把軍樂台完成了,由於 ZOC 的關係,魏續將走不到圖中的位置。




輪到陶謙行動,陳登馬上完成軍樂台,使 ZOC 生效;陳珪對魏續偽報,曹豹弩兵對魏續放火矢,其他運輸隊攻擊魏續並將之圍住。

說明一下呂布軍的行動,圖中這三隊為迎擊部隊(只帶 10 旬米),當境內無敵軍(消滅陶謙)後,便會依照出陣順序撤退:

張遼:撤退回城
魏續:被偽報,因軍樂台卡住 ZOC,一次只能撤退一格,但撤退位置被宋憲佔去,導致無法行動。
宋憲:等魏續行動完後,撤退回城。




等下邳的迎擊部隊撤退後,下邳進攻小沛的部隊正式出動(帶的是 20 旬糧),
不過由於 ZOC 被卡,全部塞在魏續後面,出陣順序分別為張虎、侯成、陳宮。以下詳細說明這張圖:

1. 陳登、臧霸、孫觀一定要圍住魏續,不可露出空隙,否則下邳出陣部隊有「呂布」的話,飛將無視 ZOC 就會溜進來了。

2. 陶謙軍每回合持續對魏續偽報、減少魏續兵力、修陣即可。根據「194 呂布 固守濮陽大作戰」,臧霸、孫觀智力比陳登低,可能會被混亂,這無妨,他們倆的任務是把位置卡住,讓飛將進不來。

3. 魏續的行動次序在張虎前面,這導致魏續永遠無法撤退(張虎缺糧撤退時,魏緒仍然無法撤退);而張虎因為魏續的佔位,導致他永遠無法往前一格進攻小沛。

4. 這個圖的風險在於,如果張虎、侯成的位置有弩兵,陶謙軍可能會被弩兵攻擊。雖然下邳初始兵裝為 40000 馬,但鍛冶廠何時完成、在五月前會生產什麼兵裝無法預測。因此,五月之前的時候可以先存個檔,看一下呂布的兵裝狀態──



如果沒有生產弩兵,那麼可以使用「言毒」戰術沒有任何問題;如果有生產弩兵,那麼要有心理準備,可能得從小沛不斷調人手,看是要補充兵力,或是補上臧霸、孫觀的站位。

如果弩兵出陣走到張虎、侯成的位置,覺得操作很繁複的話,也許可以考慮改用「二、以 "火球" 封鎖通道」的戰術了。




順利的話,慢慢地可以將魏續的兵力控制到成為兩位數,此時停止對魏續的攻擊。解釋一下:

1. 如圖中所示,魏續剩下的米足夠 57 兵吃上好多年,不必擔心糧盡潰散而無法塞住呂布軍。

2. 陳珪「偽報」花費氣力 15,軍樂台每回合恢復氣力 10,看似氣力遲早會用完。不過,根據「三國志11 "部隊及將領屬性"相關文章彙整」→「二、兵力懸殊時混亂率的分析研究及公式」計算,目前魏續 57 兵在陳登 2000 兵旁邊,每回合約有 30% 的機率會自動陷入混亂,這代表陳珪不必每回合使用偽報,因此氣力是用不完的。

3. 如圖,魏續隊正是自動暈的狀態;而如果想增加魏續自動暈的機率,可以補充陳登的士兵數

4. 很巧,這個戰記呂布很忙沒有出陣,那麼臧霸、孫觀、陳登的位置都不需要有部隊。圖中的站位是假設呂布出陣時的操作方式。




到了 252 年,缺糧的呂布軍都撤退完了,整個下邳都沒米了依然硬是派出高順、張遼來騷擾小沛。而小沛經過一年的休養生息,應該是累積了一定的實力,接下來,就看玩家怎麼打算了:

1. 想以逸待勞就把北海的通道用土壘 x 2 堵起來,讓北海進攻部隊繞道下邳;此時,比較慘的應該是缺糧的呂布軍,玩家可以輕鬆地撿尾刀了~~

2. 想靠實力的話,反正下邳已經沒有威脅,之後可以專心地跟孔融交戰了。

Blogger 新手入門(筆記)

$
0
0
一、官方說明文件

Blogger 官方整理了不少詳細的資料,對於瞭解 Blogger 的概念很有幫助──

 「Blogger 入門指南
 「Blogger 說明


二、「Shiou's Notepad」整理

這個網站整理了一些 Blogger 的基本操作,相信看了可以很快對 Blogger 的使用上手──

 「Blogger新手入門首部曲(基本設定篇)
 「Blogger新手入門二部曲
 「Blogger新手入門三部曲(修改HTML篇)



三、「0 與 1 謎詭世界」整理

資深部落客 綸太郎 整理了一些與網友問答的新手常見 FAQ,共有四篇──

 「Blogger 新手基本技巧問答(一)
 「Blogger 新手基本技巧問答(二)
 「Blogger 新手基本技巧問答(三)
 「Blogger 新手基本技巧問答(四)



四、其他

 「用部落格平台建立餐廳官網教學首頁」:如果有意使用 Blogger 當作經營事業的平台,例如架設餐廳的官網,那麼這個網頁值得參考。這個系列的教學文章,將包含如何從無到有架設官網、網站應有的內容、各種小工具的安裝、經營的觀念等等。

 「快速學習修改Blogger CSS筆記」:這篇文章整理了 CSS 的基本、進階概念的許多參考文章。



五、進階相關文章整理

看完了以上文章,想瞭解更多的 Blogger hack、小工具、知識、資源等等,可在側邊欄「文章分類」→「電腦」→按下「Blogger 筆記」這個標籤列出所有筆記,或直接參考以下:

Blogger 側邊欄相關工具及技巧
Blogger 文章相關工具及技巧
Blogger 小技巧
Blogger 小工具
部落格廣告商及使用技巧整理
Blogger 留言相關工具及技巧
Blogger 能見度、SEO 相關技巧
Blogger 周邊產物
Blogger 知識

Blogger 範本__(三)文章及留言區塊的程式碼

$
0
0
本篇的內容為 Blogger 範本中,文章及留言區塊的程式碼整理,並附帶簡單說明。建議參考系列文「第一篇」,將範本中的每個區塊加上註解,如此日後搜尋、修改都很方便。

為了避免提供的程式碼錯誤,特地開了一個全新的網誌(使用新範本),以確保本系列文提供的程式碼是最乾淨的狀態。如果各位讀者範本裏的程式碼跟本文的有所出入,很可能該區塊曾經修改過了。

<b:widget id='Blog1' locked='true' title='網誌文章' type='Blog'>
.
. 文章及留言區塊程式碼
.
</b:widget>

本文要說明的「文章及留言區塊程式碼」全都在以上的「網誌文章」小工具中,以下程式碼內容依照範本中出現的順序排列,但不一定是顯示的順序;另外,行動版的內容跳過。


一、上下頁區塊

<b:includable id='nextprev'>....</b:includable>
以上區間為文章區塊底部的上、下頁區塊,常見修改之處為:
  • <data:homeMsg/>:代表預設字串「首頁」
  • <data:newerPageTitle/>:代表預設字串「較新的文章」
  • <data:olderPageTitle/>:代表預設字串「較舊的文章」
以上這幾個可改為自訂字串、圖案。



二、分享按鈕區塊

<b:includable id='shareButtons' var='post'>....</b:includable>
以上區間為分享按鈕的程式碼呼叫區域(非顯示區域)。想要修改這部分的內容、或是新增分享按鈕(例如 Plurk),可以參考這篇「【Blogger】新增 Plurk 分享按鈕」 →「2.2. 修改 XML」→「2.2.4.」,這裡的程式碼將分享按鈕個別分開顯示,可以看得更清楚、更容易修改。



三、文章區塊

<b:includable id='post' var='post'>....</b:includable>
以上區間為文章區塊的程式碼,算是本文最重要的部分,以下分段詳細列出。列出這些內容的主要應用方法為,當想要安插一些自訂文字、圖片、或小工具,卻不知要安插在什麼位置時,可查閱這個部分的程式碼。

例如想安插在「文章標題」的前面或後面,那麼找到「1. 文章標題」的程式碼後,安插在其前面或後面即可。


1. 文章標題

<b:if cond='data:post.title'>
<h3 class='post-title entry-title' itemprop='name'>
<b:if cond='data:post.link'>
<a expr:href='data:post.link'><data:post.title/></a>
<b:else/>
<b:if cond='data:post.url'>
<b:if cond='data:blog.url != data:post.url'>
<a expr:href='data:post.url'><data:post.title/></a>
<b:else/>
<data:post.title/>
</b:if>
<b:else/>
<data:post.title/>
</b:if>
</b:if>
</h3>
</b:if>

以上代表「文章標題」字串的程式碼為 <data:post.title/>


2. 文章內容

<b:if cond='data:blog.metaDescription == ""'>
<!-- Then use the post body as the schema.org description,
for good G+/FB snippeting. -->
<div class='post-body entry-content' expr:id='"post-body-" + data:post.id' itemprop='description articleBody'>
<data:post.body/>
<div style='clear: both;'/> <!-- clear for photos floats -->
</div>
<b:else/>
<div class='post-body entry-content' expr:id='"post-body-" + data:post.id' itemprop='articleBody'>
<data:post.body/>
<div style='clear: both;'/> <!-- clear for photos floats -->
</div>
</b:if>

以上代表「全部文章內容」的程式碼為 <data:post.body/>

若想一次替換多篇文章內容的字串,可參考「Blogger 能否一次修改多篇文章的文字或內容?」,在「文章內容」的程式碼後面加入替換字串的語法。


3. 繼續閱讀

<b:if cond='data:post.hasJumpLink'>
<div class='jump-link'>
<a expr:href='data:post.url + "#more"' expr:title='data:post.title'><data:post.jumpText/></a>
</div>
</b:if>

以上代表「繼續閱讀」字串的程式碼為 <data:post.jumpText/>

若想安裝圖片延遲外掛 Lazy Load,可參考「圖片延遲載入外掛 Lazy Load__Blogger 最佳安裝方式」,在「繼續閱讀」的程式碼後面加入 Lazy Load 語法。


4. 文章作者資訊

<span class='post-author vcard'>
<b:if cond='data:top.showAuthor'>
<data:top.authorLabel/>
<b:if cond='data:post.authorProfileUrl'>
<span class='fn'>
<a expr:href='data:post.authorProfileUrl' itemprop='author' rel='author' title='author profile'>
<data:post.author/>
</a>
</span>
<b:else/>
<span class='fn'><data:post.author/></span>
</b:if>
</b:if>
</span>

  • 以上代表「張貼者:」字串的程式碼為<data:top.authorLabel/>
  • 代表「作者名稱」字串的程式碼為 <data:post.author/>


5. 發文時間

<span class='post-timestamp'>
<b:if cond='data:top.showTimestamp'>
<data:top.timestampLabel/>
<b:if cond='data:post.url'>
<meta expr:content='data:post.canonicalUrl' itemprop='url'/>
<a class='timestamp-link' expr:href='data:post.url' rel='bookmark' title='permanent link'><abbr class='published' expr:title='data:post.timestampISO8601' itemprop='datePublished'><data:post.timestamp/></abbr></a>
</b:if>
</b:if>
</span>

  • 以上代表「於」字串的程式碼為 <data:top.timestampLabel/>
  • 代表「發文時間」字串的程式碼為 <data:post.timestamp/>


6. 留言數量

<span class='post-comment-link'>
<b:if cond='data:blog.pageType != "item"'>
<b:if cond='data:blog.pageType != "static_page"'>
<b:if cond='data:post.allowComments'>
<b:include data='post' name='comment_count_picker'/>
</b:if>
</b:if>
</b:if>
</span>


7. email 圖示

<!-- email post links -->
<b:if cond='data:post.emailPostUrl'>
<span class='item-action'>
<a expr:href='data:post.emailPostUrl' expr:title='data:top.emailPostMsg'>
<img alt='' class='icon-action' height='13' src='http://img1.blogblog.com/img/icon18_email.gif' width='18'/>
</a>
</span>
</b:if>

想變更 email 圖示可更改 img 標籤裡的圖片網址。


8. 快速編輯圖示

<!-- quickedit pencil -->
<b:include data='post' name='postQuickEdit'/>


9. 分享按鈕

<div class='post-share-buttons goog-inline-block'>
<b:if cond='data:post.sharePostUrl'>
<b:include data='post' name='shareButtons'/>
</b:if>
</div>

這段程式碼會顯示分享按鈕,但要 hack 分享按鈕的程式碼,得從「二、分享按鈕區塊」下手。


10. 反向連結

<span class='post-backlinks post-comment-link'>
<b:if cond='data:blog.pageType != "item"'>
<b:if cond='data:blog.pageType != "static_page"'>
<b:if cond='data:post.showBacklinks'>
<a class='comment-link' expr:href='data:post.url + "#links"'><data:top.backlinkLabel/></a>
</b:if>
</b:if>
</b:if>
</span>


11. 標籤

<span class='post-labels'>
<b:if cond='data:post.labels'>
<data:postLabelsLabel/>
<b:loop values='data:post.labels' var='label'>
<a expr:href='data:label.url' rel='tag'><data:label.name/></a><b:if cond='data:label.isLast != "true"'>,</b:if>
</b:loop>
</b:if>
</span>

  • 以上代表「標籤」兩個字的程式碼為<data:postLabelsLabel/>
  • 代表「標籤名稱」的字串為 <data:label.name/>


12. 星號評等

<span class='star-ratings'>
<b:if cond='data:top.showStars'>
<div expr:g:background-color='data:backgroundColor' expr:g:text-color='data:textColor' expr:g:url='data:post.absoluteUrl' g:height='42' g:type='RatingPanel' g:width='280'/>
</b:if>
</span>


13. 反應

<span class='reaction-buttons'>
<b:if cond='data:top.showReactions'>
<table border='0' cellpadding='0' cellspacing='0' width='100%'><tr>
<td class='reactions-label-cell' nowrap='nowrap' valign='top' width='1%'>
<span class='reactions-label'>
<data:top.reactionsLabel/></span> </td>
<td><iframe allowtransparency='true' class='reactions-iframe' expr:src='data:post.reactionsUrl' frameborder='0' name='reactions' scrolling='no'/></td>
</tr></table>
</b:if>
</span>


14. 位置

<span class='post-location'>
<b:if cond='data:top.showLocation'>
<b:if cond='data:post.location'>
<data:postLocationLabel/>
<a expr:href='data:post.location.mapsUrl' target='_blank'><data:post.location.name/></a>
</b:if>
</b:if>
</span>



四、標籤訊息區塊

<b:includable id='status-message'>....</b:includable>
這個區間的程式碼的作用是,當按下標籤時,最上方會顯示「顯示具有 XXXX 標籤的文章....」這樣的字串。

如果不想顯示這些字串,可將這個區間的程式碼全部註解起來(或刪除, 記得備份)。



五、串聯式留言區塊

<b:includable id='threaded_comments' var='post'>....</b:includable>
以上區間為串聯式留言的程式碼,基本上這個區塊 Blogger 的程式碼寫法與舊版留言差異很大,擺明不希望使用者 hack,稍微能夠修改的就是變更一下 CSS 而已,例如把「站長回覆」的留言用不同顏色標示,建議參考這一篇「Highlight Author Comments in Blogger's New Threaded Comment System」。

另外,如果想要自訂「留言欄訊息」(也就是張貼意見)」的版面,可參考「Blogger "留言欄訊息"自訂版面及樣式的方法」。



六、主程式區塊

<b:includable id='main' var='top'>....</b:includable>
這部分是「網誌文章」工具的主程式執行區域,想要把版面大風吹得從這個區塊下手,但危險性太高、對程式碼不熟不建議這麼做。

這裡面風險性不高的修改是發文日期,程式碼為──

<h2 class='date-header'><span><data:post.dateHeader/></span></h2>。



七、訂閱區塊

<b:includable id='feedLinksBody' var='links'>....</b:includable>
  • 這個區塊位於「一、上下頁區塊」的下方
  • 以上代表「訂閱:」字串的程式碼為 <data:feedLinksMsg/>
  • 代表「文章 (Atom)」字串的程式碼為 <data:f.name/> (<data:f.feedType/>)



八、舊範本留言區塊

<b:includable id='comments' var='post'>....</b:includable>
新範本不會執行這個區塊;如果是舊範本,留言區塊可以玩的花樣可就多了,可參考「本站留言相關的 hack」,在這個標籤 2012 年以前的文章都是針對舊範本的留言區塊來 hack。


Blogger 範本」系列標題:
一、各種註解方式及區塊的修改
二、標頭、導覽列、側邊欄、頁尾區塊的程式碼
三、文章及留言區塊的程式碼

➢➢快速選單:

Google+ 留言框「網頁版」安裝說明

$
0
0
Blogger 最新推出的功能──將 Google+ 留言系統取代原留言系統,其功能十分強大,知名部落格們在這幾天已經有好幾篇介紹,可參考「邀請大家協助電腦玩物測試 Google+ 全新網誌留言系統」、「Blogger 與 Google+ 新增留言外掛深度結合」即可瞭解這個系統的操作方式及優點。這個系統最吸引我的點是:
  • 留言者可選擇私密留言
  • 有誰分享、按過 +1 一目了然
  • 所有單一頁面的 G+ 討論串整合在一起

以上這三點,讓我想不安裝 G+ 留言框都不行。可惜的是,在 Blogger 安裝 G+ 留言框後,其壟斷性太強悍,不但原生留言系統消失,連其他留言板例如 FB、DISQUS 也一併被驅逐出場。


2013.5.20 公告

由於最近 G+ 進行大改版,使本文的「Google+ 留言框網頁版」失效,請勿安裝本文的程式碼,請按此前往新版本:「G+ 留言框網頁版__更新版


本文要介紹的工具,將可讓 G+ 留言框獨立安裝在各個網頁、各個部落格平台(要能支援 js),如此就不會發生其他留言板被 G+ 排擠的狀況。以下按例先說明原理,想直接安裝請跳到「三、安裝說明」。(如果只需要將 Blogger 留言系統轉換為 G+ 留言系統,請參考「Blogger 轉換為 Google+ 留言系統的各種方法」)






一、此工具的由來

其實外部留言系統被 Google 排除我並不覺得可惜,原因過去曾提及:部落格平台應該降低讀取外部伺服器的次數,除了加快頁面載入速度、節省系統資源外,也可降低許多風險。真正讓我心疼的是,由於使用了留言編號(及「回覆引言系統」),這對文章資料的索引有莫大幫助(文章內容常引用以及舉例留言編號的資料),但原生留言系統被排除後,不但留言編號保不住,過去的文章、留言也失去引用功效並降低了相互參照的價值。

為了讓原留言系統與 Google+ 留言框並存,找到了這個「Chrome 套件」,看了其畫面發現根本與 Google+ 留言框一模一樣,讓我發覺是有機會將其移植到網頁上的。



二、網頁版的原理

以「取代 Blogger 搜尋小工具__新版 Google 自訂搜尋」 這篇為例,使用「Google Chrome 開發人員工具」 看到 Google+ 留言框包在 Iframe 裡面,其網址有編碼,經解碼還原後格式如下:

https://plusone.google.com/_/widget/render/comments?bsv&href=http://wayne-fu.blogspot.com/2013/03/blogger-google-custom-search.html&first_party_property=BLOGGER&legacy_comment_moderation_url=https://www.blogger.com/moderate-legacy-comment.g?blogID=1035379297949976554&view_type=FILTERED_POSTMOD&width=626&hl=zh_TW&origin=http://wayne-fu.blogspot.tw&search=&hash=#gplus_comment_box&gsrc=3p&jsh=m;/_/scs/apps-static/_/js/k=oz.gapi.zh_TW.RS8tfCUpgA0.O/m=__features__/am=UQ/rt=j/d=1/rs=AItRSTOwgNsd3ML2Xtp5iQsLXxMoUeG9OA#_methods=onPlusOne,_ready,_close,_open,_resizeMe,_renderstart,oncircled,scroll,openwindow&id=I0_1366533351846&parent=http://wayne-fu.blogspot.tw&rpctoken=13615444
試著把以上字串貼到網址,就可看到該篇文章的所有 G+ 留言──

Bingo!很快就找到關鍵,只不過這字串裡面有很多參數,而這些參數不是每個網站都能通用,那麼要寫一篇教學文章就會很麻煩,說明找到自己網站參數的步驟會很長!

在測試期間,曾到過之前提的「Chrome 套件」原作者(為日本人) G+ 帳號留言,詢問有沒有簡單的安裝方法。原本沒抱什麼希望,沒想到很快就得到作者的回覆,請見「這個討論串」。

原作者給的答案更簡潔,他給的網址格式如下:

https://plusone.google.com/_/widget/render/comments?bsv&href={URL}&first_party_property=BLOGGER&view_type=FILTERED_POSTMOD&width=620&hl=en-US
這下要寫本篇說明就簡單地多了,把這個網址包回去 Iframe 裡面,再做一些加工、版面配置,就成了本篇的小工具,以下請見安裝說明。




三、安裝說明

1. 其他部落格平台:這個小工具可以安裝在任何部落格(需支援 js)的任何位置,請將以下的安裝程式碼(有顏色的部分)直接複製到想要顯示的位置即可。

2. Blogger:請到後台範本 → 編輯HTML,以「新範本」為例,如果是裝在留言區塊的話,在範本內搜尋類似以下字串──

<b:if cond='data:blog.pageType == &quot;static_page&quot;'>
<b:include data='post' name='comment_picker'/>
</b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<b:include data='post' name='comment_picker'/>
</b:if>

應該會有兩個搜尋結果,目前先裝在第一個搜尋結果即可;第二個是手機版的內容,這個工具在手機版也許無效(沒測過)。

如果是「舊範本」的話,上面兩個 <b:include data='post' name='comment_picker'/>字串應該都會是 <b:include data='post' name='comments'/>,字串換一下就能找到。

接著在以上 <b:if cond='data:blog.pageType == &quot;item&quot;'>的下一行,插入這個 G+ 留言框網頁版的程式碼──


以上黑字部分為範本裡的原程式碼有顏色的部分為安裝碼,儲存後即可在每篇文章看到效果。

想看效果範例參考「這篇文章」的留言區塊,若要修改參數請見以下說明。

3. 參數修改:請對照以上行號,藍字部分為優先修改的參數──

AC:設定收合留言框時的高度

AD:設定展開留言框時的高度

AE:設定留言框的寬度

以上三個參數請根據自己的版型來調整到最適大小。

AF~AG:可自訂收合字串

AH:如果不是繁體中文,請修改此行數值,可查閱綠字部分的網址。

L~P:可自訂整個留言區塊的上、下邊界值;設定整個區塊置中等。

Q~U:可自訂外框的 CSS 樣式

V~X:可自訂收合字樣的 CSS



四、一些建議

基本上以大部分的 Blogger 而言,只需要按照官方的方法轉換成 G+ 留言系統即可,不一定需要安裝本文的工具。如果擔心訪客沒有 G+ 帳號而不能留言的話,可在 Blogger 安裝推文系統」即可。

如果範本常修改,導致原留言系統無法轉換成 G+ 留言系統,我會另外整理一篇簡單的修改方法。

會需要安裝這個工具的族群,反而是其他的部落格平台、或安裝多個留言系統的部落格。另外如果跟我一樣,曾安裝留言編號,為了保存這些編號,那麼也是非常需要本文這個工具。

最後,感謝原作者 +Satoshi Yoshida 的技術指導,讓程式碼得以更加簡潔。

Blogger 轉換為 Google+ 留言系統的各種方法

$
0
0
Blogger 最近推出的 G+ 留言框,如果是未修改的新範本,都可順利轉換留言系統;但如果是修改過的範本、或舊範本的話,就不一定能成功轉換。

如果不介意另外安裝程式碼,可參考「Google+ 留言框 "網頁版" 安裝說明」;如果想使用官方的版本,可參考本文提供的數種方法,請 "依照順序" 執行測試,例如當第一種不可行時,再測試第二種,以此類推直到找到適合自己範本的修改方式。


一、官方解決方案

1. 依照「在 Blogger 嵌入 Google+ 留言板,自動整合 G+ 中對同一篇文章的全部留言!」 這篇文章,到後台 Google+ 的選項開啟 G+ 留言系統。

2. 「官方文件」提供了一組程式碼,但未明示應該放在什麼位置。請到後台範本 → 編輯 HTML,搜尋以下字串──

<b:include data='post' name='post'/>
找到後,正常來說往下四行應該會看到這個字串(如果不是的話在附近找一找)──

<b:if cond='data:blog.pageType == &quot;item&quot;'>
緊接在這個字串的下一行,插入官方提供的程式碼──

<div class='cmt_iframe_holder'
expr:data-href='data:post.canonicalUrl'
expr:data-viewtype='data:post.viewType'/>

存檔後,可以看看 G+ 留言框是否出現,應該八成可以出現。萬一沒出現,大概是官方文件說的情形「Unfortunately, we cannot guarantee the experience with heavily customized templates.」,範本改到無法辨識的地步了。

方案一無效時,請參考方案二。



二、簡易轉換方案

1. 這是最簡單的轉換方式,到後台範本 → 編輯 HTML → 將迷你組件範本回覆為預設值 → 勾選「Blog1」→ 還原所選小工具。



2. 接著執行「一、官方解決方案」的第 1 個步驟即可。

不過如此一來「文章及留言區塊」的所有 hack 都會消失,相信在非萬不得已的情形下,這不會是常改範本的站長之選擇。

因此,方案三雖然比較複雜,但是比較值得參考。



三、進階修改方案

1. 跟「一、官方解決方案」的第 2 個步驟一樣,先找到 <b:include data='post' name='post'/>這組字串。

2. 緊接其後的,通常會有兩組連續的程式碼──

<b:if cond='data:blog.pageType == &quot;static_page&quot;'>....</b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'>....</b:if>
如果找不到的話,請一直往下找,一直找到 </b:includable> 為止。如果真的找不到,請自行把以上兩組字串補進去。

3. 檢查以上這兩組字串的「....」部分,如果都是以下字串的話──

<b:include data='post' name='comment_picker'/>
那麼就是 OK 的。

如果是舊範本、或改過的範本,可能就不是以上字串,請改成以上的字串即可,再到後台將 Google+ 的選項開啟 G+ 留言系統試試看。

4. 如果還不行,那代表連「comment_picker」這個區塊的程式碼也被改過,只好自己開一個"全新、乾淨的 blogger",在範本裡找到 <b:includable id='comment_picker' var='post'>....</b:includable> 這個區間──



複製這個區間的乾淨程式碼,貼到目前部落格裡對應的區間(覆蓋掉),這樣應該就沒問題了。

從步驟 4 開始算是我的推論,把乾淨的程式碼逐步複製回範本。如果還不行請另外告知,因為機率不大,再來列出可逐步測試的區塊,後面的步驟為了節省篇幅就先不列了。

如何贊助 WFU BLOG

$
0
0

感謝您有意贊助支持 WFU BLOG,可使用 ATM 轉帳或信用卡的方式,也請同時參考──



一、ATM 轉帳(郵局)

台灣的讀者建議使用 ATM 轉帳,因為使用信用卡的話,可能會有匯兌的手續費。

請按下面綠色標題展開郵局帳號。



轉帳完成後,請至「三、留言框」,填入相關資料後按「傳送」即可。



二、信用卡或PayPal

請選擇以台幣或美金為單位的贊助金額後,按下該幣別下方對應的「信用卡贊助」按鈕,進入 PayPal 的畫面。

如操作有問題,請按下面綠色標題的「操作說明」。






以台幣刷卡






以美元刷卡



以上步驟完成後,請至「三、留言框」,填入相關資料後按「傳送」即可。



三、留言框

1. ATM 轉帳:請在下方的留言框填入以下資料──
  • 暱稱
  • 電子郵件
  • 匯款日期匯款金額、您的轉帳帳號後五碼Blogger帳號

2. 信用卡或 PayPal:請在下方的留言框填入以下資料──
  • 暱稱
  • PayPal 填入的電子郵件
  • 贊助日期贊助金額Blogger帳號


感謝您的贊助,收到您的訊息後,會與您聯繫需要的小禮物項目!

贊助 WFU BLOG 的管道、小禮物、及功能需求建議

$
0
0

感謝您有意贊助支持 WFU BLOG,如本站的文章或工具對您有幫助,歡迎提供實質的資助,且本站也會提供贊助的小禮物。


資助管道》    《其他贊助方法》    《為何需要贊助本站》    《贊助的小禮物》    《功能需求建議




資助本站的方式──「ATM轉帳、信用卡、PayPal





如您的身份為學生,可先不考慮資助本站,等有經濟能力再考慮。若覺得操作匯款、信用卡不方便,歡迎用以下幾種形式贊助本站:

1. 廣告:

為了版面美觀,本站的廣告只在部分文章中才會出現。如您看到有興趣的廣告再點擊、並閱覽即可;沒興趣的廣告可不必刻意點擊,以免造成無效點擊,否則不小心本站的 Google Adsense 帳號被判定停權就糟糕了,感恩!


2. 分享按鈕:

如對您有幫助的文章,按文章末端的「讚」或「+1」按鈕公開分享,也是幫助本站的一種方式。


3. 訂閱本站:

使用「Google Reader」、或是「RSS」訂閱本站,累積訂閱人數,也是對本站的一種贊助。





本站撰寫的文章、發表的各種網頁工具及技巧,均為個人創作及各式的延伸應用。多數的工具及技巧,除了實際的應用方法,也多會說明原理,讓讀者得到更多的自身應用。

此類性質的著作,無法如同工廠一般大量生產,只能從工作室裡手工打造而成,因而很難常常發表新文章,那麼網站流量、廣告點擊將無法與一般的網站比擬。

如果您支持這種重視文章品質的網站及創作形態,歡迎提供實質的資助,且本站也會提供一些贊助的小禮物。





根據贊助的金額,為了表達感謝之意,本站將提供不同程度的禮物。

1. 不論金額:每位贊助者都會獲得一份小禮物,可能會不一樣,在此先賣個關子,小禮物的形式就不公開了。

2. 贊助金額達 NT.100 (或 USD 3):在本站的留言提出功能需求建議時,將獲得優先考慮。

3. 贊助金額達 NT.100 (或 USD 3):PR 值 1~2 的網站,若曾安裝本站的小工具,可要求去除一個小工具的版權 logo。PR 值 3 以上的網站請另外留言商議。

4. 贊助金額達 NT.200 (或 USD 6):若曾安裝本站的「推文系統」、「WYboard 留言板」等工具,可幫忙製作獨立的試算表資料庫、含寄信通知功能,如此將能自行管理、編輯、刪除推文或留言。有此需求者請先申請一個新的 Google 帳號、並提供給本站,才能進行作業。





有時讀者會提出一些功能需求,例如「文章列表能不能只顯示某個標籤?」。在過去沒有開放贊助時,如果提出的需求不在寫作計畫裡,只會當作參考而已。而現在既然開放贊助,那麼贊助者提出「功能需求」的權重理應提升。

因此,相對於一般讀者,贊助者的功能需求建議,本站將會優先考量。

而為了方便追蹤進度,建議贊助者可在本文提出功能需求,便於集中管理。


如果有不想公開的詢問,請利用下面這個表格送出訊息。


購買 Nexus 7 之省錢心得

$
0
0

(Pic from: google.com)
最近入手 Google 出品的平板 Nexus 7,記錄一下購買全新 Nexus 7(非二手)的過程與心得,酌供意者參考。


一、規格選擇

1. WIFI / 3G:如果有智慧手機的話,那麼 3G 要完成的事情交給手機即可;若要長時間連上網,智慧手機的網路也可當成 WIFI 熱點分享給 Nexus 7 用;若無手機,也還有許多免費 WIFI 熱點可使用(參考「五、免費 WIFI 熱點」)。

結論:買 WIFI 版本即可。


2. 8G / 16G / 32G:雖然 Nexus 7 的容量無法擴充,但只要買條 OTG 線(參考「三、尋找配件」→ 2. OTG 線),搭配「Nexus Media Importer」 這個 app、或是想辦法 root,就能外接記憶卡,如此不要說 32G,想要幾 G 就有幾 G。

結論:買 8G 版本即可。


3. 新品 / 二手:買二手、福利品可用超低價入手,但不清楚機子是否被摔過(或不當使用),螢幕也是有一定壽命的,我認為不如直接買新品,避免承擔各種不知名風險。

綜合以上,我認為購買 Nexus 7 最佳 C/P 值的規格選擇為:新品、8G、WIFI 版本。





二、尋找賣家

全新未拆封的 Nexus 7 要找到好價格不容易,尤其市面上販賣的多為 32G 版本,要找到 8G 版本更是困難,在光華問到的最低價格約 NT. 7250。最後在 Y拍 找到一家台北市光復南路的通訊行,現金價 NT. 6300、自取(省運費)。

由於這則訊息只對台北市的讀者有幫助,其他縣市請自行找找 Y拍、露天的通訊行了,注意一下是否為空機的價格,有些看起來便宜但要綁約。



三、尋找配件

1. 皮套 + 所有配件:Nexus 7 原廠可說沒有任何配件,在露天找到一個「牛仔布紋旋轉保護套」,還送保護貼、OTG線、觸控筆,且皮套有自動喚醒功能,算是該有的基本配件都齊全了,總共 NT. 249 + 運費 NT. 55



上圖包含所有配件,皮套的品質還 OK,以這個價位能包含這些配件,真的不能挑剔了。但皮套上的化學味道很濃,放在陽台幾天讓味道散去再使用,對身體會比較好。




上圖紅框為皮套背面圓形轉盤,背面最好墊個東西(我墊黑色的硬紙板),避免久了圓形轉盤會磨損 Nexus 7 的背部。


2. OTG 線:可惜皮套送的 OTG 線,連上無線鍵盤、滑鼠均無作用,Google 了一下看到不少慘劇,有人連續買了四、五條不同的 OTG 線都還不一定相容。

有了前車之鑑後,帶著 Nexus 7 及無線鍵盤,到光華商場附近的電子材料行,當場測試到一條沒問題的 OTG 線才買,NT. 60,是貴了點,不過能用最重要,將來想外接記憶卡擴充容量時,就不會計較這個小錢了。


四、保固

在通訊行現金交易,無發票有個缺點,因店家堅持不開購買證明,無法證明購買日期,保固只能從出廠日期計算

辨識出廠日期的技巧如下圖:



最底部如果有製造日期的話,就很好辨識;不過最保險的是看序號,如上圖紅框部分的 SSN:D2OKBCXXXXXX便是機子的序號:

1. 第一個字母 "D" 為出廠年份,代表 2013,若是 C 則為 2012、B 為 2011,以此類推。

2. 第二個字母 "2" 為出廠月份,若是 "A" 代表 10 月、"B" 代表 11月,以此類推。

我是四月購買,如此少了兩個月的保固,算是為了省錢的損失,打算循此模式購買的話,得注意這一點,且付款前先注意出廠月份,差太多就不要買了,否則只好價錢加 5% 拿發票來買保固日期了(Asus 憑發票日期計算保固)。



五、免費 WIFI 熱點

有很多管道可以省下 WIFI 的傳輸費用,除了本身若是有智慧手機可將無線網路分享出來以外──

1. 光世代:如果是中華電信光世代用戶,可免費租用家用 WIFI。

2. Taipei Free:用手機申請帳號後,就能免費使用「Taipei Free」 的 WIFI 熱點,台北市各大公眾場所、捷運站等都能接收到。

3. iTaiwan:用手機申請帳號後,就能免費使用「iTaiwan」的 WIFI 熱點,全國各大公家機關、郵局、風景區可接收到。

4. 7-WIFI:用手機申請帳號後,就能每天最多 90 分鐘免費使用「7-WIFI」的 WIFI 熱點,各處的 7-11 可接收到。

其他還有一些 NewTaipei、G1.Taiwan 4G 熱點等等,因熱點位置有重疊不另外介紹,請自行 google。



六、小結

全部的費用加總:6300 + 304 + 60 = NT. 6664,包含全新的機器、配件、上網傳輸費用,我相信是很划算的了。想要入手可能得加速腳步,也許 8G 全新機種算是稀有財了。

讓 Google 網頁翻譯工具以(國旗)超連結執行

$
0
0

(Pic from: securityledger.com)
Google 翻譯」除了提供多國語言線上翻譯的服務,另外也提供小工具可安裝在部落格,能將網頁內容轉換成指定的語言。

以 Blogger 為例,在後台即可新增官方提供的「翻譯」小工具。如果網頁內容不複雜,沒有太多的 javascript,那麼這個小工具的執行速度不太會延遲;但如果像本站裝了很多 hack,載入速度可能就是悲劇了。

本文要介紹的安裝方式,可讓「Google 翻譯」以超連結的方式執行,如同本站右上角的國旗圖案,如此就不需花費任何載入時間。以下先說明原理,想直接安裝請跳「三、綜合安裝」。


一、Google 翻譯的超連結結構

根據這篇「Useful Google Translate Addresses」,綜合文章與留言內容得到一個最佳解,在瀏覽器貼上以下格式的網址,可顯示單一網頁的翻譯內容:

http://translate.google.com/translate?u=http://wfu-san11.blogspot.com/&langpair=zh-TW|en&hl=en&ie=UTF8
以上藍字的參數說明如下:
  • 「http://wfu-san11.blogspot.com/」:網址字串可改為想要翻譯的頁面之網址。
  • 「langpair=zh-TW|en」:前一個參數代表原語言,後一個參數代表翻譯語言,中間必須用 "|" 隔開。
  • 「hl=en」:代表顯示註解時使用的語言,與上一點的翻譯語言參數相同比較恰當。
至於語言參數的設定,可參考「Google 翻譯官網」。



二、製作超連結

瞭解原理後,就能使用 js 來自動產生每個頁面的超連結,例如要在網頁放一個中翻英的超連結,可準備一個英國國旗的圖案,js 程式碼如下:

<script>
//<![CDATA[
document.write("<a href='http://translate.google.com/translate?u=http://" + top.location.hostname + top.location.pathname + "&langpair=zh-TW|en&hl=en&ie=UTF8' target='_blank'><img src='http://3.bp.blogspot.com/-lPe1MfSK7zs/UXaYYpJ-lJI/AAAAAAAAGiU/FIBrY3aIhW0/s1600/eng.jpg' title='translate to English'></a>");
//]]>
</script>

以上藍字的圖片網址可置換為自己的圖片,把程式碼放到網頁的自訂位置即可。





三、綜合安裝

如果想放多個國旗超連結,如本站右上角,或是文末也提供了一組效果,可使用以下的程式碼安裝:


可將以上程式碼放在網頁想顯示的位置即可(部落格需支援 js);若是 Blogger 可放在「HTML/Javascript」小工具,或是貼到範本中想顯示的位置即可。若不清楚要放到 Blogger 範本中的什麼位置,可參考「Blogger 範本各區塊程式碼」系列文。

若想修改參數、增加或減少翻譯的語言,請對照以上的行號參考以下的修改說明:

F:依序填入由左到右要顯示的翻譯語言, 每種語言的參數請參考「Google 翻譯官網」(或參考後面的對照表)。

每個字串放在雙引號內, 用小寫逗號隔開, 最後一個字串之後不要有逗號。


G:依序填入由左到右、滑鼠經過的提示翻譯文字(只限英文), 例如 F 行填入 "en" 時,G 行對照的字串可填入 "English",以此類推(可參考後面的對照表)。

每個字串放在雙引號內, 用小寫逗號隔開, 最後一個字串之後不要有逗號。


H:依序填入由左到右要顯示的圖片網址, 每個字串放在雙引號內, 用小寫逗號隔開, 最後一個字串之後不要有逗號。

I:每個圖片與右邊圖片的間隔(px值)。


如果想要有現成的國旗圖案範例,本文的國旗圖案來源為「World Flag Icons for Windows」這個網頁,可用圖片編輯軟體自行編修。

以下順便列出「Google 翻譯官網」一些常用的翻譯語言參數:
  • English:en
  • Japanese:ja
  • Chinese Simplified:zh-CN
  • Spanish:es
  • German:de
  • French:fr
  • Italian:it
  • Korean:ko



四、小結



以上三個國旗圖案可測試效果;使用本文的方法,可省下「Google 翻譯」載入的時間,而缺點是,如果網站裝了不少 hack、工具(就像本站一樣),那麼翻譯網頁往往無法處理 js 的內容,版面效果將變得無法預期。

不過相信大部分部落格不會像本站一樣,裝了一堆雜七雜八的東西,那麼翻譯頁面就不會有太大差異。而如何讓本站翻譯頁面的版面保持完整,也將是下一個努力的目標。

讓作者頭像(Google Authorship)在搜尋結果恢復顯示

$
0
0

(Pic from: freepik.com,danzxncrd.blogspot.com)
前陣子在電腦玩物站長 +esor huang 的「G+ 討論串」 得知,他原本「Google Authorship」使用的卡通頭像失效了。由於我原本也是使用 3D 卡通頭像,於是趕緊測試了 google 搜尋引擎,沒想到作者頭像的確消失了,這對部落格流量的損失可不小,得趕緊來研究一下解決方法。

如果有同樣情形的話,可參考本文解決過程的紀錄,或是想節省時間也可直接跳「五、驗證方法」。


一、不合格的頭像

過去使用卡通頭像的過程,記錄在「申請Google Authorship的撇步與心得(頭像篇)」,當時結語也提到了一點:「相信 Google 為了維護著作權及作者的權威性,並不會期待搜尋引擎的結果出現卡通頭像滿街跑的情形...等過了蜜月期,卡通圖數量太多時,難保將來 Google 不會改變作法」。看來現在蜜月期已經過了,Google 開始掃蕩不肯拋頭露面的作者...

在搜尋引擎測試的結果,原本就使用大頭照的作者,搜尋畫面依然能正常顯示作者頭像;而非使用大頭照的作者,例如使用 "素描(或其他特效)"、"卡通圖"、"無法清晰辨識臉孔的照片"等,則搜尋畫面的作者頭像通通消失了。



二、使用照片頭像

看來結論很明顯,作者頭像使用清晰的照片才能被 Google 接受,於是在 5/4 將「G+ 的頭像」 從卡通圖改為大頭照,經過兩天之後,於 5/6 發現新頭像出現在搜尋引擎──




感覺上 Google 處裡的速度還滿快的,而且一時之間非常高興,不過高興沒有多久──



上圖發現五月份新的文章是有頭像的。




上圖發現五月之前的所有舊文章仍然沒有頭像...

這是怎麼回事呢?依照這樣的規則研判,難不成是網站地圖(sitemap)的問題,舊文章不再被提交,Google 就不管舊文章的頭像了?想到這一點,馬上到「Google Webmaster」 重新提交了一次網站地圖。




三、瀏覽器快取

雖說如此,剛提交完網站地圖,轉念間又想到另一個 idea,會不會是瀏覽器的問題?由於平常用的是 Chrome,馬上改用 FireFox 來搜尋,結果赫然發現──舊文章其實也能顯示新頭像。

看來是瀏覽器 cache 的問題了,把 Chrome 的快取清一清,果然 Chrome 上也能在舊文章看到新頭像了!



四、提交網站地圖(sitemap)

不過事情還沒分析完,因為發現有不少作者已經使用了 "正確的大頭像",也有申請 Google Authorship,但搜尋結果仍看不到作者頭像。

想到在「申請Google Authorship的撇步與心得(頭像篇)」 的【留言 #01】, +Mark X 提及「到Webmaster tools裡面, 重新提交Sitemap可加快標記驗證.」,我相信 "提交Sitemap" 這一點對顯示作者頭像的審查速度有幫助,因為我原本就有提交 sitemap,但其他作者有沒有提交 sitemap、提交的內容正不正確,這部分就不清楚了,也許這是目前我的作者頭像能顯示、而其他作者尚未正常顯示的原因之一。

網站地圖如果想要提交正確,以 Blogger 為例,建議可以參考「快速幫你的Google Blogger提交Sitemap」,這篇文章提到的參數 "atom.xml?redirect=false&start-index=1&max-results=500",如果部落格文章遠超過 500 篇,記得把 "500" 這個參數改大一點,才能確保所有的舊文章都能被 Google 搜尋引擎收錄。



五、驗證方法

綜合以上的過程與經驗,如果確認自己的 G+ 帳號已經使用了正確的大頭照,而在 Google 搜尋結果仍無法看到作者頭像的話,建議按以下步驟檢驗一下,應可找到答案:

1. 是否已經完成了「申請Google Authorship的撇步與心得(流程篇)」、「頭像篇」 的流程,並參考「頭像篇」→「六、文章審核通過的條件」。

2. 參考本文「三、瀏覽器快取」,清除 cache 後再搜尋看看。

3. 參考本文「四、提交網站地圖」,重新提交正確的參數格式後,再等幾天看看。


申請Google Authorship的撇步與心得」系列標題:
一、流程篇
二、頭像篇
三、頭像恢復顯示

➢➢快速選單:

讓 Blogger 有快速載入的展示(DEMO)頁面

$
0
0

(Pic from: midches.com)
有時我們可能需要一些「展示頁面」,來秀出某些網頁效果(例如語法教學網頁)、或展示特定資訊(例如「文章列表」),這樣的頁面最好能載入速度快,頁面上只需要出現 DEMO 的主題,不需要出現側邊欄、其他小工具。因此,在 Blogger 開一篇新文章當作 DEMO 頁面不會是個好選擇,因為 Blogger 的每個頁面都會顯示側邊欄、小工具等等,除了主題混亂、速度也慢。

比較恰當的選擇是找個能放置 HTML 檔的網頁空間,來當作 DEMO 頁面,例如「Dropbox」、「Google Drive」等。只不過,這樣的方案有其不便之處:
  • 不是每個人都熟悉 HTML 架構
  • 需要自行設計 HTML 檔的版面樣式
  • HTML 檔沒有設計部落格 logo 的話,可能會被直接盜用

因此,我的構想是,能否在 Blogger 開一篇「新文章」,就能實現簡便的「展示(DEMO)頁面」?以下照例先說明原理,想直接安裝此功能請跳到「二、安裝程式碼」。


2013.5.18 補充

+Mark X於【留言 #01】表示「或者也可以使用該篇的行動版網址當作DEMO, 比較容易」,這也是個好方法,可以在網址後面加上 "?m=1" 即可成為行動版網頁,當成 DEMO 頁面──

優點:方法簡便
缺點:文章後面會有其他訊息、版面顏色配置比較簡單。

可按這兩個連結「本文展示頁面」、「行動版」比較兩種效果。


一、製作原理

1. 概念

要讓一篇「新文章」能變成 DEMO 頁面,必須做到以下幾件事:
  • 只留下文章內容,去除文章上方、下方的所有區塊(導覽列、文章資訊、留言區塊等等)。
  • 去除側邊欄區塊。
  • 去除底部區塊、版權宣告等。

要做到以上幾件事,可利用 CSS 將要刪除的區塊隱藏起來,接著一一刪除區塊,最後將文章區塊的部分用 jquery 把 DOM 搬移、擴張成為全部的版面。


2. 執行

為了讓指定的文章才執行以上步驟,必須設定一個開關。例如設定特定標籤、或在文章網址加上特定字串,用 js 檢查網址含特定文字開頭的字串(例如 "DEMO")時, 才進行展示頁面的流程。

本文為了達到最快的執行速度,採用「文章網址加特定字串」的方案。





二、安裝程式碼

請見以下的程式碼──


1. 首先到後台 → 範本 → 編輯 HTML → 找到字串 </head>,在其前一行,插入以上 A~Q行。

2. 接著找到字串 <b:if cond='data:post.hasJumpLink'>,在其前一行,插入以上 S~AG行。

請先儲存,參照「三、使用方法」來測試效果,如果效果 ok 的話,就可以開始使用;如果覺得版面不太滿意,若要修改參數請參考「四、修改參數」。



三、使用方法

想要當成展示頁面的新文章,只要在文章編輯的頁面,於「文章設定」→「連結」→「自訂永久連結」→ 輸入以 "DEMO-" 開頭的字串即可,如下圖──




由於網址連結 "大小寫有分別",使用 "DEMO-" 這樣的大寫字串,可以避免非展示頁面的文章誤用此字串。而如果不想使用這個字串,可在「四、修改參數」修改參數。

而上圖中的那篇文章,網址使用了 "DEMO-" 開頭的字串,會自動成為展示頁面,請按下面連結觀看效果:

http://wayne-fu.blogspot.com/2012/04/DEMO-toc-date.html

想看更多的文章列表效果,請參考以下──

1.「文章列表__依標籤排列

2.「文章列表+讚統計__依日期排列

3.「各種文章列表+讚統計__簡易安裝



四、修改參數

請參照「二、安裝程式碼」的行號──

B:如果範本中已經裝過 jquery (可搜尋看看有沒有 "jquery" 的字串),那麼可刪除此行

J:紅字 "DEMO-" 可改為自訂字串,以後想要當作展示頁面的新文章,自訂網址超連結時,需要以這個自訂字串開頭。

L:綠色字串分別代表將「導覽列」、「文章日期」隱藏起來,如果
不想隱藏的話,請刪除對應的字串。

另外,如果文章區塊上方還放了其他的區塊,例如「HTML/Javascript」小工具,假如想把其他小工具也隱藏起來,請先找到這個小工具的 id,方法為「範本」→「編輯HTML」→「跳至小工具」,如果是「HTML/Javascript」小工具的話,id 通常是「HTMLx」,x為數字。

接著在綠色字串之前,插入以下程式碼──

#HTMLx {display: none;}
以上 "HTMLx" 請換成小工具的 id。

X~Y:如果 L 行提到的「導覽列」、「文章日期」不想隱藏起來,那麼這兩行請刪除。

如果 L 行有新增字串,那麼 X 行之前請插入以下程式碼──

$("#HTMLx").remove;
以上 "HTMLx" 請換成小工具的 id。


以下兩行請先參照「展示頁面範例」──

AA:本行紅字部分的 "10px 20px",可調整展示頁面本文區塊「外框部分」的邊界值;10px 代表上、下的邊界值,20px 代表左、右的邊界值。

AB:本行紅字部分的 "20px 20px",可調整展示頁面本文區塊「內框部分」的邊界值;第一個 20px 代表上、下的邊界值,第二個 20px 代表左、右的邊界值。



五、小結

一開始的設定動作比較麻煩一些,不過以後只要設定文章網址後,就能在 Blogger 自動產生展示頁面,比起另外找空間來製作展示頁面,算是非常簡單美觀、又有效率的方案了!

Google+ 留言框「網頁版」__更新版

$
0
0
前幾天 G+ 進行大改版,使原本的「Google+ 留言框網頁版」失效(感謝 +Ken Lo 通知),因此程式碼必須進行改版。以下大致說明改版過程,想直接安裝請跳「二、安裝程式碼」。


一、更新版始末

經測試之後,Google 算是封鎖了原本 iframe 的 hack 方法,造成只能從官方的程式碼來 hack。在「How to add Google+ Comments to any website」找到 G+ 留言框的幾種安裝方式,其實各種 G+ 留言框安裝方法的版面效果都一樣──當沒有留言時,下方會有一大塊的空白,讓版面很不美觀

因此我的版本一律將效果改為──自訂留言框高度,讓站長獲得版面的控制權

本篇的原理大致是,等 Google 官方程式碼執行完畢之後,用 jquery 來改變留言框的高度,來達到原本效果。不過 Google 也猜得到有人會這麼做,因此設下不少機關,本文就是我跟這些機關奮戰後的結果。

我只能給自己打 60 分了,在 Chrome、FireFox 下可正常執行,在 IE 會有一點點版面問題,在 Opera 之下失效...處理跨瀏覽器相容性是寫網頁程式永遠的痛~





二、安裝程式碼

如果安裝過「原版本」,請將原本程式碼移除,用本文的程式碼代替。

1. 其他部落格平台:這個小工具可以安裝在任何部落格(需支援 js)的任何位置,請將以下的安裝程式碼(有顏色的部分)直接複製到想要顯示的位置即可。

2. Blogger:請到後台範本 → 編輯HTML,以「新範本」為例,如果是裝在留言區塊的話,在範本內搜尋類似以下字串──

<b:if cond='data:blog.pageType == &quot;static_page&quot;'>
<b:include data='post' name='comment_picker'/>
</b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<b:include data='post' name='comment_picker'/>
</b:if>

應該會有兩個搜尋結果,目前先裝在第一個搜尋結果即可;第二個是手機版的內容,這個工具在手機版也許無效(沒測過)。

如果是「舊範本」的話,上面兩個 <b:include data='post' name='comment_picker'/>字串應該都會是 <b:include data='post' name='comments'/>,字串換一下就能找到。

接著在以上 <b:if cond='data:blog.pageType == &quot;item&quot;'>的下一行,插入這個 G+ 留言框網頁版的程式碼──


以上黑字部分為範本裡的原程式碼有顏色的部分為安裝碼,儲存後即可在每篇文章看到效果。

想看效果範例參考「這篇文章」的留言區塊,若要修改參數請見以下說明。

3. 參數修改:請對照以上行號,藍字部分為優先修改的參數──

V:設定收合留言框時的高度

W:設定留言框的寬度

以上兩個參數請根據自己的版型來調整到最適大小。

R:如果範本中已經裝過 jquery (可搜尋看看有沒有 "jquery" 的字串),那麼可刪除此行

X~Y:可自訂收合字串

L~O:可自訂收合字樣的 CSS



三、一些建議

關於 G+ 留言系統要如何使用、私密留言要怎麼留,+Ala Go 的這兩篇文章描述的滿詳細的,值得參考:

另外,+Mark X在 G+ 留言框上方放了「G+ 留言注意事項」,使用開合功能來節省空間,請參考「留言版提示 - jQuery 展開收合效果」,可如法炮製將要顯示的注意事項,放在本篇程式碼的 D~F 行之間即可。
Viewing all 787 articles
Browse latest View live