Recently in Tutorials Category

在Movable Type中创建页面(2)

| | Comments (3) | TrackBacks (0)

昨天的在Movable Type中创建页面可以帮助我们很好的理解MT页面的概念。那种方法对于建立几个不多也不复杂的页面来说是很实用的。

但在现实当中,有时候它又会显示出不足或不便于管理。

还是拿About关于页面来举例。如果你只是在你的个人blog上介绍你自己,那么用前面的那种方法就够了。加上你还做几个联系页面,资源页面什么的,就那么几个页面在Indexes模板区也不怎么碍事不妨碍管理。

但是如果情况是:

要介绍的不是一个人而是一个团队(有10个人或者20个人?),每个人都要有个单独的介绍页面。对了对了,还有一个所有团队成员的名单页面,就像类似于这个页面一样。如果用前面那办法在Indexes模板区创建,当然可以做到,但岂不是会在Indexes区域有几十个各种各样的模板了,容易和其他模板相混淆也不好管理,也一定很麻烦。头都会大的。

也许你想把自己曾经的作品,象论文,翻译文章,网站项目,Flash作品,摄影作品,成功案例等等,也放在你的网站上,问题是这些都不能象发表文章一样来发表到你的blog中去,因为他们都是非blog的内容。这些应该是你的blog的扩展,或者是你的网站的一部分,或者你的网站根本就没有blog,全部都是由若干个这样那样的部分所组成的(别急,慢慢来)。如果你有100篇论文,200幅摄影作品,总不能也放到Indexes区域去吧?头会更大,还不如扔掉MT。

我们以Digital Web的这个About页面来做范例,看看用MT怎么来实现这个板块。

先来分析一下。这个页面是用几段文字(或者说是一篇文章)介绍Digital Web在线杂志的基本情况,左边是4个栏目的导航(the stuff, the contributors, the site, advertising)。我们要注意看浏览器中这个页面的地址(url)是 site.com/about/。

再打开左边导航中的stuff栏目。页面正文部分是stuff的所有成员的名单,它的页面地址是 site.com/about/stuff/ 。其中每个stuff成员的链接都分别连到其单独的介绍页面,现在进去一个成员的页面,就到Garrett Dimon那里吧。现在你需要非常细心的看清楚了:正文部分最上面是成员名字Garrett Dimon,下面是他的相关资料和作品。再看页面地址,是 site.com/about/staff/garrett_dimon/ ,这个地址的最后面部分即是这个成员的名字。

打开左边导航的contributors栏目,你会看到和上面stuff栏同样的情况。

到现在为止,还没找到感觉?没关系,接着往下读。^_^

你用过一段时间的Movable Type了,我们一起来感受一下。如果我把site.com/about/ 当作一个MT,把site.com/about/stuff/ 看作是这个MT的一个类别(category),把这个成员的介绍页面site.com/about/staff/garrett_dimon/ 看作是这个类别中的一篇文章,把这个成员页面顶部的成员名字看作是这篇文章的标题,把左边导航中的4个栏目看作是这个MT中4个不同的分类... ...

到现在为止,你有感觉了。

把site.com/about/ 当作一个MT,那这个页面就是首页了。尽管这个首页和你看过的普通MT的首页不同,但是你通过更改首页模板就非常容易的可以实现,把所有的成员列表放到首页不就可以了吗?

因为每个介绍成员的页面是一个单篇文章,不需要月份存档和类别存档,也不需要所有文章存档和各类xml文件。而且所有的页面都是静态页面是不要常更新的,每个页面中都不需要任何的MT标签(你已经知道怎么做了)。

所以我们开始行动:


新建一个MT blog,设置好地址和路径。存档类型(Preferred Archive Type)选择“单篇”(Individual),存档文件后缀选html(你可以做别的选择)。

在Settings - Publishing 下的“Archive Mapping”,将Individual 模板的存档路径选为下图设置或
primary-category/entry_basename.html 。

