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

Blogger 留言超過 200 篇怎麼處理?

$
0
0
這篇的內容可以算是公告,也可以算是心得分享。雖然公告內容比較枯索,然而本篇關於心得的部份,屬於應該了解的知識,因此建議詳讀。

先進行公告,由於本站原本的「留言板」網頁,留言數量已經超過兩百篇,會造成以下不便的現象:

  • 因為最新的留言不會出現在第一頁,導致讀者找不到自己的留言與 WFU 的回覆。
  • 讀者往往必須先進入第一頁(1~200則留言),才能跳到其他頁(例如200則以後的留言)
  • 由於第一頁須載入 200 則留言,導致浪費太多載入時間,才能進入其他頁。

目前本站採取的對策為,每兩百篇留言會新開一個留言板,且留言板名稱附上留言編號,封鎖舊留言板的留言功能,以免造成上述的不便。

上方浮動導覽列的「留言板」連結已更新,編號為 (200~)。但有的讀者可能會從側邊欄「熱門文章」列表進入舊的留言板,因此請稍微注意一下留言板的文字訊息,就像上面的示意圖,可從「留言板列表」找到最新的留言板連結。



一、Blogger 的留言板原理


1. 舊範本

本站使用的是舊範本,因此超過兩百則留言後,會出現分頁的選項,在第 1 則及第 200 則留言的地方都可看到:



如上圖藍色箭頭,可選擇「較新」(下一頁)、「最新」(最後一頁)這兩個按鈕。


2. 新範本

一般大家應該都是使用新範本,那麼就會遇上這個「Blogger 中文社群討論串」的情形,超過 200 個留言後,會無法顯示更多的留言內容,得另外想辦法才能讓 200 則以後的留言顯示出來。


3. Blogger 為何要這麼做

根據這個討論串「How can I get Google to index Blogger posts with over 200 comments?」,Google 不索引過多的留言內容,因此才會出現新、舊範本的以上狀況。對於新範本而言,似乎官方認為,反正這些內容我也不收錄,所以顯不顯示對我而言無所謂?

若是以 Google 角度來看,也算是合理,若是不限制每個頁面的索引內容多寡,那麼搜尋引擎機器人帶回家的資料量,可是會把彰化濱海資料中心給塞爆的!

不過對於 Blogger 使用者而言,這樣的處置當然不能接受、且極為不便,對許多站長而言,多數留言都可能是珍貴的資產。

當然,會遇上這樣的情形其實機會不大,通常「留言板」性質的文章比較會發生,不過還是可以未雨綢繆一下,看看怎麼解決這個問題。





二、啟用新的留言板


1. 建議方案

無論是新、舊範本,都建議避免使用分頁的方式來處置,而改採新開一篇文章,來容納新的留言。這麼做的原因如開頭公告所述:

  • 訪客不一定熟悉 Blogger 平台,很可能弄半天都找不到自己的留言、也找不到站長的回覆,那麼就流失了這個讀者。
  • 就算熟悉 Blogger 平台的訪客,每次都得先進入第一頁,等候載入 200 篇留言的時間,再跳到其他留言分頁,這是非常差的使用者體驗

另外舉個實例,本站的「多層樹狀標籤更新版」,至今為止有 317 則留言,每次有新的留言提問時,都得經歷兩次漫長的頁面讀取時間等待,遲早得解決這個不便。


2. 實作方式

如果是留言板,請參照「三、留言板實作」。如果是一般的文章,某篇突然像中了樂透般引起廣泛迴響,例如前面舉例的「多層樹狀標籤更新版」,WFU 準備找一天寫個新版的文章,讓留言轉移到新的文章,可避免在舊文章處理留言的不便。

但畢竟不是所有文章都能依照這個模式,來寫新版的內容,那麼或許可以按以下步驟:

A.在後台編輯文章的畫面 → 文章設定 → 選項 → 讀者意見 → 不允許,顯示現有連結,這樣讀者就不能繼續留言、舊留言仍會顯示。如不清楚怎麼操作,可參考下圖:




B.開一篇新的文章,把原本文章內容複製過去,但請新增一些字句,避免被搜尋引擎判定為重複內容。

C.原本的文章,在開頭附上新文章的連結,請讀者到新文章留言。

D. 也許可在新、舊文章都安裝「系列文」功能,在文末可自動列出這幾篇文章的列表、將文章串連起來,細節請參考「三、留言板實作」。

以上只是大略想到的概念,有更好的操作方式歡迎提出討論。



三、留言板實作


留言板會遇到超過 200 篇留言的機率比較大,因此這個部份的操作是本文的重點。

1. 關閉訪客留言

在文章編輯畫面的操作方式,同前面的步驟、關閉該篇文章的留言功能即可。


2. 為留言板加上編號

例如本站舊的留言板,文章標題改為「BLOG 留言板 (1~200)」,新的留言板標題改為「BLOG 留言板 (200~)」。

若 200~400 則留言也集滿了,則改為「BLOG 留言板 (200~400)」,新增「BLOG 留言板 (400~)」,以此類推。


3. 安裝系列文

這是關鍵步驟,請參照「讓 Blogger 自動顯示系列文章」安裝程式碼,然後將所有的「留言板」文章使用相同的標籤,讓程式能抓到這些文章。

最後,在每個留言板需要擺放的那一行語法,範例如下:

<div id="postSeries" title="留言板"><b>留言板列表:</b></div>
  • 紅字 "留言板" 代表,程式會列出相同標籤的所有文章中,標題含有 "留言板" 字串的文章。
  • 籃字 "留言板列表:" 可自訂,為提示文字。

完成以上步驟後,將來每篇留言板都會自動產生「留言板列表」,方便讀者找到最新的留言板來留言,也方便查詢舊的留言板內容。




效果就類似上面本文開頭的示意圖,也可參照本站任一篇「留言板」的內容。



四、新範本分頁程式


如果新範本還是喜歡分頁的模式,如前所述,第二頁以後的留言不會被 google 索引,所以對 SEO 沒任何幫助。

如果能接受這樣的結果,WFU 找到一個看起來效果還不錯的分頁工具,可以自動分頁,還能顯示頁數。請參考這篇「Newest 200+ Comments Not Showing In Blogger - Fix Found!」,只不過全英文、且 WFU 沒使用新範本,效果只能靠讀者自行測試了。


延伸閱讀:

Evernote 變得遲緩了嗎? 改善速度過程全紀錄(windows)

$
0
0

(Pic from: slashgear.com)
不知道從何時開始,在 Win8 使用 evernote 開啟記事(notes)時,會停個幾秒鐘才能顯示記事內容。一開始不以為意,不過久了超過忍耐的臨界點後,認為這樣的生產力軟體,反而在降低生產力,需要找個時間徹底解決。

以下本文為 WFU 算是 debug 的過程,每個人的作業環境、裝置不同,也許會有不同的結果,不過若是有同樣問題的使用者,希望這個經驗能有作為參考的價值。



一、XP 時代的經驗


其實這個狀況並非第一次發生,以前使用 XP 桌機系統時,evernote 推出了劃時代的 V5.0 版──「鬧鐘提醒」功能,這是能取代部份行事曆軟體的殺手功能!

可惜的是,才一更新 evernote 版本,WFU 便決定解除安裝、換回原本的 V4.6 版,因為實在頓得太嚴重,一款生產力軟體,作業速度可不能影響生產力啊!

當然舊時代 XP 的桌機效能有其侷限,就算 P4 頂級的 CPU 及記憶體仍無法有效運算新時代的產品,因此舊機器搭配舊版本也算是唯一的解決方案了。






二、Win 8 平板的環境


不過面對今年才買的 Win8 平板 Asus T100,以目前的 evernote 版本 V5.5,難道這樣的配備已經被 evernote 拋棄了嗎?實在不太相信,因此試著來分析原因。


1. 記事數量

推測是記事數量太多,造成檔案太大、而影響搜尋功能,於是將垃圾桶清了一大半,保留到上個月為止(約 500 則),而不需要的記事也盡量砍,剩 1000 則左右。在檔案總管看到的記事檔案大約五十多 MB,相信這樣的資料量,比起專業版使用者,應該是微不足道了吧!

結果沒有作用,開啟記事時,很明顯就是會拖延個幾秒鐘,內容才能顯示出來。


2. 重整磁碟

會不會是 Win8 系統用久了,檔案不連續、導致搜尋資料需要花費比較多的時間?於是對 Win8 檔案進行重整,結果 Win8 平板的重整速度還真是飛快,不到 30 秒就重整完畢,不像以前 XP 耗上半小時都有可能。

然而結果也是一樣。


3. 更新版本

或許這個現象是舊版本的 bug,試著將 evernote 更新到最新版 V5.5 → 結果一樣。



三、Debug 模式


在網路搜尋一下看看有沒有人遇到相同的問題,原來 evernote 有個 debug 功能,可參考電腦玩物的「最佳化Evernote軟體端圖文資料庫,你覺得瀏覽搜尋更快了嗎?」,介紹了進入此模式的方法:

  • 關閉 evernote
  • 「開始功能表」→「執行」
  • 輸入 Evernote.exe /DebugMenu
  • 重啟 evernote → 看到「Debug」選單
  • 裡面有個「Optimize Database」(資料庫最佳化)的選項

看來這應該就是解決方案了,而且這篇是 2011 年的文章,現在都 2014 了,新版本還有更多選項呢──



請參考上圖,在 debug 模式中,除了「最佳化資料庫」,WFU 把其他看起來不錯的功能都執行了一遍,結論是──

這真的是 debug 功能,沒事最好別亂試,還沒試完 evernote 就當了,一直彈出是否回報錯誤的視窗,後來重新開機才停止這個彈出視窗。

Anyway,經過重整資料庫後,記事資料延遲顯示的情形依然不變。其實原文作者也說了,他也感覺不出有變快的效果,所以這件事看起來沒轍了。



四、承認 T100 的過時


該做的都做了,為了新平板的驕傲而四處尋找 solution,或許承認他的過時是一種解脫。於是找回舊版本來試看看。還好 dropbox 保留了今年買 T100 時安裝 evernote 的版本 V5.03,如果讀者不容易找到舊版本的話,可以參考阿榮的網站:


阿榮保留了 evernote 許多舊版本,隨時可以下載替換。

直接說結論,的確是版本的問題,V5.03 在 WFU 的 T100 果然恢復了過往的速度,點開記事後能在半秒鐘之內顯示內容,原本一開始 T100 配 V5.5,點開記事要等個約三秒才能顯示。

所以到目前為止的結果,算是為今年入手的 T100 默哀,已經準備承認這是舊時代的機器,只能配舊時代的軟體版本...



五、Skitch


換回 V5.03 的缺點,就是得犧牲 evernote 從 V5.2 版開始整合的 skitch 修圖功能。但是,skitch 用起來就是比一般的頂級免費截圖軟體(picpick、faststone capture)順手,這大概是我唯一無痛學習的修圖軟體。

為了 skitch,WFU 繼續作實驗,找出 evernote 開始整合 skitch 的那個版本為 V5.2.0.2946 (同樣可從前面阿榮的網頁下載),然後更新到這個版本測試。

結果有好消息,evernote 的開啟記事速度並沒有變慢,看來我可以一直使用這個版本,然後永遠不要更新也沒關係了!



六、峰迴路轉


既然已經立於不敗之地了,WFU 的星座特質又展現出來,想要測測到底可以更新到哪個版本而沒有問題。

結果是挺讓人訝異的,直接更新 evernote 的最新版本 V5.5 後,赫然發現原本在 V5.5 會發生的遲滯現象,現在竟然消失了,那麼也代表前面的「舊機器配舊版本」論,並不是導致這個事件的主因,那麼真相究竟為何呢?

也許 WFU 並不能提供這個事件的真相,但相信這篇文章的流程,可以當作一個很好的參考文件。

也許原本的記事資料庫,因不明原因而導致搜尋及顯示資料的延遲,經過解除安裝、及重新安裝 V5.03 舊版本後,讓記事資料庫產生了正向的改變,而讓後續所有更新的版本,都能讀取到沒有問題的記事資料庫,因而恢復了記事的顯示速度,希望這就是問題的答案。


Evernote 相關使用技巧:

Blogger 文章編輯模式只要切換, 就可能產生異常現象? 教你徹底解決的技巧

$
0
0
長久以來使用 Blogger 文章編輯器,常常在「HTML模式」與「撰寫模式」切換之後,發生許多讓人 OOXX 的狀況,例如版面錯亂、語法失效等等,卻又找不出個根治的方法。

也許大部分使用者很少發生類似以上情境,因為只要專注於寫作,文章內容不去使用額外的 HTML、Javascript(簡稱 js) 語法,不使用花俏的版面設計效果,說不定會對這篇的標題無感。

不過若你已經是 WFU BLOG 的忠實讀者,相信遇上本文的異常現象是遲早的事。以下先列舉各種 WFU 過往經歷的異狀,並提供有效的解決方案。



一、各種異常現象


1. 錨點語法

這是網頁常用的 HTML 語法,可用來快速跳轉到頁面指定位置,例如以下的程式碼,按下後可跳到頁面最上方:

<a href="#">GO TOP</a>
更多錨點的操作可參考這篇「HTML基礎教學(5)--超連結與錨點」 ,而本站有很多文章也使用了錨點,來快速跳轉到文章不同的章節,例如這篇「本站使用的 Blogger hack 及工具整理」。

但是悲劇來了,只要在文章中使用了錨點語法,除非你永遠都不會重新編輯這篇文章,那算運氣好;但只要當你再度編輯這篇文章,且曾在「HTML模式」與「撰寫模式」切換過,那就慘了──Blogger 會檢查 A 標籤有無網址,而當檢查到錨點沒有附網址,便會自動幫你補上一個網址(編輯頁面的網址),如此一來,這個錨點不但失效,還會跳到不相干頁面

至於異常狀況的畫面,可直接參考這篇文章「解決 Blogger 匯入文章時 "繼續閱讀" 出錯的問題」→「一、異常狀況」,就跟這一點的異狀差不多,最後就是 Blogger 會自動幫超連結補上 "http://www.blogger.com/blogger.g?blogID=xxxxx" 這樣的網址字串。






2. HTML 標籤內包含 OL、UL 等語法

文章內使用 OL、UL 等標籤(也就是撰寫模式下的 "編號清單"、"項目符號清單" 按鈕功能)是沒問題的,切換編輯模式後也不會異常;但 OL、UL 包在其他標籤內時,那就不一定了。

