如何設計部落格界面進階篇

Posted on 27 六月, 2004 20:47 • (3) 迴響 • 5356 hit. • 我們的部落格

PLOG 提供user 自訂樣版的功能 ,參考前文說明 http://plog.tcc.edu.tw/post/1/206 ,
上次提到教網部落格提供的樣版 templates ,其實您也可以自己 DIY ,來產生不一樣的界面,

以 grey_tcc.zip 為例,以 winzip 解開後有下列檔案

header.template (頁頭定義)
footer.template (頁尾定義)
main.template (首頁定義)
post.template (文章)
postandcomments.template (文章與評論)
grey_tcc.css (css 檔)
error.template
linktracker.template
resource.template
album.template
features.template
samplerss.template
commentarticle.template
commentform.template
demosites.template
posttrackbacks.template
stripes.gif

紅字檔案為較重要定義檔

我們以置換首頁title 圖檔為例,可以按下列步驟操作:

1. 修改 header.template 這個檔,假設等一下要傳上的圖檔為 blog_top.jpg,修改如下:

!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="{$locale->getLanguageId()}" 

      lang="{$locale->getLanguageId()}" dir="{$locale->getDirection()}">

<head>

 <title>{$blog->getBlog()}</title>

 <meta http-equiv="Content-Type" content="text/html;charset={$locale->getCharset()}" />

 <meta name="generator" content="{$version}" />

 <meta http-equiv="Content-Language" content="{$locale->getLanguageId()}" />

 <link rel="stylesheet" title="Default"
href="{$url->getUrl("/templates/grey_tcc/grey_tcc.css")}"
type="text/css" />

 <link rel="alternate" type="text/xml" title="RSS 2.0" href="{$url->rssLink("rss20")}" />

 <link rel="alternate" type="text/xml" title="RSS 1.0" href="{$url->rssLink("rss10")}" />

 <link rel="alternate" type="text/xml" title="RSS 0.90" href="{$url->rssLink("rss090")}" />

 <link rel="alternate" type="application/atom+xml" title="Atom 0.3" href="{$url->rssLink("atom")}" />

</head>

 <body> 

  <p class="Upgrade">This page looks plain and unstyled
because you're using a non-standard compliant browser. To see it in its
best form, please <a href="http://www.webstandards.org/upgrade/"
title="The Web Standards Project's Browser Upgrade
initiative">upgrade</a> to a browser that supports web
standards. It's free and painless.</p>

  <div id="Container">

  <div id="Top"><h1>{$blog->getBlog()}</a></h1></div>

  <div id="Topmenu">

....

<h1>{$blog->getBlog()}</a></h1> 改為
<img src="{$url->getUrl("/templates/grey_tcc/blog_top.jpg")}" >

blog_top.jpg 為等一下傳上的圖檔,改好後存檔。

2. 進入部落格管理區 , 選擇 [設定 ]/[模版管理]/[新增檔案],將 header.template 和 blog_top.jpg 依序傳上

3. ok ,已經做好自己的 title 圖了,如果 header.template 或其他的樣式檔有輸入中文,記得要以 UTF-8 的格式存檔,才能正常顯示中文。

作者匿名 [管理]
22/01/2009, 19:36

可不可以教大家每個字的意思

您好；

首先先說明現在這一篇文章「如何設計部落格界面進階篇」已經不太適用現在的系統了（版本、介面已不同）。

若您對模版修改有興趣，可以先參考「LifeType線上教學」課程裡的「四、簡易模板修改」。

目前為止，比較簡單、快速的方式，你先說一下你想要修改哪一個模版？要修改成怎樣？或要加上什麼東西？我再來針對您的情形來回答，可能會比較容易。

阿欣老師

沒有管理面板 作者天空藍 [管理]
23/11/2005, 13:32

http://plog.tcc.edu.tw/812
不知為何
沒有管理面板
幫幫忙吧

good 作者 wood [管理]
02/11/2005, 09:44

這個網站做的真不錯喔!!

中縣教網部落格

如何設計部落格界面進階篇

3 Comments on "如何設計部落格界面進階篇"

發表迴響