Tutorials: July 2006 Archives

This post is about IRI and Lee Joon's MT plugin "Cool IRI". It includes my Chinese translation of Lee's email and with the original one attached with it. Posting here for letting more people can share Lee's knowledge and the attitude to the audience. Greatly appreciate.
在此对Lee Joon 表示谢意和敬礼。

一个星期前我装了韩国人Lee 开发的MT插件Cool_IRI

当时在我的中文版的 Internet Explorer上显示正常,而在英文版的 Firefox上显示不正常,都是 "%" 什么的。于是我到Lee 的博客上留言,告诉她我这个问题。她告诉我到FF里把 "network.standard-url.escape-utf8 " 设置为 "false" 就可以正确显示中文了。我完全不明白这个设置在哪里。除了问她在哪里设置,我还写了好几个问题在她的留言处。(说句实话,有些问题如果没弄明白我确实不敢随便来用它,以免以后带来后果。)

这是我的几个问题:

1 - 这个设置在哪里? 你说的FF是指我电脑上安装的FF吗?
2 - 如果是指我本地的FF,那不就意味着只有我的非中文版的FF能正常显示中文IRI,而其他人的非中文版FF就不能正确读出来吗?
3 - 我希望这个设置是在插件里面,但我没有找到。如果能通过插件本身来设置的话,那么就意味着所有的非中文版FF都能正确读出中文的 IRI 了,那才叫酷呢 (就像用UTF编码写的中文一样,任何浏览器都能读出来。只是我能读有什么用啊,东西又不是写给我一个人看的)。
4 - 我的IE是中文版的,那些非中文版的IE显示中文IRI是怎么样的呢?希望你的IE能告诉我结果。
5 - 我认为这点是最重要的了,也是我最关心的。如果非中文版的各种浏览器不能正确显示本来的IRI,取而代之的是一长串的 "%",好了,这个时候如果有人链接我的某篇文章时,他/她在地址栏中复制的我的链接可是那些 "%"啊 ! 那不是我原本的链接啊 ! 这样的链接指向我的页面,搜索引擎会怎么看?PR传递会如何?

我知道我的问题太多了。知道她会答复我( 之前我的每个问题她都有答复的),但不知道会怎么答复。我在等。很快,几个小时后我收到了Lee的 email。很长。我用中文把信的全文都写出来让大家一起看看,原文附在本文的最后(我已经通知Lee我会就此写一篇东西)。

你问了很多问题,但我想每个问题都很有道理。我就我所知道和想到的来谈谈。

1 - 在FF的地址栏,输入 "about:config",FF的所有的配置就被列出来了。很长一串。然后在 "filter" 区域输入 "utf",过滤出来的结果就只剩下三四个了,在这里去设置 "true/false" (把 true 改为 false)。

2 - 是,也可能不是。我用的是韩语版的FF,我就能正确读出你的中文 IRI 来。这和FF的语言版本没有关系,而和电脑安装的字体有关系。

当然,有的中国用户电脑上虽然装有中文字体,但还是会在地址栏上看到 %HH 的编码。因为我不确定中文版中FF默认的 "network.standard-url.escape-utf8" 设置是 "true" 还是 "false"。如果设置的是 "true",那在他们的FF下就只能看到 %HH 编码了。

你知道的,目前差不多所有的网民都不太了解 IRI,他们习惯于那些不允许非 ASCII 编码的老URL(?)。有人说,非 ASCII 编码的地址是没有价值的,这样说来我们就不应该在URL中使用它了 (以避免出现 %HH)。 这样的局限性对非英语用户来说是太过分了一点。

目前,IRI 还处在过渡阶段。IE6 对 IRI 的支持不是很好 (IE7就能很好的支持),最新的浏览器象 FF / Mozilla / Opera 虽支持 IRI 但就目前来说还不是很完美或不够流畅。

我举个例子:

你知道国际化域名 (Internationalized Domain Name)(IDN) 吗?它赋予了 IRI 更广泛的含义。象 職業.com 这个域名就是个例子(我希望它在你那里能够显示出来)。

