阿駕零零壹 © 學習筆記

修改模板

這兩天做了些傻事，把全部的模板都修改了一下。

1. 將我的站上有放的外掛語法都加上去，這樣要使用只要去設定一下就好了。外掛有：AuthImage、Gravatar、RecentComments、RememberCommentData 等這幾個大家有在用的。

2. 把 Lightbox 語法載入預先寫好。因為之前已經改好了編輯器的部份，所以要用的人，只要插入小張的照片就會有效果了，根本感覺不到差別，呵。

3. 將所有的 sidebar 統一為 panel.template，我覺得這滿重要的，才不會不知道要改東西的時候要改哪個。這些模板因為出自不同人的手，所以很多種都有，例如 panel、linls、header、footer 等等，太多了。

4. 修改 CSS，修改不大，主要是改成我比較喜歡、可以接受的樣子。還有就是加上 Blockquote 的 CSS。要使用的人，點編輯器上面的「減小縮排」即可。

效果就是這樣。

5. 統整、分類 siderbar，原本每個模板都不一樣的排列，有時候覺得有點亂，先統一一下，要改的人在自己改吧^^ 然後還有個人的區塊、全站的區塊等等。還有把文章彙整、連結改成可收折的。

6. RSS 修改，因為有提供 Comments 的 RSS。所以加上按鈕，還有修改檔頭裡面的資訊。

7. 其他啦哩啦鉔的小修改就不紀錄了。

P.S. 弄的過程，因為瑣事太多，怕忘記。有弄一個 note，有興趣可以往下看完。

To User：

請大家幫忙測試吧，有問題的模板快跟我說。也請你們去更新一下個人的模板，把東西改到新的模板上面去。有問題歡迎跟我說。

備註：以下 xhref 改成 href。

Part 1. header.template

1.1 RSS

rss link 改為

<link rel="alternate" type="text/xml" title="RSS 2.0" xhref="{$url->rssLink("rss20")}" />
<link rel="alternate" type="text/xml" title="Comments RSS 2.0" xhref="{$url->rssLink("comments_rss20")}" />
<link rel="alternate" type="application/atom+xml" title="Atom 0.3" xhref="{$url->rssLink("atom")}" />

1.2 Lightbox

<head></head>內加上

<link rel="stylesheet" xhref="{$url->getUrl("/lightbox/lightbox.css")}" type="text/css" media="screen" />
<script xsrc="{$url->getUrl("/lightbox/lightbox.js")}" type="text/javascript"></script>

1.3 移除贅碼

Part 2. links.template 或 panel.template

2.1 改為 panel.template

為了方便使用者，全部改為 panel.template，
改檔名、修改 main.template 內的 include 連結，並檢查其他模板。

2.2 加上區塊範例

2.3 區塊順序為

META -> MENU -> Cal. -> Search -> RecentPost -> Cat. -> arch. -> RecentComment -> LINKS --> RSS -> Poweredby

2.2 META

{assign var=blogOwner value=$blog->getOwnerInfo()}
<p>Blogger: {$blogOwner->getfullName()}<br>
{if $blogOwner->hasPicture()}
{assign var=picture value=$blogOwner->getPicture()}
<img xsrc="{$url->resourcePreviewLink($picture)}" title="{$blogOwner->getUsername()}" /><br>
{/if}
{$blogOwner->getAboutMyself()}</p>
<p>閱讀總數：{$blog->getViewedTotal()}<br>
文章總數：{$blog->getTotalPosts()}<br>
迴響總數：{$blog->getTotalComments()}</p>

2.3 MENU

<a xhref="{$url->blogLink()}">{$locale->tr("main")}</a>
<a xhref="{$url->albumLink()}">{$locale->tr("albums")}</a>
<a xhref="{$url->templatePage("archives")}">{$locale->tr("archives")}</a>
<a xhref="{$url->templatePage("bookmark")}">{$locale->tr("links")}</a>
<a xhref="{$url->getUrl("/admin.php")}">{$locale->tr("dashboard")}</a>

2.4 每月彙整

{literal}
<script language="javascript" type="text/javascript">
function MM_jumpMenu(targ,selObj,restore){ //v3.0
eval(targ+".location='"+selObj.options[selObj.selectedIndex].value+"'");
if (restore) selObj.selectedIndex=0;}
</script>
{/literal}
標題
<select name="menu_menu" onChange="MM_jumpMenu('parent',this,0)">
<option>請選擇月份</option>
{foreach from=$archives item=archivelink}
<option value="{$archivelink->getUrl()}">{$archivelink->getName()} [{$archivelink->getNumArticles()}]</option>
{/foreach}
</select>

2.5 最新迴響

{if !empty($recentcomments)}
{if $recentcomments->isEnabled()}
標題
{assign var=comments value=$recentcomments->getRecentComments()}
{foreach from=$comments item=comment}
{assign var=commentpostid value=$comment->getArticleId()}
{assign var=commentpost value=$recentcomments->getArticle($commentpostid)}
<li><a title="{$comment->getTopic()}" xhref="{$url->postPermalink($commentpost)}#{$comment->getId()}"> <b>{$comment->getUsername()}：</b>{$comment->getText() |truncate:100:"..."|strip_tags}</a></li>
{/foreach}
{/if}{/if}

2.6 連結