例如過去的教學文章「部落格文章+特殊文字區塊」→「四、Blogger 系統問題」,詳細說明了在這種情況下,切換模式會產生的異狀,OL、UL 這類的標籤會被整個打散重組,讓人十分無言。


3. 使用自定義 HTML 標籤來包含其他標籤

為了方便操作「幫文字加上底線」、以及上一點的「特殊文字區塊」,會使用一些自定義的 HTML 標籤。有時 WFU 會在這些自定義標籤展示程式碼,而使用了 <code>這樣的標籤,那麼文章重新編輯、並切換過編輯模式後,又再度會出現上一點的慘狀──程式碼被打散重組。


4. 使用 javascript 內含 HTML 標籤

Blogger 很強大的一點是,文章內可執行 js 。但假如你在 js 裡面使用字串、且字串包含 HTML 標籤的話,那麼就慘了──比以上 3 點還慘。

上面提到的 3 點,都是切換編輯模式才會錯亂,而這個第 4 點,不用切換編輯模式,只要你重新編輯這篇文章,就會發現,字串裡面的 HTML 標籤都被自動斷行了──這也代表 js 會直接當掉,完全無法執行

舉個明顯的例子,這篇「文章列表+ "讚" 統計(依日期排列)」,js 程式碼內的字串含許多 HTML 標籤,只要你儲存以後,再度編輯文章,就會看到上面所述的斷行慘狀,因此該篇文章的結尾必須用個紅色區塊來特別公告此事。



二、解決方案的優缺點


1. 解決方案操作步驟

引起各種異狀的原因在於 Blogger 太過聰明(或自作聰明),自動對 HTML 內容進行解析,但又解析錯誤。值得慶幸的是,以上四種狀況都可用同一種方式來解決 → 把 HTML 轉換為 Javascript 編碼,讓 Blogger 沒機會進行解析。

解決方式的實作文章,在過去的文章已經敘述過,請直接參考這篇「部落格文章+特殊文字區塊」→「五、再次轉碼──HTML 轉換為 Javascript」的步驟,進入下面這個網頁進行轉碼即可:

2. 解決方案的小缺點

經過轉碼後的內容,成了一堆亂碼,不但 Blogger 文章編輯器不想理會,我們自己也不知如何是好──如果想要重新編輯內容的話。所以若有辦法重新編輯的話,這就是個完整的解決方案了。



三、恢復亂碼內容的方法


以下利用一個完整的編碼、還原流程,來利於操作說明。

1. 原始內容

假設原始 HTML 碼為以下(這些內容經過切換編輯模式後一定會亂掉):

<code><ol><li>Hi, Welcome!<li>
<li>This is WFU BLOG:</li>
<li>http://www.wfublog.com/</li>
</ol></code>


2. 編碼內容

將原始碼複製,貼到這個網址的內框:

按下「開始編碼」後,產生的編碼內容如下:

<script>
<!--
document.write(unescape("%3Ccode%3E%3Col%3E%3Cli%3EHi%2C%20Welcome%21%3Cli%3E%0A%3Cli%3EThis%20is%20WFU%20BLOG%3A%3C/li%3E%0A%3Cli%3Ehttp%3A//www.wfublog.com/%3C/li%3E%0A%3C/ol%3E%3C/code%3E"));
//-->
</script>


3. 複製亂碼

將來想重新編輯時,將上個步驟 unescape("...亂碼內容...")→ 複製雙引號之間的內容:

%3Ccode%3E%3Col%3E%3Cli%3EHi%2C%20Welcome%21%3Cli%3E%0A%3Cli%3EThis%20is%20WFU%20BLOG%3A%3C/li%3E%0A%3Cli%3Ehttp%3A//www.wfublog.com/%3C/li%3E%0A%3C/ol%3E%3C/code%3E

4. 還原編碼

再將亂碼貼回原本的網址:

按下「看原始碼」,就能恢復原本的 HTML 內容了:

<code><ol><li>Hi, Welcome!<li>
<li>This is WFU BLOG:</li>
<li>http://www.wfublog.com/</li>
</ol></code>

編輯完之後,再回到步驟 1 將內容編碼,貼回文章中即可完成。


Blogger 文章相關主題:

網頁中文字型除了微軟正黑體, 還有這些好選擇!(windows)

$
0
0
對於網頁能使用的中文字型,我們比較難有自訂的選擇。上一篇「網頁中英文字型跨平台設定最佳化 」說明了,由於中文字型檔太大,網頁絕對不能引用外部中文字型檔,否則載入速度可以讓訪客好整以暇地泡好一杯咖啡,並跳離該頁面。

前陣子 Google 發布了免費的中文字型「思源黑體」,不過請打消將這個字型設定在網頁上的念頭,因為這不是作業系統的預設字型,多數訪客的電腦中依然沒有這個檔案,就算設定了這個字型,訪客仍然看不到思源黑體的。

而在使用者最大宗 Windows 系統下,網頁設定中文字型比較順眼、常見的選擇會是「微軟正黑體」。但 WFU BLOG 設定的幾項字型中,主要使用的是「明瞭體」,如果沒聽過的話,其實還有更多你沒聽過的字型可用。想知道還有哪些不錯的中文字型可選擇嗎?請見以下詳細的整理。



一、不適合在內文使用的中文字型


最早知道「明瞭體」是經由這個網頁「幸好還有明瞭體!」的介紹,也因此瞭解除了中文字型,還有其他地區的字型能夠替代。


1. Windows 所有可用的中文字型

以 Win8 為例,進入系統資料夾 Windows → Fonts 可看到所有字型檔,其中「中、日、韓」這三個地區的文字特點是 "都有漢字"。雖然「日、韓」字型會缺字,不過網頁基本的常見字都還有,所以可拿來當中文字型用。下圖是可用字型一覽──




2. 不適合在網頁內文呈現的字體

上面列表在中文的部份,有黑體、明體、楷體、宋體(簡)可選擇。當這些字體用於標題,在比較大的像素 24px 以上展現時,看起來的效果都還好。不過在內文中使用的字體一般較小,約 13px~18px 這個範圍,以下是這些字體用於內文時的效果比較──




WFU 的個人感覺是,在字體較小時,使用黑體看起來會比較舒服、順眼一些。不過微軟雅黑比較可惜的是,其預設是簡體,若在小字的情況下當內文使用時,繁、簡混雜會讓很多字看起來非常不搭。而宋體的評價排在黑體之後、其他字體之前。

結論是使用非簡體的黑體,當作內文使用會表現較好,而黑體以外的字型,可以考慮用在網頁其他區塊,或是特定點綴、裝飾用途。以下先討論適合內文的字型,將比較各語系的黑體字型。


3. 各語系的黑體字型列表

排除不相關字型後,以下是所有的黑體字型:

  • SimHei (簡)
  • 微軟正黑體
  • Microsoft YaHei (微軟雅黑 簡)
  • Meiryo (明瞭體 日)
  • MS Gothic (日)
  • MS PGothic (日)
  • Yu Gothic (游黑體 日)
  • Dotum (韓)
  • Malgun Gothic (清黑體 韓)

接下來看看他們在內文字體大小的效果比較。






二、黑體字型效果比較


1. 內文效果




在小字 13px 的表現:

  • 雅黑、明瞭體比較清楚
  • 清黑體 (Malgun Gothic 韓)也 OK, 但可惜 "偽" 漏字,轉而以細明體展示
  • SimHei (簡) 也夠清楚,但繁體字比較難看一些。
  • 其他黑體的線條稍微偏細。


在小字 18px 的表現:

  • 個人覺得明瞭體綜合表現第一
  • 雅黑還不錯,但繁、簡體的字擺在一起,有些看起來似乎不太搭。
  • 字體放大後,很多都比較好看了,不過線條偏細的那幾個,可能還是不適合設定來顯示內文,讀者可憑自己喜好挑選。


2. 標題效果




大字 24px 標準字體 的表現:

  • 幾乎全體表現都不錯,個人認為雅黑綜合表現第一(小字時的簡、繁不搭情形,因為字體放大後,不是那麼容易看出來)


因為標題通常使用粗體,需要比較 24px 粗體 的表現:

  • 雅黑及明瞭體似乎有過粗的感覺,不過若將字型再放大、拿來當網站標題是適合的。
  • 除了漏字的問題,清黑體(Malgun Gothic 韓) 綜合水準是不錯的。
  • 除了以上過粗的兩個字體,幾個日文字體例如游黑體(Yu Gothic 日)都不錯、其他的黑體看起來也不差。



三、字型設定實作


如何跨平台設定網頁的中英文字型,可詳閱:


下面以 Blogger 為例,只說明 Windows 系統部份的字型設定,而其他作業系統的字型設定,請務必參考以上教學連結。

非 Blogger 的平台若想套用以下實作範例來修改 CSS,建議使用「Chrome 開發人員工具」找出區塊的 class 或 id,在瀏覽器變更 CSS 參數來測試,再到範本或後台修改字型的 CSS 設定。


1. 網站次標題

如前所述,在大字體的表現,個人比較欣賞清黑體(Malgun Gothic 韓)的效果,而韓文會漏字的情形,在後面指定一個粗細差不多的中文黑體字型,即可解決這個問題。經過審慎比較後,選擇了 SimHei(簡) 這個字型。

網站次標題 "偽 ‧ 雲端 ‧ Blogger 調校資料庫" 便是採用這個方案,以下為操作步驟──

在範本中找到 .Header .description {...}這個區間,新增或修改以下參數:

font-size: 30px;
font-family: "malgun gothic", simhei; /* 其他作業系統的字型設定請參考前述教學連結 */
font-weight: bold;


下圖為效果──




2. 文章標題

文章標題使用了粗細均勻的游黑體(Yu Gothic 日),而日、韓字型會漏字的情況,一樣交給線條比例相當的 SimHei(簡),以下為操作步驟──

在範本中找到 .post-title {...}這個區間,新增或修改以下參數:

font-size: 26px;
font-family: "Yu Gothic", SimHei; /* 其他作業系統的字型設定請參考前述教學連結 */


下圖為效果──




3. 文章次標題

前面兩項都沒使用微軟雅黑體,是為了避免過粗顯得突兀,而文章中的次標題都是重點提示,需要使用最粗的效果,此時雅黑便派上用場

WFU 在文章中設定次標題的方法請參閱「Blogger 文章標題最佳化__(3) 修改範本 H1 H2 H3 標籤實用技巧」→「三、加強文章中的 SEO 效果」→「2. 有效率的文章範本範例」。

這些自行設定的 h2、h3、h4 標籤要設定字型 CSS 的話,以 Blogger 為例,後台範本 → 自訂 → 進階 → 新增 CSS:

.post-body h2, .post-body h3, .post-body h4 {
font-size: 22px;
font-family: "Microsoft YaHei"; /* 其他作業系統的字型設定請參考前述教學連結 */
}

效果可見本文的文章次標題(如果你使用 Windows 系統的話)。


4. 文章內文

本站在內文使用「明瞭體」已經有不短的時間,覺得比「微軟正黑體」的效果好上不少,同時將字體調大後可讓讀者有非常舒適的閱讀體驗。

「明瞭體」這個日文字型會漏字的情況,我選擇交給「微軟正黑體」。以下為操作步驟──

在範本中找到 .post-body {...}這個區間,新增或修改以下參數:

font-size: 18px;
font-family: Meiryo, "微軟正黑體", "Microsoft JhengHei"; /* 其他作業系統的字型設定請參考前述教學連結 */

效果可見本文的內文字體(如果你使用 Windows 系統的話)。


5. 導覽列、標籤、側邊欄

更改個別區塊的字型 CSS 設定,如前所述建議使用「Chrome 開發人員工具」找出區塊的 class 或 id,在瀏覽器直接變更 CSS 參數無誤後,再到範本中修改會比較快。

目前本站導覽列使用的是「雅黑」,網站其他部份使用的是「SimSun(宋體 簡)」



四、一些補充


1. 搭配的英文字型

設定完黑體字型後,跟英文字型的視覺效果能否搭配也是一個學問。最簡單的方法就是只設定中文字型、去除英文字型的設定,那麼網頁在抓英數文字時,仍會去讀取黑體的字型。

只不過,不是每個中文字型的預設英文效果,都能跟中文搭配得很好。如果想要更美、又能搭配黑體的英文字型,可參考這篇「word 預設中英搭配有什麼問題」,來找出更好的選擇。


2. 其他平台

雖然這篇只有提到 Windows 系統的中文字型,不過只要依照同樣的流程,也是能找出其他作業系統(例如 Mac)最適合自己網頁的中文字型,並進行最佳化設定。


3. 個人觀點

由於這篇的範例選擇算是個人觀點,不代表這樣的審美觀一定是好的,也不見得這些選擇適合每個網站,也不一定需要為不同區塊都設定不同字型。

不過本文提供了各種 Windows 現成字型的圖示與效果,只需要參考範例、及教學連結,相信讀者都能找到自己心目中理想的字型,並成功套用在自己的網站。


網頁字型相關文章:

取代Rainlendar管理行事曆的好選擇__Checker Plus for Google Calendar使用心得(Chrome套件)

$
0
0
過去在 Windows 系統非常好用的 Rainlendar,進入行動裝置的雲端時代後有些不敷使用,現在能夠隨時隨地跨平台同步的 Google Calendar 才是王道。

雖然 Rainlendar 也可同步 Google Calendar 的內容,不過免費版的使用有諸多限制。而 Google Calendar 雖然跨平台及同步很方便,但在 Windows 使用瀏覽器界面才能操作並不友善,除了讀取時間久,也不可能一直開著 Google Calendar 來讓待辦事項的提醒出現。

在桌面端沒有夠好的 Google Calendar 代理界面之下,也許較佳的選擇是使用瀏覽器套件,而本文要介紹的 Checker Plus for Google Calendar 為 Chrome 套件,其功能強大,足以取代我使用 Rainlendar 的工作。



一、安裝設定及操作


如何安裝及操作,網路已經有不少教學,然而這個套件的作者 Jason Savard,其作品都類似的相同特質:

  • 符合使用者體驗
  • 作工細緻,設定選項極多
  • 改版頻率很快

之前介紹過他的另一個 Chrome 傑出套件「Checker Plus for Gmail™」,也是文章發布沒多久又有了新版本。因此這類的套件若是需要教學文件,那麼原則就是 google 較新的日期,教學文章的截圖畫面及說明,會比較接近新的版本。以下提供套件官網及較新的操作教學文章:




基本設定與操作交給以上連結,以下內容為這個套件,如何利於處理行事曆、待辦事項的使用心得。






二、延遲待辦事項


1. 週期性待辦事項