当有些人在浏览器中输入 職業.com 时,他们肯定能到这个网站,但当我也这么做时,我的FF浏览器却显示为 http://xn--q6v940c.com/,为什么呢?

原因在于FF提供的 network.IDN_show_punycode true/false 配置选项,它可以让用户选择在浏览器的地址栏中是显示 IDN(職業.com) 还是选择 Punycode 编码的 ( xn--q6v940c.com/)。

这个 IDN 的问题(?) 看起来有点和 IRI 显示方面的问题有点类似。

还是接着上面的 2 - 是的,当用户关闭 IRI 或 IDN 选项的时候,就只能看到 %HH url 或 xn-***** 这样的 punycode 了。

那是浏览器用户所拥有的权利,我觉得这还是有道理的。终端用户应该拥有掌控他们的浏览器的权力。

现在真正的问题(?)是很多人还不了解 IRI / IDN,以至于他们根本就不知道他们还可以打开或关闭这些选项这样一个事实 !

随着时间的推移,更多的人(主要是东方人用户)会来使用 IRI / IDN,更多的人会知道他们拥有在浏览器中选择显示自己语言文字的权力。

3 - 上面说过的,IRI 只是暂时性的用来显示地址。即使有问题也不是本质性的,无非是出于显示的目的罢了。

服务器端,我们没有办法来控制终端用户的行为。比方说,我可以固定某种字体的大小为绝对大小,以前我们可能会想,对啊 ~,所有的人在我的页面上看到的是固定大小的字体。IE6 还是那样。但所有其他的现代浏览器已经不再是那样做了。他们让终端用户可以调控页面的字体大小, 即使你在页面上使用了固定大小的字体。

我想这种浏览器地址栏的现象和上面那种情况应该是差不多的。

4 - 你谈到非中文用户不能看到正确的中文地址,那他们能否用链接指向你的页面?他们能否打开并进到你的页面?

肯定能。当然,非中文用户不能看到正确的中文地址,但并不意味着他们不能到达你的页面。

举个例子说,有的 IRI,象 alogblog.com/中國/index.html ,你可能会想,IRI 的地址你可以到浏览器的地址栏输入 "中國",当然你可以这么做。

但是,那不是正常的使用计算机的方式,很少有人会用手工去输入地址的。比如美国用户的电脑里没有中文字体,他们不能直接输入也不能看到中文的 "中國"。

然而,如果他从其他页面的链接来寻找这个页面 (中國/index.html ),他也能到达。

最终,我要问,为什么我们要使用 IRI 呢?
作为我来讲,为什么我要用韩语的 URL 呢?
作为你来讲,为什么你要用汉语的 URL 呢?
職業.com ,又为什么要用这个域名而不用 occupation.com 呢?

我认为,用户之所以采用 IRI / IDN,是因为他们把能 理解 / 使用 / 看懂 / 他们自己语言的人看得更重要。

所以,如果你的一些页面内容是针对全球用户的,那么标题就用英语来写。如果某些页面都是中文而且这些页面是针对懂得中文的用户的,那么标题就用中文来写。

我也是遵循这条原则的。

5 - 如果链接你中文 IRI 的人是能 理解 / 使用 / 看懂 中文的人 (一般来说应该是中国人),那他就没有必要使用 %HH 地址,如果他知道这只是用来 过渡URL 显示的。

再比方说,如果一个不懂得汉语的美国人要链接你的页面时,那么无论如何他就只能在他那 ISO-8859-1编码的页面上使用 %HH 了。

但是象我在第四条里说的,绝大多数情况下,你的永久地址都会被中文格式所链接。如果你担心别人用 %HH 格式来链接 (因为在他们的浏览器上显示的你的 IRI 是 %HH ),那么我建议你把你的 IRI 地址镶进你的独立页面(Individual Page)中,如果有人要链接它,可以从你的页面中复制那个中文地址而不用到浏览器的地址栏中去复制了。