在Indexes模板区,保留Main Index模板和Stylesheet(其实你也可以删掉,在首页模板和单篇模板中调用其它样式),其余的全部删掉。然后到存档模板区(Archives),留下Individual Entry Archive模板,其余全部删掉(大胆删吧,别怕)。此时重建所有文件。

这个时候About的blog就建好了。设立4个类别分别是stuff, contributors, site, advertising。把单篇文章的模板Individual Entry Archive改成你需要的设计(和首页一致,只要把首页模板复制过来就好了)。开始写的第一篇文章我觉得应该是site.com/about/staff/ 这个页面,文章标题叫“stuff”,归类到类别“stuff”中去,并把所有成员的名单列到这篇文章中,这时你看到编辑框下面的Basename是“stuff”了吗?这个“stuff”是文章的标题。发表,这个site.com/about/staff/ 的页面就出来了。到浏览器中看看这篇文章的地址是不是site.com/about/staff/ ?接下来再写篇新文章,是关于Garrett Dimon的介绍的,这篇文章的标题就叫“Garrett Dimon”,并归到类别“stuff”中,再看看这篇文章的地址是不是site.com/about/staff/garrett_dimon/ ?

你很快就可以写完所有成员的页面。然后把site.com/about/staff/ 页面的每个成员的名字链接连到各自的介绍页面不就完了?

其余三个栏目也是用一样的方法来完成。

象这样的情况,在设计页面模板的时候要注意,正文部分不需要任何MT的标签,侧边的导航也是固定的不需要MT的标签产生。你只需要在首页模板和单篇模板做成4个导航链接就可以了,和你平常做网页是一样的。简言之,整个About部分就是一个网站的一部分,就像做普通的网站一样,只不过是在MT中完成的。

当你需要增加一个类别时,在MT中太简单了,写文章的时候加个新的类别并在导航中补上导航链接。当有新的成员加入时,在site.com/about/staff/ 页面添加一个名字和链接并新发表一篇文章就是。当某个成员又有了新作品需要在他的介绍中及时加上去,到他的介绍页面补充上去一个链接指向他的新作品就是。

一切都是那么简单,那么方便。

等你看完上面的内容,等你做完类似的练习,等你真正理解了MT,你会想到更多,你也会有层出不穷的办法来用MT做出符合你的设计要求的网站;为了达到同一个效果,你也会有多种解决方案。上面举出的这个例子也只是众多解决方案中的一种。

今天你知道通过建立独立的MT来组建About部分,所以我现在再把前面那篇在Movable Type中创建页面中提到的那些页面再作一个变通,用本篇提到的方法来建立那些页面。

假设那些about页面,contact页面,links页面,resource页面,tags页面等等,我不在Indexes区域来创建他们各自的模板,而是可能重新建一个新的MT来安置他们,或者我把他们合并到上面那个About的MT中去也未尝不可,无非是新建一个类别嘛。

先说把他们合并到About的MT中去。假设把要建的所有的这些页面都归类到pages类别中。那么发表在这个类别中的标题为contact的文章地址就应该为:
site.com/about/pages/contact.html
Tags页面的地址就是:
site.com/about/pages/tags.html
... ... ...

只不过你不要把这个类别列入到那4个类别下作导航,而应该另做导航来连接这几个页面。

他们都是就着About这个MT的单篇存档路径来的。

如果我不把他们并到那里而是单独再建个新MT,除了上面那样的路径设置 primary-category/entry_basename.html 外,我也可以不分类别,直接就把单篇存档路径设为 entry_basename.html。因为都是独立的基本不和其它页面有关联的页面,所以我又不需要首页模板了(删除它!),只要一个单篇模板就满足我的需求。

你会觉得奇怪,没有首页的blog?是。

虽然是新设立的MT,按道理好像要首页才象那么回事,那它的首页是不是site.com/pages 呢? 我告诉你,不是。它的首页就是site.com! (奇怪!明明是新的MT怎么会用“别人”的首页?) 所以在设立这个MT的地址和路径时,你要把他们设置为
http://www.site.com/ 和
home/yourname/public_html
而不是:
http://www.site.com/pages/ 和
home/yourname/public_html/pages

