ExtMai首頁模版修改說明

ExtMailTemplate（首頁模板修改）版權(quán)聲明：本文版權(quán)歸作者所有，如其他個人、第三方網(wǎng)站或媒體報刊等需轉(zhuǎn)載全文或節(jié)選，為支持我們的工作，請務必注明如下信息：文檔所有者：ExtmailDevTeam;文章原始出處：/docs/Extmail_Template_Intro/項目首頁：如果因此而給您帶來麻煩，請您原諒，謝謝合作。變更說明關(guān)于此文版本：1.00作者：Ray<raykingecs(at)extmail(dot)org>,Hezhiqiang<hzqbbc(at)extmail(dot)org>項目主頁：最后更新：2008-05-31本文檔主要講述Extmail的模板原理和Extmail模板的修改方法、語言包對應關(guān)系等，最后給出修改實例。編寫本文的初衷，是給希望修改Extmail界面元素或編寫新的Extmail模板的網(wǎng)管/用戶參考，本文采用了部分王鵬輝2007-06-17講座資料。本文檔假設讀者安裝EMOS1.3（即Extmail安裝目錄為：/var/www/extsuite/extmail），并具有一定的Unix平臺/Linux平臺系統(tǒng)經(jīng)驗，懂得常規(guī)的系統(tǒng)操作，如文件的刪除、目錄創(chuàng)建、改名和vi編輯器的基本使用以及具有HTML基礎知識。本文檔所有內(nèi)容均在EMOS1.3系統(tǒng)安裝、測試通過，其它系統(tǒng)酌情修改對應文件的路徑。本文檔由Extmail項目組負責解釋，并根據(jù)Extmail項目的建設和發(fā)展，適時予以更新。如手冊與實際項目情況有沖突，以文檔服從實際為原則。文檔目錄ExtMail模板系統(tǒng)介紹ExtMail模板系統(tǒng)組成部分ExtMail模板變量基礎介紹變量塊（blocks）循環(huán)包含（Include）HTML頁面、Perl程序和語言包對應關(guān)系模板的創(chuàng)建流程修改實例：ExtMail登陸頁面頁面TitleLogo鼠標指向Logo的顯示技術(shù)支持和自愿捐助連接歡迎詞頁面底部信息設定默認域名修改IPsecurity為默認不選擇歡迎使用POP3和SMTP設置信息提示特點介紹去除免費注冊按鈕修改實例：ExtMail首頁退出、關(guān)于、幫助鏈接頁底部信項目新聞天氣預報ExtMail模板系統(tǒng)介紹為了能讓不同國家的用戶使用系統(tǒng)并且能充分展現(xiàn)使用者的個性化需求，Extmail在設計之初就充分考慮到了語言與界面的切換問題，發(fā)展至今已成為一個真正的多語言系統(tǒng)，并且能夠方便的支持主題（界面）和多語言界面的更換功能。ExtMail模板系統(tǒng)是以Perl的HTML::KTemplate模塊為核心（HTML::KTemplate是由KasperDziurdz先生開發(fā)的一款功能強大的HTML代碼解析模塊，詳細信介紹參見/~kasper/HTML-KTemplate-1.33/KTemplate.pm），加上與之配合的多語言系統(tǒng)與模板文件，構(gòu)成了完整的ExtMail模板系統(tǒng)。此結(jié)構(gòu)設計大大簡化了模板開發(fā)的難度和壓力，您無需掌握Perl、無需擁有太多的編程經(jīng)驗，只需依照現(xiàn)有的編碼規(guī)則編制模板文件，就可以做出自己的個性化界面。頁面生成示意圖模板驅(qū)動流程模板的驅(qū)動在業(yè)務層開始，當一個頁面得到請求的時候，業(yè)務層通過數(shù)據(jù)層取得產(chǎn)生頁面所需要的數(shù)據(jù)，然后從多語言系統(tǒng)中取得相應語言的翻譯，加上此頁面上相應的邏輯，所有信息通過Ext::Template與HTML::KTemplate傳遞給模板文件統(tǒng)一替換執(zhí)行，生成最終可見的頁面。ExtMail模板系統(tǒng)組成部分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表結(jié)構(gòu)存儲，定義了語言、編碼、翻譯字段等；Html目錄

模板的HTML文件Ext::CGI模塊相應存放位置模板HTML文件：

/var/www/extsuite/extmail/html

注：默認HTML模板：/var/www/extsuite/extmail/html/defaultExt::Template：

/var/www/extsuite/extmail/libs/ExtExt::Lang

