设计个性化的Movable Type(3)

在观察过了Movable Type 页面模板中几个大板块的布局情况后，再往下看看这些板块内的细节设计。这应该是很有意思的一个部分。

深入观察Movable Type 页面模板结构

Movable Type的页面模板设计从多方面为用户自定义设计或修改现有设计提供了足够的预留空间或扩展空间。

在第一节浅谈MT模板设计中，我谈到过在MT的页面设计中有很多“div 套 div，class 套 class”的现象，有似乎是多余的感觉。其实并不是这样的。不但不是多余，而是必要。这套模板要提供给1000多万用户同时使用，必然要最大程度在设计上满足自定义的需求，必须要有足够的扩展和自定义的空间。

我们现在先来看 ID (选择器)：

你可以到 Main Index 模版中会看的比较清楚。每种类型的 ID 都是一对，而且很相似：

这些 "ID"s 都是每个页面独有的元素，除了在命名方面方便记忆外，在页面样式的设计方面你可以根据自己的设计需要分别对某个或某几个 ID 进行重新定义或不定义。另外一个方面的好处是，你可以很方便的在页面运用一些程序，比如象 java 或者是 ajax，甚至是 greasemonkey 等，来为你的网站带来更有趣或更生动的效果。MT产生出来的页面是纯粹的HTML页面，所以凡是能在HTML上运行的程序都能在MT上运行。

再来看看导航部分的 class (类) 选择器：
在<div id="beta-inner" class="pkg">的下面，你可以找到分别以下面一句开头的段落：

他们分别代表不同的“模块”，都被包围在<div id="beta-inner" class="pkg">里面了。导航部分就是由这六个“模块”组成的。

看出来他们的相同和不同吗？

拿第一个，就是“搜索”来说，它的结构是这样的：

第一行 <div class="module-search module">，这个 class 被 "module-search" 定义着，是它的独特性，同时还被 "module" 定义着，是它与其它“模块”一样的共性。如果你希望把这个模块跟其它的模块区别开来而有其独特的地方，只要到CSS文件中去修改这个独特的类就可以了。比方说，你要这个“搜索”部分的背景是红色的，那么你到CSS文件中加上这么一行：

我只是举个例子。

第一行下面的这个H2，也有个 class 来定义它，就是："module-header"。我们可以看到，每个“模块”的这个H2都是使用这个定义，所以每个H2在页面上看起来都一样了。如果你要修改导航部分的H2，你只要去修改这个"module-header"就可以了，到CSS文件中找到 .module-header。

“模块”中的具体内容就在 <div class="module-content"> 中，而且每个模块都统一使用它。

如果你觉得以上模块不够，还要加进去更多的模块，例如你要加入一个Blogroll的模块，你可以到模版中加上：

然后到CSS文件中添加一个 "module-blogroll" 的类及其定义。

或者你觉得这个新添加的 Blogroll 模块所使用的样式是和其他几个模块或某个模块一样的，那你就用那个模块一样的名字来定义。 比方说你新添加的这个模块 Blogroll 是和 Categories 模块一样的样式，那就这样添加：

上面的 "blah blah blah... ..." 是代表具体内容的。为了样式统一，最好使用一致的列表样式，比如：

到样式表中看看 module-list 和 module-list-item 这两个类的定义就知道是怎么回事了。

在做自定义设计的时候，还有一点要注意：在默认模版中，页面中的某些元素因为被设计成一样，所以在CSS文件中你会看到诸如这样的表达：

这是说 entry-footer, comment-footer 和 trackback-footer 这三个 class (类)都应用以上相同的CSS定义。这是CSS的简写形式。如果你不希望其中的某个元素被定义成那样，那你就把它从上面去掉，再另外对它进行单独的定义。相反，如果你觉得某个其它的元素也要使用这个定义，那你就把它加上去就是。这是属于CSS的范畴了。

综上所述，页面中的每个元素都被定义成不同的 ID 或 class 。你要修改或重新设计，只要到CSS文件中找到相对应的 ID 或 class 对它们进行修改。不成问题吧？

在结束这节之前，最后还提醒一点，就是关于那个CSS文件。

我们看到的这个 Stylesheet ( 即styles-site.css ) 实际上是由两部分组成的："base-weblog.css" 和 "theme-vicksburg.css"。

前者是默认模版对页面元素的基本定义；而后者是一个叫做 "vicksburg" 的 theme ( 我们通常说的皮肤？)。再换句话说，MT的默认模版采用的样式是一个叫 "vicksburg" 的样式。所以当你修改或设计的时候，尽量不要去动 base-weblog.css 部分，否则页面的显示可能会有问题。如果你安装使用过MT的一个叫做 StyleCatcher 的插件，你可能就知道，不管你采用哪种 theme，都只是更换了后面那个CSS文件，而前面的那个 base-weblog.css 保持不变。

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