2009-09-23

官方版「繼續閱讀」(Jump Break Link)

才 Po 完一個新功能,沒多久又來一個,這次是幾乎大部分人都會用的「繼續閱讀」功能(官方叫它 Jump Break)。沒錯,這又是 Blogger 獨漏的功能之一,其實我在一開始玩 Blog 沒多久,就做了類似的 Hack:「首頁長篇文章的收合」,顧名思義,主要是做在首頁的一個修改,有些文章篇幅太大,一旦讀者連到首頁,多篇文章過多的文字和大圖擠在首頁,在閱讀和載入時都很花時間,於是很多 Blog 系統提供了類似文章摘要的設計,在首頁只顯示一部分內文,如果讀者有興趣,再點「繼續閱讀」的連結跳轉該文章的完整連結。因為當時 Blogger 不支援,所以大部分做在 Blogger 的 Hack,顯示在首頁的並不是真正的「文章摘要」,而是仍載入全文、透過 CSS 的手法隱藏掉部份段落,讓版面上比較精簡,讀取上稍稍變快(因為沒顯示出來,但還是要全載入),所以我從來不叫這類 Hack 為首頁摘要或是繼續閱讀,因為原理上是透過「隱藏」的手段顯示部份內文。也因為這樣,我之前的 Hack 才能夠提供兩種模式:一種是動態收合 (id=detail,點了連結馬上在首頁展開),另一種才是繼續閱讀 (id=fullpost)、點連結跳轉完整文章。這次官方提供的「繼續閱讀」功能,作法是在想分段的地方插入程式碼,當首頁讀到這個標記,後半段內文就都直接「不載入」,這和我 Hack 的 CSS 收合隱藏作法大不相同(雖然畫面上看起來很像),但這才是正確、有效率的「繼續閱讀」,也是一般 Hack 所做不到的。

此功能一出,網路上的教學和介紹文章也蜂擁而至,不過我第一次要試用,卻沒有人家講的那麼簡單。首先,人家說有個「插入 Jump/Break 指令」的圖示在編輯工具列,我卻看不到!除非登入「Blogger Draft」,不然那個功能圖示也出不來。原來是要先到後台的「設定」、「基本」最下面,「選取文章編輯器」時切換到「新版文章編輯器」,這樣才看得到那個圖示(新版編輯器的功能說明在此)。有了那個圖示,代表你的編輯器可以直接插入用來做「繼續閱讀」的程式碼啦!

要先套用「新版文章編輯器」

編輯器才會有插入「繼續閱讀」標籤的工具圖示

回應: 24

 

2009-09-01

新標籤工具 (Improved Label Gadgets) - Blogger 標籤雲 (Label Cloud)

標籤一向是 Blogger 中用來分類文章相當好用的功能之一(不要再問我什麼資料夾階層分類的問題了...),但一開始 Blogger 提供的「小工具模組」裡只有標籤清單,標籤一多就要拉一個很長佔空間的 List 來顯示,因為實在不喜歡,所以兩年半前我參考別人做了一個標籤雲 Hack (Label Cloud),主要作用除了顯示所有標籤,而且可以依文章數量加權排列、顯示標籤大小和顏色漸層,不過麻煩的是要改程式碼,加 Javascript 函式、定義 CSS 樣式,而且是用預設的「網頁存檔」小工具來改。現在 Blogger 「終於」推出官方版的 Blogger 工具啦(官方公告在此)!不想用 Hack 的只要去新增這個工具,就有這項功能了~(就算有 Hack,加這個工具也不會有相容性的問題..)

耍懶拖了幾天才來寫這篇介紹文章,安裝步驟很簡單,只要登入後台,到「版面配置」、「網頁元素」的頁面,想加這個工具的地方去「新增小工具」,點選新增「標籤」這個工具:

然後設定屬性:

預設是所有標籤、按字母排列、清單顯示、顯示每個標籤的文章數,如果想改成依數量加權的標籤雲,記得點選到「依頻率排序」、「以雲端顯示」(雲端二字好像不是這樣用的吧),這樣就有很不錯的標籤雲啦!

回應: 13

 

2009-07-09

更換網域: abintech.twidv.com

本站更換網域名稱啦!更換網域的「心路歷程」和廢話請參考我發表在另一個 Blog: Abin's Note這一篇文章

我手上所有 *.azhai.org,即日起統統轉成 *.twidv.com 啦!本 Blog 的網址變更成為 abintech.twidv.com,如果把本站紀錄到書籤(我的最愛)或其他 Bookmarklet 的人,請麻煩更新一下,如果有訂閱 RSS 的朋友,那不用改、Feedburner 會自動調整轉向到新網址。而舊的 azhai.org 因為續約沒多久,所以自動轉址會持續到明年底,中間這段時間就等網路上的各種服務和 Search Engine 更新連結,而到期後舊網址就終止不用了,希望舊雨新知繼續捧場啦!

2009-07-08

本站留言板 (Message Board)

這邊是 Abin's Tech Note Blog 的留言板!

用了一段時間的 cbox,雖然這個留言板服務很不錯,但我自己常常沒在看,有留言一擺大概一兩個月都沒注意到,如果留言板還要搞到 e-mail 通知又太 over,而且這也不支援 RSS 訂閱,不去注意的留言板應該也失去了它的效用吧!所以乾脆就取消掉了!但是如果對 Blog 有些非關特定主題的留言(來打招呼簽到?!)、或是不知道該在哪個地方發問的主題,沒有了這樣的留言版似乎又很不方便,所以我就發了本篇文章,打算利用 Blogger 的文章留言功能充當留言板,一方面可以提供 RSS 訂閱提醒、另一方面也可以用 Blogger 的郵件訂閱讓讀者來關注,功能性和實用性上比起 cbox 有過之而無不及。如果有空的話,我會針對這篇文章做一個留言板的 Hack,一樣可以放在 Sidebar 上、一樣可以是一個 widget-look 的模組,修改和使用上應該就更有彈性啦!

所以,要打屁就在這邊留言吧!如果是要發問,不好意思,還是請先善用「搜尋」功能,說不定就可以找到答案、要不也可以在正確的主題上發問,如果非關特定主題、或是想問的問題實在 Google 不到,那就在本文後面回應吧!不過留言的禮貌還是要注意一下,不然留言是會被無視的,畢竟公開的網路上,一種米養百種人啊!最後,還是歡迎鄉民路人在這留言,想私密留言 PM 的,還是請寄 e-mail 吧!

回應: 37

 

2009-06-15

站內搜尋的「Google 搜尋框」(Search Box Gadget)

很久以前我做了一個給 Blogger 使用、能套用三種搜尋引擎的站內文章搜尋功能,原理很簡單,就是用 Blogger 自己的站內搜尋語法(Navibar 裡的那一個,參考這一篇)、Google 的自訂搜尋以及 Technorati 的 Blog 搜尋來實現,讓自己能從關鍵字快速找到特定文章。最快的應該是 Blogger 自己提供的站內搜尋吧,Google 自訂搜尋的要看「Google 機器人」什麼時候來訪才有紀錄,而 Technorati 則是端看你站內 RSS 更新的速度決定。這三種方法各有優缺點,但具有「指標性」意義的還是 Google 的自訂搜尋,因為任何人用 Google 找關鍵字時,如果在自訂搜尋找得到,代表一般的 Google Search 也才有進入排名的機會。最近 Blogger 官方「終於」推出給 Blog 專用的「Google 搜尋框」,這是一個「網頁元素」、用拖拉的就能加進 Blog 裡成為一個元件,提供使用者做快速的站內搜尋。(新增方法:登入管理介面,版面配置->網頁元素->新增小工具,把新增的「搜尋框」加進去就行了)