为了更方便点,你可以提供一些按钮形式的链接给那些要链接该页面的人:
http://alogblog.com/blog/archives/2004/06/Mozillar에서도_가능한_클립보드_복사_자바스크립트.php

如果你想要 IE 或 FF 来复制 Javascript,看看上面这个链接吧。

在韩国,不是很多人知道 IRI。所以我经常故意的把我的 韩语 IRI 地址贴到别人的网页或论坛上,然后,他们会发现 Ooo~,原来韩语地址也可以这样啊... ...

对于 SE / PR / linking ... ... 等等 我可以告诉你,别担心啊 :) 为什么呢?

因为当我们使用 IRI 的时候,我们具有比那些使用非 IRI 或 URL 的人有更多的优势。

例如,当我用韩语在博客上发表文章时,那我的 URL 是什么呢?如果我不使用 IRI,那它的 URL 就只能是下面两种形式:一种是 alogblog.com/my_good_posting.html,而另一种是 alogblog.com/2006/234.html

对啊,只能是这样的了,既不是文章的内容,也不是文章的标题。

如果我们使用 IRI 地址而如果 Yahoo 或 Google 并不能明白我们的 IRI 的含义的话,我们并没有失去什么,只是我们没有额外获得什么而已。

庆幸的是,Google 能很好的理解 IRI,而不明白 %HH 。韩国Yahoo好像能明白 %HH 。即使这样,我们没有失去什么。

随着时间推移,当我们越来越多的把我们自己的语言用作地址,Yahoo 也会要开始采用 IRI 的原始含义,在技术上来说, 这并没有什么困难。

=======================
总而言之,IRI 现在还不算成熟。 所以,眼下来看,我们可以对一些未知的问题获得一些经验,有一点可以确定的是,互联网环境将从 URL (由于只是允许单纯的 ASCII,我讨厌这种哲学,尽管在互联网刚开始时没有问题)转向 IRI 。很多的浏览器将会更好更多的支持 IRI,越来越多的人们将会知道并且理解它。

这只是时间问题。

=============
嘿,写得太长了。
我的英语不是很好,我担心我的想法能不能正确地表达给你。
但愿如此。

好了。我实在是几天没有睡好了,在稀里糊涂中把Lee Joon 的这封邮件写成了中文。可不是吗,现在已经天亮了,这个不眠之夜啊。

关于搜索引擎辨认 IRI 的问题,我也补充一句:美国的 Google 能很好的读懂它,但专门针对我们中国用户立足于本地化的 百度 却不认识正宗的中文。有意思吧? 不信?到这里看看 百度,再看看 Google,你就明白了。

baidu-iri
google-iri


估计上面写的还有不少的错误或语句不通的地方,或者我完全就说错了。现不管它了。以后再改过来吧。

前面已经很长了,不知道你是不是早就没有耐心了?那不怪你,只怪我太无聊。

不管怎样,我还是把 Lee Joon 的原始邮件贴上来,放到下页吧。

因为今天又有朋友到我这里留言,说在MT安装教程的帮助下安装成功。那是去年十月写的。今天觉得应该赶快补充这个提示。

正在使用MT的朋友知道,当你安装好MT之后,你会迫不及待的开始建立文章类别 (Categories),并把文章发表在相应的类别中。可能你的类别还建了好长一串呢:-))

在MT的默认设置下,你到你的服务器上看看,在根目录下,除了有 cgi-bin,mt-static 等文件夹外,还列出了所有的文章存档类型所产生的相关文件夹。他们包括所有的类别,所有的年份和月份等文件夹。好长一串。随着时间的推移,也随着你不断增加的类别建立,这一长串的文件夹还会不断的增加。他们都被列在了根目录下。

另外,如果你的服务器是有绑定Addon Domains的功能的话,而这些绑定的Addon Domains又正好在现有的根目录下,那更增加了这个长度。最后,你以后还可能在这个MT的基础上再建立新的MT博客,可能还是好几个呢,他们也会被列在根目录下。

所有的这些都在根目录下,显得有些无序。