<script type="text/javascript">
function expandIt(getIt) {ldelim}
getIt.style.display=(getIt.style.display=="none")?"":"none";
{rdelim}
</script>
標題
{foreach from=$mylinkscategories name=linkcategory item=linkcategory}
<b><a xhref="javascript:expandIt(document.getElementById('lnk{$smarty.foreach.linkcategory.iteration}'))"> {$linkcategory->getName()} </a></b><br />
<ul id="lnk{$smarty.foreach.linkcategory.iteration}" name="lnk{$smarty.foreach.linkcategory.iteration}" style="display: none;">
{foreach from=$linkcategory->getLinks() item=link}
<li><a xhref="{$link->getUrl()}" target="_blank" title="{$link->getDescription()}">{$link->getName()}</a></li>
{/foreach}
</ul>
{/foreach}

2.7 RSS Link 改為

<li><a title="RSS2.0 feed." xhref="{$url->rssLink("rss20")}"><img xsrc="{$url->getUrl("/imgs/rss20_logo.gif")}" style="border:0px;" /></a></li>
<li><a title="Atom0.3 feed." xhref="{$url->rssLink("atom")}"><img xsrc="{$url->getUrl("/imgs/atom_logo.png")}" style="border:0px;" /></a></li>
<li><a title="Comments feed." xhref="{$url->rssLink("comments_rss20")}"><img xsrc="{$url->getUrl("/imgs/rss_comments.png")}" style="border:0px;" /></a></li>

2.8 全站區塊

<li><a xhref="{$url->getUrl("/summary.php")}">{$locale->tr("summary")}</a></li>
<li><a xhref="{$url->getUrl("/post/1/55")}">{$locale->tr("contant_admin")}</a></li>
<li><a xhref="{$url->getUrl("")}"><img border="0" xsrc="{$url->getUrl("/imgs/logo.gif")}" title="歡迎光臨阿駕部落格"></a></li>

2.9 檢查並移除capitalize屬性

Part 3. CSS

3.1加上backquote

/* BLOCKQUOTE 設定 */
blockquote {
margin : 5px 20px 5px 20px; /* 框線與框外邊界的距離.. 依次為上右下左*/
padding : 10px; /* 框內文字與框線的距離 */

border : 2px dotted #336600; /* 框線: 2px的點狀虛線 */
/* border : solid 2pt #9c9; /* 框線: 2pt的實線 */
/* border : dashed 2pt #9c9; /* 框線: 2pt的虛線 */
/* border : double 2pt #9c9; /* 框線: 2pt的雙線 */
/* 以下三行是一組。 */
/* border-left-width : 3px; /* 在左側的一條線 */
/* border-left-style : solid; /* 設定線的樣式，可以拿上面的實現虛線等等來替換 */
/* border-left-color : #CCCCCC; /* 設定線的顏色 */
}
then,改成適當樣式

3.2 修改testarea

textarea{
border           : 1px solid #b2b2b2;
color            : #000000;
font-family      : verdana, tahoma, sans-serif;
font-size        : 0.9em;
letter-spacing: 0.1em ;
background: #F5F5F5 ;
padding: 1px ;
BACKGROUND: url(/imgs/textarea_bg.png) no-repeat right bottom;
}

input , select {
border           : 1px solid #b2b2b2;
color            : #000000;
font-family      : verdana, tahoma, sans-serif;
font-size        : 0.9em;
letter-spacing: 0.1em ;
background: #F5F5F5 ;
padding: 1px ;
}

input:focus, textarea:focus, label:focus{
border : 1px solid #5583BE ;
}
then,改成適當樣式

Part 4. postandcomments.template、post.template

4.1 閱讀次數

{$post->getNumReads()}reads.

4.2 Gravarar

{if !empty($gravatar)}{if $gravatar->isEnabled()}
<img xsrc="{$gravatar->gravatar($comment)}" width="{$gravatar->getSize()}" height="{$gravatar->getSize()}" align="right" hspace="10"/>
{/if}{/if}

4.3 檢查並移除capitalize屬性

Part 5. commentform.template

5.1 儲存迴響資料
檢查是否為「name="NewComment"」或「id="NewComment"」，接著到 </form> 的下一行加上：

{if $remembercommentdata->isEnabled()}
{$remembercommentdata->show()}
{/if}

5.2 看是否需要修改顯示的文字

5.3 驗證數字

{if !empty($authimage)}{if $authimage->isEnabled()}{$authimage->show()}<label for="authImage"></label>
<input type="text" name="authImage" id="authImage" value="" />    {/if}{/if}

5.4 檢查並移除capitalize屬性

Part 6. footer.template

Powered by <a target="_blank" xhref="http://www.lifetype.org">LifeType</a>. Modify by <a xhref="mailto:ajer001@yahoo.com.tw">阿駕數位</a>.

Part 7. 總Check

7.1 再次檢查、並移除capitalize屬性

7.2 檢查所有模板中的 include
是否都改成 panel.template 了

7.3 上傳測試。

隨機文章：
» [網頁] 來養隻吃blog文章的寵物吧
» 在文章上加入「Add To Del.icio.us」「Add To Furl」連結
» 2007 留言板
» 升級到 Lifetype 1.2

阿駕零零壹 © 學習筆記

修改模板

Leave A Comment:

META

MENU

Search

Recent Posts

Recent Comments

Hot Posts +

Categories +

Archives

License

Powered By