总之,你想怎么办就怎么办。怎么办都可以办到。是吗?

到现在为止,你又作何感想呢?

相关阅读

在Movable Type中创建页面
Movable Type 不只是blog发布程序

在Movable Type中创建页面

| | Comments (9) | TrackBacks (0)

对已经使用Movable Type有段时间的朋友来说,可能这是件很简单的事,但对刚开始或接触不久的朋友来说应该还有点帮助。

我们用MT建立起来的blog,每次发表的文章不就是创建了页面吗,怎么还要谈创建页面呢?当然是,但这里要谈的不是指在blog中发表文章时创建的页面,而是独立于这些文章之外的页面。

举几个例子:我要做一个自我介绍的"about"页面;我要做个资源页面,上面是我收集的有关的某个行业的资源;我要做个友情链接的页面,因为首页的链接已经多得放不下了;我还要做个联系方式的页面,上面有联系表单;我还要做个象论坛那样置顶的简短说明,说明下面的“Read More”链接指向另一个页面,那个页面上才有更详尽的说明。这个简短说明总是置顶;也许做一个Tags Cloude的独立页面会比方在首页更好点?... ...还有很多我没想到的。

这些页面都不是blog中的文章。如果你用发表文章的方式来做这些页面,那就是今天发表一个“关于”,明天发表一个“联系我”。当然我们从来没有看过谁的blog是这样的。但我们确实看过很多朋友的这些页面是用发表文章的办法作的,因为他们把时间改动到最早或最新,就可以把这篇“文章”摆在最后面或最前面。这不失为一种办法,也最容易。

我们还可以用另外的办法来做。

首先你需要在“Templates”- “Indexes”模板区,创建一个新的模板(Create New Index Template)。如果是用来“About Me”的,那就把这个模板命名为“about”吧,然后在“Output File ”框中填上你要放置这个页面的路径。如果你要把这个页面放在blog的根目录下,那就填上“about.html”就是了。不过,如果将来哪天类似的页面多了,就会在根目录下排成一长串,所以还是归到一个文件夹里面比较好,用一个“pages”的文件夹好象不错,所有的这些独立页面都放在这里面。这样想好后我就在“Output File ”中填上“pages/about.html”。记住了,这个文件夹的路径你不需要到服务器端去创建,只要在这里填上后MT会自动为你创建好的,就象上传图片时一样填上你要的路径MT就创建好了路径并把图片传到了你设置的路径下。

另开一个浏览器窗口,把Main Index模板中的代码全部复制,粘贴到这个about模板的编辑框中。如果你此时保存重建,这个页面一定和你的首页是一样的。假设你只要把正文区域改成自我介绍,并且正文部分是在alpha板块内,那就在about模板中找到从下面开始:
<div id="alpha">
<div id="alpha-inner" class="pkg">
至下面结尾前的部分(不包括下面的):
<div id="beta">
<div id="beta-inner" class="pkg">

这是完整的alpha板块部分。在这板块里,文章部分是从这行开始的:
<div class="entry" id="entry-<$MTEntryID$>">
从这行往上至:
<div id="alpha-inner" class="pkg">
之间的那几行都可以删除不要。接下来是文章标题H3,正文部分就从
<div class="entry-body">开始。将<div class="entry-body">内的所有代码全部删掉(别怕!)。

现在alpha板块变成大概下面这个样子了:


<div id="alpha">

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

<div class="entry">

<h3 class="entry-header">关于我</h3>

<div class="entry-content">

<div class="entry-body">

... ... ... ...

</div>

</div>

</div>

</div>

</div>

现在你就可以在上面的“... ... ...”区域写上你的丰功伟绩和宏伟蓝图了。

基本上完成了。但在保存重建之前,不要钩选“Build Options”因为没有必要在每次重建那些Index模板时也来重建这个页面,节约点资源。