要說這個套件能取代 Rainlendar 的工作也不盡然,不過以 WFU 的作業習慣,一般性的待辦待便事項已經移交給「evernote」,而 Checker Plus for Google Calendar 主要是取代 Rainlendar 的「週期性待辦事項的提醒功能」。


2. Rainlendar 的提醒功能

過去習慣使用 Rainlendar 的原因為,設定週期性待辦事項(例如每週、每月的定期執行項目)的功能很強,且時間到了出現提醒訊息時,可以選擇各種延遲提醒的時間。

例如一時忙不開無法進行這個「週期性待辦事項」時,可以點選延遲「1分鐘、5分鐘、1小時、1天、1星期」,總之 Rainlendar 只要設定了多少個延遲時間,就能出現多少個延遲選項,能夠讓我們在當下根據作業的狀況,決定要延遲多久再出現這個待辦事項的提醒訊息


3. Checker Plus for Google Calendar 的提醒功能

這個套件若想要跟 Rainlendar 一樣,有完整的的延遲設定選項,那麼得選擇付費。不過依照 WFU 的需求,若是設定得宜的話,免費的功能還是可以設定成我要的結果。




如上圖,右下角是預設出現的延遲提醒畫面,有兩種選項,一個是「延遲一小時後提醒」、第二個代表「更多提醒時間」。我們點下第二個「Snooze Times」後──




畫面左半部多了七個時間選項,時間都在一天之內,如果想要超過一天的延遲選項,只好選擇付費了。




不過對 WFU 而言,只需要「延遲一天」與「一天之內的延遲提醒時間」,那麼可以如上圖,在設定的畫面中,找到 "Notification button #1",改成「通知 1 day」,而 "Notification button #2" 保持不變即可。

設定完後,彈出的延遲提醒就會如右下角,待辦事項需要延遲一天就選第一個,需要一天內的延遲時間,點第二個就會出現更多選項。

這部份設定好後,就代表 windows 可以少安裝一個常駐系統、吃記憶體的 rainlendar 了。



三、背景執行與通知語音


接下來介紹兩個我沒有使用,但可能對讀者很實用的功能。

1. 背景執行

在設定畫面 → General → 勾選「Google 瀏覽器關閉時在背景執行」,那麼這個套件就能在不啟動 Chrome 的情況下,也能彈出待辦事項提醒。




這個功能非常實用,據作者所言,在 Windows 啟動後,這套件會以最快速度載入,那麼就等於是在執行 Rainlendar 了。

只不過如前所述,我需要用到這個套件的部份只有週期性待辦事項,所以還不需要使用這個功能,也可減少常駐的記憶體使用。

另外就是可能會面臨一些技術性的問題,有興趣請參考作者的說明:「Run in background」。


2. 通知語音

在設定畫面 → Notificataion → 勾選通知語音 → 語音引擎選擇「Google 中國的」,那麼有待辦事項通知時,喇叭就能用中文發音念出待辦事項。




不過一直在電腦前作業的話,不需要語音提醒功能,因此最好勾選「只有當你遠離電腦時」。

當沒有操作電腦、或必須離開電腦一段時間時,但又聽得到喇叭的情況下,這個功能就非常實用了。(不過待辦事項的內容要小心填寫,否則其他人都會聽到了...)



四、友善界面──付費功能


Google Calendar 需要進入網頁才能操作新增、修改行事曆或待辦事項的細節設定,如前所述這是不方便的操作。而 Checker Plus for Google Calendar 非常棒的一點是,他提供了這些動作的快速操作界面,而不需要進入 Google Calendar 頁面──不過需要付費。


1. 快速操作界面




如上圖,點開套件圖示後,選擇「迷你日曆與待辦事項」,在這裡可以方便的新增事件。




例如紅色箭頭處,點擊 8/31 這個日期後,即可新增事件,填入敘述後,按「建立活動」即可。

還可選擇「天」、「週」、「月」,來快速建立其他需求的實踐。

上圖很有意思的是,當我在「WFU BLOG」網站建立事件時,也會出現「WFU BLOG」這個網站的資料當作事件的內容,這功能應該也是有不錯的應用。


2. 可捐贈任意金額

如果需要大量建立 Google Calendar 事件的讀者,其實可以考慮付費取得所有功能,因為這個套件的界面真得做得很方便,可以節省很多作業時間。




而作者也很慷慨,他說這是「隨意捐」,任何金額都能取得將來所有新增功能的使用權,值得推薦一下。而付款也滿方便的,可以選擇 Pay Pal、信用卡,還有「比特幣」?? 題外話,想必作者也是挖礦的愛好者!


Chrome 相關套件:

修改 Blogger 範本的重要觀念 (1)備份範本的訣竅

$
0
0
如果是本站的忠實讀者,那麼修改範本可說是稀鬆平常的事。而常常修改 Blogger 範本的話,最重要的一件事,就是能否養成正確的備份範本習慣。

有的讀者可能會好奇,備份範本有什麼了不起,跟 Copy & Paste 一樣稀疏平常,只要知道快速鍵怎麼按就會做這件事了,有需要特地寫一篇文章嗎?的確非常需要,除了自己使用 Blogger 早期所引發的不測,WFU 也看過太多慘案,因此就算有備份的習慣,都不一定能避免悲劇的發生。唯有具備正確的觀念與工具,才能確保範本的安全──當然,都不修改才是最安全的。

只要踏上修改範本這條路,那麼這個系列文的重要性,跟「Blogger範本內容」系列文是並駕齊驅的。本篇要提供的進階觀念大致如下:

1. 如何正確備份範本
2. 如何養成習慣
3. 如何比對不同版本差異



一、悲劇的發生


進入主題之前,如同交通安全講習,先播放一些肇事的影片,比較能正視其危險性。以下舉例一些可能會引起災難的操作──

1. 誤刪程式碼

對於不熟悉程式碼的讀者,範本中的內容其實跟阿拉伯文、韓文這類文字的視覺效果差不多。就算我們跟著網路上的教學 step by step 操作,也是會有操作失誤的時候,當不小心多複製了一行、或是不小心刪除了一行,面對一堆火星符號,很可能看不出差異的。


2. 忘記出處

許多網路上的安裝程式,有一部分要放 </head>前、有一部分要放奇特的位置、有一部分要放 </body>之前等等,總之程式碼得拆成好幾個地方放。

不要說過幾個禮拜,隔天我們就忘了哪部份是什麼作用,將來要移除不但不記得出處、也無法完整移除,殘存的程式碼遲早跟範本其他程式打架,這都是幾個月、一年以後才會發現的事。


3. Javascript 會打架

一般來說,安裝第三方外掛都會有風險,除非自己對 js 很懂,否則網路上的小工具良莠不齊,不幸裝到品質較差的 js 工具時就有可能有問題。以下大略舉幾個例子:

  • 全域變數太多,導致跟其他工具的變數相同,而讓程式互相衝突
  • 不同的工具使用不同的框架版本,例如某個小工具使用的 jquery 版本不同,而導致其他工具失效。
  • 就算沒有變數及版本的問題,某些工具一定會打架,例如「圖片延遲外掛Lazy Load」與「燈箱Fencybox

有興趣了解更多,可參考「部落格最好避免第三方外掛」系列文。


4. 缺乏版本控制

許多讀者在修改範本前會備份檔案,我們假設叫做 "檔案 A",就當他是最乾淨的一個版本。若是發現有問題後,會將 "檔案 A" 還原回範本,若是沒問題就繼續使用當前範本內容。

不過常常下一次修改範本時,備份檔案還是存到 "檔案 A",那麼此時風險就來了,因為 "檔案 A" 被覆蓋過,不見得是最乾淨的版本了。

系統中很可能有一個 bug 在第四次覆蓋時發生,只是一直都沒發現,等到第十次修改時才蹦出來。但此時的 "檔案 A" 已經是前一次覆蓋的狀態,再也無從恢復到第四次修改時的狀態了。

只要發生了以上的情形,對於一般沒有程式基礎的使用者而言,這個網站大概就得砍掉重來了,除非具有 debug 程式的能力,可以自行將臭蟲抓出來。






二、如何正確備份範本


藉由以上的說明,相信讀者現在都可以了解,「如何備份範本」是多麼重要,以下一個個說明正確的作法。

1. 誤刪程式碼及忘記出處

解決的方法可參考「Blogger 範本各種註解方式」→「一、範本註解方式」,在一個完整段落的程式碼前後加上註解,可避免將來衍生的各種狀況,要查驗問題歸屬也變得容易。

WFU 寫的工具都會加上註解,其用意即是在此,且註解附上出處,將來有狀況也可知道要到哪裡求援。建議讀者從其他網站安裝的工具,在備份範本之前也記得要先加上完整的註解內容,這是必須養成的習慣。

另外補充一點,為了避免程式碼的安裝分散各處,WFU 有時會製作懶人包,將程式碼集中一處。但懶人包常常不會有最佳的程式執行效率,關於這一點,後續的系列文會介紹如何正確處理範本中的 HTML/JS/CSS。


2. Javascript 會打架

有鑑於大部分讀者不一定能自行對 js 進行 debug,這部份必須嚴格的進行範本備份的版本控制,請見下一點說明。

唯有進行版本控制,當發生 js 打架、某個小工具無法運作時,逐一將各個備份的版本還原,然後嘗試一個個刪除 js 小工具,來測試出產生問題的工具是那一個或那一些。


3. 版本控制

這是 WFU 的個人習慣,不見得適用每個人,不過提供一點概念當參考,讀者可以依據自己修改範本的頻率與週期進行調整。

如前所述,我們不知道潛藏的 bug 什麼時候會蹦出來,因此我固定每個月會備份一次,一年就會有十二個版本,檔名加上日期可易於辨識範本的話,可。

但是一個月之內只有一個版本仍是太過冒險,因為我修改的頻率很高,因此在週期備份的時間點(例如月底)之外,只要有重大修改,我會另外使用暫存檔,共有四個,檔名大概像是 "temp1" ~ "temp4" 這樣,便於循環使用。可以確保短期有短期的還原點、長期有長期的還原點,發生問題時得以逐一往回還原測試。



三、小工具及文章也需要備份


1. 小工具

這也是滿重要的概念,所有的小工具內容,是直接儲存在 Blogger 後端伺服器,而非範本之中,所以光是備份範本,並無法保證小工具的內容安全無恙。

如果是「HTML/Javascript」、「網誌清單」等等的小工具,不小心誤刪了的話,內容是無論如何救不回來的。

所以新建了這些小工具後,需要記得備份一次小工具的內容。不過不需要定期備份,這算是「一次性的備份」。當然,如果之後修改過內容的話,還是得重新備份。


2. 文章

這個主題過去曾發表,Blogger 文章的備份技巧請直接參閱「部落格文章如何全自動備份」。



四、實用的輔助工具


1. 習慣養成

備份的習慣並不容易養成,想靠人腦的記憶力來維持慣性更是不可能,好在習慣可以藉由工具的輔助來達成。如果預計每個月備份一次範本的話,可參考「Checker Plus for Google Calendar使用心得」──




藉由輔助工具的定時提醒,要忘記這件事也很困難。且就算時間到了忙不開、無法進行備份,只要點一下彈出視窗,就能設定延遲提醒的時間,例如兩小時、一天後,那麼屆時這個輔助工具仍會監督我們,直到完成任務為止


2. 比對範本差異

有時為了在不同版本的範本之間 debug,我們會需要知道不同版本的內容,到底差在哪裡。那麼這個工具「WinMerge」就非常實用了。




WinMerge 可以讓我們載入兩份文件,同時列出兩個視窗,而內容不同的地方會以不同的顏色標示出來,讓我們很快就能找出版本的差異。

關於軟體的下載、操作與心得,可直接參考這篇「
WinMerge 文件檔案比對軟體,找出兩份文件內容的差異
」。



五、小結


從早期自己的經歷,到現在逐漸養成一套 SOP 流程,相信我的 Blogger 範本備份習慣與經驗,可以供讀者參考與借鏡。而有了多份整齊的備份檔案後,相信範本修改起來也可以減少恐懼、更加得心應手。


Blogger 範本相關文章:

Google Authorship 作者資訊正式失效, 是否需要移除 G+ 作者連結?

$
0
0

(Pic from: standardmarketing.com)
沒想到距離上次事件「搜尋結果不再顯示作者頭像!Google 為何要這麼做?」才兩個月,現在 Google 連作者資訊也一併從搜尋結果取消了;不但如此,官方正式宣佈 Google Authorship 將不會是搜尋引擎排名權重的影響因素之一。

+Mark X 撰寫專文說明了這件事,並提出獨家分析及觀察。本文內容主要轉載自他這篇「Google 搜尋結果不再顯示作者資訊連結」,希望能讓更多讀者瞭解此事,以及網路的新趨勢。



一、事件始末



Google search 在2014年8月29日決定不再顯示作者資訊。Authorship is over.
昨日 Google 搜尋引擎宣佈全面停用作者資訊 – Google Authorship,包括作者名稱或作者頭像。這不僅是 Search UI 的改變,同時是實體數據上的停用與移除,你可以在 Structured Data Testing Tool 發現有關作者連結的部份已經消失。




過去兩個月 Google 的搜尋結果還能看到文章作者名稱,現在則完全消失。如果能接受上一篇「搜尋結果不再顯示作者頭像」→「五、小結」→ Mueller 說的「對抗搜尋演算法的最好方法,就是做一個絕佳的網站。」,那麼或許對這個結果比較能泰然待之。

少了 Google Authorship 的確會對搜尋排名及點擊率有影響,而且也少了一點樂趣。如果對這件事已經能釋懷的話,剩下的問題大概是,既然 Google Authorship 無用,那麼需不需要移除 G+ 帳號與文章作者的連結呢?






二、官方說法



根據 John Mueller 的回覆,Google+ 的帳號鏈結已經沒有作用,用戶可以自行決定去留。我想應該有許多人會移除這項個人資訊,畢竟它造成的不良影響之一,垃圾郵件的目標名單來源,讓許多作者相當頭痛。而且約翰叔叔已經確認移除作者資訊不會影響搜尋排名。




John Mueller 在他的「G+ 訊息」表示:

  • "搜尋結果提供作者資訊" 對於使用者而言,不如我們想像中的有益處,且點擊效果可能有偏差。
  • 做出這個決定不容易,不過數據顯示這不會減少網站的搜尋流量、也不會增加廣告點擊,這項改變主要基於改善使用者體驗。
  • Google Authorship 其實有不少 bug、會給作者帶來許多廣告信件的麻煩
  • Google Authorship 其實不是那麼容易推廣與實行


