2008-06-23

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

Blogger Logo緣起
我喜歡在網路上寫寫自己的程式心得,以及一些小文章。就某種程度來說,這應該也算是一種知識管理吧!之前有個個人網站就貼個人網站上,但是因為覺得只是寫寫東西,還要維護一整個網站的程式,簡直就像為了喝牛奶而要養一頭牛一般,所以後來因為一直有在用 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
  1. 它有支援各式各樣的語言樣式,為防止零散,與管理方便,我把會用到的通通包進同一個 JS 檔案。
  2. 然後找個空間,把附加檔案通通丟進去,然後在樣版裡加上相關的引入。


    <link href='http://CSS 檔案放置的網址/blogSH.css' rel='stylesheet' type='text/css'/>
    <script src='http://JS 檔案放置的網址/blogSH.js' type='text/javascript'/>
  3. 在文章中程式碼區塊,用相對標籤夾起來,就變底下這樣:

    <pre class="程式語言代碼" name="code">
    程式碼
    </pre>
    用 PRE 的好處是,除了看上它衷於原味的呈現,一方面不會因為用其它 Reader 發生預期外的狀況。
  4. 如果有其它 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)。
  1. 首先要定義的就是 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;
    }
  2. 然後,在文章裡就能使用嚕,最基本型:
    這是最陽春的,直接用 code 標籤包夾住即可。

    效果這樣,呈現最基本的 CSS 定義,
    其他都可以在這裡面,十分單純但是便利。

  3. 再來看看衍伸變化型:
    用 class 來指定套用的子類型。
    效果這樣,呈現 code.cmd 的 CSS 定義。
  4. 舉一反三,可以自訂自己的標籤及子類別,讓自己的自訂標籤很有型。
  5. 對了,CSS 的繼承,是一門藝術。



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

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

1 回應 :

我想學右邊的文章分類..可以教我嗎?謝謝!

pat922@gmail.com 夏夏

張貼留言

讓阿布知道你對這篇文章的想法吧!

 
本站係採用創用 CC 姓名標示-非商業性-禁止改作 2.5 台灣 授權條款授權