extmail_template_intro [ExtMail Project]

一、版权声明：

本文版权归作者所有，如其他个人、第三方网站或媒体报刊等需转载全文或节选，为支持我们的工作，请务必注明如下信息：

文档所有者：Extmail Dev Team;
文章原始出处：http://www.extmail.org/docs/Extmail_Template_Intro/
项目首页：http://www.extmail.org
如果因此而给您带来麻烦，请您原谅，谢谢合作。

二、关于此文

版　　本：1.01
作　　者：Ray <raykingecs (at) extmail (dot) org> , He zhiqiang <hzqbbc (at) extmail (dot) org>
项目主页：http://www.extmail.org

变更说明

最后更新：2010-06-14
1.01 2010-06-14 由liushaobo 更新本文“第八部分”一处笔误。
1.01 2009-11-25 基于ExtMail-1.10 更新IP security文件，更新天气预报代码，更新文中部分图片。作者：jgh2008

本文档主要讲述Extmail的模板原理和Extmail模板的修改方法、语言包对应关系等，最后给出修改实例。编写本文的初衷，是给希望修改Extmail界面元素或编写新的Extmail模板的网管/用户参考，本文采用了部分王鹏辉2007-06-17讲座资料。

本文档假设读者安装EMOS1.3/1.4（即Extmail安装目录为：/var/www/extsuite/extmail），并具有一定的Unix平台 / Linux平台系统经验，懂得常规的系统操作，如文件的删除、目录创建、改名和vi编辑器的基本使用以及具有HTML基础知识。

本文档所有内容均在EMOS1.3/1.4系统安装、测试通过，其它系统酌情修改对应文件的路径。

本文档由Extmail项目组负责解释，并根据Extmail项目的建设和发展，适时予以更新。如手册与实际项目情况有冲突，以文档服从实际为原则。

三、ExtMail模板系统介绍

为了能让不同国家的用户使用系统并且能充分展现使用者的个性化需求，Extmail在设计之初就充分考虑到了语言与界面的切换问题，发展至今已成为一个真正的多语言系统，并且能够方便的支持主题（界面）和多语言界面的更换功能。

ExtMail模板系统是以Perl的HTML::KTemplate模块为核心（HTML::KTemplate是由Kasper Dziurdz先生开发的一款功能强大的HTML代码解析模块，详细信介绍参见http://search.cpan.org/~kasper/HTML-KTemplate-1.33/KTemplate.pm），加上与之配合的多语言系统与模板文件，构成了完整的ExtMail模板系统。

此结构设计大大简化了模板开发的难度和压力，您无需掌握Perl、无需拥有太多的编程经验，只需依照现有的编码规则编制模板文件，就可以做出自己的个性化界面。

四、页面生成示意图

五、模板驱动流程

模板的驱动在业务层开始，当一个页面得到请求的时候，业务层通过数据层取得产生页面所需要的数据，然后从多语言系统中取得相应语言的翻译，加上此页面上相应的逻辑，所有信息通过Ext::Template与HTML::KTemplate传递给模板文件统一替换执行，生成最终可见的页面。

六、ExtMail模板系统组成部分

  Ext::Template
  Ext::Template模块提供了HTML::KTemplate的ExtMail接口，并且定义了HTML::KTemplate在ExtMail中的Options；

  Ext::Lang 
  Ext::Lang 是ExtMail的语言模块，作为多语言处理的接口，负责加载语言文件（Ext::Lang::<LANG>）模块，并且提供一些方法和变量。

   Ext::Lang::<LANG>
  Ext::Lang::<LANG>为ExtMail多语言翻译文件包，以Hash表结构存储，定义了语言、编码、翻译字段等；

  Html目录
  模板的HTML文件

  Ext::CGI

七、模块相应存放位置

  模板HTML文件：
  /var/www/extsuite/extmail/html 
  注：默认HTML模板：/var/www/extsuite/extmail/html/default

  Ext:: Template：
  /var/www/extsuite/extmail/libs/Ext

  Ext::Lang
  /var/www/extsuite/extmail/libs/Ext/App

  Ext::Lang::<LANG>
  /var/www/extsuite/extmail/lang

  Ext:: CGI：
  /var/www/extsuite/extmail/cgi

八、ExtMail模板变量基础介绍

变量

模板变量是形如:<%VARFOO%>的标签，VARFOO如果是大写变量则为程序变量，包含的是由程序输出的内容，小写变量为语言包中的变量，主要用于多语言环境、翻译等。

 例：
 abook.html 中：<TITLE><%meta_title%></TITLE>
 此处即为模板变量，因为小写所以是语言包变量。
 该变量在zh_CN语言包文件中被赋值为：meta_title => 'WebMail 通讯录'；
 在en_US语言包中被赋值为：meta_title => 'Personal Abook'；
 由此不同语言环境在abook.html中看到的TITLE有所不同；

块（blocks）

