利用部落格來架設屬於自己的書籤資料庫網站---製作篇

上次談完如何利用部落格來架設屬於自己的書籤資料庫網站的概念，接下來就要分享怎樣把部落格變成網站的形式，架設屬於自己的書籤網路連結資料庫。

通常網站的功能是介紹某項主題的資訊或是詳細內容服務，與讀者的互動通常都是透過email來連絡，或是留下聯絡電話或是住址，跟部落格有著和讀者互動的及時性與可親性很不同，所以近幾年來部落格才會發展的如此迅速。

而我們用部落格來架設網站，因為不需要有留言迴響或是文章列表等服務，所以在後台可以把這些元件給隱藏起來或是刪除，但綸太郎不建議刪除相關的html架構，因為有可能官方修改模板架構，或是你想改模板時會造成適用的困難度，所以還是建議用隱藏的方式。


以下是以Protonema Blogger Template這個模板來說明，可分三大部分：

【部落格基本設定】
1、 關閉留言機制，不開放留言
後台→設定→意見，設為隱藏，還有反向連結也設為隱藏
2、 關閉RSS，讀者訂閱(這部份可彈性運用)
後台→設定→網站提供→允許網誌資訊提供，設為"無"，為什麼說彈性，這是因為以我的部落格而言還有分頁的選項，以後還會更新延伸的分類，所以目前我是保留。
3、 隱藏網誌文章的相關選項
這有兩個做法，第一個從後台設定部份來執行，比較簡單，後台→網頁元素→把網誌文章的部份打開，所有的選項都不選取，這樣就都不會顯示了。



【CSS定義方面】
如何隱藏呢？最常利用到的就是dispay: none; 及 height:0;這兩個敘述。
1、如果上述第3項，隱藏了作者、分類、日期、留言等有關post-footer的部份，也可以在CSS部分找到相關的定義，用display: none;來設定亦可。

h2.date-header{ display:none; /*文章日期*/
.post-author{ display: none; /*作者名稱*/
.post-labels { display:none; /*文章分類*/
.post-comment-link { display:none; /*意見連結*/
.post-timestamp { display:none; /*發表時間*/
甚至.post-footer{ display:none; /*文章頁尾*/都可以整個隱藏起來

2、回到首頁、較新或較新的文章、及訂閱的連結

#blog-pager-newer-link { display:none; /*較新的文章*/
#blog-pager-older-link { display:none; /*較舊的文章*/
#blog-pager { display:none; /*回到首頁*/
.feed-links { display:none; /*訂閱連結*/

【元件只在首頁顯示】
如果你的網頁只有一頁，這部份可以跳過，由於我這個網頁無法放入所有我蒐集的連結，除了日本全國的資料，我還分為東京、關西、九州三大部分，所以勢必會出現單篇文章的延伸頁面，單篇文章的文章區和主頁的不同，主頁只有短短二行字，單篇頁面如果在放上和主頁相同的小工具，勢必會將整個版面往下推擠，整個版面會變得很難看，所以單篇文章的頁面，儘量維持主頁面和兩邊的工具欄維持同一直線的配置。

例如文章區下方我放了七個小工具，而在單篇文章頁面我只有出現兩個小工具，這是怎樣做到的，

以下是主結構圖，


單篇文章下方只有兩個小工具，


如果你想讓元件只出現在首頁，不在單篇文章出現，

後台→網頁元素→修改Html，展開小裝置範本，找到該元件的html架構區，我以流行雜誌這一個區塊為例，
找到流行雜誌，這個元件定義是Html17，然後在
<b:widget id='HTML17' locked='false' title='流行雜誌' type='HTML'>
<b:includable id='main'>
下面放入這行程式碼
<b:if cond='data:blog.pageType != &quot;item&quot;'>
再找到下面一點點的
</b:includable>
</b:widget>
在上面放入
</b:if>
這個敘述，那流行雜誌這個元件就不會出現在單篇文章，而只會出現在首頁。
類似以下的圖


這樣大致就可以完成整個書籤部落格網誌的配置，至於用表格製作的書籤，我是利用Google文件製作的，再放到部落格的小工具裏。

另外還有一個小技巧，我的首頁文章，
歡迎來到這個部落格!!，原來的連結應該會是
http://japanplay.blogspot.com/2009/11/article.html
但我還是要讓他連到首頁，這時我們在編輯文章時，文章標題區下方有個連結，我們讓他指向首頁，設成
http://japanplay.blogspot.com/
這樣即可，如果發現你的修改文章區沒有這行，到後台的設定→格式→顯示連結欄位，把它設定為是，就會出現了。


還有不同元件背景及文字顏色不同，我是利用新增小工具，直接寫入語法，而非在像以前在後台編輯，這個做法可以不增加後台檔案的負擔，如果想移除元件時也不必修改Html的語法，這種作法綸太郎以前沒有介紹過，

例如橘色的時刻表查詢，


新增小工具，然後放入以下的語法，直接在小工具裏定義css語法，前後用<style type="text/css">
及</style>圍起來，後面再放入架構的語法。
<style type="text/css">
#orgmenu {
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEghcjnnUZeKNE9D1WMVldydneLI48TslnPwqXou7ZD32obuJr4VqT0YCLK1E4-RAtEr4N0SD_5RqpmLkb-xSS-f8nxU3siKHmhL3lVda6W37R5pK-gRvkt_UmjCu0esY_PVsQ912apcI2E/s1600/orengenmenu.jpg) no-repeat;
width:195px;
height:250px;
padding:5px;
}

#orgmenu ul{
list-style:none;
padding:10px 8px 0 8px;
}
#orgmenu li{
list-style:none;
display:block;
padding:5px 0;
}
#orgmenu li a{
list-style:none;
display:block;
color:#ffe991;
font-weight:bold;
text-transform:uppercase;
font-size:8pt;
text-decoration:none;
padding:0 5px 0 10px;
}
#orgmenu li a:hover{
color:#ff0000;
text-decoration:none;
}
#orgmenu li .current{
list-style:none;
display:block;
color:#fff;
font-weight:bold; text-transform:uppercase;
font-size:11px;
text-decoration:none;
padding:0 5px 0 25px;
}
#orgmenu li a.current, #orgmenu li a:hover.current{
color:#fff; text-decoration:none;
}
</style>
<div id="orgmenu">
<ul>
<li>項目內容></li>
<li>項目內容></li>
<li>項目內容></li>
</ul>
</div>

最後介紹有個小工具，很多人有興趣的就是分頁的Widget小工具，


程式碼的來源，一分鐘在Blogger加上Tab View分類欄 凱特打結該該叫，大家可以參考作者的語法，自己再修改內容就可使用了，相當的方便。

以上大致就是以部落格形式來架設網站的教學分享，這是我自己修改模板的經驗，部落格不只是可以天天寫寫文章，也可以利用這種架構來設立網站，或許還有更多不一樣的利用，如果有想到更多的Idea再跟大家分享囉。
延伸閱讀：
利用部落格來架設屬於自己的書籤資料庫網站---介紹篇