ExtMai首页模版修改说明1

ExtMai首页模版修改说明ExtMai首页模版修改说明/1/3ExtMai首页模版修改说明ExtMailTemplate（首页模板修改）版权声明：本文版权归作者所有，如其他个人、第三方网站或媒体报刊等需转载全文或节选，为支持我们的工作，请务必注明如下信息：文档所有者：ExtmailDevTeam;文章原始出处：项目首页：如果因此而给您带来麻烦，请您原谅，谢谢合作。变更说明关于此文版本：1.00作者：Ray<raykingecs(at)extmail(dot)org>,Hezhiqiang<hzqbbc(at)extmail(dot)org>项目主页：最后更新：2008-05-31本文档主要讲述Extmail的模板原理和Extmail模板的修改方法、语言包对应关系等，最后给出修改实例。编写本文的初衷，是给希望修改Extmail界面元素或编写新的Extmail模板的网管/用户参考，本文采用了部分王鹏辉2007-06-17讲座资料。本文档假设读者安装EMOS1.3（即Extmail安装目录为：/var/），并具有一定的Unix平台/Linux平台系统经验，懂得常规的系统操作，如文件的删除、目录创建、改名和vi编辑器的基本使用以及具有HTML基础知识。本文档所有内容均在EMOS1.3系统安装、测试通过，其它系统酌情修改对应文件的路径。本文档由Extmail项目组负责解释，并根据Extmail项目的建设和发展，适时予以更新。如手册及实际项目情况有冲突，以文档服从实际为原则。文档目录ExtMail模板系统介绍ExtMail模板系统组成部分ExtMail模板变量基础介绍变量块（blocks）循环包含（Include）HTML页面、Perl程序和语言包对应关系模板的创建流程修改实例：ExtMail登陆页面页面TitleLogo鼠标指向Logo的显示技术支持和自愿捐助连接欢迎词页面底部信息设定默认域名修改IPsecurity为默认不选择欢迎使用POP3和SMTP设置信息提示特点介绍去除免费注册按钮修改实例：ExtMail首页退出、关于、帮助链接页底部信项目新闻天气预报ExtMail模板系统介绍为了能让不同国家的用户使用系统并且能充分展现使用者的个性化需求，Extmail在设计之初就充分考虑到了语言及界面的切换问题，发展至今已成为一个真正的多语言系统，并且能够方便的支持主题（界面）和多语言界面的更换功能。ExtMail模板系统是以Perl的HTML::KTemplate模块为核心（HTML::KTemplate是由KasperDziurdz先生开发的一款功能强大的HTML代码解析模块，详细信介绍参见），加上及之配合的多语言系统及模板文件，构成了完整的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/

注：默认HTML模板：/var/Ext::Template：

/var/Ext::Lang

/var/Ext::Lang::<LANG>

/var/Ext::CGI：

/var/ExtMail模板变量基础介绍变量

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

abook.html中：<TITLE><%meta_title%></TITLE>

此处即为模板变量，因为小写所以是语言包变量。

该变量在zh_CN语言包文件中被赋值为：meta_title=>'WebMail通讯录'；

在en_US语言包中被赋值为：meta_title=>'PersonalAbook'；

由此不同语言环境在abook.html中看到的TITLE有所不同；块（blocks）在模板中，还存在大量的诸如IF…ELSE…END这样的逻辑块（blocks），这些块可以实现某些特定需求，比如根据用户不同，显示不同的文字内容，或者循环显示、打印一些内容，如表格或段落等。每个块以开始，以大家可以发现，块的起始和结束其实就是HTML代码中的注释:)Extmail模板中支持的块名目前有：

A.

IFELSEEND（条件选择1）;

B.

BEGINEND（循环）;

C.

UNLESSEND（条件选择2）;

D.

IFEND（条件选择3）;

条件选择1<!--IFVARFOO-->如果VARFOO为真，则显示这段文字<!--ELSEVARFOO-->VARFOO为假，显示这段文字<!--ENDVARFOO-->在程序中，VARFOO这个变量如果为真，则显示蓝色的内容，否则显示红色的内容。

条件选择2<!--UNLESSVARFOO-->只有VARFOO为假才显示这段内容<!--ENDVARFOO-->在程序中，VARFOO这个模板变量只有为假时，才显示上面块之间的内容。

条件选择3<!--IFVARFOO-->如果VARFOO为真则显示这段内容<!--ENDVARFOO-->在程序中，模板变量VARFOO如果为真，就显示上面这段文字内容

循环<!--BEGINLOOPVAR-->这个是循环<%COUNT%><!--ENDLOOPVAR-->循环是一个特殊的块，它能循环显示内容，并且每次循环内还可以嵌套变量。如上面的例子中，如果程序在循环时改变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.pmabook.html

=>

Abook.pmfolders.html=>

Folders.pmpref.html

=>

Pref.pmcompose.html=>Compose.pmfilter.html

=>

Filter.pmglobabook.html=>GlobalAbook.pmnetdisk.html

=>

NetDisk.pmreadmsg.html

=>

Message.pmwelcome.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