元件新增以後的設定畫面

問題來了,到底這個元件和我之前做的三合一 Combo 有什麼差別呢?能不能找到更快、更多呢?看來還是要裝來實測一下。我用相同的關鍵字下搜尋,Blogger 自己的站內搜尋完全不破壞版面、直接將結果出現在本文區域內,速度最快也不漏勾,不用擔心什麼機器人或 RSS 更新的問題,缺點是搜尋範圍窄、關鍵字不夠精準會找不到。接下來用 Google 自訂搜尋,和一般 Google Search 一樣強大,但要跳轉頁面顯示、還要看機器人有沒有來你的站台「臨幸」過,所以新開張或少更新的 Blog、剛發的新文章很容易都搜尋不到。而 Technorati 的 Blog 搜尋也接近 Google 的能力,新文章出現的頻率也「應該」比 Google 快(端看 RSS 更新的結果),不過這項服務好像國內知道的人少、用的也少,我單純就是自己裝來找爽用的。以上三種和這個新增的「搜尋框」比起來,搜尋效果的確等同於 Google 自訂搜尋,而且還能多幾種分類,效果還不錯,而且為了配合 Blogger、不需要跳轉頁面顯示,直接就給你塞入 Blogger 的本文區域,而且提供純 CSS 的 Tab 分頁來切換搜尋結果,還會自動配合你 Blogger 的樣板顏色和樣式,真的是很強大、很簡單哩!

站內搜尋比一比!上面這塊是我 Combo 的三種站內搜尋,下面的模組是新增的「Google 搜尋框」,顏色樣式和圖示會配合樣板調整,真強!

偷看網頁原始碼,其實這個模組和許多 Blogger 外掛模組一樣,是用外嵌的 Javascript 達成,使用很簡單,但沒有什麼修改的彈性,而且載入需要一點點時間(所以會看到「載入中..」),我想我還是會用自己做的自訂搜尋吧!因為搜尋效果一樣、載入速度快,而且應該沒有人會沒事一直在做站內搜尋吧!但如果是一般使用者、懶得自己做搜尋介面,又希望在 Blogger 塞入 Google 搜尋的模組,這個搜尋框的確是很讚的選擇。越來越發現 Google 和 Blogger 整合後的強大,放在 Blogger 上的文章似乎曝光率也比較高、Google 也容易找到,現下越來越多與 Search Engine 結合的模組和機制,只要拖拉選取就能塞進 Blog 裡,免 Hack 馬上就能用,這實在是支持 Google 服務者的福音啊~

內嵌式的搜尋結果,有分頁、CSS 樣式也會自動配合版型!

Technorati Profile

回應: 13

 

2009-05-07

Blogger 放檔的好選擇 - Google Code

之前發現,Google Page Creator (Google Pages) 要倒店關門的消息,我就一直在找更好的地方,用來放我 Blog 會用到的各種小圖和外連檔案(不然每次登入 Google Pages,都要恐嚇我一次,我所有的資料都要被強制移到 Google Sites 了),試用了一陣,本來覺得即將取而代之的 Google Sites 也不錯用,正打算大舉遷移,把檔案和連結都搬過去之際,突然緊急煞車,發現 Google Sites 不能這樣用啊!目前它有兩個關鍵性的障礙:

  1. 不准上傳 HTML 或 Javascript 之類的程式碼。對很多朋友來講,這可是嚴重的缺陷,因為有不少人習慣把外掛 Blogger 的模組,都寫成獨立的 js 檔,載入頁面時再用 include 的方式呼叫,改版時只要兼顧相容性,不用再動到網頁樣板的原始碼,維護也比較獨立和方便。原先的 Google Pages 並不阻擋,但到了 Google Sites 卻拒絕上傳(說是安全性考量),這一點就讓不少人打退堂鼓了。
  2. 不支援 GIF。這一點我就非常非常不能接受了,Google Sites 是用來建立「個人網站」、來做協作的平台,有聽過提供這類服務但不支援 GIF 圖檔的嗎?!一開始我還沒發現,因為 GIF 圖檔是可以上傳的,一般靜態標準的 GIF 圖檔看起來都沒事,但嵌入網頁外連所有圖片時才發現,不正常的情況來了!首先是透明底圖 (Transparent GIF),在 Firefox 沒事,但用 IE (IE6) 看卻不再透明了,就算你想換成透明底圖的 PNG 檔,舊版 IE 不支援、新版 IE 照樣不能透明!其次,動態圖片 (Animated GIF) 照樣沒作用,這次連用 Firefox 也沒效果,Google 找了半天,得到的竟然官網的回答:「Google 協作平台目前不支援動畫 GIF。如果要使用動畫 GIF,則需要將它裝載在協作平台外部,並使用它的裝載網址進行連結。」看到這句,檔案還要放在「外部」,我真的無言了~(據說還是安全性考量.. XD)

以前還一度以為是外連檔案後面那個謎字串 ?attredirects=0 搞的鬼,因為之前測試加了該字串好像會正常,但其實是因為當下我有登入 Google Sites 的關係。至此,我想我是完全放棄用 Google Sites 來取代 Google Pages 了(這狀況已經一段時間,我也上 Google Groups 去反應,看來還是沒進度)!在尋找其他解的過程中,看到了有人推薦使用 Google Code、一項 Google 提供給使用者用來公佈及開放程式碼的平台,為了讓用戶能自由下載、修改和分享程式和專案的原始碼,該服務平台也有提供 File Hosting 的機制,讓專案主人能放置檔案公開分享和連結使用。當然,這些公開的原始碼檔案也提供像是版本控制、描述分類等專案控管的機制,還有 Wiki 和 Issues 讓管理者和使用者能控制和掌握專案的進度和變動(還支援 Google Analytics 來監看存取流量),算是一個相當簡單、又配備大部分該有功能的程式碼控管平台。

對我來說,現階段最重要的當然是小圖檔的 Image Hosting,還有少部份幾個外連用的小檔案。既然是該服務是分享「Code」,未來我也考慮把自己的樣板原始碼公佈出來,甚至將有在用的 Blogger Hack 抽離成一隻隻的 js 檔,這樣用 Google Code 來放置檔案,也才更理所當然,是吧?仔細看看 Google Code 的限制:一個專案空間限制單檔最大 100MB、總容量 2GB、不限網路流量、使用 *.googlecode.com 格式二級域名(但不支援自訂網域)、一個帳號最多可以開十個專案,哇!拿來做我 Blog 的 File Hosting 絕對是綽綽有餘啊!實際試了一下圖片外連,不管什麼格式,顯示下載都很快很正常,測試幾天後,沒想太多我就把檔案統統都搬過去啦!透過之前介紹過的技巧,我大概只改了三行原始碼,就讓所有的 Blog 小圖檔統統轉向到 Google Code 去,果真是 Blogger 放檔的好選擇啊!如果不介意,還可以公佈自己的 Blog 樣板(透過版本控制當備份)和用到的所有 js 檔(不要再盜連了),這樣也符合 Blog 原始碼開放的需要,速度和反應都很不錯,除了擔心對岸會「牆」掉 Google 服務的疑慮(沒差,反正我的 Blog 也是在 Google 的 Blogger 上),不用擔心它會倒掉或關閉(現下用的人很多),看來可以好好頂一陣子了!