/var/www/extsuite/extmail/libs/Ext/AppExt::Lang::<LANG>

/var/www/extsuite/extmail/langExt::CGI：

/var/www/extsuite/extmail/cgiExtMail模板變量基礎介紹變量

模板變量是形如:<%VARFOO%>的標簽，VARFOO如果是大寫變量則為程序變量，包含的是由程序輸出的內(nèi)容，小寫變量為語言包中的變量，主要用于多語言環(huán)境、翻譯等。例：

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

此處即為模板變量，因為小寫所以是語言包變量。

該變量在zh_CN語言包文件中被賦值為：meta_title=>'WebMail通訊錄'；

在en_US語言包中被賦值為：meta_title=>'PersonalAbook'；

由此不同語言環(huán)境在abook.html中看到的TITLE有所不同；塊（blocks）在模板中，還存在大量的諸如IF…ELSE…END這樣的邏輯塊（blocks），這些塊可以實現(xiàn)某些特定需求，比如根據(jù)用戶不同，顯示不同的文字內(nèi)容，或者循環(huán)顯示、打印一些內(nèi)容，如表格或段落等。每個塊以開始，以大家可以發(fā)現(xiàn)，塊的起始和結(jié)束其實就是HTML代碼中的注釋:)Extmail模板中支持的塊名目前有：

A.

IFELSEEND（條件選擇1）;

B.

BEGINEND（循環(huán)）;

C.

UNLESSEND（條件選擇2）;

D.

IFEND（條件選擇3）;

條件選擇1<!--IFVARFOO-->如果VARFOO為真，則顯示這段文字<!--ELSEVARFOO-->VARFOO為假，顯示這段文字<!--ENDVARFOO-->在程序中，VARFOO這個變量如果為真，則顯示藍色的內(nèi)容，否則顯示紅色的內(nèi)容。

條件選擇2<!--UNLESSVARFOO-->只有VARFOO為假才顯示這段內(nèi)容<!--ENDVARFOO-->在程序中，VARFOO這個模板變量只有為假時，才顯示上面塊之間的內(nèi)容。

條件選擇3<!--IFVARFOO-->如果VARFOO為真則顯示這段內(nèi)容<!--ENDVARFOO-->在程序中，模板變量VARFOO如果為真，就顯示上面這段文字內(nèi)容

循環(huán)<!--BEGINLOOPVAR-->這個是循環(huán)<%COUNT%><!--ENDLOOPVAR-->循環(huán)是一個特殊的塊，它能循環(huán)顯示內(nèi)容，并且每次循環(huán)內(nèi)還可以嵌套變量。如上面的例子中，如果程序在循環(huán)時改變COUNT的內(nèi)容，則可以看到諸如：這個是循環(huán)1這個是循環(huán)2這個是循環(huán)3這樣的內(nèi)容。在目前系統(tǒng)模板里，大量使用了循環(huán)，以顯示如：郵箱列表，郵件列表，帳戶列表等可變的信息。建議：

對于不熟悉這些塊（blocks）的用戶，不要隨便修改塊邏輯，而僅僅修改HTML或普通變量（這種形式）。并且修改時還應該保留一份能用的backup。包含（Include）

模板引擎還支持包含特性，即通過INCLUDE指令，將另一個模板包含進來，合成一個大模板。在建立頁面時，會有一些部分每個頁面都需要的，比如說郵箱列表，或者導航條等，利用這個特性，可以將公共部分放到一個小模板里，然后在其他模板里INCLUDE就可以了。語法：<!--INCLUDE‘other.tpl’-->例:在模板中的<!--INCLUDE‘TOP_BAN.html’-->就是包含了頂部的導航條。HTML頁面、Perl程序和語言包對應關(guān)系模板HTML文件、Ext::Lang和Ext::Lang::<LANG>之間的對應關(guān)系如下（其中*.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

=>

偏好設置-常規(guī)設置、POP3取信帳號Compose.pm=>%lang_compose

=>

寫郵件Filter.pm=>%lang_filter

=>

偏好設置-過濾器設置、自動回復設置、白名單、黑名單GlobalAbook.pm=>%lang_globalabook

=>

通訊錄-全局地址本NetDisk.pm=>%lang_netdisk

=>

網(wǎng)絡磁盤Message.pm=>%lang_readmsg

=>

讀郵件App.pm=>%lang_global模板的創(chuàng)建流程目錄結(jié)構(gòu)在ExtMail根目錄的html文件夾下創(chuàng)建自己的模板文件夾mytemplate必要文件按照default模板的文件目錄結(jié)構(gòu)創(chuàng)建出相應的模板文件開始創(chuàng)建撰寫html/JS/CSS等等文件啟用新模板修改webmail.cf

