设计个性化的Movable Type(2)

| | Comments (8) | TrackBacks (0)

上篇 谈的是MT模板的一些大致特征。如果看完后不是很明白也没有关系,因为那只是一个大概的“纲要”,并没有细致和深入的分析。

要设计或修改你的MT样式,你必须从MT的各种模版入手,观察他们,了解他们,以便更好的驾驭他们。

这是一套功能强大的模板,是 Six Apart 三套发布系统包括 Movable Type 在内的总共1000多万用户共同使用的一套模版。

观察Movable Type模板的结构布局

在所有的Movable Type的页面模版当中,最重要的应该是 Main Index 和 Individual Entry Archive 两个,他们包括了所有页面的绝大多数设计元素。在个性化设计中,完成了这两个模版也就意味着完成了整个网站中最重要的部分,其他的页面模版设计可以通过把上面那两个页面的相关部分照搬过来就是(相对来说就是件比较简单的事了)。而样式模版只有一个那就是 Stylesheet,它控制着所有的页面模版的样式。

首先通览一下所有的页面模版,看看他们的布局。

查看默认模板可以到官方的这里,在浏览器上看要比在后台的模版编辑框中看更方便 (如果你用IE,你打开的每个模版看到的是莫名其妙的东西,与你在后台模板编辑器上看到的不一样,要“查看源文件”才能看到模板的真面目。如果你用Firefox,立即就出来了)。

看到了吗,每个模板的 </head> 下面一行,有的是: <body class="layout-two-column-right">,而有的是:<body class="layout-one-column">; ,这是对 body 的不同的定义,即不同页面的 body 标签用不同的 class 来定义。前者说的是“这个页面采用‘导航在右边’的两栏布局”,后者说的是“这个页面采用单栏(或者一栏)布局”。

在 Stylesheet 的最末尾处你还可以找到有关 layout-two-column-left layout-three-column 的相关定义,也就是“导航在左边的两栏布局”和“三栏布局”。

因此在默认模板中的设计不光是你初装时看到的那个“导航在右边的两栏”的默认设计,而且还包括了“导航在左边的两栏”和“三栏”几种布局并预留了“四栏”。当然你也可以使用单栏的。你可以随意挑选。不管你把 body 标签定义成上面所列的哪种形式,在 Stylesheet 中都有相对应的CSS定义。(别忘了到 Stylesheet 中去看看 #alpha,#beta,#gamma 和 #delta 的相关CSS )

你可以这样来体验一下上面说的这些话的含义,便于你理解,也更直观:

你到 Main Index Template 看到的是: <body class="layout-two-column-right">,那么你到你的首页看看,页面是两栏的,并且导航在右边。

你再到 Individual Entry Archive 模板,看到的是: <body class="layout-one-column">,然后你到博客中打开任何一篇文章(从Permalink),看到的是单栏的吗?

你还到 Comment Preview Template 模板看看也是:<body class="layout-one-column">,然后你自己到 Comments (评论) 区去粘贴点什么,然后按"Preview" (预览),预览页是不是也是单栏的?

现在你明白了定义 body 的这个 class 是做什么的了。

在MT的默认页面模板中,关于“栏”的命名是按希腊语的 "alpha","beta", "gamma" 和 "delta" 的顺序来命名的,而不同于以往版本所采用的 "left","right", "center" 等命名方法。这样就使你在调整“栏”的顺序时更容易理解和区别。并且给每个栏一个独立的 ID :<div id="alpha">,<div id="beta">,<div id="gamma">,<div id="delta"> 等 (而不是 class !)。

有的是两栏,而有的又是单栏,我们怎么把单栏的页面都改成两栏的以使站点看起来更一致呢?很简单。

当你到两栏页面的模版 Main Index 时,先找到 <div id="banner">,<div id="alpha">,<div id="beta"> 这几个部分。第一部分 "banner" 就是“题头”或“LOGO”。"alpha" 是页面的左边,也是文章内容的主体。"beta" 就是右边的导航了。

好,这是首页的三个大的组成部分。你再到刚才那些单栏的页面模板看看结构,比较一下它与首页有什么不同?只有 "banner" 和 "alpha",却没有 "beta" ,是吗?正因为没有 "beta" 才没有右边的导航部分,才是单栏嘛。

现在我们来把单栏的改成导航在右边的两栏布局页面:

1 - 先把单栏的 <body class="layout-one-column"> 改成 <body class="layout-two-column-right">。
2 - 到首页模版中把 "beta" 部分完整的复制然后粘贴到单栏的 "alpha" 下面。
3 - 保存并重建模版。

现在回到刚改好的这个模版相对应的页面看看是不是变成两栏了?

如果你不想导航在右边而要把它改到左边怎么办?

1 - 先把 <body class="layout-two-column-right"> 改成 <body class="layout-two-column-left">。
2 - 将原来模版中的 "beta" 部分完整的复制下来粘贴到 "alpha" 的前面,再把原来那个 "beta" 剪切掉。(也就是换了个位)
3 - 现在你的栏的顺序是 "beta","alpha"了,和原来的 "alpha" 和 "beta" 顺序不同。这时你要把 <div id="beta"> 和 <div id="beta-inner"> 改成 <div id="alpha"> 和 <div id="alpha-inner">;再把本来的 <div id="alpha"> and <div id="alpha-inner"> 改成 <div id="beta"> 和 <div id="beta-inner">。这样,顺序就又恢复到 "alpha" 和 "beta" 了。现在你要清醒:alpha 已经是导航而 beta 是文章主体了。
4 - 保存并重建。

重要提示:在你还没有完全把握的时候,最好不要去动你现在正运行的博客站点。而应该建立一个新的测试博客 (Test Blog)。各种测试应在这个测试博客中做。

至于把两栏的布局改成三栏或四栏的也差不多,到你的测试博客中多试几次就有感觉了。注意 alpha,beta,gamma 和 "delta" 的顺序。

当你了解了这些布局特点后,要改变某个栏的宽度就变得简单了。你只要到css文件中找到相应的 ID,改变和调整他们的宽度就可以了。

以上讲的是从模版中观察并调整页面的整体布局。



[ 1 ] [ 2 ] [ 3 ] [ 4 ] [ 5 ]

0 TrackBacks

Listed below are links to blogs that reference this entry: 设计个性化的Movable Type(2).

TrackBack URL for this entry: http://www.yangkang.org/cgi-bin/mt/mt-tb.cgi/25

8 Comments

非常的详细 ^_^
顶一下。
你加入BXNA吧,一定很多人来看的。
blog.blueidea.com

第二篇出的蛮快的嘛,哈哈,先回个话,然后慢慢看~:)

黑兄阿,你每天顶得我好苦啊!

Steicker,

黑羽这么个顶法我能不快吗?

歇歇,呵呵。
写教程很痛苦的。又累,偶深有体会。
^^

现在在Google上搜
"Movable Type Template"
你是简体中文第一位置,爽吧
^^

Movable Type 对于搜索引擎是非常友好的。刚刚才发表几天的东西能这样相当不错。^-^

GOOD!~对于我们来说帮住很大。。。

Leave a comment

About this Entry

This page contains a single entry by Yang published on June 29, 2006 1:36 AM.

设计个性化的Movable Type(1) was the previous entry in this blog.

正确理解TrackBack的含义 is the next entry in this blog.

Find recent content on the main index or look in the archives to find all content.