好的,以上是官方說法,有些是有道理,不過 WFU 不那麼全然盡信。所謂官方說法通常射了箭再來畫靶,移除 Google Authorship 這件事應該有其他的原因。



三、Mark 觀察



前一陣子我無意間發現搜尋引擎正在做調整,其中引用了一些機制,所以這周我正在做一些測試。只是沒想到這時候宣佈作者著作標記進行最後一波裁撤,正好讓我觀測到先前的推測是否正確。

搜尋引擎的促進站在使用者的立場思考並加上廣告收入的商業考量而設計,目前 Google 公佈的監測數據,行動裝置的搜尋已經超越 50%。以這個考量點來推敲,我做了一點大膽測試,不過純屬個人意見就不公開。




Mark 推測全面移除 Google Authorship 主要是為了行動裝置的搜尋結果、廣告收入的商業考量,WFU 認同他的觀點,且 mark 還有實據佐證,內容相當精彩,與 HTML5、語意標籤有關,只不過需要索取密碼才能閱讀,這部份得請讀者移駕 mark 的文章了。

先打個預防針,如果認同前面所提的「對抗搜尋演算法的最好方法,就是做一個絕佳的網站。」這句話,相信你曾經歷過 SEO 演算法的波動。無意間得知利於排名的演算法,建議當成知識吸收來看待即可,避免過度鑽研如何得利,學習 mark 的低調。

「出來跑,遲早要還」,將來演算法調整時,是賺是賠就不太好說了。



四、取代作者資訊的權重因素


雖然 SEO 不須太過鑽研,但有些基本的必須了解。


Google 搜尋裡的作者資訊不過是一種顯示上的記號,雖然在搜尋裡已經沒有加分的作用,但對於搜尋引擎而言,Schema.org 的標記作用更勝於搜尋結果中顯示名稱或作者頭像。rel="author" 的標記屬於網頁結構化的一部分,它實質上影響著作者排名。搜尋引擎雖不再運用作者標記的分數;可沒說 Author rank 也一起捨棄,將這個作者鏈結寫入微資料的必備條件內吧!




雖然搜尋引擎不採用 Google Authorship 了,但作者權重仍默默在運作,一篇文章還是得加入適當的語法,讓搜尋引擎知道作者是誰,這是決定搜尋排名的因素之一。

以 Blogger 來說,範本沒有亂搞的話,跟文章作者相關的語法預設都會有;Schema.org 微資料標記在 Blogger 新範本內,也都幫站長安置了基本的設定,這方面不太需要過度擔心,之前寫的「Google+ 分享文章時,如何讓縮圖以大尺寸呈現?」有提過 Schema.org 的基本設定。

如果想要作更進一步的優化,那麼可參考官方說明「Getting started with schema.org」。



五、是否切斷與 G+ 的聯繫?


最後,問題只剩下需不需要將作者資訊與 "看似無用的 G+ 帳號連結" 移除。

為何有的站長想要移除 G+ 帳號的連結呢?因為過去 G+ 帳號採實名制,且一年之內的修改次數有限,為了讓文章能顯示想要呈現的作者暱稱,許多站長在這件事算是吃足了苦頭。


根據 John Mueller 的回覆,Google+ 的帳號鏈結已經沒有作用,用戶可以自行決定去留...在您決定動手移除作者連結或 Google+ Badge 之前請先等一下,有些觀點可以參考。

◎ 外鏈關係
一個穩固而安全的外鏈結構有什麼能比你的「名片」更值得加入?Publisher 於 Structured Data Testing Tool 當中仍屬有效資料。在你的文章中的作者資訊不妨當成一種外鏈關係;一種社群聯繫,除非您惡名昭彰否則保留作者連結多少有些名片的作用。
網站型態則應該加強品牌專頁以代替個人作者資訊。

◎ 社群與搜尋
Google+ 雖然目前在使用度沒有預期的好,至少還有谷歌搜尋幫它撐腰。使用 Google 帳號登入者仍然可以看見社群內分享的資訊出現在搜尋結果中,吶﹍算是好事吧!




Mark 認為保留 G+ 連結可視為網路名片,這是相當不錯的觀點。以 Blogger 為例,官方預設的作者頁面的確算是不太專業。

另外,以下算 WFU 的個人觀點,我也是屬於保留 G+ 帳號這一派:

1. G+ 已經取消了實名制

請參考這個「Blogger 社群討論串」,留言有一些心得可參考。G+ 日前已經取消了實名制,這代表想取什麼樣的暱稱隨站長高興,那麼「是否切斷與 G+ 的聯繫」這件事的強大阻力,看來是已經不存在了。


2. G+ 社交圈的搜尋結果

Google 雖然有無痕模式,不過搜尋引擎預設的還是「私人搜尋結果」,如同下圖右上角的標示──



這代表什麼意思呢?意思就是說,你在 G+ 所追蹤的社交圈成員,越容易出現在你的搜尋結果。

不好意思拿 mark 來舉例,先說聲抱歉,大部分 markxii.com 文章的排名都很前面,看不出差異性,只好找這篇比較通俗的題材「版型更新 文件比對軟體 WinMerge Update」。

實驗時間為同時,實驗網址同為「google.com.tw」,測試字串為「winmerge 文件 比對 軟體」。因為 mark 在 WFU 的社交圈,搜尋結果如同上圖,出現在第二頁最後一個結果。




接著測試「無痕模式」,搜尋結果出現在第三頁第二名。很明顯的可以得出結論──只要我們在 G+ 被越多人追蹤(處於別人的社交圈),我們的文章在別人的「私人搜尋結果」就越前面

那麼,在 G+ 社交圈貼好內容、保持活躍狀態,讓別人認為我們值得追蹤,也是增加我們文章能見度的一個努力方向。



六、小結


Google 搜尋引擎需要作者提供好的內容,而顯示作者資訊算是能鼓勵好作品、能產生正向循環;因此,不顯示作者資訊是令人惋惜的。

同時,有 Google Authorship 的時代,搜尋引擎判別「作者權威度」這件事,算是認人、不認網站。現在取消之後,已經沒有 "認人" 的機制,也只能個別網站自行累積作者權威度了。抑或許是,Google 不在意 "個人" 的權威度,更在意 "個別主題" 的權威度,Google 只認該主題寫得好不好、寫得多不多,無論是誰寫出來的?

網路的變遷一直很快,後 Google Authorship 時代該如何做才是最好,恐怕也趕不上潮流的變化。其實也不是偷懶,然而如果要做個收尾,也許還是得照抄上一篇的結論──「內容才是王道」。


Google Authorship 相關系列文章:

jQuery 展開收合效果安裝懶人包

$
0
0
「展開收合效果」是常見的網頁技巧,最早是在 +Mark X 的「留言版提示 - jQuery 展開收合效果」看到這個效果。

如果一個頁面只有一處需要用這個效果,那麼請直接參考 mark 這篇文章即可;如果同一網頁有多處需要展開收合時,這個功能在使用上會稍微麻煩一些,需要每一處個別設定 id、個別執行不同的 js 程式碼,對於不熟悉程式碼的讀者,可能會不知如何下手。

因此有這樣的需求時,可使用本文提供的懶人包,就能批次搞定多處的程式碼。第一次需要花點心思設計樣式,不過以後套用就非常方便。



一、各種註腳的展現方式


首先介紹一下「展開收合效果」在部落格可運用於何種情境。

對於網站的熟客而言,可能比較有耐心閱讀站長的一字一句,文章內容過長不太會是問題;不過對於新訪客而言,主要目的可能是在網路上尋找資料,希望直接看到重點,廢話越少越好。對於這兩種極端類型的讀者,身為站長的你,會想選邊站呢?還是想兩種都討好呢?

討好所有人很困難、也不一定需要,但這件事的確有兩全其美的方法,就是在文章中使用「註腳」功能。重點的部份提供給沒時間的訪客閱讀,同時頁面也可比較簡潔;而進一步需要補充的部份,使用各種註腳的技巧,讓有時間想要深入了解的讀者點擊按鈕,才顯示隱藏內容。剛好目前就是一個絕佳的舉例──

下面內容是針對只想看重點的讀者,在文章中使用「註腳」大致有三種形式:

  • Footnote 註腳功能外掛
  • Fancybox 燈箱效果
  • jQuery 展開收合效果

想了解細節請點下面這個按鈕展開隱藏內容:

三種註腳型態詳細說明






二、準備動作


以下說明如何簡單安裝 jQuery 展開收合效果,第一部份是 jQuery 主程式碼及 CSS 樣式設計。

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

請到後台「範本」→「編輯 HTML」,搜尋 </head>這個字串,找到後在此字串的前一行,插入以下程式碼:

<style>
/* 展開收合效果 */
.slide_toggle {
text-align: center;
cursor: pointer;
font-weight: bold;
/* 收合提示字串區塊, 還可加入自訂 CSS 效果 */
line-height: 170%;
background-color: #eed;
border-radius: 7px;
}
.slide_toggle + div {
display: none;
margin-top: 10px;
/* 隱藏註解文字區塊, 請加入自訂 CSS 效果 */
}
</style>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js'></script>

  1. .slide_toggle {...}的區間為收合提示字串的按鈕區塊,可使用這些預設的 CSS 語法,或是自訂 CSS 樣式。
  2. .slide_toggle + div {...}的區間為事先隱藏起來的註解文字區塊,這個區塊比較大,每個人喜好設計的樣式都不同,建議可參考「讓網頁使用各種特殊文字區塊」系列文,來加入自己的 CSS 樣式。
  3. 最後一行的藍色字串,請先檢查一下範本是否已經安裝過 jQuery,如果有的話,就不必重複安裝這一行。



三、擺放位置


如果要放在文章之中的話,請在文章中任何想要擺放提示文字按鈕、及隱藏註解的位置,安插以下 HTML:

<div class="slide_toggle">填入收合提示文字</div>
<div>填入隱藏的說明內容</div>

  1. 按照紅色字串的說明來置換自己的內容即可。
  2. 舉例來說,一篇文章有五個地方要放註腳,就擺放五組這樣的 HTML 內容。
  3. 如果「收合提示文字」想要放在行內(不要使用一整行的區塊),那麼第一行可改成 <span class="slide_toggle">填入收合提示文字</span>,不過 CSS 也要調整就是了。
  4. 如果按鈕跟隱藏區塊不想連在一起,想隔一段距離(中間穿插其他文字),也是沒問題,但兩行程式碼之間只能有文字,不可有其他 HTML 標籤,否則程式碼就失效了。



四、執行程式碼


最後,要將執行程式碼放在哪裡,端看這個功能的使用頻率。以下是執行的 js 程式碼:

<!-- 展開收合 start -->
<script>
$(".slide_toggle").click(function(){
$(this).next().slideToggle();
});
</script>
<!-- 展開收合 end -->

  1. 如果常常使用這個功能的話,比較方便的作法,是將以上程式碼放在範本中 </body>的前一行。
  2. 如果不常使用的話,那麼放在文章之中就行了,不過每篇要使用此功能的文章,都必須放這段程式碼。請放在文章的最底部。
  3. 如果不喜歡「滑進滑出」這樣的效果,那麼 "slideToggle" 這個字串可改成 "fadeToggle",會變成「淡入淡出」的效果。

想要看一篇文章之中,有多處開合效果,請見以下範例網頁:




網頁技巧相關文章:

超連結 A 標籤及錨點, 你不知道的操作技巧(HTML語法)

$
0
0

(Pic from: elated.com)
在所有 HTML 標籤之中,相信很多人第一個學會的就是超連結(A 標籤)語法吧!雖然超連結語法很簡單,不過其實也可以很複雜。若能了解 A 標籤的詳細操作方式與原理,可以在 SEO 上加分不少。

如果想更進一步精進網頁技巧,利用 A 標籤實現一些不常見的網頁效果,那麼可參考本篇的心得整理。



一、另開視窗的重要性(target="_blank")


這篇文章並非基礎教學,內容全部為進階概念,建議新手先閱讀線上教學「HTML A 標籤」來打個基礎。

超連結最常用的功能為另開視窗,參數為 target="_blank"

1. SEO

有時看到一些網站的外部連結(連到自己網站以外的連結),並沒有採用「另開視窗」的參數,這會有什麼影響呢?這代表當訪客按下超連結後,頁面立刻會刷新為外部網站頁面,那麼原本的網頁會被判定:

  • 網頁停留時間結束
  • 跳離率增加

相信有注意 Google Analytics 數據的站長就會了解,網頁停留時間短、跳離率偏高,都是對 SEO 比較負面的指標。


2. 使用者體驗

有些站長本身瀏覽網頁時,不習慣另開視窗,然後用 "上一頁"、"下一頁" 來切換頁面。因此在自己的網站上,也習慣不使用 target="_blank"這參數。

以 WFU 的觀察來看,就算不考慮 SEO,恐怕「另開視窗」是佔多數、比較友善的「使用者體驗」。

因為訪客多半沒耐性,當沒有「另開視窗」時,在同一頁面只能靠不斷地按 "上一頁"、"下一頁" 來切換,會花費大量頁面重新讀取的時間;如果大部分頁面都是另開視窗的情況下,切換各個分頁比對內容以尋找資料,會是幫助訪客節省大量時間的機制。

根據這樣的概念,在本站文章內的連結,無論是內部或是外部連結,WFU 一律會「另開視窗」。


3. 圖片連結

延續上一點,WFU 有時逛到一些網站,想點圖片連結來看大圖,卻發現沒有「另開視窗」,而是在同頁面開啟了大圖,這就真的是很糟的使用者體驗了。

看完圖片一定得回到原文章頁面啊!那麼只好按上一頁,等待文章頁面重新載入一次,多浪費一次讀取文章的時間。現在讀者應該能明瞭,「另開視窗」是多麼的重要了。


4. 讓文章中的(圖片)超連結另開視窗

讀者也許會問,「可是我已經寫了幾百篇文章,有幾千個連結、幾千張圖片沒有使用另開視窗的語法,要怎麼辦呢?」使用簡單的 js 語法可以批次處理這樣的問題。

以下使用 Blogger 平台舉例,首先可參考「如何使用jQuery版本」,在範本中 </head>之前安裝 jQuery。

接著在 </body>前插入以下語法:

<!-- 超連結另開視窗 start -->
<script>
$(".post-body a").attr("target","_blank");
</script>
<!-- 超連結另開視窗 end -->

以上程式碼的作用為,將文章區塊中所有超連結、或有超連結的圖片,加上另開視窗參數。






二、Blogger 難搞的錨點


錨點是 A 標籤重要的功能之一,可惜在 Blogger 平台,你一定會用的一肚子火。這裡簡單帶過為何 Blogger 會異常的原理──

