2006/05/11

D2B文章分類教學-(1)準備工作

Blogger是個彈性極大的Blog系統,但功能卻少的可憐,
其中最大的缺失應該就是沒有分類系統,
所以Blogger的使用者們一直努力尋找著替代方案,許多高手提出各式各樣的解法。
之前我是使用網路書籤來進行手動分類,我用的是del.icio.us
因為他提供的Tag roll非常方便,可以完全自訂。
唯一的遺憾是,按下分類後連結到的是del.icio.us提供的書籤網頁,
和我的不拉格沒有統一性,跟其他內建分類的Blog比就遜多啦~

終於,Delicious2Blogger出現了!

他的整合效果非常的驚人,跟無名等的分類已幾乎沒有差異了…
想先看看成果的人,可以試著點點看本站所暫時安裝完的成果,
細部調整還沒完成,不過已經很不錯了吧:)
原站已提供詳細的安裝說明,不過如果覺得英文太不親和,
以下是我嘗試寫的教學,請有耐心的一步一步做下去喔!

  • 首先,因為接下來會對範本做相當多的修改,為免一失足成千古恨,請先把範本全選複製後,用記事本存個備份吧!
  • 請先到del.icio.us申請一個您專屬的帳號,這是用來存放你的分類資訊的,請申請完後記住你的帳號。
  • 在你的Blogger中新增一篇文章,標題隨意,但內文請打上:

    <div id="del-container"></div>
    <!-- Write the Delicious Categories -->

    <script type="text/javascript">d2bWriteCat();</script>

    這篇文章將會成為你的分類頁,所以我們最好不要讓別人隨意就點到,請將他的日期調整到非常久以前的日期,重點是讓他可以獨立在一個Archive頁中,隱藏的方法以後會說明。另外也請將意見功能關閉,使這篇文章儘量簡潔。在按下發佈後,應該會顯示錯誤資訊,請將那個勾勾取消後重新發佈,應該就會成功。然後請到你的部落格中找到這篇文章和對應的封存頁,記下這兩頁的網址
  • 接下來,我們需要加入CSS資訊,請到你的範本頁尋找標籤</style>,找到後,請在緊臨的上一行加入以下文字:
    /* Delicious2Blogger CSS Styles
    ----------------------------------------------- */

    /* Delicious Tag Cloud Styles
    ----------------------------------------------- */
    #d2bCloud {font-family:arial,sans-serif;}
    #d2bCloud a img{border:0;display:inline;
    margin:0 0 0 3px;padding:0}
    #d2bCloud a{text-decoration:none}
    #d2bCloud a:hover{text-decoration:underline}
    #d2bCloud ul{list-style-type:none;margin:0 auto;
    padding:0; text-align:justify;}
    #d2bCloud .delicious-cloud li{
    display:inline;
    background-image:none !important;
    padding:0 2px;margin:0;
    vertical-align:baseline !important;
    border:0 !important;}
    #d2bCloud li a{}
    #d2bCloud .delicious-cloud {}
    #d2bCloud .delicious-tag-count{padding-left:0.2em;
    font-size:9px;color:#000}
    #d2bCloud .delicious-cloud li:before{content:"" !important}


    /* Delicious Sidebar List Styles
    ----------------------------------------------- */

    #d2bList ul {}
    #d2bList ul li {}
    #d2bList ul li a:link{}
    #d2bList ul li a:visited{}
    #d2bList ul li a:active{}
    #d2bList ul li a:hover span{}
    #d2bList span.delicious-tag-count {}


    /* Delicious Category Page Styles
    ----------------------------------------------- */
    #del-container {}
    #del-container a {}
    #del-container a:hover {}
    #del-container ul.delicious-posts {
    list-style:none;
    font-weight:normal;
    margin:0;padding:0;}
    #del-container li.delicious-posts { padding:2px 0 4px 10px; }
    #del-container .delTitle {
    font-size:140%;line-height:1;
    margin:0;padding:0 0 5px 0;}
    #del-container .delNote { padding:0px 5px;}
    #del-container .delNote a {white-space:nowrap;}
    #del-container .small-del-tags{padding:0px 10px 10px 0;
    text-align:right;}
    #del-container a.small-del-link {}

    h3.catPostHeading {margin:0 0 5px 0;padding:0;}
    #del-container h3.catPostHeading img {
    border:0;margin:0px 0 0 0;
    padding:0 5px 0 0;
    vertical-align:baseline;
    background:transparent;}

    /* Delicious Category Post Links
    ----------------------------------------------- */

    span.cattags {}
    span.cattags a{}

    /* Delicious Category Select Menu Styles
    ----------------------------------------------- */

    #d2bSelect {}
    #d2bSelect select {}

    /* End Delicious2Blogger CSS Styles
    ----------------------------------------------- */

    這一長串看起來很恐怖,如果你想要自訂效果的話之後還要再見一次,不過現在可以先不管。
  • 接下來要放的是變數定義,一樣請找尋你的範本中的標籤</head>,找到後請將以下文字放到這個標籤的上一行:
    <!-- Delicious2Blogger Category Variables -->

    <script type="text/javascript">
    // Delicious tag variables

    var delTagPost = 'I你的分類頁的網址';
    var delArchivePost = '你的分類頁的封存頁網址';
    var delUserName ='你的delicious帳號';
    var delCommonTag = 'false';
    var delThrottleTag = false;
    var delShowTags = true;
    var delShowNotes = true;
    var delNoteAppend = '...';
    var delSep = ' , ';
    var d2bPostCatHeading = "文章分類: "
    var d2bSelectHeading = " - - Categories - - ";
    var delPostMore = true;
    var delPostMoreText = ' Read More >>> ';
    var delTagLinkText = "View all posts filed in ";
    var delCatShowText = "有 ";
    var delCatEntryText = " 篇文章";
    var delShowRSS = true;
    var delRSSImg = 'http://static.flickr.com/51/139445761_5e7cb0cd18_o.gif';
    var showCountList = true;
    var showCountCloud = false;

    // Tag Cloud Variables
    var maxFontSize = 20;
    var maxColor = [0,0,255];
    var minFontSize = 10;
    var minColor = [0,0,0];

    </script>
    <script type="text/javascript"
    src="http://phy3blog.googlepages.com/del2blogger.js"></script>
    <!-- End Delicious2Blogger Category Variables -->

    其中請注意到前三項,這三項請改成之前的步驟中所記下來的對應網址和帳號名稱,絕對不能填錯。
  • 接下來,請在你的側欄區(sidebar)中找個你想放分類列表的位置,將以下文字寫入:

    <h2 class="sidebar-title">文章分類</h2>
    <div id="d2bList"><noscript>
    <p>Javascript must be enabled for Categories</p>
    </noscript></div>
    <script type="text/javascript">
    d2bWriteList('alpha');
    </script>
    如果搞不清楚或從來沒有修改過sidebar,請先找到你的部落格上sidebar想放的位置的下一個標題,再到範本中找相同的文字,在發現的位置的上一行插入文字即可。

  • 到目前為止己完成最重要的程式碼工作,基本上已可以運作了,
    不過我們還要先手動進行分類以前的文章才行,
    不過,這是下一篇的故事了...

    7 則留言:

    1. 您好,
      您的教學做的很棒哦!
      我也正在極力改版中,
      謝謝您!

      回覆刪除
    2. 你的分類頁的網址
      你的分類頁的封存頁網址

      能說清楚嗎?
      這兩項把我搞混了...

      還有要怎麼把他放到獨立的Archives
      似乎不能更改網誌日期耶..

      回覆刪除
    3. 分類頁就是你想要放分類的那個文章...
      在張貼後記下網址

      封存頁網址就是指含有那篇文章的Archive的網址

      在張貼文章時注意看底下,有一行"張貼文章的和意見訊息的選項",按了以後就會出現自訂時間的選項了。

      回覆刪除
    4. 請問一下怎麼隱藏那一篇分類用的文章啊?

      回覆刪除
    5. 沒有辦法隱藏
      但你可以想辦法把它擠下去

      回覆刪除
    6. 分類頁的網址我在文章內寫上這些內容會有錯誤

      請問我是哪個步驟寫錯了

      謝謝!!

      回覆刪除
    7. this is very useful, thx for share:)

      回覆刪除