缘起
为什么要做这个功能？这都是与Zoomq打交道的结果。Zoomq(真名叫什么现在还不知道，不好意思，但网上的朋友知道网名也就可以了吧)是我在CZUG上认识的一个朋友。有一天给我来信谈到我所做的翻译与评论网站，他鼓励我说这个网站不错，建议我增加一些功能，其中就谈到了SKIN (skin)功能，还有一些别的东西。当初做这个网站是想开发一种交互良好的网站供翻译爱好者使用，但东西做出来却没什么人来用。有人来也只是看一看，试一试。可能与我的宣传不够有关。而且我个人也怕过多的宣传会给自已带来过多的压力，因此做出来后也是处于一种大家有兴趣自已去看的这么一种状态。经过 Zoomq的鼓励，于是又有了一些兴趣。而且他还为这个网站设计了版面与Css，做出了他的贡献。于是我也又开始动手进行改进，也是想把这个网站做的更完善一些。于是skin功能就被我加进去了。
这里所实现的skin功能只是我所理解的一种实现，没有参照其它的设计。因此写本文的目的只是想介绍一下我是如何实现的，请不要做为标准的skin实现的例子，而且也许根本没有标准。
结构
在这个网站中，Zoomq给我找出了几种可以定制的项，主要有：网站图标、主题图(就是网站中最长的那个图形，不知道叫什么好)、其它一些小图标 (如最新更新中用的每条更新信息前面的小图标、译/论链接用的小图标、文章有修改时用的"新"的小图标)、CSS、按钮背景图。大概就是这么多。于是我定义了，在我的网站根目录(在我的网站上是translation文件夹)下建立一个名为skins文件夹，用来存放各种skin。每个skin为一个目录，其中存放着所有上面的可定制的对象。要注意，既然已经使用了skin就应该有一个缺省的skin，于是我将缺省的skin文件夹定义为 default。每个skin文件夹都要起好名字好在列表中供人选择。这样我的结构如下：
translation/
----------skins/
-----default(绿色森林)/
---------------logo 网站图标
---------------longlogo 主题图
---------------...
---------------site.css 网站CSS
-----old(原始模样)/
---------------...
请大家注意，这里所有的图形都没有后缀。这样做有一个好处就是：我可以使用不同格式的图形文件。当然一定要指明后缀也是可以的，其实在Zope 中，文件名与内容并不一定要一一对应。比如：文件名可能为a.gif，但文件实际为一个png图形。但可能会带来误解，因此我干脆不使用了。
实现
有了上面的结构了，那么如何实现呢。对于内容的样式的改变只要改变引用的CSS即可。对于图片则只要改变引用的链接即可。那么现在我所关心的就是如何正确地选择正确的路径，及如何使用链接了。
于是我设置一个变量siteskin，它用来保存当前skin的样式名。同时还设定了一个skinpath变量，它用来保存当前skin的路径名。初始化siteskin和skinpath的DTML METHOD文件内容如下：
dm_init(DTML DOCUMENT):
<dtml-if siteskin>
<dtml-call "REQUEST.set('skinpath', 'skins/%s' % siteskin)">
<dtml-else>
<dtml-call "REQUEST.set('skinpath', 'skins/%s' % 'default')">
<dtml-call "REQUEST.set('siteskin', 'default')">
</dtml-if>
在第一次使用skin功能时，siteskin不在用户的cookie中存放(后面讲述如何保存siteskin到cookie中)，因此应设置为缺省值。这里我使用'default'做为缺省值。然后根据siteskin的值设置skinpath的值。可以看出我的skin是放在skins目录下的。
在我的网站中，所有的页面都要使用Html_header，因此我把初始化skin的这段代码(dm_init)放在了html_header文件的最前面，这样保证siteskin和skinpath在使用前总是有效的。
下面我修改了所有使用skin内容的链接。如，在html_header中有使用css的代码，我改为：
<link rel="stylesheet" href="&dtml-skinpath;/site.css" type="text/css"/>
其中&dtml-skinpath;是对skinpath变量的引用。这是dtml-var标记的简单写法，如果不这样写，还可以写成:
<link rel="stylesheet" href="<dtml-var skinpath>/site.css" type="text/css"/>
其它的内容，如文本属性(在css中定义)，根据css中的设置，不同的内容使用不同的css。如：
[1] [2] 下一页
<p class="highlight">文本</p>
<span class="quote">文本</span>
与skin有关的图形引用修改为：
<img src="&dtml-skinpath;/new" />
当然这些示例只是适用于我的网站，你要根据你的实际进行相应的修改。
这样，我们已经实现的skin结构的定义与实现。那么还有一个内容就是，如何让用户进行选择？
Skin的选择
我的实现是，将skin的选择放在了首页。通过提供一个下拉列表，用户就可以进行选择了。
selectskin(DTML DOCUMENT)
1 <select name=selectskin onChange="location.href='&dtml-URL1;/setskin?skin='+this.options[this.selectedIndex].value">
2 <dtml-in eXPr="skins.objectItems('Folder')">
3 <option value="&dtml-id;"<dtml-if expr="siteskin==id"> selected</dtml-if>>&dtml-title;</option>
4 </dtml-in>
5 </select>
第1行对下拉列表改变事件onChange进行处理，即通知浏览器按后面的URL重新打开。其实是调用了setskin处理，传入参数为用户选中的列表值(在这里为选中的skin的文件夹ID名)。&dtml-URL1表示index_html所在的目录。在我的网站中setskin是放在index_html所在的文件夹中的。这样，上面的语句可以理解为：
当skin下拉列表发生变化时，通知浏览器调用当前目录下的setskin文件。参数值为用户选中的skin ID。
第2－4行是通过循环将网站skins下所有的skin列出，同时将缺省值设为siteskin值。如果用户第一次使用，则根据上面 siteskin变量的设置，siteskin缺省会为'default'，因此你的skins目录中必须要的一个ID为'default'的缺省 skin文件夹才可以。
这样，当用户选择了缺省skin以外的skin时，浏览器会自动调用setskin进行skin的设置。setskin文件内容如下：
setskin(Script(Python))
#parameter skin
RESPONSE=container.REQUEST.RESPONSE
etime=(DateTime()+365).toZone('GMT').rfc822()
RESPONSE.setCookie("siteskin", skin, expires=etime, path='/')
RESPONSE.redirect(container.REQUEST.URL1)
这段代码很简单(用DTML METHOD来写也是一样的)。将siteskin保存到cookie中。然后重新显示本目录。这样等于重新显示index_html。
最后的话
以上就是在我的translation中所实现的skin功能。大家有兴趣可以自已去实现。
版权所有 limodou(
[email protected])，如要转载请保留此信息。
Python在向你招手(http://writedown.126.com)
（出处：http://www.sheup.com）
上一页 [1] [2]
（出处：http://www.sheup.com）
上一页 [1] [2] [3]