当然增加根目录的长度看起来并不可怕,因为它不会妨碍到MT的任何功能的正常使用。或许你根本不在乎,那是另外一回事了。

我不喜欢什么东西都挤在一起,而希望什么东西都被归类到相应的地方去。尽量让每个目录都条理化,有利于将来站点的管理和发展 (你可别告诉我你只想写点心情之类的东西)。

设立存档路径,到 "SETTINGS" >> "Publishing",找到 Advanced Archive Publishing:

advanced-archive

在存档地址和路径上做相应的设置。你可以参考官方文档来进行设置。或者点开右边的那些问号,找到相应的文档来解答。

可以看到,我本人没有做上面的设置,而是在 Archive Mapping 区域设置的。

archive-mapping

我希望所有的存档都放到一个叫 "archives" 的目录下(你可以随便取个别的名字如 "archi" 又短又好理解),所以在每个类型的存档路径前加上了 "archives/" ,这样的话,他们就都到这个目录下了(不用到服务器上去加这个目录,只要你在MT上设置了,程序会自动写上去的 ! )。你也可以根据你自己的需要把不同类别的存档放到不同的目录下。

同时,你也看到了,每个存档类型都有个下拉菜单,让你选择该类型存档的显示方式,也就是该类型在地址栏的显示,包括日期和类别。

所以当你选择了你要的显示方式后,保存,再去点 "Custom...",在前面加上你希望的目录名称。再保存,重建。

在 Individual Entry Aarchive 的下拉菜单下,你看到了共有12种方式让你选择,够多吧,如果你还觉得都不好,那你也是点这个 "Custom..." 来进行自定义。 这些选项都是为了使存档类型具有相关的含义,并同时有利于搜索引擎来索引。是MT的很大的一个特色。所以你要好好利用它们。

上面的这些设置,最好是在你的 Weblog 还没有正式开始运作的时候就设置好。如果在默认情况下写了一些东西,而后再来这里设置,那就意味着你的存档这里有一点,那里也有一点,日子一长,东西一多,可能你自己都搞不清了。如果你把他们都搬到现在设置的目录下,哈哈,浏览器会告诉你该页面找不到。那你就只能重新发表然后改变发表时间了。

我碰到了这个麻烦,我没有选择重新发表,而是选择了重新安装。因为重新安装要比发表来得快得多,三分钟解决安装(删除数据库,再次建立数据库,重新运行 mt.cgi,重新安装成功)。切记,在重新安装前先导出所有的文章,然后紧接着就去设置,完了再导入,否则又是一锅粥了。同志们哪,我当时就这么倒腾着重装了三次才彻底弄好!

与其到后面这样麻烦不如趁早现在就开始行动。

酷吧。

关于设计个性化的Movable Type templates,前面已经谈了很多了。虽然不一定面面俱到,但我想至少从概念上来说,还是有了点认识,不至于无从下手了。

下面说的可能对某些同志来说完全是废话,可我还是把他们写下来,作为一点小提示吧。

设计Movable Type的方式

在第一节中说过设计的途径主要有两种:修改现成的模板和完全丢开Movable Type的现成模板而自己设计。

这里再进行一点补充。

1 - 按照前几节谈过的在默认模板的基础上进行修改。

2 - 通过安装MT的插件StyleCatcher来更换样式。昨天搜索了一下,发现不少人在安装上有问题。我是去年安装的这个插件,装完后换了两个样式不喜欢就没有再用了。我觉得装这个插件是件花不来的事。因为不是经常用,还费了一肚子劲去装。谁会总去更换样式啊。

如果确实看上其中的某个样式而又不装StyleCatcher,有什么办法吗?我在第四节中说过,因为默认模板的Styles-site.css这个文件是由两部分组成的,一部分是base-weblog.css,后一部分是 "某某theme.css",默认模板也是采用的某一个 theme(样式),那你要更换某个 theme,就只要把它下载回来然后复制"某某theme.css",把它覆盖在默认模板的 "theme-vicksburg.css"上面就行了(当然还有图片要传上去)。这要比安装那玩意简单得多。若要再修改这个 theme 的某些细节,你只要改动 "某某theme.css" 而不用改动那个 base-weblog.css。

