设计个性化的Movable Type(1)

| | Comments (20) | TrackBacks (1)

黑羽 要我写个关于Movable Type的网页设计“教程”,我考虑好几天了,觉得不知该怎么写才好,到现在为止我心里还没有一个确定的思路。但是不管怎样,我都认为这不是一篇文章能写就的,而应该是一个系列。我就稀里糊涂的开始吧。

与其说是“教程”,不如说是我个人的一些心得体会。很多对MT有经验的朋友或从事页面设计的朋友都各有高招,还望赐教并及时地纠正我的错误;也希望那些对 Movable Type 页面设计不够熟悉的朋友能够从中得到一点启发。总之,希望大家一起参与到这个讨论中来。

浅谈MT模版设计

就MT的版本而言,这里我用3.2版来举例。至于即将发布的3.3和先前的版本,在设计方法上来讲都差不多。

不同的博客发布程序都有其各自的特点。Movable Type是把相关的完整的页面设计放进相关的模版中,然后通过这些模版呼叫相关的程序从而产生了网站相关的页面 (我自己都觉得这句话好别扭,比绕口令还难)。

每个页面模版都是一个完整的页面

而正是因为这些模版具有完整性,所以带给我们设计时很大的方便,使之看起来一目了然,一眼就能看得出你整个页面的东南西北以及页面中的每个部分和元素,很方便你做修改和调整。

但是,这种完整性又是相对的。你可以“破坏”它:根据你的需要你可以把这个完整的页面切割成若干个“块”,再用这些“块”来重新组合你的页面。( 越说越糊涂了?) 这就是Movable Type 模版中的 "modules" 功能。你可以把整个网站共用的而又不常变动的某些部分 (比如 foot) 做成一个 module,然后在每个或某几个模版中运用这个module。以后当你需要修改某个地方时 (比如2006年要改成2007年)你就只要到这个 module 中去修改一次就够了,而不用到每个模版中一一修改。这和 SSI (SERVER SIDE INCLUDES)比较类似。你也可以完全不理会这些 modules。这就是MT模版的灵活性和方便性。

另外,MT的模版除了她的完整性外,还有一个显著的特征,我把它叫做“单一性” 。之所以这样说,是因为只要你懂得HTML或者XHTML你就可以进行设计了,而无需懂得其他的语言。可以这样来理解:只要你会普通的页面设计,你就可以设计Movable Type。所以Movable Type 的页面设计相对来讲还是比较简单的。

说到它的简单你可千万别误会,以为MT只是给那些初学者用的一个入门程序。如果这样想,那就错了。

由于通过MT的模版产生出来的页面是标准的HTML页面,所以任何其他能在标准网页上运用的语言都可以放到MT的模版中来用,比如PHP等。从而使你的网站形式更加丰富多彩。这应该是MT的可扩展性

MT从模版使用的功能上对他们进行了分类(在MT后台的 "TEMPLATES" 栏里):

    索引模版:
  1. Main Index
  2. Master Archive Index
  3. Stylesheet
  4. Atom Index
  5. Dynamic Site Bootstrapper
  6. RSD
  7. RSS 2.0 Index
  8. Site JavaScript

有八个。目前与我们页面设计有关系的是前面三个。第一个是首页模版,第二个是储存所有文章的页面。接下来是CSS样式。后面的五个先放到一边,暂时与我们的页面设计没有太大的关系。

    存档模版:
  1. Category Archive
  2. Date-Based Archive
  3. Individual Entry Archive

这三个模版是三种不同类型储存文章的页面模版。第一个是是按文章分类来存档的页面模版,第二个是按日期来存档的,最后一个是单独每篇文章的模版。

    系统模版:
  1. Comment Preview Template
  2. Comment Pending Template
  3. Comment Error Template
  4. Comment Listing Template
  5. TrackBack Listing Template
  6. Uploaded Image Popup Template
  7. Dynamic Pages Error Template

有七个,是和MT的系统功能有关的。象评论,引用等。其中又以前五者更重要或更常用。

其实还有一个辅助功能的模版没有被列入到这里,那就是“搜索”模版。你把整个操作后台翻个底朝天都不可能找到它,它被放到了MT-3.2-en_US (根目录) 下的 search_templates 文件夹里面了(当然现在在你的服务器上)。它也应该属于系统模版一类。在做个性化设计的时候,如果你的设计是“大动作”的,那这个模版是不可或缺的。既然这个模版重要那为什么又不放在可以修改的地方而要把它隐藏起来?我现在也找不到好的答案。