我想 Google Code 應該不用教學怎麼使用,只要有 Google 帳號、連到 Google Code 首頁 、選擇「專案託管」、在畫面中央直接選 Create a new project,填好 Project 名稱(這名稱會決定你的二級網域名)和相關資料,專案就開好啦!接著玩一玩專案設定,切到到 Downloads 的分頁,就可以上傳下載自己的檔案了。申請前有興趣可以參考我 Blog 都已經換用的專案:abinlink。推薦因應 Google Pages 倒閉、Google Sites 又不濟事,和我一樣需要空間來放置小檔案的人來參考~(希望不要被拿來愛亂分享大檔的人搞爛就行了~)

回應: 22

 

2009-04-29

Debian 的安裝與設定 (下)

(接續前篇)順利登入後,接下來要替新裝好的 Debian 系統做一些軟體安裝和更新。在安裝軟體之前,由於 Debian 是用 apt-get 來管理程式安裝,我們要先確定下載的伺服器位置。接下來編輯下載伺服器的列表:

nano /etc/apt/sources.list

裡面的資料都刪掉,直接取代成下面這一段:

# 完整列表參考 http://www.debian.org/mirrors/list
deb http://security.debian.org/ oldstable/updates main contrib non-free
# 國家高速網路與計算中心
deb ftp://opensource.nchc.org.tw/debian/ oldstable main contrib non-free
deb-src ftp://opensource.nchc.org.tw/debian/ oldstable main contrib non-free
# 交大
deb http://debian.nctu.edu.tw/debian/ stable main contrib non-free
deb-src http://debian.nctu.edu.tw/debian/ stable main contrib non-free
# 台大
deb ftp://ftp.tw.debian.org/debian/ oldstable main contrib non-free
deb-src ftp://ftp.tw.debian.org/debian/ oldstable main contrib non-free

隨著時間更迭,以上的列表常常可能失效或是更新,所以在使用上有發生類似下載不到或是伺服器沒有回應,可以再去找找看最新的 apt-get 伺服器列表並且更新(上面的註解裡有完整列表參考的連結)。

伺服器很多,要挑那個當作自己的優先伺服器呢?可以先裝 netselect 這個工具:

apt-get install netselect

然後用以下命令比較每個伺服器哪個比較快(數字越小表示反應速度越快,這個命令會列出最快的伺服器):

netselect host1 host2 host3 host4

有了列表,接下來第一件事情是更新已知的 Package List,用以下命令進行更新列表,並更新系統現有的元件:

apt-get update
apt-get upgrade

問題來啦,更新系統所有現存元件並不一定會很順利,不是部份依存的元件沒裝、導致更新失敗,不然就是模組之間的依存關係沒建好,就算裝好也不能動,在排除這些問題之前,系統都不能算是穩定和最新的,除了上面用的命令 apt-get upgrade,也可以換用 apt-get dist-upgrade 來試試看(這兩個命令的差異比較可以參考這篇文章)。如果還有問題,可以根據錯誤訊息 Google 一下解法來處理,例如我在更新系統時,碰到下面的訊息「dpkg: error processing .. trying to overwrite `/usr/sbin/add-shell’」,參照網路上的說法,這應該是權限的問題,只要用下面的命令開放權限、並強迫安裝和更新,就能迎刃而解:

dpkg -r --force all passwd
apt-get -f install

如果過程還有短少什麼元件,那就補安裝 (apt-get install '元件名稱') 再繼續,補到 apt-get upgrade 都沒東西要更新,那就搞定了(有點像 Windows Update 一樣)。不知道有沒有注意到上面的 source list 裡,我用的是 oldstable 的 package?原因是如果一口氣上 stable,更新過程會很不順利(因為內含的 debian 版本是 sarge 3.1,直上最新版差異太大很多套件會相互干擾),所以算是階段性更新系統,先用 oldstable(目前的 oldstable 是 lenny 5.0),一切更新都順利搞定後,再去修改 list、把 oldstable 字樣都改成 stable,接著再 update、upgrade 到沒有錯誤為此。照我的經驗,系統元件升級完畢後 Debian 也會被推到最穩定的新版(從原來的 sarge 3.1、etch 4.0,到 oldstable 的 lenny 5.0,到最新的穩定版 squeeze 6.0),一樣可以用以下命令檢查升級後的 Debian 版本:

cat /etc/debian_version

系統更新完畢就可以安裝軟體了,這裡安裝的第一套軟體是 SSH Server,用以下的命令:

apt-get install ssh

安裝過程會要求你安裝其他相關套件,或是更新 Library,都用 Y 確認就是了,有不懂的設置問題也都直接按 Enter 繼續就好。

裝好 SSH,建議最好重開系統測試一下(重新開機記得選對分割區,要開在 Debian 上),這時候不管 root 或是新開的帳號,應該都要能夠用 SSH 登入。登入順利的話,為了安全,預設的那個 Telnet Daemon 就該關掉了,可以用下面的命令移除預設的 Telnet daemon:

update-rc.d -f utelnetd remove
rm -f /etc/init.d/utelnetd

現在只剩 SSH 了,如果想改登入的提示訊息,可以編輯 /etc/issue.net 的內容,不過預設 SSH 會關閉,因此還要編輯 SSH 的設定檔 (/etc/ssh/sshd_config),找到這一行:Banner /etc/issue.net,移掉前面的 # 標記。如果想馬上生效,可以 kill 掉 SSH 的 Daemon (sshd),然後重跑 /usr/sbin/sshd 即可。

接下來開始安裝基本軟體和服務,安裝軟體前都要有好習慣,先更新最新的軟體列表,然後安裝基本工具(安裝中如果有 [Y/n] 一律按 y 然後 Enter,有不確定的選項就都用預設值):

apt-get update
apt-get upgrade
apt-get install screen nmap less w3m lynx bzip2 zip unzip host make gcc ncftp tzdata ntpdate

以後可以用 dpkg -l 來查看到底系統裡裝了哪些套件。如果想知道還有哪些套件 Package 能夠安裝,可以上官網的連結,有很詳細的分類。接下來是設定台北時區,先刪除舊的時區設定,再連結台北的,最後一個 date 命令會顯示目前日期和時間,檢查看看對不對:

cd /etc
rm -f localtime
ln -s /usr/share/zoneinfo/Asia/Taipei localtime
date

接下來是設定 Host 記錄,讓 Domain Name 能讓系統認得(有自己 Domain 的可以加進去,或是當作手動的 DNS record)

nano /etc/hosts

基本內容如下:

127.0.0.1 LinkStation localhost localhost.localdomain

# The following lines are desirable for IPv6 capable hosts
# (added automatically by netbase upgrade)

::1     ip6-localhost ip6-loopback
fe00::0 ip6-localnet
ff00::0 ip6-mcastprefix
ff02::1 ip6-allnodes
ff02::2 ip6-allrouters
ff02::3 ip6-allhosts

再來還有一個重要的設定,就是語系和中文化支援。目前的狀況應該連打中文、顯示中文都有問題,因此要做調整、能夠完整處理中文目錄和檔名。為了支援全中文和 UTF-8 (Unicode) 的套件和環境,這裡建議預設用中文 UTF-8(不用 Big5 了),首先,要先安裝中文相對應的 Locale (語系):

apt-get install locales localepurge

這樣會跳出一個文字選單,裡面記得至少要選擇 en_US.UTF-8 UTF-8、en_US ISO-8859-1、zh_TW BIG5 和 zh_TW.UTF-8 UTF-8(用空白鍵選擇、Tab 鍵切換到 OK、Default Locale 選 zh_TW.UTF-8)。安裝完畢,可以 cat /etc/locale.gen 這個檔案內容對不對(如果要新增刪除其他語系,請用 dpkg-reconfigure locales)。有注意到除了 locales,上面還另外安裝了 localepurge?因為語系檔預設會全裝到系統裡(以上設定只是設了預設用的),甚至以後安裝軟體,語系支援也會全裝,localepurge 裝完後直接執行,會幫忙清掉系統裡用不著的 locale、藉此節省不必要的空間浪費,而往後安裝軟體時一安裝完,localepurge 也會馬上啟動主動幫忙清「垃圾」,真算得上是有用 locales 時也必裝的工具。接下來設定使用者預設的 Locale,輸入 nano ~/.bashrc,增加下面這兩行:

export LANGUAGE=zh_TW.UTF-8
export LC_ALL=zh_TW.UTF-8
export LANG=zh_TW.UTF-8

登出再登入一次(可以用 locale 這個命令確認是否系統已經更改,SSH Client 程式連線前記得也要換編碼成 UTF-8 unicode 才行,PuTTY 有支援),如此,在登入後命令列的操作就可以看到中文字了。如果 Shell 裡面還是不能輸入,這時候更改使用者的輸入設定,建立檔案 nano ~/.inputrc,確定有下列四行:

set input-meta on
set output-meta on
set convert-meta off
set meta-flag on

同樣登出再登入後就生效了。以上兩個檔案 .bashrc & .inputrc 都是針對一個特定使用者的,如果希望每個新增的帳號都可以免去手動建立的話,那可以去改 /etc/profile 和 /etc/inputrc,可以順便加入一些 alias 和顯示設定(不過記住,在此之前已經建立的帳號,還是會用已經存在的 .bashrc 和 .profile,除非都砍掉才會套用系統的設定),以下是我在預設 /etc/profile 裡面新增的範例(主要是改提示符號、設定別名和中文語系輸出):

export PS1='\u@\h[\w]:'
umask 022

# You may uncomment the following lines if you want `ls' to be colorized:
alias ls='ls --color=auto'

