2014年11月30日

讓 Blogger 過長的文章自動產生數字分頁﹍系列文加強版

上一個版本「讓 Blogger 自動顯示系列文章」留言 #5 WHY 詢問「有時文章過長,想幫文章變更為好幾頁 ( 寫好幾篇 ),能否讓【 自動顯示系列文章 】的顯示結果不出現標題,而出現數字」。基本上「文章分頁」算是常見的功能,當文章內容較長,分頁功能可以讓讀者稍微喘口氣。雖然有的網站是為了增加瀏覽次數而使用這個功能,但畢竟太過火而引起讀者反感,總是得不償失,相信站長們心中自有一把尺。

在 Blogger 要做出分頁機制,並不是很好設計,需要說明的地方不少,因此把篇幅留給使用說明。建議先看 上一篇 →「一、系列文的原理」瞭解設計的原理,後續內容比較能理解。




<< 請注意!本篇文章含會員限定內容 >>
2014年11月28日

[教學]將範本中的 HTML/Javascript/CSS 最佳化處理﹍優化網站效能(2)


(Pic from: mybloggertricks.com)
過去寫了不少篇屬於優化網站效能的基礎知識,如果都曾讀過、打好基礎後,那麼現在可以開始挑戰實作演練了。本篇以 Blogger 範本為例,說明如何整理程式碼、讓範本最佳化,也就是能夠減少體積、執行有效率,同時又易於維護。

不過動手之前,最好先確認對 html/js/css 有基本的認識,瞭解 debug(除錯) 的方法,以免不小心操作錯誤之時,能夠還原事先的範本內容。對範本進行任何變更之前,建議先閱讀「備份範本的訣竅」系列文章,備份需要有版本控制的觀念。

2014年11月26日

雖然 PageRank 停止更新,沒關係還有 MozRank


(Pic from: allbloggingways.com)
這個「Blogger 中文社群討論串」提到了 Google 不再更新 PageRank 的消息,而這件事 Google 很久以前便開始預告,PageRank 的數字也有很長的一段時間沒有變動,越來越少看到網站掛上 PageRank 貼紙。

為何 Google 這麼做,想瞭解原因可參考「別再用 PageRank 當評量標準」的簡單說明。不過 PageRank 的演算方式是公開的,因此 Google 不做這件事,照樣可以有其他人來做,只是演算法稍微有些變更而已。

現在起無法從 PageRank 了解網站的評等變化,那麼以後就利用本文介紹 MozRank 吧,而且這個服務提供的數據更多呢!

2014年11月24日

活用 HTML/Javascript/CSS 格式化及壓縮工具﹍修改 Blogger 範本的觀念 (3)

隨著範本修改次數增加、範本檔越來越肥大,從最乾淨的狀態不到 100k 直到 2、300k 的情況都在所多有(如果備份時有注意檔案容量的話),是不是會覺得開啟範本的等待時間越來越久?也難怪網頁開啟時間越來越慢。

進入主題前先回顧一下系列文前兩篇,站長要如何不盲目地修改範本、脫離單純複製貼上所衍生的麻煩與未爆彈,得先瞭解「備份及註解範本的訣竅」;想讓範本的程式碼執行有效率,得先瞭解「Javascript(簡稱 js)、CSS 的執行原理」。

接下來要談的是如何幫範本瘦身,利用各種免費的線上工具,幫 html/js/css 來縮減體積,加快網頁載入速度。不過跟人體一樣,一昧瘦身只會適得其反,均衡飲食才是健康之道。除了讓體積最小化之外,某些程式碼也得搭配格式化工具,幫助視覺上的閱讀效果、讓範本內容更加美化。

2014年11月21日

[Google Drive 外連產生器] 一秒鐘輕鬆複製連結, 圖片適用, 支援新舊版雲端硬碟

2015.5.8 公告:目前已經有更新版,請前往「Google Drive 外連產生器 V2」頁面。

取得 Google Drive 外連路徑不是輕鬆的事,對於使用免費網路空間的站長,這些外連檔案 html / js / css / jpg / png 等等包括圖檔,如果無法方便地複製連結,那麼長遠來看,操作 Google Drive 的不便會影響使用意願,相較之下 Dropbox 複製連結路徑的設計是很友善的。

過去 Google Drive 每個檔案大約花費 3~4 個步驟才可取得外連,請參照「Google Drive 取得檔案外連路徑」。不過最近 Google 推出新版雲端硬碟,官方已經封鎖了外連路徑的資訊顯示,我相信有其考量的因素。而國外一些線上取得檔案外連的服務,都得先連上其網站,為了廣告收入這也是可以理解的。總之目前的所有解決方案,在操作上都是繁冗不便的。

