開站文

新家新開始，總之開站大吉，還望生意興隆、萬事勝意!

開新站總得寫篇開站文，不過本blog的介紹、搬家的原因還有一些自以為感性的東西都寫在導讀文裡了，這篇就不再重覆，改為寫一下開站的各樣準備工夫好了。

自決定要搬家後便一直在尋找合用的blog提供者，條件是不用內地提供的如QQ、Blogbus，另要求內地翻牆的朋友能夠正常留言。先後研究過新浪、fc2和blogspot；不過看到近來似乎不少blogger都遷離新浪，加上我也不太喜歡新浪的後台界面，也就放棄了。至於blogspot因為是google旗下的服務，我這半個google fans對其早己心動；到後來有內地網友幫忙測試過blogspot可以正常留言後，就馬上決定選用了。


以為選好了部落，一切塵埃落定　－　豈料事實完全相反，戰鬥現在才正式開始!

作為一個blog，blogspot的功能實在非常的user-unfriendly。blog的基本功能最新文章、最新回覆、文章分類、置頂文章等全部欠奉；上網爬過一下文，貌似是網站格式不同，什麼html之類，總之一堆看不懂專有名詞，反正沒有就是沒有。不過相對的這也是blogspot的最大優勢，就是自由度很大，雖然不像其他blog那樣方便，但這些「本來沒有」的功能也可以透過blogspot提供的或是自行編寫的小工具來實現；版面佈置也可以透過修改html碼來造出各種各樣效果。

當然我這種一般用家根本沒有自行編寫html和java script的能力，css也僅是懂得字型等幾個最基本的語法。幸好，我不行，網路上有很多技術技術高超的大大分享他們的知識；於是我每需要添加一項功能或做一樣修改時便google一次，花了幾天時間，總算將現在這個面版做出來。


順道介紹一下我用的小工具和我對小工具所作的修改吧。



最新文章和最新留言：
這是我第一個發現的問題；其實google已經有相應的小工具可以使用，但有兩個問題，首先是讀取速度非常慢，第二是不知道欄高應該設多少...在網上找了一下發現有相當多的模版，試過幾個版本後最後決定使用abin大大提供的模版，簡潔又美觀。
最厲害的是這個模版是翻頁式的!可以在同一個欄位內翻頁查看較舊的文章和留言，強力無比!

最新文章模組「終極版」 - Abin's Tech Note
http://abintech.twidv.com/2008/01/blog-post.html

「最新回應」模組 (Recent Comments) - Abin's Tech Note
http://abintech.twidv.com/2008/01/recent-comments.html


以trial and error的方式對小工具的文字格式做了點改動，如最新文章，原本的顯示方式是文章標題-作者-日期；我以嘗試的方式加了個分行的代碼<br>進去，沒料到成功了...現在感覺挺順眼，暫不再作改動了。



階層式文章分類：
這個是我很糾結的問題；blogspot上面沒有文章功能，雖然有功能相近的「標籤」，但是blogspot提供的標籤工具沒法做到目錄式的層次效果，如我舊站上的：樂評空間-->M3-29；幸好在Gormit大大的blog上找到相應工具，除了目錄以外還可以展開收合，非常好用，對文章分類有要求的人可以研究一下。

Blogger 文章分類工具 (第二版) - Gormit's 原型製作
http://gormit-gk.blogspot.com/2010/01/blog-post_24.html



友情連結：
這個我就沿用了blogspot提供的工具，畢竟對這個欄位的要求不多，要加以分類的話另建一個工具改個名稱就好。不過我很在意的地方是預設的連結不會另開新視窗而是在原視窗開啟，這點我覺得十分不便，畢竟連去另一個網站的話還是另開新頁會方便些(雖然我平常都用mouse3鍵來操作，但始終應該如此設定嘛)。

這倒沒有直接在google搜尋得到答案，嗯，我也知道是有點芝麻綠豆...倒是在google上搜到blogger用「在新視窗開啟連結」的code為target='_blank'(以前在xuite編輯文章的html code時代碼是 target="_blank"，雙引號換成單引號，真個氣死)。

修改方法是管理後台-->範本，先備份你目前的範本，然後點修改html，鉤選左上角的「展開小裝置範本」，再找到連結的小工具代碼(利用ctrl+f輸入你的小工具名稱可輕易找到)，我的如下：

<b:widget id='LinkList1' locked='false' title='友情連結' type='LinkList'>
<b:includable id='main'>
<b:if cond='data:title'><h2><data:title/></h2></b:if>
 <div class='widget-content'>
   <ul>
     <b:loop values='data:links' var='link'>
       <li><a expr:href='data:link.target' target='_blank'><data:link.name/></a></li>
     </b:loop>
   </ul>
  </div>
</b:includable>
</b:widget>

紅色的部分原本應為<a expr:href='data:link.target'>，將target='_blank'如上面所示添加進去，然後保存就行了。



版面計設：
預設範本採用了「簡單」；我向來都是個簡約主義者，除連結以外皆用上灰階色調(其實只是自己懶得去弄設計和配色)。

沿用了舊站的logo。這裡要說明一下，其實我不是特別喜歡電磁炮，應該說連喜歡都算不上，只有看過她的漫畫...這logo是當年電磁炮圖盛極一時的時候貪好玩作出來的，而多年後的現在我仍然是個平面藝術白痴，沒法自行設計logo，也就只好一直用下去...

整個版頭是一張圖片，在PS用五分鐘做成。字型很美，我很喜歡。

下面的nevigation bar我覺得很好用，有什麼想置頂的都可以放上去。

文章字型暫定16px新細明體，行高1.8，暫時看起來還好，想要的時候再修改吧。



側欄字型及邊界：
可能是在xuite上看慣了，我個人喜歡在側欄用較小的字型；可是blogger提供的範本設計工具沒法讓我獨立修改側欄字型(至少我現在的範本不行)；在google找一找看到這篇文章：

Changing the sidebar font ~ the original Blogger Tips and Tricks
http://www.bloggertipsandtricks.com/2007/05/changing-sidebar-font.html


文章的指示是先在html範本內找到以下這段code：

.sidebar {
color: $textColor;
line-height:1.3em;
}

不過在我的範本內完全找不到這麼一段orz

於是我又是抱著一試的心態自行將這段想要的字型的code加到/* Content*/去：

.sidebar {
line-height:1.3em;
font-family:  Arial, 新細明體;
font-size: 12px;
font-weight: 100;
}

沒想到居然成功了(汗)。
於是再試試添加了一行看看能否修改邊界：

.sidebar {
line-height:1.3em;
font-family:  Arial, 新細明體;
font-size: 12px;
font-weight: 100;
margin-right: -25px;
}

居然又成功了(大汗)

然後我試著修改左欄的邊界，因為原來的留白的邊界太多了我自己看著不舒服；在trail and error後終於找對位置，把各個邊界改動一下，現在我看著覺得挺順眼，當然你要是不同意我的審美觀的話我就只能說句抱歉了orz



移除快速編輯小圖示：
最後是每個小工具旁邊的快速編輯小圖示實在太礙眼，想著能不能拿掉，在google找一下發現居然可以：

移除工具(快速編輯)小圖示 - Inos Os
http://inosos.blogspot.com/2009/02/blog-post_6985.html


本blog的排版大概就這樣了。


一下子發現自己已不知扯到多遠去了。
嗯，總之還是那句開站大吉，以後請多多指教。