在模板中，还存在大量的诸如IF … ELSE … END 这样的逻辑块（blocks），这些块可以实现某些特定需求，比如根据用户不同，显示不同的文字内容，或者循环显示、打印一些内容，如表格或段落等。每个块以 <!– IF –> 开始，以<!– END –>结束，大家可以发现，块的起始和结束其实就是HTML代码中的注释:)

Extmail模板中支持的块名目前有：

 A.  IF ELSE END （条件选择1）;

 B.  BEGIN END （循环）;

 C.  UNLESS END （条件选择2）;

 D.  IF END （条件选择3）;

条件选择1

 <!-- IF VARFOO -->
 如果VARFOO为真，则显示这段文字
 <!-- ELSE VARFOO -->
 VARFOO为假，显示这段文字
 <!-- END VARFOO -->

在程序中，VARFOO这个变量如果为真，则显示蓝色的内容，否则显示红色的内容。

条件选择2

 <!-- UNLESS VARFOO -->
 只有VARFOO为假才显示这段内容
 <!-- END VARFOO -->

在程序中，VARFOO这个模板变量只有为假时，才显示上面块之间的内容。

条件选择3

 <!-- IF VARFOO -->
 如果VARFOO为真则显示这段内容
 <!-- END VARFOO -->

在程序中，模板变量VARFOO如果为真，就显示上面这段文字内容

循环

 <!-- BEGIN LOOPVAR -->
 这个是循环<%COUNT%>
 <!-- END LOOPVAR -->

循环是一个特殊的块，它能循环显示内容，并且每次循环内还可以嵌套变量。如上面的例子中，如果程序在循环时改变COUNT的内容，则可以看到诸如：

 这个是循环1
 这个是循环2
 这个是循环3

这样的内容。在目前系统模板里，大量使用了循环，以显示如：邮箱列表，邮件列表，帐户列表等可变的信息。建议：对于不熟悉这些块（blocks）的用户，不要随便修改块逻辑，而仅仅修改HTML或普通变量（这种形式）。并且修改时还应该保留一份能用的backup。

包含（Include）

模板引擎还支持包含特性，即通过INCLUDE指令，将另一个模板包含进来，合成一个大模板。在建立页面时，会有一些部分每个页面都需要的，比如说邮箱列表，或者导航条等，利用这个特性，可以将公共部分放到一个小模板里，然后在其他模板里INCLUDE就可以了。语法：<!– INCLUDE ‘other.tpl’ –>

 例: 在模板中的<!-- INCLUDE ‘TOP_BAN.html’ --> 就是包含了顶部的导航条。

九、HTML页面、Perl程序和语言包对应关系

模板HTML文件、Ext::Lang和Ext::Lang::<LANG>之间的对应关系如下（其中*.html为模板HTML文件，*.pm为Ext::Lang，%*为Ext::Lang::<LANG>具体目录参见：模块相应存放位置）：

 index.html     => Login.pm 
 abook.html     => Abook.pm  
 folders.html   => Folders.pm  
 pref.html      => Pref.pm 
 compose.html   => Compose.pm  
 filter.html    => Filter.pm  
 globabook.html => GlobalAbook.pm  
 netdisk.html   => NetDisk.pm  
 readmsg.html   => Message.pm  
 welcome.html   => Folders.pm

 Login.pm       => %lang_login          =>   登陆页面 
 Abook.pm       => %lang_abook          =>   通讯录—个人地址本 
 Folders.pm     => %lang_folders        =>   首页、收件箱 
 Pref.pm        => %lang_pref           =>   偏好设置-常规设置、POP3取信帐号 
 Compose.pm     => %lang_compose        =>   写邮件 
 Filter.pm      => %lang_filter         =>   偏好设置-过滤器设置 、自动回复设置、白名单、黑名单 
 GlobalAbook.pm => %lang_globalabook    =>   通讯录-全局地址本 
 NetDisk.pm     => %lang_netdisk        =>   网络磁盘 
 Message.pm     => %lang_readmsg        =>   读邮件 
 App.pm         => %lang_global

十、模板的创建流程

目录结构

 在ExtMail根目录的html文件夹下创建自己的模板文件夹mytemplate

必要文件

 按照default模板的文件目录结构创建出相应的模板文件

开始创建

 撰写html/JS/CSS等等文件

启用新模板

 修改webmail.cf
 SYS USER TEMPLATE = mytemplate

十一、修改实例：ExtMail登陆页面

创建和修改ExtMail模板在技术上是一体的，但是如果不会修改模板，创建就无从谈起。下面我们通过修改ExtMail的登陆页和首页来说明如何修改。注：  本例中以修改简体中文语言为主，如果您使用的是改其他语言，请修改相应文件；  本例均以ExtMail为说明，ExtMan的结构和修改大同小异，请自行对照修改；