SYSUSERTEMPLATE=mytemplate修改實例：ExtMail登陸頁面創(chuàng)建和修改ExtMail模板在技術(shù)上是一體的，但是如果不會修改模板，創(chuàng)建就無從談起。下面我們通過修改ExtMail的登陸頁和首頁來說明如何修改。

注：

本例中以修改簡體中文語言為主，如果您使用的是改其他語言，請修改相應文件；

本例均以ExtMail為說明，ExtMan的結(jié)構(gòu)和修改大同小異，請自行對照修改；

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

修改內(nèi)容：替換成需要的Logo圖片文件注意：替換圖片之后需要重新設置權(quán)限。Root：讀取，root：只讀，只讀。

3.

鼠標指向Logo的顯示

修改文件：/var/www/extsuite/extmail/html/default/index.html

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

4.

技術(shù)支持和自愿捐助連接

修改文件：/var/www/extsuite/extmail/html/default/index.html

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

5.

歡迎詞e

修改文件：/var/www/extsuite/extmail/lang/zh_CN

修改位置：%lang_login=(

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

開源MAIL開足馬力邁進中...',

6.

頁面底部信息

修改文件：/var/www/extsuite/extmail/html/default/index.html

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

7.

設定默認域名

修改文件：/var/www/extsuite/extmail/html/default/index.html

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

修改結(jié)果：<TD><INPUTTYPE="text"class="input_n"NAME="domain"value=""></TD>

8.

修改IPsecurity為默認不選擇

修改文件：/var/www/extsuite/extmail/lang/zh_CN

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

修改結(jié)果：<td><inputtype=checkboxname=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>  <br/>

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

11.

特點介紹

修改文件：/var/www/extsuite/extmail/lang/zh_CN

修改位置：%lang_login=(

intro2=>'<b>快速而可靠</b><br/>引入索引緩存(Cache)技術(shù)和高效核心，WebMail操作疾步如飛',

intro3=>'<b>多語言同屏讀寫</b><br/>全面支持UTF8，實現(xiàn)同屏讀寫多國語言，真正做到國際郵、無亂碼',

intro4=>'<b>真正模板化設計</b><br/>MVC設計+高速模板引擎，實現(xiàn)了內(nèi)容數(shù)據(jù)完全分離，輕松修改模板',

intro5=>'<b>高性能I/O</b><br/>;輕松應付>1GB郵箱/200M附件，遠強于流行的各式phpwebmail',

12.

去除免費注冊按鈕

修改文件：/var/www/extsuite/extmail/webmail.cf

修改位置：SYS_SHOW_SIGNUP=1

修改結(jié)果：SYS_SHOW_SIGNUP=0修改實例：ExtMail首頁

1.

退出、關(guān)于、幫助鏈接

修改文件：/var/www/extsuite/extmail/html/default/TOP_BAN.html

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

2.

頁底部信息

修改文件：/var/www/extsuite/extmail/html/default/BOTTOM.html

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

<%extmail_whatis%></div>

3.

項目新聞

修改文件：/var/www/extsuite/extmail/html/default/welcome.html

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

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

4.

天氣預報

修改文件：/var/www/extsuite/extmail/html/default/welcome.html

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

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

<divclass="panelin">

</div>

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

</div>修改實例：ExtMan后臺界面1.

頁面Title

修改文件：/var/www/extsuite/extman/lang/zh_CN

修改位置：%lang_login=(

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

Logo

修改文件：/var/www/extsuite/extman/html/default/images/logo.gif

修改內(nèi)容：替換成需要的Logo圖片文件注意：替換圖片之后需要重新設置權(quán)限。Root：讀取，root：只讀，只讀。3.

歡迎使用

修改文件：/var/www/extsuite/extman/lang/zh_CN

修改位置：%lang_login=(

welcome_index=>'歡迎使用ITOKIWebMail管理后臺',4.

去除用戶名顯示

修改文件：/var/www/extsuite/extman/html/default/index.html

修改位置：<inputname=usernamevalue=root@class=login_input>修改為：<inputname=usernamevalue=>5.

去除效驗碼

修改文件：/var/www/extsuite/extman/webman.cf

修改位置：SYS_CAPTCHA_ON=1將此行添加#號注釋即可登錄按鈕下方信息修改

修改文件：/var/www/extsuite/extman/html/default/index.html

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