Linode系列之六:MT外观与模板定制

(0 comments)

MT Pro 本身自带了 Professional Website 1.0 模板,试用下来,感觉整个模板设计的相当不错,稍加修改就可以符合我的要求。将Blog的模板也设置成与之对应的 Professional Blog 1.0 模板,以达到整个网站风格的统一。

注意:当你开始对外观与模板修改以后,不要再修改Styles和Themes,这会覆盖掉所有你对模板的修改。

CSS Stylesheet

模板位置: WebSite & Blog -> Design -> Templates -> Index Templates -> Stylesheet

将代码用<pre></pre>包含,使得代码显示为:

<!-- Code Beautifier colors -->
.linecomment { color: #FF8000; }
.blockcomment { color: #FF8000; }
.prepro { color: #0000BB; }
.select {}
.quote { color: #DD0000; }
.category1 { color: #007700; }
.category2 { color: #0000BB; }
.category3 { color: #0000BB; }

pre 
{
        border: 1px solid #888;
        background: #FFF;
        padding: 5px;
        overflow: auto;
        width: 95%;
        max-height: 450px;
        margin: 0px auto;
}

Navigation

模板位置:WebSite & Blog -> Desgin -> Templates -> Navigation

导航条模板中可以添加或者删除导航条中的链接,网站只有一个博客,所有将原有的Blogs链接改为博客的链接:

<WebsiteHasBlog>
    <li class="<mt:If name="blog_index"> on</mt:If>"><a href="<$mt:BlogURL$>blog/">博客</a></li>
</mt:WebsiteHasBlog>

如果要在导航条上添加一个新的链接,先在Pages中添加一个页面,并在Tag中设置以@开头的名字(例如:@linode)。然后在Navigation中添加新链接的定义:

<mt:Pages tags="@linode" limit="1">
<mt:SetVarBlock name="this_page_id"><$mt:PageID$></mt:SetVarBlock>
<li class="<mt:If name="nav_on" eq="$this_page_id"> on</mt:If>"><a href="<$mt:PagePermalink$>"><$mt:PageTitle$></a></li>
</mt:Pages>

在Blog中的定义稍微有点不一样,需要添加include_with_website的定义。

<mt:Pages tags="@linode" limit="1" include_blogs="siblings" include_with_website="1">
<mt:SetVarBlock name="this_page_id"><$mt:PageID$></mt:SetVarBlock>
<li class="<mt:If name="nav_on" eq="$this_page_id"> on</mt:If>"><a href="<$mt:PagePermalink$>"><$mt:PageTitle$></a></li>
</mt:Pages>

链接的名字是取自Page Title,将Contact, About标题改为中文。

Blog Index

模板位置:WebSite -> Design -> Templates -> Blog Index

 MT Pro支持多个博客,因此默认的Blogs链接中,博客标题后面还加上了所属博客的名字,对于个人站点来说完全没有必要,而且这个Index还放在一个单独的blogs目录中,修改一下模板属性(Template Options),将其放在一个不为人知的文件中:

Output file: blog/index-site.html

Main Index

模板位置:WebSite -> Design -> Templates -> Main Index

可以在站点首页添加Blog最新5篇文章的Entry Summary:

<mt:Entries include_blogs="children" lastn="5">
    <$mt:Include module="Entry Summary"$>
</mt:Entries>

删除

<mt:Pages tag="@home" lastn="1">
<h1 id="page-title" class="asset-name"><$mt:PageTitle$></h1>
<$mt:PageBody$>
</mt:Pages>

Entry Summary

模板位置:WebSite -> Design -> Templates -> Entry Summary

在站点的Entry Summary中删除Blog名字:

<h2 class="asset-name entry-title"><a href="<$mt:EntryPermalink$>" rel="bookmark"><$mt:EntryTitle$></a></h2>

 Feed - Recent Entries

模板位置:WebSite -> Design -> Templates -> Feed - Recent Entries

在站点的Feed - Recent Entries中删除Blog名字:

<title><$mt:EntryTitle remove_html="1" encode_xml="1"$></title>

 Page Layout

模板位置: Blog -> Desgin -> Templates -> Main Index, Page, Entry

 页面的布局一般分为2列或者3列布局,一般在模板文件开头定义。例如:2列布局,Wide & Middle

<$mt:Var name="page_layout" value="layout-wm">

我选择的模板默认是3列布局,Wide & Thin & Thin (Middle宽度大概是Thin的一倍)

<$mt:Var name="page_layout" value="layout-wtt"$>

为了能够显示更多的内容,将页面的布局改为2列布局,Wide & Thin

<$mt:Var name="page_layout" value="layout-wt">

Main Index

模板位置: Blog -> Desgin -> Templates -> Main Index

删除和首页一样的图片:

<$mt:Include module="Header" body_class="mt-main-index">

Category Entry

模板位置:Blog -> Design -> Templates -> Category Entry Listing

 默认的Category Entry List只会列出最近的5篇日志,当一个分类中日志很多时,这种方式显然不是很好,这里修改了Category Entry Listing模板,在目录中列出所有属于该目录的日志标题。

<li class="archive-list-item">
    <a href="<$MTEntryPermalink$>"><$mt:EntryTitle$></a>
</li>

 Header

模板位置:Blog -> Design -> Templates-> Header

删除页面上的标题和图片:

    <mt:Unless name="main_index">
            <div id="breadcrumbs">
                <div id="breadcrumbs-inner">
                    <p id="breadcrumbs-content">
                        <a href="<$mt:WebsiteURL$>"><$mt:WebsiteName encode_html="1"$></a> &gt; 
    <mt:if name="page_archive">
                        <a href="<$mt:PagePermalink$>" class="current"><$mt:PageTitle$></a>
    <mt:Else>
                        <$mt:Var name="page_title"$>
    </mt:if>
                    </p>
                </div>
            </div>
    </mt:Unless>

    <mt:If name="main_index">
                    <div id="homepage-image">&nbsp;</div>
    </mt:If> 

Entry Listing

模板位置:Blog -> Desgin -> Templates -> Entry Listing

MT的设计者将分类中的文章显示为摘要信息,默认只能显示10篇,如果没装分页插件,就无法查看以前的文章了。所以在分类页面只显示文章的标题是个很好的选择,方便查看以前发布的文章,而且没有摘要的情况下,打开速度也比较快。

<mt:Entries limit="$limit">
<$mt:Include module="Entry Summary"$>
</mt:Entries>

将日记摘要那一段替换为以下代码:

<MTEntries limit="500">
<li class="archive-list-item">
<a href="<$MTEntryPermalink$>"><$MTEntryTitle$></a>
</li>
</MTEntries>

将limit参数值设置为500,基本可以显示分类里面的所有文章。

Widgets

Widgets是小窗口的模板,一般显示在页面右侧,通常包括目录、归档等组件。

Site

模板位置:WebSite -> Desgin -> Widgets -> Main Sidebar

Remove: Blogs, Tag Cloud

模板位置:WebSite -> Desgin -> Widgets -> Blog Activity

Remove: OpenID Accepted

修改以下Widgets:

    • Syndication
    • Recent Entries Expanded: 删除Blog名字。

Remove: <dd class="entry-blog">on <a href="<$mt:EntryBlogURL$>"><$mt:EntryBlogName$></a></dd>

 

Blog

模板位置:Blog -> Desgin -> Widgets -> Blog Activity

Remove all

模板位置: Blog -> Desgin -> Widgets -> Blog Archives

Keep: Category Archives, Monthly Archives Dropdown, Syndication, OpenID Accepted, Creative Commons

版权声明

模板位置: Blog -> Desgin -> Widgets -> Entry Metadata

在每篇文章的开头,添加版权声明。

<div class="asset-meta">
    <span class="byline">
<mt:If tag="EntryAuthorDisplayName">
        By <span class="vcard author"><$mt:EntryAuthorLink show_hcard="1"$></span> on <abbr class="published" title="<$mt:EntryDate format_name="iso8601"$>"><$mt:EntryDate format="%x %X"$></abbr>
<mt:Else>
        <abbr class="published" title="<$mt:EntryDate format_name="iso8601"$>"><$mt:EntryDate format="%x %X"$></abbr>
</mt:If>
    </span>
<mt:Unless name="hide_counts" eq="1">
    <mt:IfCommentsActive><span class="separator">|</span> <a href="<$mt:EntryPermalink$>#comments"><$mt:EntryCommentCount singular="1 Comment" plural="# Comments"$></a></mt:IfCommentsActive>
    <mt:IfPingsActive><span class="separator">|</span> <a href="<$mt:EntryPermalink$>#trackbacks"><$mt:EntryTrackbackCount singular="1 TrackBack" plural="# TrackBacks"$></a></mt:IfPingsActive>
</mt:Unless>
</div>

<div class="asset-meta">
    <span class="byline">
<mt:If tag="EntryAuthorDisplayName">
    作者 <a href="<$mt:EntryAuthorLink'>www.liaojl.com"><$mt:EntryAuthorLink show_hcard="1"$></a></span> &nbsp; | 
    转载时请务必以超链接形式标明文章<a href="<$mt:EntryLink$>">原文链接</a>和作者信息及本版权声明。
    <br>
    原文链接:<a href="<$mt:EntryLink$>"><$mt:EntryLink$></a>
    <br>
</mt:If>
    </span>
</div>
Currently unrated

Comments

There are currently no comments

New Comment

required

required (not published)

optional

required