界面风格与模板定制

本文档将对 mvmmall 的界面风格以及编译模板的使用和修改方法做必要的说明,如果您热衷于使用个性化的界面,请仔细阅读本文档,它会给您的工作带来切实的帮助。

界面风格和模板的定义

  • 模板:mvmmall 的前台程序全部使用界面与程序代码分离的技术编写,使得软件开发人员和美工设计人员可以有效的实现分工,在彼此不互相影响、互相依赖的情况下独立的工作。模板技术就是实现这一分工的途径,而界面通过模板实现,您只要通过对模板的修改,即可实现界面的完全定制。
  • 界面风格:为了方便您的界面定制的需要,对于模板中经常用到的一些参数(如字体、字号、颜色、背景等等),我们将其从模板中抽出,以风格变量的形式供您修改,这样在定制要求不高的情况下,您也可以通过对风格的修改实现界面的与众不同。虽然事实上只通过模板就已经可以实现对界面的完全定制,但界面风格的设计会使得一些常用的模板变量参数可以被很容易修改,从而减轻界面定制的工作量。而且同时,在mvmmall 及大多数同类产品中,模板是必须与界面风格搭配才能产生作用的。

Mvmmall 在界面定制方面的特色

mvmmall 直接采用了php本身作为模板,把业务逻辑和界面显示分离,您可以轻松的拥有以下功能:

  • 多模板 - 一个商店可以拥有多个完全不同的模板套系
  • 多界面 - 基于模板的配色与字型参数自定义,根据模板的不同可定义不同内码和不同语言
  • 多语言 - 全部语言信息保存在语言包中,修改界面只需修改语言包中的变量内容。

基于以上功能,mvmall具有以下先进特性:

  • 风格搭配更自由,支持替换变量,风格自由与匹配不同的模板套系
  • 可以使用不同的界面风格和语言,用户也选择自己的风格界面
  • 模板中几乎没有业务逻辑关系,有的只是部分的界面业务逻辑处理,实现用最少数量的模板建立复杂页面
  • 界面风格设计和发布更加容易,支持默认模板和自定模板的无缝连接

界面风格与模板定制的详细说明

mvmall 的模板采用直接解析,默认模板保存在 ./templates/default/ 目录中,该目录下 *.html 文件是模板文件,language/cn/*..php 是语言包文件,*.js是js提示语言包,默认模板的目录不能被修改,而且不能被删除,否则将导致严重的问题。

默认模板必须包含全部的模板文件,但自定义模板则只需包含与默认模板有差别的文件即可,未被包含的文件(模板),系统会自动读取默认模板中的内容。例如自定义界面只修改了 header.html 模板,在这个模板目录中只包含 header.html 即可了。

自定义模板中的语言包只对该目录内包含的模板(html)有效,不会影响到未被包含的模板和默认模板的语言信息。

!! 强烈建议您不要修改默认模板的任何内容 !!

1、自定义*.html模板文件,将其放在 ./templates/模板的英文名称/ 目录中,这将给维护和升级带来巨大的方便。

2、图片路径变量:$imgpath,如要插入一个图片Basket.gif 你只需要 $imgpath/Basket.gif ,程序会自动载入images/模板的英文名称/目录中的Basket.gif

3、图片,css,js 位置 放到 images/模板的英文名称/目录中

4、语言包 位置 放到 language/cn/*..php ,前台的语言需要修改可以直接在语言包中搜索修改,语言包的在模板中的调用形式 $lang[语言包常量名称] 。遇到 $lang[*]都表示相应的文字,需要修改则改语言包里面的对应的文字。

mvmmall的模板采用PHP 表达式的语法,利用了html注释方式,在网页软件下直接显示,有利于美工制作。。。

  • 条件判断
    <!--EOT:
    
    if($mm_board[reply_code]==1){ 
    
    print<<<EOT
    
    -->
    
    html代码或文字1
    
    <!--EOT:
    
    }else{ 
    
    print<<<EOT
    
    -->
    
    html代码或文字2
    
    <!--EOT:
    
    }
    
    print<<<EOT
    
    -->

    这是一个典型的条件模板,当条件$mm_board[reply_code]==1 时,显示 html代码或文字1 内容,否则显示

    模板html代码或文字2 内容。

  • 不带下标变量的数组循环
    <!--EOT:
    
    foreach($goods as $val){ 
    
    print<<<EOT
    
    -->
    
    $val[title]
    
    <!--EOT:
    
    }
    
    print<<<EOT
    
    -->
    
          
  • 带下标变量的数组循环
    <!--EOT:
    
    foreach($goods as $key=>$val){ 
    
    print<<<EOT
    
    -->
    
    $key $val[title]
    
    <!--EOT:
    
    }
    
    print<<<EOT
    
    -->
    
              
  • 插入模板文件
    include_one template('header');header是模板文件名,系统会调用header.html

我们所推荐的模板修改方法:通过普通编辑器手工书写 html 或通过 Dreamweaver 或 Frontpage 修改。但是修改需切记,同一逻辑元素内或嵌套中元素的位置和内容切勿修改,但是整个最外部逻辑结构是可以移动或删除的。

如果修改后模板所在页面在输出类似如下的错误信息 Parse error: syntax error, unexpected '}' in D:\xampp\htdocs\mvmmall\templates\default\article.html on line 59,说明模板中出现了无法匹配,或格式错误的逻辑元素,请仔细检查是否有元素不对应,没有结束或嵌套损坏,格式错误的现象,必要时可以恢复原始模板来解决问题。

如果想打包您所设计的界面,通常只需将界面风格下载回来后,将该风格所使用的图片目录及模板目录中的文件一同打包,附带相应的操作说明,即可方便的将界面与其他人共享。

再次强烈建议您不要修改默认模板的内容,不当的修改默认模板可能导致整个系统的运行故障。如果需要新增界面和修改模板,请通过新增模板套系的方法来实现,这将给日后的升级和维护带来巨大好处。

如果您看了以上的说明仍然对 界面和模板不太了解,您可以打开一个默认的模板文件,对照上面的说明,相信很快就是熟悉这一部分的使用方法,实践出真知,祝您使用愉快,并在自己动手 DIY 界面风格的中得到满足。

MvMmall 保留版权所有权利 电话:0596-2921706 邮件: test@mvmmall.com下一页