如果你的模版已经被修改,这些模版的原始资料可以到官方网站重新找回来,或者在你现有的博客中再建立一个新的博客 (取名叫 "test blog" ?),这个新的博客中就有没被改动过的原始模版可供你使用。

现在我们来看看模版里面。你可以随意拿首页模版也就是 Main Index 模版看看。

如果你有一定的标准设计 (?) 基础,当你初看这个Main Index 的时候,你可能会有种奇怪的感觉,似乎很多东西是多余的 (至少以前我就这么想过),和我们平常做过的看过的不太一样,div 套 div,class 套 class,这是其一;“sidebar”也很“奇怪”,有很多的 "module"s,而每一个 "module" 又分别以不同的名字命名,象 "module-search","module-categories","module-archives" 等等。在你的博客页面上,分明这些 "module"s 看起来都是一个样子的嘛,何必如此罗嗦?(以后你还会觉得何止是罗嗦,而且...... )

暂时先别过多的去思考 :-)

我先把结论告诉你:正是这种“多余”,这种“罗嗦”( 确实比我还罗嗦 ) 使它的页面架构变得具有很大的 可调整 性和 可自定义 性。很大程度上满足设计者对页面的任意一个组件或单元进行调整和自定义设计。有时候你会觉得它其实“罗嗦”得还不够,你需要加入更多的元素和样式来满足你的设计,那当然没问题。

既然这些模版的架构设计如此合理,能使设计者很大程度上做到 自定义个性化,那设计或修改 MT 的样式就只要去碰一个文件了:Stylesheet !

看到这里,你可能会想:原来Movable Type 的个性化设计就是这么回事!

确实是这样的。但是 ......

世界上总有“爱好自由”的人 (比如我就是:// )。我凭什么要用你做好的模子?难道我用我自己的架构就不行?

MT当然也没有这么死板。你可以100%的抛开它的架构,建立你全新的HTML结构和Stylesheet,做出你想要达到的任何设计效果。

但是有一点是你无论如何不能抛弃并一定要了解的:那就是MT自己独特的标签 (?)。否则它确实会不客气了,不管你是谁。

所以,Movable Type 的个性化页面设计可以从两个方面入手:

一是保持MT的默认页面模版的结构而只对样式(Stylesheet)进行重新定义。

二是“另起炉灶”,结构和样式都完全按照你自己的爱好来设计。

两种方式说不上孰优孰劣,都各有长短。第一种方式你不用管结构,只需调整或设计样式 (最大的好处是你不用管MT的标签);第二种方式一切都是你自己设计,稍嫌麻烦但你可以享受设计的充分自由。

总的来讲,Movable Type 的模版设计以它独特的完整性可塑性单一性,使你在设计过程中能够最大程度的发挥,并感受到它的简单和方便。

(十足的广告嫌疑 ! )

通篇都是些抽象的概念或者让人觉得有点莫名其妙。但愿你不会这么想。

也但愿接下去的内容不会这么枯燥了。

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

1 TrackBacks

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

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

两天前读了www.yangkang.org的设计个性化的Movable Type... Read More

20 Comments

太罗嗦,只要说明是否可以用CSS+HTML语言编辑SKIN就已经是基本答案了.
再者,分析一下CSS.

顶,讲的比较细,支持!
尤其是搜索那一部分。
如果要看css+xhtml编辑技巧,去看www.w3cn.org就可以了。
就是要Yang讲一讲MT独特要注意的地方,再细一点也无妨。

建议下一节多讲一点设计MT模板的思路和流程!
持续关注中!^_^
估计会有n多人搜索MT模板编辑搜到你这儿来的,hehe

谢谢墨羽持续的鼓励,给了我继续写下去的信心。

回想两年半前我初用MT的时候,面对着MT默认的那块“白板”页面,我不知如何下手,只会从Stylesheet里面改改颜色和字体什么的。不得已花了70美金请了个美国人来帮我设计。可他用的是<tr>,<td>!! 当时我并不明白,半年后我学习标准设计才反应过来这一切是怎么回事。

后来知道一点CSS和HTML,但我还是不知道设计MT。我翻遍互联网也找不到一点提示。所以我继续用默认模版,也没去花这个心思。直到去年年底我买了3.2的付费版后我才真正着手开始设计MT。

我不是高手,所以我写的东西也不是面向高手。只希望那些和我一样面对MT不知如何下手的朋友能够从中得到一点启发就够了。

这第一篇写的都是些特征概念或者只是一些引子而已。没有任何的解决方案。

结构杂乱无章法,感觉你当时写的时候思路就混乱,想到什么写什么。所以我虽然不懂MT这个程序,但觉得这样乱, 而且中英文夹七夹八的写,真是该学学语文。
既然是关于某个BLOG程序的,如果怕很多人没时间没脑子自己挖掘,不如这样写好了:
1、简明概括MT设计上有什么优势1)2)3)(请对比国内的一些程序);
2、逐点分析这些设计上优势,
3、指明该MT设计上作者个人掌握的一些巧妙的思路和设计方法。
等等,当然我没有用过这个程序。
最后,说明将来继续挖掘它的设计的空间等等……

