Skip to Content

Drupal文章發佈日期圖形化

每每看到他站文章開頭都有著一本日曆來顯示發佈的日期,心中總是口水流不停,而在 Drupal 官網找版型時,通常只要有類似的畫面,不用說,馬上下載回來觀模,然而時至今日,才終於弄懂那是怎麼來的,所以趕緊寫下來,以免日後又忘了 哭泣

原來很簡單,只需要先查看網頁的原始碼,然後找到發佈日期在版型檔案 node.tpl.php 中的位置,在其之前,加入如下字碼︰

<?php
$year
= format_date($node->created, 'custom', 'Y');
$month = format_date($node->created, 'custom', 'M');
$day = format_date($node->created, 'custom', 'd');
?>

<div class="post-date">
<span class="post-month"><?php print $month; ?></span>
<span class="post-day"><?php print $day; ?></span>
<span class="post-year"><?php print $year; ?></span></div>

然後在所使用的版型的 CSS 設置檔案中(通常是 style.css 或 layout.css)置入如下設置︰

.post-date {
width: 50px;
height: 60px;
float:left;
margin-right: 10px;
margin-bottom: 10px;
background: url(../images/calendar.gif) no-repeat;/*此處需依版型的路徑作修正*/
}
.post-year {
font-size: 11px;
text-transform: uppercase;
color: #000;
text-align: center;
display:block;
line-height: 11px;
padding-top: 4px;
margin-left: -3px;
}
.post-month {
font-size: 11px;
text-transform: uppercase;
color: #FFFFFF;
text-align: center;
display:block;
line-height: 11px;
padding-top: 4px;
margin-left: -3px;
}
.post-day {
font-size: 18px;
text-transform: uppercase;
color: #000;
text-align: center;
display:block;
line-height: 18px;
padding-top: 4px;
margin-left: -4px;
}

最後再將那小日曆的圖檔給上傳到版型的目錄中,以此例而言,就是在版型的 images 子目錄。
如果幸運的話,應該一次就成功嘍,若有問題,大部份都是位置不對,以及那日曆小圖出不來,這時就要依情況來慢慢修正 CSS 中的設置了。
所以,祝好運啦!! 微笑


個性簽名

人的一生是不可能一帆風順的,遇到困難挫折時,我們絕對不能輕言放棄,第一次放棄了,那就會有第二次,第三次,以致更多次,也許,當你放棄的時候,離成功就只相差一步。
因此,不管做什麼事,都要學會堅持,堅持,堅持,再堅持。還有就是要忍耐,也許,失敗是千萬次,而成功只有一次,在這個過程中要堅定自己的信念,要學會忍耐,忍耐,忍耐,再忍耐,只要你付出,總會得到什麼,甚至取得成功。

預覽附加檔案大小
calendar.gif1.39 KB