Blogger 打造紀實－舒適閱讀 (Alterations for Layout)

緣起
我喜歡在網路上寫寫自己的程式心得，以及一些小文章。就某種程度來說，這應該也算是一種知識管理吧！之前有個個人網站就貼個人網站上，但是因為覺得只是寫寫東西，還要維護一整個網站的程式，簡直就像為了喝牛奶而要養一頭牛一般，所以後來因為一直有在用 MSN，就寫到 MSN Space 去了，主要是因為方便性，點一下就到了，簡直就像作弊般的掛勾。但是，打從2006年底派駐到現在的單位後，駐點單位的資安政策嚴格，只要 MSN 相關服務及網站全部封鎖，雖然老碎唸著越沒本事的網管管越多，可是還是不得不另覓他處。

我對台灣的 BSP 實在沒有多大的好感，三不五時鬧上新聞版面的醜陋惡鬥，使用者集體搬遷或被迫搬遷的事情也是層出不窮。最後，會挑上 Blogger 主要也是因為它是 Google 的，至少 Google 是個錢多到到處亂灑亂花的公司，彼此的服務以及未來可能被買進來的服務整合發展性高，而且最好的是可以隨你高興的任意改動，有那個閒去整個重新打造也沒有問題，自由度極高，這也是網眾最常對它的評價吧。

來篇紀錄，算 Log 備忘一下，我在 Blogger 裡，做了什麼吧！

修改列表：
鋤草整地
語法高亮
版面調整
自訂標籤

鋤草整地：(20071208)
初來乍到，第一個礙眼的，就是那條 NavBar，底下這行可以迅速解除困擾：


/* ### 20071208 Hidden the NavBar  ### */
.navbar {visibility:hidden;display:none;}

再來就是修正在 IE 裡，文章列表中大小詭異到不行的倒三角形：


/* ### 20071212 Fix the IE triangle ### */
#ArchiveList .toggle-open {
  _font-size: 80% !important;
}

語法高亮：(20071210)
早看人家用語法高亮好生羨慕，首先要試驗出來的當然就是美美的語法高亮嚕。
看來看去挑上了 Google Syntax Highlighter。

它有支援各式各樣的語言樣式，為防止零散，與管理方便，我把會用到的通通包進同一個 JS 檔案。

然後找個空間，把附加檔案通通丟進去，然後在樣版裡加上相關的引入。



<link href='http://CSS 檔案放置的網址/blogSH.css' rel='stylesheet' type='text/css'/>
<script src='http://JS 檔案放置的網址/blogSH.js' type='text/javascript'/>

在文章中程式碼區塊，用相對標籤夾起來，就變底下這樣：
```
<pre class="程式語言代碼" name="code">
程式碼
</pre>
```
用 PRE 的好處是，除了看上它衷於原味的呈現，一方面不會因為用其它 Reader 發生預期外的狀況。
如果有其它 KeyWord / Function 要補充進高亮定義檔，只要去修改 JS 的內容即可。

版面調整：(20080610)
早年，我的教學網站算是台灣前幾個導入 CSS 技術的，在那個大家還在研究怎麼把內容擺進 table 的年代。當時一個讀者在我的網站上留言，說道，同樣是 CSS 技術，中文網站會找到自己的風格與調性的。幾年發展下來，CSS 技術普及了，搞到最後，字要多小有多小，版面要多擠就有多擠，但是一些最根本的東西，卻都給忘了，就是訪客閱覽的舒適度。CSS 導入的初衷，不就是要讓版型美美的讓人容易閱讀嗎？或許，某些部落客就是要讓訪客實際在眼前體會什麼是『資訊爆炸』的年代吧，還真是用心良苦…用心良苦啊…(笑)

當我搬了些舊文，跟寫了些東西之後，發現我所選版型瘦瘦的，再考量到我主要放的內容，實在是對頁面空間是很大的浪費，這樣長一點的程式碼不就沒地方伸伸腳了嗎…這個就從版面配置直接編輯 HTML 裡的 CSS 的相對應寬度定義就搞定了。


#outer-wrapper {
  width:980px;
...
  }
#main-wrap1 {
  width:800px;
...
}
#sidebar-wrap {
  width:175px;
...
}

變更樣板長寬，要付出的代價，就是所用到的背景圖檔，像欄邊圓角等，長寬大小也勢必得隨之調整。然後，在公司，圖不曉得是被卡在 Proxy 還是怎樣，全都出不來，就得在下載得到的地方一個一個抓下來，修改符合的長寬格式，再丟到比較傳統的取圖空間去。所謂的比較傳統，是相對於後來怕不當盜連，而改用吐圖程式而擋掉純粹 http 協定來取圖的方式來說的，嘖嘖，真繞舌。這樣，在大多數的情況下，那些背景圖，就可以正常呈現不會被啥鬼 Proxy 給攔截嚕！

然後，一樣用 CSS 的定義，去更改字體大小以得到最舒適的閱讀感。


/* ### 20080608 Font Size for ALL ### */
body {
...
  font-size: 11pt;
}
/* ### 20080608 Smaller Font Size for the link list of the side-bar ### */
.posts, .profile-link {
  font-size: 9pt;
}

自訂標籤：(20080711)
記得這東西最早被大量運用是在 phpBB 那個年代，一個 CMS platform 可以發展出自己的語法，也是神奇。雖然有了語法高亮，可是我始終找不到在那 Solution 下作一些重點強調，以及自訂樣式的方法，因為它會把那區塊中所有的樣式定義通通都當成程式碼來處理；困擾之餘，因而萌生導入更簡單更單純的引入方式的念頭，就想到這個年代久遠的技術－自訂標籤(User Defined Tags)。

首先要定義的就是 CSS 嚕：『code』就是我們拿來當作自訂標籤的標籤名稱。

/* ### 20080711 For Code Tag ### */
code {
  display: block;
  font-family: 'Courier New';
  font-size: 9pt;
  overflow: auto;
  border: 1px solid #ccc;
  padding: 10px 10px 10px 21px;
  margin-right: 10px;
  max-height: 1200px;
  line-height: 1.2em;
  letter-spacing: 0px;
  color: #000;
  background: #eee url("http://背景圖放置位址/背景圖檔檔名") left top repeat-y;
}
code.cmd {
  color: #ccc;
  background: #000 url("http://背景圖放置位址/背景圖檔檔名") left top repeat-y;
}

然後，在文章裡就能使用嚕，最基本型：
```
這是最陽春的，直接用 code 標籤包夾住即可。
```
效果像這樣，呈現最基本的 CSS 定義，其他都可以在這裡面自由發揮，十分單純但是便利。
再來看看衍伸變化型：
```
用 class 來指定套用的子類型。
```
效果像這樣，呈現 code.cmd 的 CSS 定義。
舉一反三，可以自訂自己的標籤及子類別，讓自己的自訂標籤很有型。
對了，CSS 的繼承，是一門藝術。

本來想在一篇寫完的，可是才介紹完版面的改造就落落長了，還是分幾篇來說吧！一方面也可以在日後增修的時候分門別類來記錄。介紹的順序似乎有點怪怪的，可是，我去年十二月偷偷來這落腳之初就搞定語法高亮了，到最近才稍有空閒來研究調整版面，就是這樣倒著做的，哈！

20080623 文章發佈。
20080801 更新加入『自訂標籤』。
20100523 Google Pages 已於 2009-06 停止服務，移除文章內相關說明。

2008-06-23