1. 文章編輯器

正常的錨點語法並不含網址,然而 Blogger 文章編輯器在切換「撰寫模式」與「HTML模式」後,會自動幫錨點新增錯誤的網址,導致錨點失效。


2. Blogger 更改網址後綴

為了解決切換模式後的錨點網址異常,有人會直接在錨點加上文章網址。然而在「Blogger 無預警轉換區域網址」事件後,台灣的區域網址從 .com 變成 .tw,這註定讓我們在錨點上所加的網址,無法適用所有網域,總會有某些訪客使用錨點時失效


3. Blogger 使用錨點的唯一方法

要讓 Blogger 能正常使用錨點,請參考這篇完整解決方案「Blogger 文章編輯模式只要切換, 就可能產生異常現象?」。



三、REL="NOFOLLOW"


這個 A 標籤的參數 rel="nofollow"屬於 SEO 的領域,算是非常重要、每個站長都需要知道的一個概念,這部份的基礎知識請參考以下專業文章:



在實作上,簡單舉幾個使用的時機點:

1. 跟網站或頁面主題無關的連結

如果這個外部連結跟主題無關時,那麼這個連結多半是會被 Google 扣分,那麼建議使用 rel="nofollow" 參數,例如主題不相關的贊助商連結、主題不相關的交換連結等等。


2. 不存在的連結

連結出現 404 錯誤(頁面不存在)也是會被扣分,因此我在「404 錯誤頁面的友善設計」這個主題,使用了不存在的連結當作範例時,就必須使用 rel="nofollow" 參數。

此外,某些外部的縮網址連結,使用這類的免費服務很容易就收起來,說不定哪天連結失效了自己都不知道,乾脆使用 rel="nofollow" 可以放心一點。


3. 留言區塊的連結

因為總會有人留言順便打廣告,這些連結就成了不相關的內容,導致網頁被扣分。不過部落格平台可以不用擔心此事,因為平台多半已經預設留言區塊的連結都是 rel="nofollow",自架站比較需要注意此事。



四、REL="AUTHOR" / "BOOKMARK"


1. 作者資訊

在「Google Authorship 作者資訊正式失效」事件後,在每篇文章網頁自行加上作者資訊,是唯一表彰作者身份的途徑,例如:

<a href="作者資訊網址" rel="author">作者名稱</a>
不過部落格平台可不必擔心,平台會自動加上此資訊,其他類型網站才需要注意此事。


2. 書籤標記

這一項用到的機會比較少,可參考「Blogger 文章標題最佳化__(1) 超連結與 CSS 調校」→「二、SEO 考量」,這是 WFU 曾用到的一個情境。



五、執行 javascript 語法


就像網址列能執行 js 語法一樣,超連結如果不填入網址,而是填入跟網址列一樣的 js 語法,那麼點擊時就能執行 js,例如以下:

<a href="javascript:this.innerHTML='WFU BLOG'">點我改變文字</a>

其實這也不是什麼大不了的功能,因為大部分 HTML 標籤,只要加上 onclick="填入 js 語法"這樣的參數,點擊時一樣可以執行 js。那麼 A 標籤的這個用法有什麼優點呢?

A 標籤的文字、及滑鼠經過時,都有預設的顏色可以顯示,一看就知道是按鈕,可誘使訪客點擊。其他標籤想要模擬同樣情境的顏色,得另外設定多項 CSS 參數,使用上比較麻煩,因此利用 A 標籤來執行 js 的便利性在此,例如「多層樹狀標籤」,大分類、次分類的標籤文字就是利用這個原理來製作效果。



六、下載檔案


本站寫了不少小工具,有時讀者想下載 js 檔時可能會發現,js 檔內容會直接顯示在瀏覽器,無法出現「另存新檔」的視窗。

現在 HTML5 推出了這個新的屬性規格 "download",就能強制將超連結的檔案網址,用「下載」的方式呈現,例如以下:

<a href="https://googledrive.com/host/0BykclfTTti-0ZHNDNWM5eTZ5T28/G+使用小秘訣.pdf" download="G+使用小秘訣">點此從 WFU BLOG 下載</a>
上面的語法可下載 "G+使用小秘訣.pdf" 這個檔案,預設的儲存檔名填入 download 的參數裡面即可(如藍色字串),執行效果如同下面這個連結:

點此從 WFU BLOG 下載


讀者可以試著將檔案網址貼在瀏覽器執行,並不會造成「下載」的效果

另外要注意的是,這個功能很實用,但很可惜根據「使用說明書」,支援的瀏覽器目前看來只有 Chrome 與 Firefox。



七、小結


以上整理的都是 A 標籤比較實用的語法及功能,雖然還有其他的用法,不過太冷門或用到機會不高的就不舉例了。相信看完本篇後,駕馭 A 標籤的功力一定大大提昇不少。


網頁技巧相關文章:

讓 Blogger 留言能由新到舊排序

$
0
0
Blogger 留言排序這件事,從使用 Blogger 以來(舊範本時代),一直到現在的串聯式留言(新範本),不斷有使用者提出詢問:「能不能從最新的留言開始顯示」?實際上從 "友善使用者體驗" 的角度來看,這個要求非常合理,否則當留言一多時,螢幕都得捲到最底部才能看到新的留言,這是非常不友善的設計。

可惜這麼多年以來,此事一直沒有進展,而多數有名的第三方留言外掛(G+、FB、Disqus),留言能以各種方式排序都是基本配備,也難怪乎 Blogger 使用者紛紛棄官方留言板而去。

實際上,官方留言板擁有無可取代的優點存在,而 WFU 也準備撰寫專文推廣,但最大的阻力在於,官方留言板功能過於陽春。因此這篇文章要寫出來,第一個要解決留言排序的問題。那麼,對官方留言板還有信心的讀者,請按本文的操作,來安裝這個「Blogger 留言由新到舊排序」的功能吧!



<< 請注意!本篇文章含會員限定內容 >>



一、會員限定內容


花一點點篇幅介紹一下,「會員系統」算是本站一個劃時代的功能,只要讀者擁有 FB 帳號,就能免費加入會員,看到 "會員限定" 的文章內容。

「Blogger 留言由新到舊排序」也算是一個劃時代的功能,那麼拿來搭配「會員系統」的隆重出場,也算是很好的時機點。讀者只要稍微花不到 30 秒的時間,就能註冊完畢,並提昇權限為 "會員身份" 來讀取隱藏的文章內容,完成這個工具安裝。






二、準備動作


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

1. 請到後台「範本」→「編輯 HTML」,搜尋 </head>這個字串,找到後在此字串的前一行,插入以下程式碼:

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js'></script>
<style>
/* 留言排序 */
#comment_sort {
float: right;
font-size: 14px;
}
</style>


1. 首先可參考「如何使用jQuery版本」,檢查範本是否已安裝過 jquery,以免重複安裝。

2. 如果需要調整 CSS 參數,可修改 style 區間的內容。



三、安裝程式碼


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

<< 請注意!以下為會員限定內容,請先加入會員>>


按此展開會員限定內容
請先加入會員


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

E:預設 1代表 "由新到舊" 排序,0 則相反。

F~G:可自訂字串內容

H:預設值 "fadeIn" 效果為 "淡入淡出",若想改為滑動效果,請將字串改為 "slideDown"。

J:由於過去發生「Google Drive(js檔)流量限速」的情形,為了避免將來某天這個小工具無預警罷工,建議讀者有空的時候,參考以上文章連結,自行將綠色字串的 js 檔分流。


以上程式碼若想先看看效果,可前往以下網頁:



更多實用工具:

回到頂端(Go Top)按鈕放在浮動導覽列實作

$
0
0
上一篇「快速回到頂端(Go Top)按鈕__符合使用者體驗的友善設計」留言 #18 Jean Hsiung 詢問:「我對您的"↑TOP"鈕比較有興趣,這個有沒有教學?」。

為何 WFU 要將 "回到網頁上方" 的這顆 Go Top 按鈕放在導覽列?主要是因為閱讀時,眼睛不喜歡螢幕上有浮動區塊,無論造成文字被遮住(例如「浮動側邊欄」的實例)、或是有個東西在某處飄,總是覺得怪怪的。個人能接受的浮動區塊,只有在網頁「最上方」以及「最下方」,因為這樣就感覺不出有浮動區塊,也是比較友善的使用者體驗。

所以將「↑ Top」按鈕放在浮動導覽列,算是個人偏好,以下就來看看這樣的功能如何實作。



一、錨點基本語法


如果是舊版的官方「網頁」小工具,就可輕易完成這件事。可惜幾個月前官方「網頁」小工具更新後,不再讓使用者擺語法,因此幾年前寫的「在 Blogger 水平功能選單(Menu Bar)使用語法產生動態效果」,這個方法目前已經失效。

現在導覽列想要像之前一樣使用圖片、或是語法效果,必須在後台直接改範本內容,那麼就必須了解一些基本 HTML 語法。

首先,「回到頂端」的錨點語法很簡單,就像下面這樣:

<a href="#">↑ Top</a>
藍色字串可改為自訂文字。







二、UL LI 語法


接下來需要了解的是 UL LI 的用法,基本教學與範例可參考「符號清單 ul li」。

Blogger 的導覽列,就是使用 ul li 來產生導覽列上面的各個項目。原本 ul li 應該是垂直排列,但是 Blogger 利用 CSS 設定每個 li 都是「向左浮動」(float: left)後,就能讓每個項目成為水平、且靠左排列。

Blogger 的導覽列語法,在網頁原始碼中大概長得像這樣:

<ul>
<li><a href="連結1">項目1</a></li>
<li><a href="連結2">項目2</a></li>
<li><a href="連結3">項目3</a></li>
</ul>

如果我們能在最後一個 </li> 之後、</ul>之前,插入一行 li 清單,並設定 CSS 為「向右浮動」,那麼就可以實現本文的效果了。



三、修改範本


有了以上概念後,我們可以開始進行實作。在修改範本之前,如果第一次安裝本站工具的讀者,建議先閱讀「備份範本的訣竅」系列文章。

導覽列的程式碼通常位於 "PageList1" 這個小工具,請在範本中搜尋 "PageList1" 這個字串,如下圖──



展開折疊區塊後,往下可找到如上圖紅框的 <ul> ~ </ul> 區間,接著在 </ul> 的前一行,插入以下程式碼:

<li style="float: right;">
<a href="javascript:$('html, body').animate({scrollTop: 0}, 500);" title="回到頂端">⇧TOP</a>
</li>

  • 以上所有的字串("回到頂端"、"⇧TOP")都可自訂
  • 藍色字串的 CSS 參數可造成「向右浮動」的效果
  • 綠色字串使用 js 語法,其原理請參考「超連結 A 標籤及錨點, 你不知道的操作技巧」→「五、執行 javascript 語法」,可讓回到頂端的動作有動畫效果。
  • 紅色參數 500代表以 0.5 秒的時間滑動回到頂端,可自訂這個參數的大小,設得越大代表滑動時間越久。



四、浮動導覽列


這是本文最後、且最重要的一個步驟了,必須參考「讓部落格導覽列選單能浮動置頂」來安裝浮動導覽列的功能。

如果沒有安裝這個功能,那麼導覽列無法隨時出現在畫面上方,那麼這個「Go Top」按鈕,訪客也沒有半點機會可按,就等於形同虛設了,對吧!



五、一點補充


如果導覽列的項目很多,那就會發生沒有足夠空間擺放「Go Top」按鈕的窘境。除了想辦法去蕪存菁、刪減導覽列項目之外,我們能做的,就是另闢其他導覽管道。

如果修改範本能力強的話,可以參考 WFU BLOG 的標頭(或是「公佈欄」→「9.9 新版本網站標頭」的圖片備份),將其他的導覽項目例如「文章列表」、「訂閱文章」等等放在標頭區塊,實作訣竅請見「Blogger 範本__(二)標頭、導覽列、側邊欄、頁尾區塊的程式碼」→「留言 #4」的回覆。

另外也可參考「Blogger 如何安裝兩個導覽列?」,畢竟製作兩個導覽列也是很常見的網頁技巧,當網站規模越來越大時,一個導覽列往往是不敷使用的。


Blogger 導覽列相關技巧:

Blogger 串聯式留言(threaded comment)__留言編號及自訂版面樣式實作

$
0
0
跟 Blogger 舊範本時代的官方留言系統比起來,新範本的串聯式留言全部由 javascript 產生,讓習慣改 Blogger 範本的使用者難以下手 hack。不過對於熟悉 CSS 的使用者,想把串聯式留言的界面改漂亮一點,倒也不是難事。

本篇為 WFU 的修改紀錄,不一定能含括所有串聯式留言區塊。不過對 CSS 熟悉的讀者,可以參考這篇紀錄的概念,為留言區塊新增功能(留言編號)、或把版面改成心目中滿意的樣式。



一、樣式效果圖


1. 舊版本畫面

下圖是本站舊範本的官方留言樣式(非串聯式留言)──



大致有幾個特色:

  • 讀者留言有留言編號站長回覆不使用留言編號
  • 讀者留言區塊與站長留言區塊的底色不同,藉以區別留言者身份
  • 每則留言的寬度一致

WFU 的目標,就是將串聯式留言的樣式,想辦法維持以上的特色,以期讓網站的留言區塊風格一致。


2. 舊版本畫面

下圖是本站修改後的串聯式留言樣式──



雖然新版頭像區塊的底色無法修改、留言時間的位置光靠 CSS 不容易調整到比較滿意的地方,不過已經盡量維持樣式接近舊版本,本文之後的修改效果,就請參照上面這張效果圖。

另外需要提的一點是,國外的留言編號教學,在回覆留言的部份也會加上編號,例如 1-1、1-2、1-3,或 1-a、1-b、1-c,這樣的形式。由於個人不太喜歡這樣的設計,因此未針對此點修改。






二、準備動作


雖說這個修改需要的是 CSS 觀念,不過有些功能 CSS 做不到,只好改用 js 來實現。

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

1. 請到後台「範本」→「編輯 HTML」,搜尋 </head>這個字串,找到後在此字串的前一行,插入以下程式碼:

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js'></script>
<style>

可參考「如何使用jQuery版本」,檢查範本是否已安裝過 jquery,以免重複安裝。



三、安裝程式碼


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


以下說明請參閱以上程式碼行號:

C~E:這個區間設定「留言編號」的形式──
  • 紅色字串 "#" 在編號之前加入這個符號,此為個人偏好,如不需要可去除。
  • 留言編號的 CSS 設定在 D 行的 style 參數之中,可自行修改這部份的 CSS 參數,例如增加外框、或改為圓框等等。

