http://rhinohorns.blogspot.com/2007/12/3.html 樣版修改筆記 (3) - 修改日期顯示整理

前一陣子修改了這個樣版的發表日期顯示格式，以這篇記錄一下修改的要點。這個日期格式的原樣是由 JackBook.com Red-White Web 2.0 Blogger Template 而來，個人更改了圖片的色調及抽出部分 CSS 及 javascript 修改而成。

CSS 部分，共分三項，月、日、年，修改為如下，

/* NewDate <br />-----------------------------------*/<br />.jackbookDOTCOM_date {<br />    background:url(http://url/sh_dateblock.gif);<br />    background-repeat:no-repeat;<br />    width:66px;<br />    height:82px;<br />    text-align:center;<br />    color:#ffffff;<br />    font-size:10px;<br />    font-weight:bold;<br />    margin:0px;<br />    margin-left:17px;<br />    margin-right:10px;<br />    padding-top:7px;<br />}<br /><br />.jackbookDOTCOM_date .day {<br />    font-size:35px;<br />    font-weight:bold;<br />    color:#000000;<br />    letter-spacing:-1px;<br />    line-height: 1.0em;<br />}<br /><br />.jackbookDOTCOM_year {<br />    font-size:35px;<br />    font-weight:bold;<br />    color:#b3b3b3;<br />    filter:alpha(opacity=10);<br />    opacity:0.3;<br />    -moz-opacity:0.3;<br />    margin-bottom:-20px;<br />    line-height: 1.0em;<br />    background-color:#fff;<br />}

樣版 html 部分，將原本以 <h2> 標示的發表日期改為下碼，此時也要注意的是 Blog 設定中日期標題格式需改採「星期一,十二月 10,2007」。

<table><tr><br /><td><div class='jackbookDOTCOM_date'><data:post.dateHeader/></div></td><br /><td><div class='jackbookDOTCOM_year'><data:post.dateHeader/></div></td><br /></tr></table> 

javascript 部分由於採用 jQuery 方式撰寫，故引用之。

<script type="text/javascript" src="http://url/jquery-1.2.1.pack.js"></script>

更換日期顯示所需要的程式碼，程式以「星期一,十二月 10,2007」格式專製，所以其它日期格式就必須改寫。

//change date,year format<br />function do_changeDate_sh(){<br />    jQuery("div.jackbookDOTCOM_date").each(function(i){<br />        var shtml = jackbookDOTCOM_changeDate(jQuery(this).text());<br />        jQuery(this).html(shtml);<br />    });<br />    jQuery("div.jackbookDOTCOM_year").each(function(i){<br />        var shtml = getYearFromDate_sh(jQuery(this).text());<br />        jQuery(this).html(shtml);<br />    });<br />    return false;<br />}<br /><br />//get year value<br />function getYearFromDate_sh(sdate){<br />    var syear = sdate.substr(sdate.lastIndexOf(', ')+2,4);<br />    return syear;<br />}<br /><br />//get date format<br />function jackbookDOTCOM_changeDate(thedate) {<br />    var newdate = jackbookDOTCOM_dateformat(thedate);<br />    return newdate;<br />}<br /><br />function jackbookDOTCOM_dateformat(dateformat) {<br />    // Tuesday, July 17, 2008<br />    dateformat = trim(dateformat);<br />    if(dateformat.length>0) {<br />        var vpostdate= dateformat.split(",");<br />        vpostdate = trim(vpostdate[1]);<br />        var vpostdate= vpostdate.split(" ");<br />        var vresult = vpostdate[0].substring(0, 3) + '<div  class="day">' + vpostdate[1] + '</div>';<br />        return vresult;<br />    }<br />}<br /><br />//thanks to webtoolkit.info for this trim snippet,<br />function trim(str, chars) {<br />    return ltrim(rtrim(str, chars), chars);<br />}<br /><br />function ltrim(str, chars) {<br />    chars = chars || "\\s";<br />    return str.replace(new RegExp("^[" + chars + "]+", "g"), "");<br />}<br /><br />function rtrim(str, chars) {<br />    chars = chars || "\\s";<br />    return str.replace(new RegExp("[" + chars + "]+$", "g"), "");<br />}

最後於 document.onload 時呼叫函式修改日期即完成。

jQuery(document).ready(function(){<br />    do_changeDate_sh();<br />});