SYSUSERTEMPLATE=mytemplate修改实例：ExtMail登陆页面创建和修改ExtMail模板在技术上是一体的，但是如果不会修改模板，创建就无从谈起。下面我们通过修改ExtMail的登陆页和首页来说明如何修改。

注：

本例中以修改简体中文语言为主，如果您使用的是改其他语言，请修改相应文件；

本例均以ExtMail为说明，ExtMan的结构和修改大同小异，请自行对照修改；

1.

页面Title

修改文件：/var/

修改位置：%lang_login=(

meta_title=>'欢迎使用ExtMail',

2.

Logo

修改文件：/var/

修改内容：替换成需要的Logo图片文件注意：替换图片之后需要重新设置权限。Root：读取，root：只读，只读。

3.

鼠标指向Logo的显示

修改文件：/var/

修改位置：<DIVclass=lg><Ahref=""target=_blank><IMGalt=ExtMail>

4.

技术支持和自愿捐助连接

修改文件：/var/

修改位置：<divclass=donate><ahref="<%LANG%>/index.html"target="_blank"><b><%support_link%></b></a>|<imgstyle="vertical-align:middle"src="/extmail/images/donate.png"><ahref=""target="_blank"><bstyle="color:#5678A6"><%donate%></b></a></div>

5.

欢迎词e

修改文件：/var/

修改位置：%lang_login=(

wsplash=>'快速可靠,高性能I/O

开源MAIL开足马力迈进中...',

6.

页面底部信息

修改文件：/var/

修改位置：<divclass=pb>Poweredby<fontstyle="font-weight:bold;color:#000"><%VERSION%></font>©2004-2006ExtMail.OrgRuntime:<%TIME%></div>

7.

设定默认域名

修改文件：/var/

修改位置：<TD><INPUTTYPE="text"class="input_n"NAME="domain"></TD>

修改结果：<TD><INPUTTYPE="text"class="input_n"NAME="domain"value=""></TD>

8.

修改IPsecurity为默认不选择

修改文件：/var/

修改位置：<td><inputtype=checkboxcheckedname=nosameip><%ip_security%>

修改结果：<td><inputtype=checkboxname=nosameip><%ip_security%>

9.

欢迎使用

修改文件：/var/

修改位置：%lang_login=(

welcome_index=>'欢迎使用ExtMail!',

10.

POP3和SMTP设置信息提示

修改文件：/var/

修改位置：POP3<b>:</b>  <br/>

SMTP<b>:</b>  <br/>

11.

特点介绍

修改文件：/var/

修改位置：%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附件，远强于流行的各式phpwebmail',

12.

去除免费注册按钮

修改文件：/var/

修改位置：SYS_SHOW_SIGNUP=1

修改结果：SYS_SHOW_SIGNUP=0修改实例：ExtMail首页

1.

退出、关于、帮助链接

修改文件：/var/

修改位置：<ahref="index.cgi?__mode=logout&sid=<%SID%>"><%logout%></a>|<atarget=_blankhref="<%LANG%>/about.html"><%about%></a>|<atarget=_blankhref="<%LANG%>/help.html"><%help%></a></span>

2.

页底部信息

修改文件：/var/

修改位置：<divid="Bcr">Poweredby<%VERSION%>©2006ExtMail.OrgRuntime:<%TIME%><br>

<%extmail_whatis%></div>

3.

项目新闻

修改文件：/var/

修改位置：<divstyle="padding-left:5px;padding-right:5px"><divclass="panelout"id="etnews_div"><divclass="paneltit">

ExtMailProjectNews</div><divclass="panelin"id="etnews_container"></div>

4.

天气预报

修改文件：/var/

修改位置：<divclass="panelout">

<divclass="paneltit"><%weatherinfo%></div>

<divclass="panelin">

</div>

<!--INCLUDE'../plugins/weather.html'-->

</div>修改实例：ExtMan后台界面1.

页面Title

修改文件：/var/n/lang/zh_CN

修改位置：%lang_login=(

meta_title=>'欢迎使用ExtMail',2.

Logo

修改文件：/var/n/html/default/images/logo.gif

修改内容：替换成需要的Logo图片文件注意：替换图片之后需要重新设置权限。Root：读取，root：只读，只读。3.

欢迎使用

修改文件：/var/n/lang/zh_CN

修改位置：%lang_login=(

welcome_index=>'欢迎使用ITOKIWebMail管理后台',4.

去除用户名显示

修改文件：/var/n/html/default/index.html

修改位置：<inputname=usernamevalue=class=login_input>修改为：<inputname=usernamevalue=>5.

去除效验码

修改文件：/var/n/webman.cf

修改位置：SYS_CAPTCHA_ON=1将此行添加#号注释即可登录按钮下方信息修改

修改文件：/var/n/html/default/index.html

修改位置：<divalign=rightstyle="padding:5px;padding-right;0px;font-size:10px"> Powerby<b><%VERSION%></b></div>修改为：<divalign=rightstyle="padding:5px;padding-right;0px;font-size:10px"> Powerby<b>MinYouWebMail</b></div>7.

去除邮件用户辅助功能

修改文件1：/var/n/lang/zh_CN