G:此行去除系統預設的底色

I~O:這個區間設定「留言區塊」的形式──
  • 如果不想限定此區塊的寬度,可刪除 J 行內容
  • 如果想設定留言區塊的寬度,請修改 J 行紅色字串參數
  • L 行紅色參數為「訪客留言區塊」的底色色碼
  • 整個區塊若還想自訂其他 CSS,可自行增減參數

P:此行設定「站長回覆」的底色,請自行設定紅色字串的色碼參數。

Q:此行代表刪除系統預設的「站長標示圖示」,也可自行增加 CSS 參數的程式碼,來替換「站長標示圖示」、或更改樣式。

S~W:這個區間設定了「留言時間」這個區塊的 CSS,意思為縮小了字體、拉寬了與左邊元素的距離,同樣也可自行增減參數

Y~AI:這個區間幫「回覆」、「刪除」這兩個按鈕,增加一些 CSS 樣式,讓畫面好看一些,同樣請自行修改參數為自己滿意的樣式。



四、小結


以上說明其實很簡略,如果要成功修改為自訂的參數,除了基本的 CSS 概念,還要會一點 jQuery 語法。不過每個人想要的效果都不同,因此就不寫得太詳細,修改上有問題請再提問了。


串聯式留言相關文章:

部落格「會員系統」試營運

$
0
0

(Pic from: lendingsolutions.com)
有關注 WFU BLOG 的朋友應該會發現,九月中開始,某些文章出現了「會員限定」的功能,因為 WFU 預先悄悄測試部落格「會員系統」的可行性。

在免費部落格平台實現「會員系統」不是容易的事,需要解決後端資料庫、系統安全、行動版等等諸多問題。一方面感謝有讀者回報安全性問題,一方面值得欣慰的是到目前為止,主要問題都找到了解決方案,因而藉此篇公告,本站的「會員系統」即日起正式開始 "試營運"。

在網站右上角的「加入會員」按鈕、以及導覽列上的「會員中心」下拉選單,都能進入及使用會員中心的各項功能,以下就來一一介紹。



一、會員中心初始功能


由於是 "試營運",代表未來正式營運時,會有更多會員專屬的功能。進入以下連結後,目前會員中心的功能如下:






1. 會員資訊

使用 Facebook 帳號登入後,即可完成註冊會員程序,此頁面還可修改會員資訊。

一般而言,每個站長會有自己需要收集的會員資訊,因此 "會員資訊" 的項目是能夠客製化的。

目前 WFU BLOG 在 "會員資訊" 只設定了姓名、性別、email 這三個從 FB 讀取而來的基本項目,避免讀者提供過多的個資,希望這是一個能提高註冊意願的設計。


2. 會員公告

所有會員中心的項目,都要先註冊會員才能啟用,因此會員才能看到這部分的公告。

日後有關會員中心的各項重大消息宣佈,例如新增或修改的會員功能、權益等等,請會員在這個項目查詢。


3. 會員討論區

登入會員後,才能進入這個討論區,也就是說,一般訪客無法看到這個討論區的內容,這也代表在這樣的系統,「會員可以得到比一般讀者更好的服務」,例如你是站長的話,可以決定在會員討論區回覆留言的速度比較快,而一般文章的留言等有空再回答,藉以區隔會員與一般讀者的差異。

目前這個討論區可以留言的主題範圍為:

  • 會員權益相關事務:會員功能使用上有任何異常,可在此回報。
  • 會員功能的建議或需求:將來 WFU 想到什麼有趣的功能,會加入「會員中心」、讓會員獨享。而會員對於「會員中心」可以新增什麼內容,也可提出建議,WFU 會納入參考。
  • 會員交流:由於一般讀者看不到這裡的內容,因此也可成為會員之間的交流管道。




4. 會員限定文章

這個功能 WFU 認為十分強大,且很有彈性,可說是部落格「私密文章」的加強版,也可說是讓會員比起一般讀者,有更特殊的禮遇。

以往的私密文章,不是處理方式繁複,就是要個別記住每篇私密文章的密碼。另外就是私密文章加密後,一堆亂碼無法讓文章被搜尋引擎索引,所以就沒有 SEO 效果

WFU 設計的「會員限定文章」功能:
  • 只在關鍵處隱藏內容,只有會員身份才能看到隱藏內容,省去了個別設定密碼的麻煩。
  • 會員只要在瀏覽器保持 FB 登入的狀態,那麼閱覽「會員限定文章」時什麼動作都不必做,非常方便。
  • 由於關鍵處才隱藏內容,文章主要部分還是能被搜尋引擎索引,不影響 SEO。



二、會員中心未來功能


其實「會員中心」的潛力非常大,未來可擴充到什麼程度,有無限想像力的可能,我也說不出個準。目前 WFU 大致可能規劃這幾項,但還沒有完成的時刻表就是了:

1. 會員聊天室

類似即時通的功能,可線上聊天交流,也可線上即時處理一些簡單問答等等。不過不確定這項功能的實用性如何,讀者可以給我一些意見。


2. 會員遊樂場

放一些可以線上執行的網頁小遊戲,不過有點懷疑是否有讀者這麼閒,會跑來會員中心玩遊戲就是了~~


3. 會員加值文章

有些內容不適合公開、WFU 也不準備公開的文章,會放在這個區塊。



三、對會員中心的意見


1. 其他意見

除了以上「會員中心」的安排,對於可以新增什麼功能,歡迎在「會員討論區」給我意見:



2. Safari 使用者請幫忙

過去一段期間,曾有使用者回報,使用 Macbook Air(蘋果筆電)、Safari 瀏覽器時,無法正常登入會員。因此麻煩有使用蘋果作業系統、Safari 上網的讀者,協助測試一下,本會員系統的操作有無問題,謝謝!


3. 客製會員系統

每個站長需要的會員系統項目、功能都不一樣:

  • 有的需要會員聯絡資料來辦活動、贈送獎品
  • 有的需要會員系統來進行付費教學功能
  • 有的可能像我一樣,需要根據不同的會員權限,開放不同權限的文章供閱覽

總之如果有會員系統需求的站長,可利用下面的表單與我聯繫與討論:

聯絡表單:

最佳 CSS 3D 按鈕產生器__Button X 操作心得

$
0
0
使用 CSS 語法產生的按鈕,要做的好看不容易;然而圖片式的按鈕雖然畫面呈現較佳,卻需要花費 http 請求時間,也就是會影響網頁載入速度。如果可以的話,使用 CSS 按鈕會是最佳選擇。

網路上有許多線上 CSS 按鈕產生器,可以讓我們輕易取得不少漂亮的按鈕。而本篇要介紹的 CSS 按鈕產生器──Button X,是 WFU 認為最棒的一個,滿符合該網站對自己的期許(Best CSS Button Generator)。他們提供了許多精緻的預設按鈕,質量比其他網站的 CSS 按鈕好很多。

按理說這類的線上服務其實不必特別介紹操作方式,通常滑鼠拉一拉就能產生 CSS 語法。不過本篇的線上服務,除了英文介面外,操作過程碰到些許小小複雜,因此特別整理一下使用心得,讓讀者能順利上手。下面這顆按鈕就是利用這個線上服務所製作出來的效果──




一、官方網站


網站名稱:Button X ── Best CSS Button Generator

安裝網址:http://www.bestcssbuttongenerator.com/


下面是網站畫面,及大致的操作區域──








二、基本操作


1. 更改 CSS 效果

要調整 CSS 效果的操作很簡單,從上面的圖可看到,右半邊所有紅框區塊,都有橫桿可以用滑鼠拉動,來調整文字大小、按鈕尺寸等等效果。我們在右半邊所有的操作,左半邊中央的那顆按鈕,就能即時顯現調整後的效果,所以我們可以在這裡調整各種細節,直到滿意的結果為止。


2. 挑選其他按鈕

按下左上角的「Show Button Library」後,就能挑選系統設定好的按鈕範本,很多都滿不錯的。下面為按鈕範本的示意圖,我們以紅色箭頭的這顆按鈕來舉例:




3. 複製程式碼

假設我們挑選了上圖的深藍色漸層 3D 按鈕,並且也調整了所有我們需要的 CSS 效果,接下來按照下圖步驟 1~4 的步驟即可複製程式碼:



  • 對著正中央的按鈕按下去
  • 右半邊會轉而出現安裝程式碼
  • 最上面一行為按鈕的 HTML 碼,放置在網頁任何想要出現的位置即可。
  • 其餘的內容皆為 CSS 樣式程式碼,可放在範本之中 </head>之前的位置,並且 CSS 程式碼的前後要用 style 標籤包住,就像下面這樣:

<style>
CSS 程式碼
</style>



三、自訂按鈕範本細節


這個 CSS 按鈕線上服務,比較令人困惑的操作,主要在於選擇顏色的部分。有的按鈕雖然美觀,可是與我們網站的色系不搭,那麼要如何置換成其他顏色呢?可以有兩種方式:

1. 自訂顏色



在上圖紅框的這一排七個正方形按鈕,各自代表七個部分的顏色,滑鼠移上去就可顯示代表的意思,例如藍色箭頭的那顆白色按鈕,會顯示英文提示 "Font Color",代表文字顏色為白色。

紅框中的任一按鈕,按下後都會出現調色盤,可調整該顏色為自訂的顏色,或是乾脆也可在最下方直接填入色碼


2. 自訂顏色

如果跟 WFU 一樣沒什麼美術天分,也許直接套用系統提供的整組配色,是最省事的方式。



接續「1. 自訂顏色」,出現上圖右下角的區塊後,有捲軸可以上下捲動,來挑選系統提供的配色組合。圖中的範例是點選了紅框中的這組配色,可看到上方按鈕的示意圖立刻改變了配色。

必須注意的是,上圖紅框中的七個正方形按鈕,按了同一組的任一個按鈕都是同樣的結果,只會改變按鈕的示意圖,而無法調整個別顏色。

當初就是在這一點鬼打牆很久,按來按去不知如何細調顏色。選了系統提供的配色組合後,必須回到「1. 自訂顏色」的那一排按鈕,才能夠細調顏色。


好了,操作需要注意的地方大致如以上所述,希望大家都能製作出讓網頁加分、令人滿意的 3D 按鈕效果。


CSS 技巧相關文章:

Fancybox, 優雅又八面玲瓏的燈箱效果 (2)縮圖+滾輪特效安裝懶人包

$
0
0
上一篇的「fancybox 安裝教學」說明了如何從官網下載檔案、上傳到自己的空間、最後利用本站提供的簡便前導程式來顯示效果,其過程十分繁複。

喜歡懶人包的讀者可以不用折騰了,這篇除了提供打包好的檔案,也提供簡便安裝的方式。然而 fancybox 功能非常多,這個懶人包的缺點就是,只能遷就 WFU 打包好的功能與效果。不過本文提供的懶人包,包含了「縮圖+滾輪特效」,也就是完全模擬 Blogger 官方的燈箱效果,相信對多數使用者而言,已經非常美觀及實用了。


<< 請注意!本篇文章含會員限定內容 >>


一、「縮圖+滾輪特效」的優點


1. 原始效果

曾看過上一篇的讀者應該看過原本的 DEMO 頁面效果,請按下面按鈕前往示範網頁:



WFU 不太喜歡這個預設效果,因為用滑鼠滾輪、或手動切換圖片的時候,圖片會上下或左右劇烈晃動,看得眼睛都花了。


2. 縮圖+滾輪特效

現在可以比對一下這個懶人包的效果,請點以下按鈕前往示範頁面:



除了畫面不再晃動以外,多了縮圖提示效果,也可方便瞭解閱覽圖片的進度、或是否已經看完所有的圖片;若沒有縮圖,當圖片一多時,讀者一定不會發現已經滾完一輪了。






二、本篇特效使用的檔案


請對照「上一篇」→「二、部落格安裝 fancybox 的方法」,本篇的特效並沒有使用所有的 js 及 CSS 檔,只使用了以下原始檔的內容:

  • jquery.fancybox.pack.js → 主程式
  • jquery.fancybox-thumbs.js → 縮圖
  • jquery.mousewheel-3.0.6.pack.js → 滾輪
  • jquery.fancybox.css → 主要 css
  • jquery.fancybox-thumbs.css → 縮圖 css
  • fancybox_sprite.png
  • fancybox_overlay.png
  • fancybox_sprite@2x.png
  • fancybox_loading.gif
  • blank.gif
  • fancybox_loading@2x.gif


另外為了節省空間及方便引用,將三個 js 檔及兩個 css 檔全部壓縮,及合併為一個 js 檔及一個 css 檔。



三、安裝程式碼


1. 準備動作

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

請到後台「範本」→「編輯 HTML」,搜尋 </head>這個字串,找到後在此字串的前一行,插入以下程式碼:

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js'></script>
可參考「如何使用jQuery版本」,檢查範本是否已安裝過 jquery,以免重複安裝。


2. 安裝程式碼

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

<< 請注意!以下為會員限定內容,請先加入會員>>


按此展開會員限定內容
請先加入會員



3. 修改參數

請對照以上程式碼行號:

G~R:這部分的內容與作用,跟上一篇完全一樣,以下只摘錄重點──E 行的紅色字串 .post-body是 Blogger 平台的文章區塊,如果非 Blogger 平台,建議利用「Chrome 開發人員工具」找出文章區塊的 class 或 id,然後置換此字串(class 的前面要加 ".",而 id 前面要加 "#")。這段前導程式做的事情為:
  • 只抓出文章區塊的圖片來展示燈箱效果,自動加上 fancybox 需要的參數,不需要手動設定
  • facnybox 預設有超連結的圖片,才能展示燈箱效果,但網頁有的圖片可能當初忘了設定超連結,那麼這個前導程式可以自動補上超連結

S~AD:這段程式碼為 fancybox 的參數設定

T~U:設定了前一張圖片、下一張圖片的切換效果。藍色字串 "fade" 代表為 "淡入淡出" 的效果。可以改為 "none",代表沒有切換效果。或是改為 "elastic" 就是預設的、看了頭暈的搖晃效果。

W:藍色字串 "true" 代表「滾輪切換圖片時,背景畫面不會跟著上下捲動」。

Y~Z:藍色數字 "50" 分別設定了縮圖尺寸寬、高的像素(px)值。

存檔後找一篇圖片多的文章來測試,即可看到效果,或是點以下按鈕前往示範頁面:



更多其他 fancybox 的參數使用,請參閱「官方說明書」。



四、備份及分流 js、CSS、圖檔