除了在官方网站有样式更换,而且在 thestylecontest 也有很多的样式供你选择。同样的道理,当你下载了由个样式后,你也只要复制那个 "某某theme.css" 的CSS文件然后覆盖到默认模板的 "theme-vicksburg.css"上面就大功告成 (还有图片)。

3 - 你完全不想要任何人的模板,你可以自己设计一个。在你喜欢的网页编辑器中把样稿设计出来后,参考MT的默认模板,搞清什么地方要用容器标签,什么地方要用变量标签。插入合适的容器标签,然后把那些变量性质的内容全部用变量标签代替。比方说,文章的主体内容 (不管它有多长也不管它有几段) 全部只用 <$MTEntryBody$> 这几个代码代替。当所有的内容都被换成MT的标签后,它就已经是MT的模版了,形象点说就是你的汽车已经装上了油门和各种操纵杆,可以带动你的MT发动机了,它们会为你产生100%的静态网页。

这时从你的编辑器的预览窗看起来肯定已经变得面目全非,如果你使用该死的DreamWeaver甚至还给你报出100条错误。你别管这些。将这个页面模板复制到相应的模版中 (或者上传到服务器,在模板区域用相应的外部链接连上),保存重建。CSS文件也一样。

到你的网站看看是不是你要的样子?

如果对MT的标签不熟悉,也可以用 Golive CS2来试试,其中有一块是专门用来设计MT的模板的。但到目前为止,我还没有尝试过,我自己习惯用手写。如果你用过,希望你也来谈谈一些使用感受。另外就是你也可以使用这个MT标签的插件或者这个模板编辑器,让你在设计的时候所有的标签看起来一目了然。

----------
(全文完)

补充:

这里 还有几款通过网页编辑器的插件用来方便编辑MT的标签的,其中有 DreamWeaverTopStyle Pro 等常用的几个。里面都有详细的使用说明以及下载处,并附有图片说明。

补充时间:2006年7月5日

更新

如果是 MT3.31版的用户,请参考一下这篇文章的更新部分。因为3.2 版本和3.31版的结构与css文件有些不同。上面提到的 /* Vicksburg (theme-vicksburg.css) */ 已经更新为 /* Vicksburg II (theme-vicksburg.css) */ 了,就是第二版。所以更换主题时请看清该主题的详细信息。

2006年7月15日

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

通过前面几节对MT模版的观察,应该说你对MT的页面设计有了一个大概的认识。

不管你的页面设计得有多好看,也不管你其它的程序运用上来可以使你的博客具有多么诱人的效果,如果缺少MT的标签,那就怎么也不是 Movable Type,就不可能让MT运行起来。因为只有那些独特的MT标签才能带动Movable Type这台发动机。

前面两节谈的只是纯粹的页面布局和样式设计,也就是HTML/XHTML的内容。

下面我们来看看Movable Type的标签是怎么样的。

认识Movable Type的标签

Movable Type 的标签分为两种:容器标签(Container tags)和变量标签(Variable tags)。

这里我不再把各自的定义闯述一遍,还是通过实例可能更好理解。这是我从Main Index 模板中简化出来的一段代码:

<MTEntries>
<h3 class="entry-header"><$MTEntryTitle$></h3>

<$MTEntryBody$>

<MTEntryIfExtended>
<p class="entry-more-link">
<a href="<$MTEntryPermalink$>#more">Continue reading "<$MTEntryTitle$>" &raquo;</a>
</p>
</MTEntryIfExtended>

<p>Posted by <$MTEntryAuthor$> at <$MTEntryDate format="%X"$></p>
</MTEntries>

1 - 第一行的 <MTEntries> 和最后一行的 </MTEntries> 就是一对容器标签。类似于HTML/XHTML中的标签一样,必须成对出现,一个开头一个结尾。所有这篇文章的相关的内容都被包含在这对标签里面了。象<div> 和 </div>一样。