如果你对(X)HTML熟悉,你当然并不一定要拘泥于上面的标签。

这种办法来创建的页面虽然删除了部分MT标签但也保留了部分MT标签。保存下来的基本上在侧边栏,因为你可能还想要一些由MT标签产生的各类归档,最新文章等等内容。

但这并不意味着用MT来创建页面就一定要用到MT标签才行。一个没有任何MT标签的模板一样可以建立起页面来。那怎么办呢?

在你的blog网站上打开一个单篇文章(在浏览器而不是在MT)。查看源文件,完整复制粘贴到你要创建的模板中。完全没有MT标签吧?修改文字内容,保存重建,还是别钩选上面那个选项(你会发现用FireFox查看源文件要比IE方便直接得多)。

页面算是建好了,最后就是你要在相关的模板中建好这个页面的链接使其他页面能连接到这个页面来,否则这个页面就真的成了“独立”的页面而“游离”于网站之外了。

以后什么时候你觉得这个或这些页面要修改,你只要到Indexes模板区打开某个你建立的页面进行修改,就象你平常修改已经发表过的文章一样。

到这里,你应该发现了:创建一个页面就是创建一个模板,修改这个页面就象修改文章一样的方便。

再回想一下,以前你做网站的页面时是怎么做的呢?你需要和服务器打交道。你先要在页面编辑器中做好这个页面再传到服务器端。现在你不需要这么干,都在MT中完成,不要做额外的上传。是吗?

另外,在MT中不光是可以创建HTML文件,它可以创建任何后缀的文件,如.php,.xml,.inc等等。

我的“与我联系”的页面就是用这种方法建的。可以参考一下。

就说这么多吧,这是最基本的在MT中创建独立页面的方法。


相关阅读

在Movable Type中创建页面(2)
Movable Type 不只是blog发布程序

使用Movable Type的Widgets

| | Comments (1) | TrackBacks (0)

这是我在半个月以前写的一个关于Widgets使用的草稿,一直没有发出来,本来想把Widgets和modules连到一起来写,因为二者是有关联的。现在把标题改了还是单独写widgets吧。

Movable Type的Widgets使得页面模块的管理变得非常方便,在使用上也没有什么难度。

manage_my_widgets进入“Manage my Widgets”后就看到了“First Widget Manager”。在安装好的Widgets(Installed Widgets)一边已经有一排的widgets,这是MT默认的已经预安装好的widgets。如果你觉得哪个widget是你不想要的,那就把不需要的用鼠标提出来放到可用的Widgets(Available Widgets)那边,再保存重建,那么这个名称为“First Widget Manager”的Widget管理器就建好了。

当你什么时候觉得想要增加某个widget时,从可用的那边提到装好的那边。除了增减,你还可以调整widget的上下顺序,也是用鼠标提上提下的,编辑好widgets后再保存重建。

接下来你需要回到相应的模板将Widget的代码 <$MTWidgetManager name="Name of the Widget Manager"$> 应用到模板中,Widgets才能生效。

怎么应用呢?假设我要把刚才建立的“First Widget Manager”应用到Main Index 模板的侧边栏,比方是beta板块。那么你找到beta区域的代码:

<div id="beta">
<div id="beta-inner" class="pkg">
<div class="module-search module">
...... ......
</div>
</div>
</div>

搞清楚里面的每个module的结构,把要用widget代替的module部分删除。一定要看清楚模板里面的每个html标签。

<div class="module-archives module">
<h2 class="module-header">Recent Posts</h2>
<div class="module-content">
<ul class="module-list">
<MTEntries lastn="10">
<li class="module-list-item">
<a href="<$MTEntryPermalink$>"><$MTEntryTitle$></a>
</li>
</MTEntries>
</ul>
</div>
</div>

这就是一个完整的module,是最新发表文章的那部分。如果你的widget中选择安装了这个,那就要在模板中把上面的代码完全删掉。刚才你在“First Widget Manager”中选择了几个要装的widgets,那你就在现在这个模板中删除几个。好,现在你的模板中空了一大截。千万注意删除这些module时,搞清那些<div>和</div>的关系。