雖然使用這個懶人包很方便,可以無痛體驗 fancybox 的特效,然而這些連結檔案放在 WFU 的 Google Drive 空間,過去發生了「Google Drive 流量限速」的情形,為了避免將來某天這個小工具無預警罷工,請讀者有空時,務必將相關檔案分流。

除了程式碼 B、C 行的 js/css 檔,還有 6 個圖檔也必須分流。為了方便操作,我把所有 8 個檔案放在以下 Google Drive 資料夾路徑:





上圖為檔案列表,將所有檔案下載後,請參考上一篇「fancybox 安裝教學」→「二、部落格安裝 fancybox 的方法」→「3. 上傳檔案方式 2」,將所有檔案上傳到自己的 Google Drive,放在同一個資料夾,並設定共用權限。

最後將自己的 js 檔及 css 檔外連路徑,置換程式碼 B、C 行綠色字串的路徑,就完成了檔案分流,可以避免將來流量遭到限制。


Fancybox 系列文章:

利用 Google 試算表當小型資料庫 (3)簡易查詢與排序 (及新版試算表讀取流程)

$
0
0

(Pic from: veryicon.com)
免費的部落格平台,結合 Google 試算表後,使用簡單的 javascript 操作,就可對試算表資料庫進行存取,在網站上實現各種應用,例如初期發表的「部落格即時留言板」,一直到近期的「會員系統」。

不過資料庫若只做到儲存與寫入,則無法發揮其長處。如能對大量資料進行排序及查詢,那麼網頁就能滿足訪客的各種特定需求,例如從龐大的手機商品資料庫中,篩選出「iPhone」這個型號的列表,接著使用排序功能,依照價格由高至低排列,諸如此類的情境。以下將舉實例來說明,如何使用試算表資料庫,來做出簡易的查詢及排序。


<< 請注意!本篇文章含會員限定內容 >>



一、Google 試算表的讀取速度


1. 基本觀念

基本上本篇文章設定給懂 js 的族群,因此說明的算是進階性的解決方案,所以假設讀者也會一點簡單的 jQuery、處理過 Google 試算表資料庫。

那麼懂 js 的讀者或許會問一個問題:「對 Google 試算表的資料做查詢及排列,只要會寫 js 就做得到,需要特別說明這件事嗎?」的確是如此,使用了系列文第二篇「利用 Google 表單[試算表]當小型資料庫 (2)讀取、儲存資料庫」的語法後,把所有資料讀取出來,再用 js 就能做查詢及排序。


2. 試算表的讀取速度

在資料量不大的情形下,的確每次處理試算表,只要將全部資料讀取出來再做處理即可。不過根據 WFU 的經驗,只要試算表的資料超過一、兩千筆時,那麼讀取的速度就非常能感受出來(的慢)。

其實,每次都讀取全部資料也不是正確的處理方式,我們可以想像一下,到了通訊行只想瞭解「iPhone」的相關機型,但店員總是搬出所有手機的樣品,這樣做事就太沒效率了。

因此,正確的作法是在資料庫端就把資料篩好,再送到前端網頁來處理。請倉管人員預先挑選出正確的樣品,才不會讓門市人員也做到累趴。本文就來看看,這樣的流程需要什麼技巧。







二、讀取新版試算表


由於前幾天 Google Drive 全面將所有舊版試算表 "強制升級",這陣子有使用試算表的讀者應該會陸續發現各種異狀。所以再花一點篇幅說明如何讀取最新版的試算表。

本文以最近的「會員系統」試算表資料為例,刪除所有個資後,這個範例檔的網址如下:



開啟我們預備要讀取的試算表檔案後,依序按下「檔案」→「發佈到網路」→「發佈」,會出現下圖新版試算表的畫面:



注意圖中 "/d/ " ~ "/pubhtml" 之間的字串,如紅色箭頭所指的字串範圍,就是這個試算表的 key 代碼。例如本文的範例檔 key 代碼為 "18sp-S2iOQ9uRiuLprZZUDf9emipGesZ81Gfy5LPIR6c",請記住自己的試算表 key 代碼。

範例檔的內容如下面這個內嵌檔案:




如果想用 js 讀取這個試算表,以下是一個 jQuery 的範例:

<< 請注意!以下為會員限定內容,請先加入會員>>


按此展開會員限定內容
請先加入會員


請參照以上程式碼行號:

  • C:紅色字串請改為自己的試算表 key 代碼
  • G:這一行有五個藍色字串,取自範例檔的其中五個欄位名稱。必須注意的是,這五個字串,在程式碼中所有出現的位置,請各自改為自己想要顯示的試算表欄位名稱
  • J~N:這五行的藍色字串記得也要改到。

可以開一篇空白文章貼上程式碼,就可看到效果。需要注意的是,試算表裡欄位名稱最好全部是英文小寫、不要有空格,避免程式執行出錯。

而其原理為了篇幅就不多著墨,請直接參考上一篇的說明「利用 Google 表單[試算表]當小型資料庫 (2)讀取、儲存資料庫」→「二、讀取資料庫」。



三、基本網址篩選參數


以下我們要模擬倉管人員的各種工作,試算表資料庫提供了基本的篩選功能,舊版的說明也曾有提及,這裡簡單帶過一下。

程式碼 C 行的紅綠字串,為讀取試算表的網址。傳送回來的 json 資料,是該試算表的全部資料。如果我們接在紅綠字串之後,加上 &q=wayne fu這樣的參數,代表篩選出包含 "wayne fu" 這樣的字串(大小寫不區分)的所有資料。

範例檔 20 筆資料中只有一筆包含這個字串,因此前面程式碼的執行結果,將如同下圖一般:



這也代表我們前端不必接收其餘無用的 19 筆資料。



四、指定欄位昇冪降冪排序


根據最新版的「Google Sheets API 3.0」,我們還有三種參數可以使用,來做各種篩選、排序的動作。首先介紹指定欄位排序。

orderby=column:欄位名稱
reverse=true

  • orderby 這行的參數代表所有資料依據該欄位名稱來排序,預設為昇冪排序。
  • reverse 這行的參數為 true 時,代表改為降冪排序。去除這行的參數、或是改為 false,就是昇冪排序。

看實例很快就能理解,程式碼 C 行,如果我們接在紅綠字串之後,加上以下參數:

&orderby=column:register&reverse=true

代表所有資料依照 register 這一欄、使用降冪排序。前面程式碼的執行結果,將如同下圖一般,資料將依照註冊時間,從最新的一筆開始列出





五、中階篩選參數


前面介紹的基本篩選參數 q,只能篩選特定字串,也就是只能做精確搜尋。如果我們要做商品陳列的功能,讓訪客自訂各種篩選條件,那就辦不到了。

Google Sheets API 提供了 sq這個篩選參數,不但可以做邏輯判斷式,還可多欄位篩選。以下是官方提供的例子:

age > 25 and height < 175
這代表篩選出的資料,符合欄位 "age" 大於 25,且欄位 "height" 小於 175。

還是來看實例比較快理解,程式碼 C 行,如果我們接在紅綠字串之後,加上以下參數:

&sq=serial>W00010 and sex=女生
代表篩選出 "序列號" 大於 "W00010"、且 "性別" 為 "女生" 的所有會員。不過以上參數的執行結果是無效的,因為含有中文字元。

我們可到這個網址進行轉碼,貼上所有字串後,按下「URL編碼」即可:


重新編碼後的參數如下:

&sq=serial>W00010 and sex=%E5%A5%B3%E7%94%9F

程式碼的執行結果,將如同下圖一般:





六、小結


本文介紹的各種參數,還可同時合併使用,做出更多變化。不過若讀者使用過資料庫 SQL 查詢語法的話,其實本文的這些參數,其功能相較之下算是小巫見大巫。

Google 試算表其實也支援 SQL 語法,不過這算是另一個完全不同的系統。如果本文的這些參數還無法滿足需求的話,下一篇將會介紹支援 SQL 的語法體系使用方式。


製作試算表資料庫系列文章:

想知道自己網站的台灣或全球排名嗎?安裝 Alexa 貼紙秀給訪客看

$
0
0

(Pic from: seomastering.com)
經營部落格一段時間後,如果小有人氣的話,站長們可能都會好奇,自己的網站在台灣能排上第幾名呢?其實對於這件事,能提供具有公信力的來源並不多,在亞洲地區可以申請加入「博勢力」的部落格排行榜。不過由於分類很多,且參加排行的網站比例不高,由部落格貼紙顯示的排名,很難看出網站的實力落在哪裡。

世界龍頭等級的 Amazon,旗下的「Alexa」提供了全世界網站的排名與統計數據。雖然為人詬病的是──「Alexa 可以買榜」,不過能花錢的網站畢竟佔少數,目前而言 Alexa 的排名算是最具有公信力的。

Alexa 官方提供的網站貼紙能在部落格顯示「世界排名」,而 WFU 提供的工具則能顯示「台灣排名」(或是地區排名),如果讀者有買網域的話,那麼就可試試本文的工具。效果類似這樣:

Web: www.wfublog.com
Glogal Rank:
Rank:
Links:


<< 請注意!本篇文章含會員限定內容 >>



一、Alexa 簡介


1. 參考資料

簡單介紹一下 Alexa,由於網路上相關文章很多,提供一些參考資料:



2. Alexa 排名

關於網站排名,比較可惜的是 Alexa 只能統計 "自有網域" 的數據,如果沒有買網域的部落格就無法查詢排名了。例如 "痞客邦"、"Xuite" 這類的部落格平台,部落格網址都是掛在平台之下,像是 http://wfublog.pixnet.net/ 這樣,所以就算使用了 Alexa 貼紙,依然只會計算 pixnet.net 這個網域的數據與排名。

同理,沒買網域的 Blogger 網站,使用了 Alexa 官方貼紙,只會顯示 blogspot.com 這個網域的數據與排名。

如果你已經買了網域,想查詢自己的網站排名,可進入以下網址,將 "wfublog.com" 換成自己的網址即可:


以下是 wfublog.com 的統計範例畫面:




  • Glogal Rank 指的是「全球排名」
  • 有國旗標示的是區域數據,假設我們的網站在台灣、香港、美國三地都有排名數據資料,那麼此處只會列出排名最高的那個區域,通常台灣網站列出的就會是台灣數據。
  • 下方三組紅色文字,分別代表網站統計數據常見的「跳離率」、「訪客平均瀏覽頁數」、「訪客停留時間」。

雖然 WFU 懷疑紅色文字這部分的數據 Alexa 是怎麼得到的,不過的確跟 Google Analytics 的數據沒有差太多,所以還是滿佩服 Alexa 的技術。






二、Alexa 官方工具


Alexa 官方提供的網站貼紙,可以顯示全球排名,無法顯示區域排名,且無法自訂版面,想安裝的話可前往以下官方網頁:



雖然官方目前只提供兩種樣式的程式碼,不過 WFU 測出了有六種樣式可以安裝,將紅色字串 wfublog.com 改為自己的網址,貼在網站想顯示的地方即可:

1. 直式、小型



<a href="http://www.alexa.com/siteinfo/wfublog.com"><script type="text/javascript" src="http://xslt.alexa.com/site_stats/js/t/a?url=wfublog.com"></script></a>

2. 直式、含日期



<a href="http://www.alexa.com/siteinfo/wfublog.com"><script type="text/javascript" src="http://xslt.alexa.com/site_stats/js/t/b?url=wfublog.com"></script></a>

3. 橫式



<a href="http://www.alexa.com/siteinfo/wfublog.com"><script type="text/javascript" src="http://xslt.alexa.com/site_stats/js/t/c?url=wfublog.com"></script></a>


4. 直式、小型、含外部連結數



<a href="http://www.alexa.com/siteinfo/wfublog.com"><script type="text/javascript" src="http://xslt.alexa.com/site_stats/js/s/a?url=wfublog.com"></script></a>

5. 直式、大型、含外部連結數



<a href="http://www.alexa.com/siteinfo/wfublog.com"><script type="text/javascript" src="http://xslt.alexa.com/site_stats/js/s/b?url=wfublog.com"></script></a>

6. 橫式、含外部連結數



<a href="http://www.alexa.com/siteinfo/wfublog.com"><script type="text/javascript" src="http://xslt.alexa.com/site_stats/js/s/c?url=wfublog.com"></script></a>



三、安裝「台灣(區域)排名」程式碼


想在網站秀出區域排名、也就是台灣排名的話,可按以下步驟安裝。


1. 準備動作

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

請到後台「範本」→「編輯 HTML」,搜尋 </head>這個字串,找到後在此字串的前一行,插入以下程式碼:

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js'></script>
<style>
/* Alexa 排行工具 */
#alexa_tool {
padding: 10px;
width: 200px;
font-size: 14px;
border: 1px solid #ddd;
border-radius: 3px;
background: url("http://4.bp.blogspot.com/-RiAXEdpviiw/UfOji43RWKI/AAAAAAAAHco/iN8zW5LrROo/s1600/post-footer-300.png");
background-size: 100% 100%;
}
</style>


第一行可參考「如何使用jQuery版本」,檢查範本是否已安裝過 jquery,以免重複安裝。

其餘 CSS 參數可依自己需求調整。


2. 安裝程式碼

請將以下程式碼貼在網站想顯示的地方。以 Blogger 舉例,可以在後台 → 版面配置 → 新增「HTML/Javascript」小工具,貼上程式碼即可。

<< 請注意!以下為會員限定內容,請先加入會員>>


按此展開會員限定內容
請先加入會員


以下說明請參照以上程式碼行號:

  • C:紅字 www.wfublog.com請改為自己的網址
  • D:不需要全球排名可刪除此行
  • E:不需要台灣(區域)排名可刪除此行
  • F:不需要顯示外連數量可刪除此行
  • I:由於過去發生「Google Drive(js檔)流量限速」的情形,為了避免將來某天這個小工具無預警罷工,建議讀者有空的時候,參考以上文章連結,自行將綠色字串的 js 檔分流。

儲存後即可看到效果,如同本文開頭的貼紙效果。

另外,C~F 行除了藍色字串可改為自訂字串,順序可自行調整,也能自行設計版面、CSS 參數。例如 WFU 為了版面需要,將所有資訊改為橫式顯示,類似下面這樣:


因此,有 HTML/CSS 概念的讀者,這個小工具就能隨心所欲改成想要呈現的樣式。


延伸閱讀:

修改 Blogger 範本的觀念 (2)如何讓 Javascript/CSS 執行有效率

$
0
0