1. 页面Title

 修改文件：/var/www/extsuite/extmail/lang/zh_CN 
 修改位置：
 %lang_login = (
 meta_title => '欢迎使用ExtMail',

2. Logo

 修改文件：/var/www/extsuite/extmail/html/default/images/logo.gif
 修改内容：替换成需要的Logo图片文件

3. 鼠标指向Logo的显示

 修改文件：/var/www/extsuite/extmail/html/default/index.html
 修改位置：<DIV class=lg><A href="http://www.extmail.org/" target=_blank><IMG alt=ExtMail>

4. 技术支持和自愿捐助连接

 修改文件：/var/www/extsuite/extmail/html/default/index.html 
 修改位置：
 <div class=donate> <a href="http://www.extmail.org/support/<%LANG%>/index.html" target="_blank"> 
 <b><%support_link%></b></a> | 
 <img style="vertical-align: middle" src="/extmail/images/donate.png"> 
 <a href="http://www.extmail.org/donate/" target="_blank"><b style="color: #5678A6"><%donate%></b></a> 
 </div>

5. 欢迎词

 修改文件：/var/www/extsuite/extmail/lang/zh_CN 
 修改位置：
 %lang_login = (
 wsplash => '快速可靠, 高性能I/O
 开源MAIL开足马力迈进中...',

6. 页面底部信息

修改文件：/var/www/extsuite/extmail/html/default/index.html
修改位置：
<div class=pb>Powered by <font style="font-weight: bold; color: #000"><%VERSION%></font> © 2004-2006 ExtMail.Org Runtime: <%TIME%>
</div>

7. 设定默认域名

 修改文件：/var/www/extsuite/extmail/html/default/index.html
 修改位置：<TD><INPUT TYPE="text" class="input_n" NAME="domain"></TD>
 修改结果：<TD><INPUT TYPE="text" class="input_n" NAME="domain" value="example.com"></TD>

8. 修改IP security为默认不选择

 修改文件：/var/www/extsuite/extmail/html/default/index.html 
 修改位置：<td><input type=checkbox checked name=nosameip><%ip_security%>
 修改结果：<td><input type=checkbox name=nosameip><%ip_security%>

9. 欢迎使用

 修改文件：/var/www/extsuite/extmail/lang/zh_CN
 修改位置：
 %lang_login = (
 welcome_index => '欢迎使用ExtMail!',

10. POP3和SMTP设置信息提示

 修改文件：/var/www/extsuite/extmail/html/default/index.html
 修改位置：
 POP3 <b>:</b>& nbsp;& nbsp;pop3.yourdomain.com<br />
 SMTP <b>:</b>& nbsp;& nbsp;smtp.yourdomain.com<br />

11. 特点介绍

 修改文件：/var/www/extsuite/extmail/lang/zh_CN
 修改位置：
 %lang_login = (
 intro2 => '<b>快速而可靠</b><br />引入索引缓存(Cache)技术和高效核心，WebMail操作疾步如飞',
 intro3 => '<b>多语言同屏读写</b><br />全面支持UTF8，实现同屏读写多国语言，真正做到国际邮、无乱码',
 intro4 => '<b>真正模板化设计</b><br />MVC设计+高速模板引擎，实现了内容数据完全分离，轻松修改模板',
 intro5 => '<b>高性能I/O</b><br />;轻松应付>1GB邮箱/200M附件，远强于流行的各式php webmail',

12. 去除免费注册按钮

 修改文件：/var/www/extsuite/extmail/webmail.cf
 修改位置：SYS_SHOW_SIGNUP = 1
 修改结果：SYS_SHOW_SIGNUP = 0

十二、修改实例：ExtMail首页

1. 退出、关于、帮助链接

 修改文件：/var/www/extsuite/extmail/html/default/TOP_BAN.html
 修改位置：
 <a href="index.cgi?__mode=logout&sid=<%SID%>"><%logout%></a> | 
 <a target=_blank href="http://www.extmail.org/support/<%LANG%>/about.html"><%about%></a> | 
 <a target=_blank href="http://www.extmail.org/support/<%LANG%>/help.html"><%help%></a>

2. 页底部信息

 修改文件：/var/www/extsuite/extmail/html/default/BOTTOM.html
 修改位置：
 <div id="Bcr">Powered by <%VERSION%> © 2006 ExtMail.Org Runtime: <%TIME%><br>
 <%extmail_whatis%></div>

3. 项目新闻

 修改文件：/var/www/extsuite/extmail/html/default/welcome.html
 修改位置：
              </div>
              <div style="padding-left: 5px;padding-right:5px">
              <div class="panelout" id="etnews_div">
              <div class="paneltit">&nbsp;ExtMail Project News</div>
              <div class="panelin" id="etnews_container">
              </div>

4. 天气预报

 修改文件：/var/www/extsuite/extmail/html/default/welcome.html
 修改位置：
 <TD  width=230px valign=top style="">
         <div class="panelout" id="coolweather_div">
               <div class="paneltit">&nbsp;<%weatherinfo%></div>
               <div class="panelin" id="coolweather_container">
               </div>
               <script type="text/javascript">
                       coolweather_iconspath = '/extmail/plugins/coolweather/icons/';
                       coolweather_init();
               </script>
         </div>
 </TD>