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. 分類頁的網址我在文章內寫上這些內容會有錯誤

      請問我是哪個步驟寫錯了

      謝謝!!

      回覆刪除