因为你建立的Widget管理器的名字是“First Widget Manager”,所以要把
<$MTWidgetManager name="First Widget Manager"$>
这行代码放在删掉的那些modules的位置上,也就是用这一行代码来代替刚才删掉的大段代码。

重建这个模板,你可以看到他们全部在页面上显示出来了。同样的做法,你可以把这个“First Widget Manager”运用到其他的模板上去,象Category Archive,Individual Entry Archive等。

使用widgets来管理后,当你需要对某个模块作修改或增删时,要比以前容易方便些。你不用再象以前那样每次到不同的模板中去改动那些modules了,更不用在每个模板中去检查烦人的HTML和MT标签了,因为你已经把他们都单独提取出来放到Widget管理器中来了,现在你只需要到Widget管理器里面来操作就行了。

如果你要在不同的页面模板中用不同的Widgets,那也好办。比方说只在首页用日历,分类存档页面不要。

那么,你再到“Manage my Widgets ”点击“新建Widget管理器”(Create Widget Manager ),然后给它取个名字,就叫“Second Widget Manager”吧。再把你要的Widgets提出来,当然你现在就不要选那个日历了。和上面的步骤一样,只是到分类存档模板中添加Widgets代码,用
<$MTWidgetManager name="Second Widget Manager"$>
来代替删除的那些modules。这个分类存档页面中就没有日历模块了。另外,你也只需要重建存档模板而不需要重建所有页面。只对相应的模板重建。

如果你觉得“First Widget Manager”和“Second Widget Manager”这样的名字不便于记忆,你也可以用任何其他的命名方法,象“Index Widget Manager”和“Category Widget Manager”也不错。当然你还可以用更简单的命名。

我们已经看到了,在Widget管理器中,MT默认的有12个widget,也就是说给你准备好了12个已经编辑好了的widget。MT的这个widget管理器能不能增加自定义的widget呢?就说那个Blogroll吧,如果可以把Blogroll这个插件也加到widget管理器中来一起管理,那才方便呢。

好,我们来看看吧。真的不难。

首先,我们需要把Blogroll这个模块的结构写出来,放在页面模板中试试看是否能正常显示,下面这段就是个完整的Blogroll模块:

<div class="module-blogroll module">
<div class="module-content">
<MTBlogrollCategories">
<h2 class="module-header"><MTBlogrollCategoryLabel></h2>
<ul class="module-list">
<MTBlogrollEntries">
<li class="module-list-item">
<a href="<MTBlogrollEntryURI>">
<MTBlogrollEntryIfRel> rel="<MTBlogrollEntryRel>"
</MTBlogrollEntryIfRel><MTBlogrollEntryName></a><br />
<MTBlogrollEntryDesc>
</li>
</MTBlogrollEntries>
</ul>
</MTBlogrollCategories>
</div>
</div>

确认你的模块代码没有问题。

到Templates - Modules,创建一个新的模板模块,并命名为“Widget: Blogroll”(切记名称前面部分一定是“Widget: ”),接着把上面那段代码完整的放到这个模块的文本框中,保存。


这就建好了这个模块(module),因为名称前面用了“Widget: ”,这个模块也就成了一个widget。你到widget管理器里就可以看到它的存在。

我们就可以使用它了。

通过这样的办法,你可以创建任意多个自定义的widget。

从前面的说明或者通过你自己的实践,你可以知道,MT的widget管理器如同MT一样,具有高度的自定义能力。

默认的那些widgets,并不一定都会适合你的需求,包括里面的html标签,MT标签你都可以随时进行修改(在Templates - Modules区域),直到符合你的要求。

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 ]

上篇 谈的是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 ]

黑羽 要我写个关于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 ]

About this Archive

This page is a archive of recent entries in the Tutorials category.

Tools is the previous category.

Webmaster Tips is the next category.

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