# Some more alias to avoid making mistakes:
alias rm='rm -i'
alias cp='cp -i'
alias mv='mv -i'

# Added aliases
alias cls='clear'
alias dir='ls -al'
alias lo="exit"
alias md="mkdir"
alias rd="rmdir"

# Added for Chinese supported
export LANGUAGE=zh_TW.UTF-8
export LC_ALL=zh_TW.UTF-8
export LANG=zh_TW.UTF-8

搞定中文、語系和登入問題,最後別忘了系統時間的同步。Debian 是一台伺服器,所有的 Log 紀錄都有參考意義,所以紀錄裡的系統時間同步與否就額外重要。和一般電腦一樣,LinkStation 有兩種時間,一個是硬體的 BIOS Clock,另外一個是作業系統的時間日期。你可以用命令 date 來看系統時間,還可以用 hwclock 來看 BIOS 時間(兩邊不一定會一模一樣),手動調整很麻煩,不過只要網路是通的,我們可以直接透過網路來對時。上面裝的基本軟體裡有一項叫 ntpdate,作用就是提供你做網路對時的,只要用下列命令:

ntpdate clock.stdtime.gov.tw

就會幫你連到中央標準局的 Time Server 取得正確時間,並且自動調整。如果此時還想把該時間「同步」到 BIOS 裡,也可以用命令:

hwclock -w

剛剛更新的系統時間就會和 BIOS 同步了。當然沒事要手動做以上動作其實也很累,我們可以做一個時間同步的程式,讓系統每天執行一次,那麼時間不就會一天更新一次保持同步了?首先建立一個程式:timesync

nano /etc/cron.daily/timesync

填入以下的程式碼:

#!/bin/sh
# Synchronize time via NTP daily
/usr/sbin/ntpdate clock.stdtime.gov.tw && /sbin/hwclock -w

最後記得改執行檔屬性:

chmod a+x /etc/cron.daily/timesync

這樣系統每天就會自己同步一次系統和 BIOS 時間了。同樣的,也可以像上一篇修改主機名稱(用 hostname 指定名稱、在 /etc/hosts 加一行記錄、修改 /etc/hostname 檔案裡的字串)、更改登入後訊息(登入後畫面 Telnet 用 /etc/issue、SSH 登入用 /etc/motd)。如果未來 Debian 有開放對外服務,偏偏那個服務的 Port 在韌體分割區開機也有提供(像是 Web、SSH),為求安全、怕機器重開被人家連進韌體,建議這兩個分割區指定不同的 IP 位址(都用固定 IP),這樣就可以避免機器因故重開卻讓外面使用者連到另一個分割區去。

到這裡基本的 Debian 環境就完成了。如果和我一樣有舊資料在 USB 硬碟裡、打算全部複製回來,那就可以開始做資料復原的工作。首先準備你的硬碟,插入 USB,先檢查看看 USB 硬碟有沒有抓到,可以用 dmesg 來檢視:

dmesg | grep sda

以上命令是從 dmesg 裡找出所有的硬碟分割出來,內接的硬碟應該都是 hda (hda1, hda2, hda3 ..),外接的 USB 碟則會用 sda。接下來決定你要掛載的分割區,因為我的 USB 碟裝的是之前拿來裝 LinkStation 的 500GB 硬碟,資料都在 hda3,因此我就要 Mount 第三個分割區(這時候變 sda3),掛載的目錄是 /usb/ (沒這個目錄的話要自己建立):

mount /dev/sda3 /usb/

我隨身碟裡面用的檔案系統是 ext3,如果 Format 成 NTFS 或 FAT32,上面就不能用 ext3 這個參數囉!因為現在已經完全改用 UTF-8 的環境,原來有中文的資料大多還是用 Big5 的(目錄、檔名),所以接下來要準備編碼轉換程式,把 Big5 的目錄和檔名都改成 UTF-8 的格式,這裡安裝的工具是 convmv:

apt-get install convmv

裝好後就有這個編碼轉換工具了。只要指定編碼,指定的目錄檔名就可以轉換成你要的格式,假設要從 Big5 轉成 UTF-8,命令如下:

convmv -f big5-eten -t utf8 -r --notest /目錄名稱

這個命令會把指定目錄下原來是 Big5 (ANSI 中文) 的中文目錄和檔名,直接改編碼轉換成對應的 UTF-8 名稱。改完檔名,如果有些檔案內容的註解文字以前是 Big5 的中文(舊的中文文字檔),也可以手動針對檔案內容編碼做轉換,讓你在 UTF-8 的環境下能看到轉換過的正確中文字:

iconv -f big5 -t utf-8 檔案名稱 -o 轉換後另存新檔名稱

這個動作完成之後,整個檔案系統環境就都是純的 UTF-8 了。把所有資料還原前,你可能也會想對整個系統先做備份,因為現在是用 Debian 開機,所以比較好備份的是位於 hda1 的原廠韌體,可以先把 /dev/hda1 Mount 到 /mnt 上,然後備份整個原廠韌體到一個檔案(就是把整個 /mnt TAR 起來壓縮),接下來用原廠韌體開機 (hda1),然後 Mount hda3 到 /mnt,就可以備份整個 Debian 了!動作大同小異,端看你想備份哪個分割區,步驟如下:

mkdir /backups
cd /mnt
tar -zcvp -f /backups/backup_hda1.tgz *

備註:備份前,你應該不希望浪費空間去備份不必要的檔案吧!首先是那些透過 apt-get 安裝的軟體套件暫存檔,這些檔案應該在安裝完就清掉才是,如果之前都沒清,備份前記得下命令清掉:

apt-get clean

這個命令會清掉 /var/cache/apt/archives 目錄下用不著的安裝套件暫存檔。上面有提到,如果有裝 locales,記得用 localepurge 清掉無用的語系檔。如果想手動處理、找出系統裡佔用空間最多的目錄或檔案,可以在根目錄下用下面的命令依佔用空間大小排序列出,讓你想辦法縮小備份壓縮檔的大小。