(Pic from: css-javascript-toolbox.com)
網頁載入速度是影響訪客對網站印象的重要一環(參考「網頁載入速度 黃金三秒」),而 Javascript(以下簡稱 js) 與 CSS 在範本中如何配置,關係著網頁執行的效率。不過對於初心者而言,這些知識未免太過複雜,為了讓不懂語法的新手站長們都能享受架站的樂趣、順利地安裝各種網頁小工具, WFU 製作了各種懶人包,以期讓安裝過程無腦化。

然而懶人包的缺點就是──執行效率可能稍差。因此本篇的內容主要提供給進階使用者,瞭解 JS/CSS 的執行原理,並據以調整適當的擺放位置,讓網頁載入及執行速度加分。



一、CSS 的正確擺放位置


1. CSS 的寫法

如果將 CSS 樣式寫在標籤之內,那麼將是最快的執行方式,例如:

<div style="font-size: 20px; color: red;">WFU BLOG</div>
但是行內樣式一多,除非這些樣式永遠不修改,否則日後管理 CSS 會很麻煩,因此實務上會將樣式放在標籤 style之間,並給予 class 名稱呼叫,例如:

<style>
.blog_name {
font-size: 20px;
color: red;
}
</style>
<div class="blog_name">WFU BLOG</div>

日後只要在範本中搜尋字串 "blog_name",就能找到這個 CSS 樣式的位置來修改,可以看出這是較佳的管理方式。


2. 瀏覽器的運作方式

當瀏覽器讀取到 class="blog_name"以後,會怎麼尋找 "blog_name" 這個 class 的 CSS 樣式內容呢?瀏覽器會從網頁的最前面開始尋找 → 這也是為何 "style" 標籤通常放在範本中 </head>之前的原因。

能讓瀏覽器花費較短的時間搜尋 class 樣式的位置,網頁的執行速度就越快,因此我們可以檢查一下範本、以及所有小工具的內容,是否有 "style" 標籤放在執行效率比較差的位置。


3. CSS 外部引用

比較大型的網頁,CSS 的管理會複雜許多,因此 CSS 常使用外部連結的方式引用,例如以下是 Blogger 的官方 CSS 連結:

<link type='text/css' rel='stylesheet' href='https://www.blogger.com/static/v1/widgets/1535467126-widget_css_2_bundle.css' />
如果範本中有一部分的 CSS 內容確定不會變更,那麼可將內容打包、壓縮為一個 .css 檔,放在外連空間(例如「Google Drive」),再用以上語法引用,放在範本中 </head>之前即可。

這麼做的好處是,範本可以比較清爽;而壞處是,需要花費 http 的請求時間,載入速度會稍慢






二、JS 的正確擺放位置


有關 JS 如何執行能夠最有效率、這個主題太過龐大,有機會再專文討論,本篇只簡要說明一些重要的基本概念。

1. HTML 執行原理

頁面上的 HTML 碼是逐行執行,不過需要載入外部資料時,瀏覽器並不會停下來等待,而是同時執行後續的 HTML 碼,這可確保網頁能先將重要的內容先顯示出來,而未顯示的內容會等外部資料載入完畢後顯示。例如:

<img class="blog_logo" src="http://1.bp.blogspot.com/-vhIWukZmniI/VA3My_ptRfI/AAAAAAAAKM0/DaF4uGRxB0Q/s200/wfublog-logo-8abeb7.png"/>
<div class="blog_name">WFU BLOG</div>
<div class="blog_description">Blogger 調校資料庫</div>

雖然第一行的 HTML 代表載入圖片的意思,但瀏覽器並不會等待圖片載入完畢,而會直接執行後面二、三行,先把網站名稱與網站敘述顯示出來,避免頁面的渲染(render)被這張圖片給塞住;等到圖片完整載入後,再回頭將第一行的內容顯示出來。


2. JS 執行原理

JS 一樣是逐行執行,但是瀏覽器一讀到 JS 碼時,整個頁面就凍結住了,完全停止顯示 JS 後面的 HTML 碼。這樣會有什麼缺點呢?例如「部落格廣告(BloggerAds)卡住網頁載入的完整解決方案」,若是 JS 內含外部連結,而不巧外部伺服器不穩,遲遲無法回應時,不但這些 JS 無法執行,連帶其後的所有 HTML 也全部塞車。


3. JS 最佳擺放位置

為了避免以上的窘狀,網頁的 JS 擺放位置,與 CSS 恰恰相反,擺的越後面越好。除了可以防止網頁開天窗,也可加快網頁載入的速度。

如果沒有特殊狀況,所謂 "越後面越好",就是代表放在範本中 </body>的前一行,這是所有能擺放之中、最後面的位置。本站的忠實讀者應該會發現,大部分的工具都是安裝在這個地方。


4. 實務上的抉擇

大部分 JS 碼都是有辦法放在範本最後面的位置,只不過需要加工處理,改成 "動態執行" 的形式。然而實務上每個 JS 都寫成動態執行或許不是那麼容易,如果不需要引用外部連結的話,那麼就不一定非得放在後面的位置。

另外有些 JS 碼就是一定得先執行,例如「圖片延遲載入外掛 Lazy Load」,放得太後面就失去 Lazy Load 的效用。因此 JS 該放哪裡沒有一定,還是得視情況而定。



三、懶人包如何調整


說完了大致的概念,以下舉個實例,來看看某些懶人包應該如何最佳化。對於懼怕碰程式碼的讀者而言,使用懶人包沒什麼不好,拿一點點的網頁執行效率,來換取需求的實現。而了解原理的讀者,就可以既實現需求、又增加執行效能。

1. 最新回應懶人包

這篇「Blogger 最新回應+留言者頭像+文章標題」為了讓安裝無腦化,將所有的 HTML/CSS/JS 全部擠在一起,只要一個複製貼上的動作,就完成了這個小工具的安裝。

這麼做的好處是,讀者要安裝失敗還真是困難!而其缺點,相信讀完本篇後大家都已經非常清楚了。對於進階的讀者而言,可以做以下的動作:

  • 將 CSS 搬到 </head>之前 → 也就是 D~AB行的部份
  • 將 JS 搬到 </body>之前 → 也就是 AC~AS行的部份

這樣就能讓頁面的執行效率最佳化。


2. JS 的陷阱

將程式碼拆成三個部份、在三個位置安裝,對於初心者而言,出錯的機率一定增加很多;對於熟練的站長而言,應該不會有太大問題,也能增加網頁執行效率。

不過,Blogger 範本的眉角沒有這麼簡單,仍請注意以下兩點:

  • 四處散落的程式碼,日後管理一定會出問題,請務必參考「備份範本的訣竅」→「二、如何正確備份範本」→「1. 誤刪程式碼及忘記出處」,將各處的程式碼加上註解。
  • 原本在小工具沒問題的 JS 程式碼,改放在範本中八成會有問題,連儲存都會失敗。請參考「Blogger 範本裡為何這麼多亂碼?」→「二、避免字元被轉換的方法」,在 JS 的前後加上 "不解析語法",否則很多 JS 碼都無法成功儲存。



四、小結


瞭解 HTML / JS / CSS 各自的執行特性後,我們可以讓範本中的內容,藉由擺放到正確的位置,來執行地有效率,到目前為止我們可說是完成了 80% 的工作。

剩下的 20% 會是什麼呢?由於範本中仍有大量不必要的字元,也就是不會去執行的字元、或是可以更精簡的字串、變數等等,系列文最後一篇會介紹各種 HTML / JS / CSS 工具,來讓執行效率達到百分百。


Blogger 範本相關文章:

會員中心新增「小遊戲區」

$
0
0

(Pic from: wallpaperstock.net)
首先,會員中心公開試營運三個禮拜以來,雖然曾遇上 Google Drive 升級的意外,使得有段期間新會員無法註冊加入,不過日前會員的人數已經突破了三位數。

加入會員很簡單,只要有 FB 帳號即可、不必填寫個資,就能閱覽不公開的「會員限定文章」。而現在會員又多了一項福利,可進入新增的「小遊戲區」,且遊戲的數量會持續增加,遊戲列表也會再本篇自動更新。



一、小遊戲的來源


本站一向很重視「著作權保護」的議題,也寫了不少相關工具及文章。因此從網路上收集的小遊戲,以免費、無版權爭議、開源(open source)遊戲為主。有些遊戲的程式碼雖沒註明能否使用,不過能聯絡上該站長的話,WFU 也會去函詢問可否授權。

在每個小遊戲的頁面,都會標示出處、或是 open source 程式碼頁面。如果有讀者想推薦免費網頁遊戲的話,歡迎提供給我,如需要授權我也會聯絡作者嘗試取得許可。



二、小遊戲的介紹


除了在遊戲的畫面下方,可看到大致的操作說明或心得,側邊欄的樹狀「文章分類」→「休閒」→「小遊戲」,選擇分類後也可進入介紹文章的頁面。

目前的心得還不算多,因為主要先把「會員系統」的這個區塊做出來,之後再來慢慢補充遊戲或操作心得。比較值得推薦的遊戲,也會另外寫比較詳盡的介紹或攻略之類的。



三、小遊戲一覽




訂閱 Facebook 社團貼文心得__IFTTT 應用

$
0
0
訂閱 RSS 是獲得資訊的重要來源,尤其部落格站長更是需要。而如何收集各種國內外資訊來源,除了需要敏銳度,也得配合各種不同工具、或網路服務的應用能力。如果能擁有越多的資訊素材,除了寫文章不怕沒題材寫,也能增加內容的深度與廣度。

過去曾介紹過「如何取得 mobile01、PTT 的 RSS」、「如何取得 FB 粉絲頁 RSS」,除此之外,還有一個大宗資訊來源──FB 社團的貼文。FB 社團的角色可以看成是論壇、BBS 的一個討論區,如果你需要訂閱 mobile01、PTT 的某些討論區的話,那麼在 FB 一定也可以找到一些討論比較有深度的社團。

由於 FB 社團並沒有提供 RSS 的功能,不像 FB 粉絲頁可以找到 RSS 網址直接訂閱。不過 WFU 利用各種網路服務搭配組合,就能全自動取得貼文,並交由 Feedly 來訂閱,以下就來看看怎麼實現。



一、FB 社團同步到 Feedly 的原理


1. IFTTT

IFTTT」這個服務可以同步數十種網路工具。我們可以先建立一個空白 Blogger 部落格,然後利用 IFTTT,將 FB 社團的貼文,自動同步到這個空白 Blogger,本文之後會有大致的操作說明。

如需要 IFTTT 的基本說明,可參考「ifttt 讓你手上的網路服務比別人聰明,讓網際網路自動做很多事」。


2. Feedly

Feedly 為目前最多人使用的 RSS 閱讀器,因此用 Feedly 來說明。使用 IFTTT 完成同步貼文到 Blogger 的動作後,可利用 Feedly 來訂閱該 Blogger 的內容,即完成了 FB 社團同步到 Feedly 的流程。

更多 Feedly 的介紹,請參考:






二、設定 IFTTT 頻道(channel)


瞭解同步的原理後,以下簡單說明整個流程的操作方法。請先註冊好 IFTTT 帳戶,並且完成啟動帳號。

本文的操作需要事先建立及登入兩個帳號:FB、Blogger,因此先確定已經擁有 FB 帳號、並建立一個空白 Blogger 後,點選「IFTTT 官網」上方的「Channels」,或進入以下網址:




如上圖,請分別點選 Blogger、與 Facebook Group(社團) 的圖示,來建立這兩個頻道。由於 IFTTT 操作非常簡單,請依畫面指示進行即可,這部分就省略詳細說明。

不過需要注意的是,Blogger 可以建立無數個部落格,但在 IFTTT 之中只能選擇其中一個來建立頻道,所以建立頻道時,要選對 Blogger 名稱才行:





三、同步 FB 社團貼文 → Blogger


接著點選官網上方的「My Recipes」→「Personal」→「Create a Recipe」,來建立一個同步配方(Recipe)。

依照畫面指示,第一個要選擇的同步「來源」為 FB 社團:




第二步,同步的觸發條件選擇「Any new post」。

第三步,選擇要同步的社團名稱,如下圖:




第四步,要同步的目的地,選擇「Blogger」圖示。

第五步,選擇「Creat a post」,那麼就會把社團的貼文標題內容,自動發佈為 Blogger 文章。

第六步,設定發文格式,沒特別需求的話,直接按照預設值即可,按下「Create Action」就好。

第七步,填入自訂的註解文字,按下「Create Recipe」就完成了。



四、用 Feedly 訂閱 Blogger


完成以上七步驟的設定後,IFTTT 會定期去檢查 FB 社團,只要偵測到有貼文,就會自動執行同步到 Blogger 的動作。需要注意的是,IFTTT 只能抓到 FB 社團的貼文標題,該貼文的整個討論串、留言內容等等,還是得點進 FB 社團去看。

接下來我們只要複製 Blogger 的網址(或是 RSS 網址也可),貼到「Feedly」右上角的搜尋框,就能訂閱這個 Blogger 部落格的文章。

像 WFU 不常使用 Facebook,如果要常常進入 FB 檢查不同粉絲頁、社團有沒有新貼文,來獲取資訊,是一件很沒效率的事。現在使用 Feedly 訂閱這個自動同步貼文的 Blogger 後,隨時隨地在任何裝置(不同 PC、平版、移動裝置),都能用 RSS 閱讀器檢查有沒有新的訊息,再也不必登入 FB 了。

這麼做的好處是,只需要從 RSS 閱讀器篩選有興趣的標題再點進去看即可,可以節省我們很多作業時間與處理流程。


五、Blogger 設定


按照前面的操作,其實整個同步流程就能正常運作了,以下為個人心得及經驗談。使用了本文的同步流程一陣子後,發生一件麻煩事,細節就不多談了。基本上這種用來同步的 Blogger,沒人會知道其網址;再者自動產生內容的網站,會被 Google 評為垃圾網站,所以搜尋的權重非常之低,意思是說,就算被搜尋到相關內容,頁數也是排在很後面。如果這樣的 Blogger 內容會被搜尋到,多半是 FB 貼文的人、或是看過該貼文的人,把一長串內容複製後拿來搜尋,這樣排序才會很前面。

總之,用正常的搜尋方式不會發現這個同步貼文的部落格,而不瞭解以上原理的話就可能自己產生一些想像空間。如果想要讓這個部落格不出現在搜尋引擎結果,請參考下圖:



在 Blogger 後台 → 設定 → 基本 → 隱私權 → 編輯 →「讓搜尋引擎來尋找您的網誌?」→ 勾選「否」,如此設定後就比較安全了。


IFTTT 相關應用:
Viewing all 784 articles
Browse latest View live