為了自己使用方便,於是動手寫了個懶人專用的產生器,如果有同樣需求的讀者,相信試用後也能感受到他的便利。

2014年11月19日

優化網站效能該注意哪些事? (1)最關鍵的考量因素


(Pic from: seocorporation.net)
經營部落格一段時間後,站長可能會將注意力從文章內容的產出、版面的裝潢、外掛小工具等等,轉移到更深的層面,例如網頁載入的速度、手機版的效能、範本程式碼優化等等。

會開始關注這些考量點,代表除了內容以外,也會站在讀者立場,想打造友善的使用者體驗。

本篇為這個系列的第一篇,由於整個主題很大,首先試著從大方向著眼,由幾個主要標題的詢問句,來協助站長釐清及分析如何進行考量,避免做出不合意的選擇。

2014年11月16日

專業的「網站維修中」及倒數計時功能, 不用擔心訪客看到異常頁面

喜歡裝潢門面的站長可能三不五時會有一點小困擾,在站內維護的期間,例如調整版面 CSS 配置、測試安裝某些外掛時,網站不可避免地會讓訪客經歷版面異常、或局部功能失效的狀況。而這還算小問題,因為多半只影響不到一天的時間。

如果是網站大改版、或是更換新範本(模版)等,那問題可就大了,受影響的期間少至數天、多至一兩個星期都有可能。建設中的工地會用圍籬、帷幕遮蓋起來,我們也該替自己的門面維持一下形象,對吧?

最近 +Orsino Sung 提出了很好的問題,「部落格能否設定短暫關閉,讀者連過來會顯示"網站升級改版中或是維修中"等資訊」,且剛好有案主希望網站能建構完畢後再設定為公開,因此設計了本文的工具。以下先介紹功能及出處,想直接安裝請跳至「二、準備動作」。



<< 請注意!本篇文章含會員加值文章內容,需點數兌換 >>
2014年11月10日

[小工具]Blogger 數字分頁導覽 + Ajax 動態頁面載入效果

網站使用數字分頁功能,來方便訪客跳頁尋找、閱讀文章,這是各大網站很常見的設計。但 WFU BLOG 一直以來未採用,原因有二:

1. 如果不瞭解 Blogger 的機制,裝了這樣的外掛一定抱怨連連,請參考「Blogger官方自動分頁機制」,分頁的狀況常常會不如預期。

2. 本站屬於「資訊提供」的性質,訪客有七成來自搜尋引擎,主要目的為尋求問題的解答,平均停留頁數少,比不上旅遊、美食、心情抒發、插畫等等諸多類型的網站,訪客比較有輕鬆的心情進行跳頁式的閒逛。

不過最近一個案子需要分頁功能,且相信很多網站還是需要數字分頁的導覽效果,因此發佈此項研究成果。另外這個小工具能在跳頁時,頁面使用 Ajax 動態載入,算是獨家功能。以下先進行功能介紹,想直接安裝請跳至「二、準備動作」。



2014年11月6日

jQuery 圖片輪播外掛﹍camera 安裝及使用詳解

許多非官方的 Blogger 範本,都會內建圖片輪播效果,可在部落格首頁展示站長的精選或隨機文章。不過也並非得用這些範本,才能擁有 slideshow 功能,已經有數量龐大、可免費使用的現成 jQuery 函式庫,例如這些介紹網頁「20 個免費好用的響應式 jQuery 輪播幻燈片插件」、「70+不同類型的jQuery Slider教程與DEMO」。

其中有許多功能強悍的輪播效果,甚至能展示各種 3D 特效、一次輪播數張圖片等等。而本文要介紹的這款套件「camera」,相較之下沒那麼花俏,不過 WFU 正是喜歡他的表現平穩、用途廣泛,相信其適用性可滿足最多的使用者,因此專文介紹。


2014年11月3日

[教學]在 Google Drive 建立 HTML 網頁, 需要注意這三件事

2016.4.13 公告:由於「Google Drive 將於 2016 年 8 月關閉外連」功能,建議參考「徹底解決網站外連空間問題」→「支援目錄路徑的雲端空間」,將檔案放在支援 "目錄路徑" 的網路空間,才能成功建立網頁。


使用 Google Drive 建立網頁其實很簡單,做好執行的 HTML 檔(例如 index.html),把所有相關的檔案(html/js/css/jpg)上傳後,網站就架設完畢了,而上傳檔案及獲得外連路徑的操作可參考「取得 Google Drive 外連路徑」系列文章。

不過本篇要說明的是,操作 Google Drive 建構網頁的過程中,一些可能遇到、但鮮少被提及的狀況。同時藉由實際案例說明,更能瞭解操作要點。