du -x | sort -n

以上是在根目錄下建立一個 backups 目錄,然後把整個 /mnt 目錄壓縮備份成一個檔案:backup_hda1.tgz(顧名思義這是 hda1 的備份,請依樣畫葫蘆備份 hda3),壓縮完可以用命令 tar -ztv -f 來測試和檢視壓縮檔內容。要注意備份前要放備份檔的地方空間夠不夠,假設你想備份整個 Debian,那麼想必 hda1 下所剩的空間一定不夠,這時候你可能要備份到外接硬碟上才行了!不想備份的特定目錄可以用參數 --exclude '目錄名稱' 來排除。有了備份檔未來要怎麼重灌還原呢?只要用韌體分割區開機,砍掉整個要還原的根目錄 (rm -r /mnt/*,不想砍的目錄可以先改目錄名稱像是 mv /mnt/share /mnt/.share,這樣就砍不到,還原完再把目錄名稱改回來)、或是用 Web 介面進行 Format(hda1 的官方韌體有提供,會清除整個 hda3 分割區),這樣就清掉了整個分割區,再用剛剛的備份檔,在根目錄下解壓縮進行還原:

cd /mnt
tar -zxv -f /backups/backup_hda1.tgz

以上就是整個備份和還原的步驟(要很清楚的知道,你開機的分割去是哪一個,然後去 Mount 你要備份或還原的分割區到 /mnt,接著進行備份或還原的再操作,做完再切換開機分割區用你要的分割區開機來使用)。

至此,我們更新了軟體列表、並讓系統元件都維持在最新的版本,安裝了 SSH 和一些基本工具、移掉 Telnet Daemon、修改 Local Host 紀錄、解決語系和中文環境設定(使用 UTF-8),最後還有搞定登入和網路對時的問題,連資料備份還原的步驟都交代清楚,這樣總算是完成重灌及還原的工作了。

回應: 9

 

2009-03-18

增加文章更新時間 (Show Post Update Time)

我的 Blog 大多都是一些個人筆記,有參考性的筆記除了分享給大家看,連自己有需要時三不五時也要來回顧和參考一番。不過因時制宜,有些東西總會因為時間變化而些要作調整,尤其像之前關於 LinkStation 的改機資訊,也因為機器變動、軟體和參考下載的網址有更新,所以在閱讀筆記的時候,不時也會一併更新已經失效和變更的部份。Blogger 顯示的文章時間,用的是「發表時間」,也就是說文章一旦公開,發表的日期和時間就不會變了(除非手動修改發表時間),這樣方便文章排列時依發表前後順序來整理,但也因為這樣,哪天如果有修改過這篇文章、想標示文章最後更新的時間,只好手動在文章裡告知了!(因為 Blogger 的樣板變數,Post 裡只有發表的 timestamp,並沒有更新的時間..)

不過之前在處理 Feed 內容的時候,有注意到 Feed Content 裡除了有文章的發表時間 (published),也還有更新時間 (updated) 啊,所以只要能透過該篇文章的 Feed 內容,就可以找出該篇文章最後的更新時間,把它抓出來用不就能達到目的了嗎?從 Feed 透過 JSON 抓資料顯示是小事,但遇到的障礙有兩個,首先,現在有的 Feed 標準是「全部文章」、或「全部留言」的資訊,我要的只是單篇文章的 Feed 內容,不會要我從全部文章的 Feed 來搜尋吧?其次,就算找到單篇文章的 Feed 資料,裡面的格式又為何(會這麼說,是因為和 Google 公告的格式不大一樣)?經過幾天的奮鬥,終於讓我解決問題做出這個 Hack,由於部份用法都不在官方的說明文件裡,所以格外花時間(在確定資料內容)。

顯示文章最後的更新時間

首先是單篇文章的 Feed 網址格式。之前找到的資料,Feed 的種類有 Posts Feed (所有文章)、Comments Feed (所有留言)、Labels Feed、還有 Post Comment Feed (單篇文章的所有留言),單純一篇文章的 Feed 其實沒什麼用(而且需要先找出 Post ID),找半天好不容易被我 try 出來,單篇文章的 Feed 網址是:

http://xxx.blogspot.com/feeds/posts/default/POST-ID

有了 Feed 就簡單啦,接下來用 JSON 來抓 Post 的 Update Time。根據 JSON 的 Parse 規則,Update Time 的變數是 json.feed.entry[i].updated.$t,不過我是單篇文章啊,沒有一堆 Feed Entry,所以資料結構和一般的 Feed 又不一樣啊!後來透過直接解讀該 Feed 的內容、並用 JSON 的規格來判斷,才知道該變數應該是 json.entry.updated.$t 啊!解決這兩個關鍵的問題,要顯示文章更新時間就一如反掌了!看不懂的人沒關係,一樣複製、貼上、修改就能用這個功能了。打開管理介面、版面配置、修改 HTML 樣板原始碼(一樣要展開小程式範本),在程式碼 <head> 區段內(</b:skin> 標籤後、</head> 標籤前),塞入 Javascript 程式:

<script type='text/javascript'>
//<![CDATA[
<!-- Function used for generating the last update time for each post: showPostUpdateTime() -->
function showPostUpdateTime(json) {
  var updateTime = json.entry.updated.$t;
  var publishTime = json.entry.published.$t;
  if (updateTime.substr(0,10) != publishTime.substr(0,10))
    document.write(' | 更新於 '+updateTime.substr(0,10)+' '+updateTime.substr(11,5));
}
//]]>
</script>

說明一下,這段 Javascript 的工作原理是:先取得該文章的「發表時間」和「更新時間」,如果「日期」一模一樣,那麼就不顯示更新時間(因為我覺得,在發表文章的同一天內對內容做一點修改無可厚非,可能只是打錯字)。如果日期不一樣,那麼就顯示該文章最後更新的日期和時間。(如果要改顯示格式、內容和判斷規則的,自己修改這段 Javascript,不要再來找我客制化了!)

接下來,要把觸發以上 Javascript 的函式呼叫塞到原始碼裡,這裡主要也是決定這段更新時間要顯示的位置。以這的範例來看,我把最後更新時間放在「發表時間」的後面,而且,只有在顯示該篇文章全文的時候,才會顯示出來(所以首頁看不到,判斷規則可以參考這篇文章)。所以先找到顯示發表時間 (<data:post.timestamp/>) 的區段,插入紅色的那個程式:

<span class='post-timestamp'>
  <b:if cond='data:top.showTimestamp'>
    <data:top.timestampLabel/>
    <b:if cond='data:post.url'>
      <a class='timestamp-link' expr:href='data:post.url' title='permanent link'><data:post.timestamp/></a>
      <!-- Fixed for display post update time -->
      <b:if cond='data:blog.pageType == &quot;item&quot;'>
        <script expr:src='&quot;/feeds/posts/default/&quot; + data:post.id + &quot;?alt=json-in-script&amp;callback=showPostUpdateTime&quot;' type='text/javascript'/>
      </b:if>
    </b:if>
  </b:if>
</span>

那個 if 的判斷句就是檢查是不是「顯示文章全文」的狀態,如果到處都想看到「更新時間」,那麼把該 if 判斷拿掉就行了。

會想加這項資訊,主要也是想標示文章最後的更新時間,自己在整理筆記時,才知道上次更新的時間,閱讀時也能知道這篇是不是 Po 完就沒動過的舊文章,對於值得一看再看或會修改的文章,這項資訊很有參考價值,對於愛 Po 流水帳、或是 Po 完連自己都不一定會再看的 Blog 來說,這項功能就完全用不到囉~

回應: 23

 

2009-03-12

LinkStation 的升級 Part2: 支援 SATA 硬碟

沒想到從 Part1 到 Part2 的發文中間隔了快兩年...XD~從前一篇 Part1 文章可以知道拆開 LinkStation 的詳細步驟,透過這些動作可以直接把原先 LinkStation 裡的「IDE」硬碟換成大容量的新硬碟,不過從市場趨勢來看,原來 LinkStation 裡使用的 IDE 介面硬碟漸漸消失,新出的大容量硬碟都是 SATA 介面的(就是從針腳的介面變成像金手指的介面),而 IDE 市面上買得到最大也只到 500GB,SATA 卻已經來到其四倍的 2TB (2000GB) 啦!為了 LinkStation 的未來,讓 LinkStation 能支援到 SATA 硬碟就非常重要了。不過這個動作不像軟體改機那麼簡單,這需要一個 SATA -> IDE 介面轉換的硬體轉接板,熟悉零組件的人應該知道這類轉板到處都有賣,不過那大多是給電腦用的,對寸土寸金的 LinkStation 小機殼來講,這類轉板就算能用,但也塞不進機殼裡啊!所幸和 LinkStation 同門師兄弟的 Kurobox 有推出其專用的 SATA/IDE 轉板,經測試回報在 LinkStation 上也能用,雖然台灣買不到,但最後還是透過「代購」的辦法請「神蹟兄」幫忙,這才入手這張玄人志向Kuro-SATA

買回來後苦無硬碟測試(其實是懶惰)、加上大容量硬碟價格居高不下,所以這張轉板擺在家裏生灰塵了一段時間,直到最近購入 1TB 的 SATA 硬碟,這才動手安裝使用。拆開 LinkStation 的步驟仍請參考 Part1 的文章,等硬碟安裝好再上轉接板、復原接線就大功告成啦!這個轉板的好處是不用掛啥驅動程式,裝上去硬體重頭到尾還是以為它只是個「IDE」硬碟(所以 Device ID 仍是 hda,不會變成 sda),除了拆機上轉板外,使用上和一般 IDE 硬碟無異,所以其他軟體改機步驟都不會受到影響。

之前也有人問到,到底其他 IDE 轉 SATA 的轉板到底在 LinkStation 上能不能用,除了有勇者回報他買了 Uptech 最後宣告失敗的經驗,好像大多人沒有概念有什麼困難。我以坊間看到應該是最小了的轉接卡做例子,下面用是 Uptech UTN620 轉接板將 SATA 硬碟接上 IDE 排線的樣子(原圖引用自 Roch's Blog 的這篇文章:IDE轉 SATA,Uptech UTN620/630 介面轉換器介紹):

關鍵點在那個 IDE 插座是往後的,LinkStation 上了硬碟的空間很小,小到連那個插座都快塞不下,更別說要把排線和電源接上去了,所以光看這張圖應該想像得到,一般這類介面卡除非特別設計,不然一定是不行的。反觀玄人志向的 Kuro-SATA,介面卡長這樣:

IDE 插座是往上的,電源插座還特別突出來往後!這樣就可以解決問題了嗎?請看實際安裝的樣子:

左圖是上轉接板前,右圖是上轉接板後

從左圖看來,硬碟在接排線前,機殼的空間就小到只塞得下一小片電路板,別說排線了,電容電阻大顆一點都可能卡到。而經過「客制化」的 Kuro-SATA 有特別調整過,專門給 Kurobox 或 LinkStation 使用,因此也應該只有這款「專用」的轉接板,才能應付讓 LinkStation 能支援 SATA 介面的硬碟。所以有這等考量、還想 Try 其他轉板的人,不要掙扎了,趕緊想辦法去找人代購 Kuro-SATA 吧,哪天轉板停賣、又找不到合用的 IDE 硬碟時,才不會欲哭無淚、讓 LinkStation 「巧婦難為無米之炊」啊~(我不是業代、也沒有幫忙代購啦,只是這篇和 LinkStation Hack 有關,想說網路上也沒有類似的中文文章,所以特別記錄下來,有興趣的自己去找神蹟大、或是其他日本代購的賣家~)

回應: 12

 

2009-03-08

起死回生的 LinkStation (via JTAG)

話說之前買了個 1TB 的 WD 硬碟,加上請人代購的 SATA 套件,目的就是為了讓我的 NAS - LinkStation 能夠上更大的容量,經過幾次測試發現沒問題後,打算重灌、讓我新的 1TB 硬碟走馬上任,無奈手賤,看到網路上有提到一個超棒神奇的 ROM:U-boot(LinkStation 的 Firmware 是放在硬碟上,而 ROM 裡面有基本的 Boot Loader,即便硬碟壞了也可以透過 ROM 開機來修復重灌,這個 U-boot 的作用就是提昇原廠 ROM 的功能),可以塞到原廠 ROM 的前面當 Boot Loader、讓使用者能靠按電源鍵來決定哪個開機區(不用再手動 swaphd),也可以在重刷的過程一併將原廠的 ROM 換成有 Telnet 功能的方便維修。抱著戒慎恐懼的心態想來試刷看看,沒想到才跑第一個步驟,馬上出現我看不懂的錯誤訊息,關機重開後,機器就送給我最害怕的 Diag 燈連閃五下:Flash memory error (不同閃燈數量代表的意義可以參考這篇文章)!死了!ROM 刷壞哩(明明就連第一個步驟都還沒開始哩,它告訴我空間不足啊),這個可不是我能解決的狀況啊!一失足成千古恨,難道我服役兩年半 NAS 從此就變成磚塊 (Brick,這個字現在已經也可以做「動詞」了),之前買來升級的套件和硬碟都用不著了嗎?

訪查網路的文章,據說這個情況發生,除了送回原廠(但早就過保固啦),唯一的手段就是上 JTAG (Joint Test Action Group)。透過在電路板上焊幾隻針腳做一個連接埠,用這個連接埠與電腦連線,藉由和晶片的直接溝通 (Daisy Chain),就可以進行電路除錯、訊號資料傳送和維修的動作。以上都是從維基百科上查來的,我只是個小文組,電工的知識一點都沒有,這輩子也沒用過電烙鐵,就算以上動作再簡單,對我來說都是難如登天(更何況,並沒有那麼簡單),還好在網路上找到有維修 LinkStation 的賣家(翔工坊),不只是單純幫忙改機,連搞 JTAG 都有經驗,我二話不說就快遞機器給他處理了!

根據賣家告知的流程,基本上就是先在板子上焊一組 2x8 的針腳頭,當作 JTAG Port,然後做一張 JTAG 的 Cable(用來把針腳轉 Printer Port,裡面還有塊電路板),透過這條線連接機板和電腦,以及 JTAG Software,就可以下命令送資料進 ROM 裡重刷資料(用講的比較簡單)!以下整理搞 JTAG 的步驟以及相關的資料,如果有錯可以糾正我,但有細節問題要問我就沒法回答啦(因為沒親手做過):

步驟一:先焊上 JTAG Port (照片是我被焊過的機板,正面和反面)

請參考這兩篇:Install a JTAG Port, Add Jtag Port,主要是交待每個針腳的意義。

步驟二:自己做一塊 JTAG,像下面這樣的東西:

參考這一篇文章:Building a JTAG Interface ,或是參考上面那篇,去買一條現成的 Cable,像這樣:

步驟三:連接電腦和機板(電腦還要有 Printer Port,或透過轉接),透過 JTAG Software (Openwince),準備對應的 u-boot.bin (如果要上 U-boot 的話)和 Firmimg.bin(Linux Initrds, 原廠 ROM 含 Telent 的,3 MB),以及相關命令,開始刷(據說要很久)!
參考這一篇文章:Building and using Openwince's JTAG Tools

步驟四:刷完重開測試。如果有裝 U-boot,可以用 Net Cat 監看開機過程。
參考文章:NetCat-A UBoot-Friendly Network Utility

幫我維修的賣家直接幫我先上 U-boot,然後再刷上原廠內含 Telnet 的 ROM (firmimg.bin),哇!這就是原先我手賤想要「升級」的狀態啊!東西塞進 ROM 後,除非硬體故障、或哪天又手賤去動 ROM(我不敢了),基本上這樣的 LinkStation 就所向無敵啦!想要從那個分割區開機,只要搭配 Power 鍵按幾下就行,如果想用新硬碟、或是不小心硬碟掛了,隨時都可以進到 EM (Emergency Mode) ,看是要重灌原廠韌體(從新分割區做起)、還是要 Telnet 進 EM 模式檢查和維修,這樣再也不用擔心要拆機器或搞壞啦!(希望自己和大家都不需要用到這篇筆記的動作....)

回應: 28

 

2009-03-05

增加文章留言回應的編號 (Show Comment Index)

習慣透過 Blog 和「讀者」溝通交流的人,應該會發現 Blogger 的留言回應少了一個很重要的參考,那就是留言的「順序編號」。雖說這個編號是流水號,但這個有順序的編號對某些人氣很高的 Blog 來說,代表了讀者留言的前後關係,有的粉絲會盯著作者發表或更新文章,透過搶第一個留言的方式來表達熱情,什麼搶「頭香」「沙發」之類的,雖然這種行為沒啥意義,但還是一堆人樂此不疲。當留言少、一眼整頁就能看完的時候,其實編號的意義並不大,但留言一多,其中還有鄉民在發問(偏偏一堆人不愛看其他人的留言或回應),如果要針對特定一篇留言討論(「五樓」?!),或告知答案在的第幾篇回應中,沒有這個編號就很麻煩了(雖然編號會因為中間留言刪除而改變,但雖不中亦不遠矣)。又不少鄉民愛用「幾樓」來指定特定的第幾篇留言,如果不在留言上打上「樓層編號」,留言在管理和討論上實在也很不方便,難不成要讀者一篇篇用手數嗎?

當然這個問題不少人也有發現(追根究底是 Blogger 的樣板語言裡,有迴圈語法卻沒有顯示迴圈 Index 的變數),既然如此,那只好手動塞 Javascript 程式在該迴圈外和迴圈內,單純做個計數器就能夠搞定,不過坊間的改法看起來比較不友善,因此這裡用比較簡單的方式來處理這個問題(鄉民們也比較容易剪貼來用)。

首先定義這個回應編號計數器的宣告和計算。登入管理介面,切到版面配置、修改 HTML 樣板原始碼(要展開小程式範本),在程式碼 <head> 區段內(</b:skin> 標籤後、</head> 標籤前),塞入以下 Javascript 程式:

<script type='text/javascript'>
//<![CDATA[
<!-- Function used for generating the index number for each post: ShowCommentIndex() -->
var CommentIndex = 0, CommentPostID = '';
function ShowCommentIndex(PostID) {
  if (CommentPostID != PostID) {
    CommentIndex = 0;
    CommentPostID = PostID;
  }
  document.write(++CommentIndex);
}
//]]>    
</script>

接下來決定在留言內,要顯示回應編號的位置。基本上只要放在產生所有留言的迴圈「後面」就行了,那一行是:

<b:loop values='data:post.comments' var='comment'>

舉例,我把留言編號放在該篇留言的最後面 (comment-footer 區段裡、留言的時間後面,如同上面的例圖一樣),顯示編號的程式碼放的位置和內容如下:

<dd class='comment-footer'>
   <span class='comment-timestamp'>
     @ <a expr:href='data:comment.url' title='comment permalink'>
       <data:comment.timestamp/>
     </a>
     <b:include data='comment' name='commentDeleteIcon'/>
   </span>
   <!-- Fixed for display comment index -->
   | <data:commentLabel/> #
   <script type='text/javascript'>
     ShowCommentIndex(&#39;<data:post.id/>&#39;);
   </script>
</dd>

其實新加的關鍵是上面的倒數第六行到倒數第二行,如果編號想顯示在別的地方,請自行變更那五行的位置就行了(想改字型大小、顏色或靠哪一邊,請自己定義那一段的 CSS 樣式)。

和別人不一樣的是,程式碼裡我多加了 Post ID 的判斷,因為那個計數器變數 (CommentIndex) 是全域變數,如果有其他模組「同時」要用這個函式,只要不要交叉呼叫,基本上同一個頁面不同的文章也可以產生正確的留言編號。對像我一樣用一堆 Hack 的人來說,算是多做一點檢查和判斷,以避免重複呼叫產生編號錯亂的情況~

回應: 31

 

2009-02-19

Blogger 和 Picasa 的圖片上傳和外連限制

好久沒 Po 文了,這次來整理一下 Blogger 和 Picasa 對圖片上傳的限制和處理方法吧!大家都喜歡看「圖文並茂」的文章,尤其是 Blog,於是乎大部分 BSP 系統都會有其後端的圖片上傳和文章連結的機制,舉凡無名小站痞客幫都有,不過我覺得弔詭的是,難道 Blog 文章會放的「圖」,都一定只有「照片」嗎?一般 BSP 搞的都是「相簿」+「Blog」,那像寫些其他的文章,需要貼些 Logo 和插圖,這些只有一兩張、只和文章有關的小圖片,是要怎麼分類、放在哪個「相簿」哩?扣掉直接盜連的作法,也有人放在免費的「圖床」,但這些「圖床」在管理和保留上都有不少限制,沒人希望哪天看到文章圖片的部份都變成「叉燒包」的失效連結吧!所幸 Blogger 的圖片管理方式,雖還是結合 Picasa 網路相簿,但只要透過 Blogger 的圖片上傳介面來嵌入文章用圖,它會在網路相簿裡自動建立一個給該 Blog 專用不公開的「相簿」,方便管理和保存 Blog 用到的所有圖片(這一點之前也提過),於是乎,我 Blog 用的圖片、偷來的照片,就可以「專門」放在 Blogger -> Picasa 的「圖床」,至於自己拍的「相片」,那就外連到 Flickr 那邊,算是把 Blog 圖片和網路相簿的照片分開管理。(Picasa 用得最好的典範,首推「索爾王」)

但也因為這樣,有時候寫 Blog 需要的圖片,透過 Blogger 後台上傳到 Picasa 後常會有些疑問,像圖片上傳後會被自動「縮圖」、Blogger 也會自動產生一些 HTML code 方便顯示圖片和連結原始檔,偏偏這些自動的東西不一定合用啊,因為嵌入文章的圖片大小會影響版面的排列,一旦無法掌握,文章的圖文排版就會不如預期,而插圖,也不一定需要連結(尤其是連結到原始圖)。經過幾個測試,終於把規則找出來了(線上 Help 也都沒提到),在這就順便紀錄下來。

首先,上面是 Blogger 上傳圖片的介面,不管你上傳的圖片多大多小,也只有三個選項:「小」「中」「大」,看到這些選項,使用者根本不知道待會上傳的圖片會變成多大?是原圖大小,還是被縮成多小?原來,這三種縮圖 Size 代表的是三種解析度限制,分別是 200 (小)、320 (中)、400 (大),但為了不破壞圖樣比例,它會以較長的那邊做等比例縮小。例如假設一張 800x600 的原圖被上傳、選擇圖片大小為「中」,那麼文章裡被嵌入的會變成一張 320x240 的圖片(把長邊 800 縮到 320 中等圖片的上限,短邊 600 等比例就變成 240 啦),知道圖的大小,才能知道該圖片的安排了(看是要文繞圖、靠左靠右還是置中)!之前也有網友發問,說為什麼自己上傳用數位相機拍的照片(N 百萬像素),貼到 Blog 後變好小?因為根據限制版面最長或最寬就 400 pixels (「大」,400x400 相當於十六萬像素),當然照片的細節就看不清楚啦!除非點到該照片、開新頁面連到該照片的「原始圖檔」,不然在文章裡最大就 400x400 啦!因此,如果你打算放張更大的圖,很抱歉,預設 Blogger 的上傳介面不允許(但,還是有手動的方法,請容後述),如果就只要插入一張 400 pixels 以下的圖檔,乾脆自己先縮圖再上傳,一方面比較快、另一方面也比較不會浪費網路相簿的總容量空間(目前 Picasa 提供的免費空間總共有 1024 MB,也就是只有 1 GB,放「照片」應該是很不夠,但放 Blog 的小圖應該綽綽有餘,可以在這個頁面查詢使用狀況,視需要還可以花錢升級)。原來在 Picasa 裡是限制單張圖最大 20 MB(或五千萬像素),Blogger 卻只允許最大 8 MB,這裡也看得出來並不鼓勵你在 Blog 上塞大圖,其實 Blog 文章重點應該是在「文字」,圖片和照片算是「點綴插花」,量太多不但拖慢大家瀏覽的速度(有興趣的自己會去點大圖看細節、或直接瀏覽網路相簿)、浪費頻寬,只看圖也會讓讀者對文字失去焦點,自己點網路相簿看圖說故事不就行啦!

上面之所以建議「自己先縮圖」,好處當然是自己也能掌握縮圖的品質,上傳到 Picasa 的圖片品質並不會縮水,但經過自動縮圖後結果可能會遠不如預期(同一張 JPEG 圖檔縮到一樣解析度,也可能因為取樣方法導致檔案大小和品質相差甚大),讓你本來打算給人家看到的細節反倒模糊了。圖檔最好是用全彩的 PNG 或 BMP 格式(但檔案較大、很舊的 IE 還不支援 XD),選 GIF 只能有 256 色,JPEG 檔則是最常用的格式,但 JPEG 縮圖很容易讓細節一整個糊掉出現格子,所以自己縮圖時除了大小,格式品質也要注意。

最後提到的是圖片外連的問題。假設用 Blogger 上傳一張圖片,在文章 HTML 原始碼會出現像下面的一段程式碼:

<a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh7NWKy6RYo98EW38YSaob_JFIWxSvMNmqh82kPc4GJmATPtqx-DQa_5mPBjwbXvJgSQEGVxHvtyDMPKb-dyaojAYsZE0IvjTp02hfSZBhjZ3jJ966XtzbVLMf7UKMTGmCpbe6s-upQWtd1/s1600-h/BloggerUpload.png">
<img style="cursor:pointer; cursor:hand;width: 400px; height: 216px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh7NWKy6RYo98EW38YSaob_JFIWxSvMNmqh82kPc4GJmATPtqx-DQa_5mPBjwbXvJgSQEGVxHvtyDMPKb-dyaojAYsZE0IvjTp02hfSZBhjZ3jJ966XtzbVLMf7UKMTGmCpbe6s-upQWtd1/s400/BloggerUpload.png" border="0" alt=""id="BLOGGER_PHOTO_ID_5304446511228360850" />
</a>

除了一些特效和 CSS 外,原始碼主要包含一個連結網址 (<a href=""></a>)、和實際顯示的圖片語法 (<img src="" />,像上面說的,最大就 400 pixels)。連結網址會幫你 redirect 到原始大圖的網頁,但如果直接把這個網址貼到文章裡面,該大圖在文章內是出不來的(注意看一下,這邊的連結網址是 blogspot.com 的)!硬要嵌大於 400 pixels 的圖檔在文章裡,又想透過 Blogger 來管理和上傳,這時候只要在圖片上傳後、手動修改文章內文被插入的程式碼,就可以自行決定圖片顯示的大小囉!熟悉 HTML 的人應該知道,<img> 標籤是用來顯示圖片的語法,分析上面這段自動產生的程式碼,裡面有原始圖檔的連結網址:

http://2.bp.blogspot.com/_mDXx3vcmH6Q/SZ0t_2_TmJI/AAAAAAAACGc/AH8SDDj-le4/s1600-h/BloggerUpload.png

以及縮圖後的圖片網址:

http://2.bp.blogspot.com/_mDXx3vcmH6Q/SZ0t_2_TmJI/AAAAAAAACGc/AH8SDDj-le4/s400/BloggerUpload.png

看出差異了嗎?其實網址幾乎一模一樣,只差在「檔名」的前面,多了一個標示解析度的「路徑」,由於上面範例上傳的是用「大」圖片、於是解析度會被限制在 400 pixels,因此路徑是 /s400!所以假設是要貼大圖、不需連結和啥 CSS,上面那一大段只要替換成:

<img src="http://2.bp.blogspot.com/_mDXx3vcmH6Q/SZ0t_2_TmJI/AAAAAAAACGc/AH8SDDj-le4/s800/BloggerUpload.png" border="0"/>

就拿掉不必要的 CSS 和註解、指定顯示的大小,大圖就出得來啦(如果不指定顯示大小,也就是沒有那個路徑,感覺應該就是原始圖,但有時候外連會怪怪的顯示出不來)!其實那個路徑就是 Picasa 相簿處理縮圖的關鍵,假設不打算自己縮圖,又想用各種不同尺寸的圖片大小,只要手動調整那個路徑名稱,改成像是 /s144, /s288, /s400, /s800, 甚至更大的 /s1024, /s1440, /s1600,或直接拿掉路徑用原始圖的解析度大小,就可以任意決定 Blogger 文章裡面的圖片大小(當然那個「值」並不是任意值,但至少上面提到過的解析度都應該有,如果大於原圖的解析度,就相當是顯示原始圖啦)!不過請注意,原始圖檔的連結網址有個 /s1600-h,我懷疑 -h 是阻止嵌入文章外連的語法,詭異的是直接開啟網址卻能夠使用,可能也是類似 redirect 的作法吧!要嵌入文章使用的圖片記得避開 -h 就行了。

另外,當然也可以直接跑到 Picasa 裡找該圖片的網址,再把該網址嵌入文章內也有一樣的效果(當然這樣比較累),同樣的,Picasa 也能用上面提到的「以路徑決定縮圖解析度」的規則,雖然圖片網址和在 Blogger 顯示出來的伺服器好像不大一樣(網址變到 ggpht.com),但指的應該是同一張圖片,例如上面提到的大圖網址,在 Picasa 裡面就變成:

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh7NWKy6RYo98EW38YSaob_JFIWxSvMNmqh82kPc4GJmATPtqx-DQa_5mPBjwbXvJgSQEGVxHvtyDMPKb-dyaojAYsZE0IvjTp02hfSZBhjZ3jJ966XtzbVLMf7UKMTGmCpbe6s-upQWtd1/s800/BloggerUpload.png

知道這個規則後,相信結合 Blogger 和 Picasa 來處理 Blog 文章內的插圖,就能更得心應手吧!(本文上面貼的圖,就是手動修改原始碼做的,所以圖片寬度能夠超過 640 pixels~以上範例也都是用那張圖上傳後的網址和程式碼貼過來的~)

回應: 14