言毕~!

哈哈...

首先感谢道雪儿的关注。现在明白了为什么你会有这种感受。

因为你连题目都没看懂:“设计个性化的Movable Type”是说用户如何来设计自己的MT样式,而不是去分析“MT设计的作者”的这个作品。

坦白的告诉你:我确实不知道Movable Type用中文该怎么说。知道了为什么“CocaCola”使你头痛而“可口可乐”会让你开心的原因。

我说的作者 指的是你啊~!!!
对不起,言辞过激,你可以删去。不过,建议你写一篇中文,一篇纯英文,方便我学习英语(开玩笑)。

“3、指明该MT设计上作者个人掌握的一些巧妙的思路和设计方法。”
——所谓作者就是你,因为现在是你在写(作为你自己掌握的一些巧妙的思路和设计方法。)。
当然,希望我罗嗦的话不要影响你的后续。就这样。因为我只是路过。

我真拿你这个搞美容的没办法,因为越说越没边了。

刚才还说明白你的意思,谁知道到现在才是真明白:原来从一开始你就把我当成了MT模版的设计者!我哪有那么伟大啊!

完全牛头不对马嘴。

to 道雪儿:
中英文肯定要混杂写,这是没有办法的。

也是Movable Type模板本身 ,甚至是css+xHtml设计本身决定的。
如果一定要弄成中文,那才是无法学习,混乱不堪呢。
也是不现实的

你这个要求还真是.....ft

to Yang:
呵呵,我知道Movable Type什么意思
居然是“活字印刷”的意思,想不到吧,我们老祖宗的东西!
^_^

黑羽说的一点也没有错!
所以标题应该这样写:“设计个性化的活字印刷”。

酷 !
这样一来,估计也汉化得差不多了吧。

我没有说你是MT的设计者,我的意思是 你是你自己的BLOG的模板的设计者,这你应该明白我的意思了吧.
算了....不想,我知道有时我的话很难被有的同志理解,算了...

不要再让我留言解释了哦,结束.

楼上的朋友,你还真有意思啊~
不过以后再回复的时候,先明白你在说什么,然后在想别人回答你的提问。*^-^*

国庆长假都在忙MT,整了个美国虚拟空间,MT安装还算顺利,还在研究你的文章对模版做些调整.

我想把http://www.5izy.cn的LOGO用到现在的BLOG上,下一步调整下首页SideBar的显示顺序,把Recent Posts栏调到文章页去(首页其实显示的都是Recent Posts),在首页增加一个象你一样的"我的朋友"栏,希望你能在方便的时候指导一下,谢谢啦!

Steven律师,
我看了你的blog和5izy.cn。做得很好啊。但blog好像不能留言,需要检查下模板中的comment部分。有需要帮忙的尽管吩咐。我的MSN:yangkangorg*hotmail.com

Yangkang:
可否提供一下你的模板吗?做得非常不错,本来也想自己做一个,无奈自己是个懒人,而且HTML都没学会,更何况CSS+DIV了.
如果可以的话请EMAIL:CHANGDONG@GMAIL.COM.谢谢:)

Movable Type 感觉有好看的模板不多呀.
自己改又太麻烦了.

回usaway,

movabletype模版编辑比wordpress简单的多,只是没有wordpress那么直观。另外,再MT里模版和样式(设计)是两个概念哦。。

漂亮的mt设计请看,

http://vism.cn/2007/07/movable_type.html

Movable Type 模板我觉得还可以啊.

Leave a comment

About this Entry

This page contains a single entry by Yang published on June 27, 2006 12:39 AM.

Microsoft说:Google 是个女性化网站 was the previous entry in this blog.

设计个性化的Movable Type(2) is the next entry in this blog.

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