2 - 第二行H3,是文章的标题,用的是 <$MTEntryTitle$>。这是一个变量标签。它的值是变化的,我们可以理解成随着每篇文章标题的不同,它会产生不同的标题。它代表不同的标题的值。我们也看出来,变量标签总被一对"$"包围着,而容器标签就没有这个符号。所以也很容易判断。并且变量标签不是成对的。

3 - 第三行的 <$MTEntryBody$> 是文章的主体部分。也是一个变量标签。大段的文章就被这个标签所代表。

4 - 接下来的 <MTEntryIfExtended> 和 </MTEntryIfExtended> 又是一对条件性质的容器标签。意思是说如果你的文章有延伸部分,那么延伸部分就会体现在页面上并且都会包含在这对标签当中。如果没有延伸部分那在页面上就不会有体现了。

5 - 那么文章的延伸是怎么样的呢?我们看到了延伸部分是以一个链接形式来体现的,是这行:

<a href="<$MTEntryPermalink$>#more">Continue reading "<$MTEntryTitle$>" »</a>

里面的 <$MTEntryPermalink$> 和 <$MTEntryTitle$> 都是变量标签。前者是这篇文章的固定地址,后面加上 "#more" 就是到该文章的延伸部分;后者指的是这篇文章的标题。比方说你的这篇文章的标题是“我的第一篇文章”,那么这行代码在页面上的体现就是:“继续阅读 ‘我的第一篇文章’”。每篇文章的地址和标题都是变化的,他们代表变量的值。

6 - 再下来一行,<$MTEntryAuthor$> 是表示文章作者。因为Movable Type 是多作者的发布系统,所以作者也是变量。而 <$MTEntryDate format="%X"$> 就是时间的变量了。时间的格式你可以根据自己的需要来改变。

上面只是举个例子来简单说明了MT的标签。

更详细的内容可以到官方的标签解说查看。

从上面这个举例中,也可以看到,HTML/XHTML标签和MT的标签是混杂在一起的。但是你在设计或修改MT模板的时候要保持清醒地头脑,尤其要注意容器标签一定要有结尾部分。否则在重建模版的时候系统会报错的,你的设计会无法安装到模版中。

关于MT标签大概就说这么多吧。

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

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

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

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

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

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

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

<div id="container">
<div id="container-inner" class="pkg">

<div id="banner">
<div id="banner-inner" class="pkg">

<div id="pagebody">
<div id="pagebody-inner" class="pkg">

<div id="alpha">
<div id="alpha-inner" class="pkg">

<div id="beta">
<div id="beta-inner" class="pkg">

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

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

<div class="module-search module">

<div class="module-categories module">

<div class="module-archives module">

<div class="module-syndicate module">

<div class="module-creative-commons module">

<div class="module-powered module">

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

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

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

<div class="module-search module">
<h2 class="module-header">Search</h2>
<div class="module-content">
blah blah blah ......
</div>
</div>

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

我只是举个例子。

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

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

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

<div class="module-blogroll module">
<h2 class="module-header">Blogroll</h2>
<div class="module-content">
blah blah blah ......
</div>
</div>

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

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

<div class="module-categories module">
<h2 class="module-header">Blogroll</h2>
<div class="module-content">
blah blah blah ......
</div>
</div>

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

<ul class="module-list">
<li class="module-list-item"><a href="http://www.example.com">Link Text</a></li>
<li class="module-list-item"><a href="http://www.example.com">Link Text</a></li>
<li class="module-list-item"><a href="http://www.example.com">Link Text</a></li>
</ul>

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

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

.entry-footer,
.comment-footer,
.trackback-footer
{
margin: 0 0 20px 0;
border-top: 1px solid #dae0e6;
padding-top: 3px;
color: #666;
font-size: 10px;
text-align: right;
}

这是说 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 ]

About this Archive

This page is a archive of entries in the Tutorials category from July 2006.

Tutorials: June 2006 is the previous archive.

Tutorials: October 2006 is the next archive.

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