1. 模板文件结构:了解模板文件都存放在哪里,以及各个文件的作用。
  2. 模板文件命名规则:如何命名才能让帝国CMS正确识别并调用。
  3. 常用模板文件详解:逐一介绍最重要的几个模板文件,如首页、登录、注册等。
  4. 常用模板标签(函数):如何在模板中调用数据,如会员信息、文章列表等。
  5. 如何修改和自定义模板:一个简单的实战案例。
  6. 高级技巧与注意事项:包括响应式设计、JS/CSS文件管理等。

模板文件结构

帝国CMS 7.0的会员中心模板文件位于您的网站根目录下的 /e/member/ 文件夹中。

帝国cms7.0会员中心模板
(图片来源网络,侵删)

核心的模板文件存放在 /e/member/templets/ 目录下,当你安装一个新的会员中心模板时,通常会把整个模板文件夹上传到 /e/member/templets/ 目录里。

你安装一个名为 mycenter 的模板,那么它的路径就是 /e/member/templets/mycenter/

一个典型的会员中心模板文件夹结构如下:

/e/member/templets/mycenter/
├── index.html          # 会员中心首页模板
├── login.html          # 登录页面模板
├── register.html       # 注册页面模板
├── profile.html        # 修改个人资料模板
├── password.html       # 修改密码模板
├── messagebox.html     # 短信/留言箱模板
├── buyinfo.html        # 发布/管理供求/招聘信息
├── order.html          # 我的订单
├── favorite.html       # 收藏夹
├── download.html       # 下载记录
├── article.html        # 发布/管理文章
├── special.html        # 专题管理
├── space.html          # 个人空间主页
├── js/                 # 模板所需的JS文件
│   └── common.js
├── css/                # 模板所需的CSS文件
│   └── style.css
└── images/             # 模板所需的图片
    └── logo.png

模板文件命名规则

帝国CMS通过文件名来识别模板的用途,这个规则非常严格,不能随意修改。

帝国cms7.0会员中心模板
(图片来源网络,侵删)
功能页面 模板文件名 说明
会员中心首页 index.html 用户登录后看到的第一个页面。
会员登录 login.html 登录页面。
会员注册 register.html 注册页面。
找回密码 getpassword.html 找回密码流程页面。
修改个人资料 profile.html 修改昵称、头像、简介等。
修改密码 password.html 修改登录密码。
充值中心 recharge.html 在线充值余额。
我的订单 order.html 查看所有订单。
收货地址 address.html 管理收货地址(商城)。
短消息/留言箱 messagebox.html 查看和管理系统通知、用户留言。
发布信息 buyinfo.html 发布供求、招聘等信息。
信息管理 infotemp.html 管理自己发布的信息。
收藏夹 favorite.html 查看收藏的文章/信息。
下载记录 download.html 查看下载历史。
发布文章 article.html 在线投稿。
文章管理 articlelist.html 管理自己发布的文章。
个人空间 space.html 用户的个人主页。

重要提示:即使你的模板不需要某个功能(比如你不需要会员发布文章),也建议保留对应的模板文件(如 article.html),如果文件不存在,系统会调用默认的、可能不符合你网站风格的模板,导致页面错乱。


常用模板文件详解

我们以 index.html (会员中心首页) 为例,看看里面通常包含哪些内容。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">[!--page.title--]</title>
    <link href="[!--news.url--]e/member/templets/mycenter/css/style.css" rel="stylesheet" type="text/css">
    <script type="text/javascript" src="[!--news.url--]e/member/templets/mycenter/js/common.js"></script>
</head>
<body>
    <!-- 会员中心头部 -->
    <div class="header">
        <div class="welcome">欢迎您,<strong>[!--username--]</strong>!</div>
        <div class="userinfo">
            等级:[!--usergroupname--] | 积分:[!--userfen--] | 余额:[!--money--]
        </div>
    </div>
    <!-- 主要内容区 -->
    <div class="main">
        <!-- 左侧菜单 -->
        <div class="sidebar">
            <dl>
                <dt>账户管理</dt>
                <dd><a href="[!--news.url--]e/member/profile/">修改资料</a></dd>
                <dd><a href="[!--news.url--]e/member/password/">修改密码</a></dd>
                <dd><a href="[!--news.url--]e/member/recharge/">账户充值</a></dd>
            </dl>
            <dl>
                <dt>我的内容</dt>
                <dd><a href="[!--news.url--]e/member/buyinfo/">发布信息</a></dd>
                <dd><a href="[!--news.url--]e/member/infotemp/">信息管理</a></dd>
                <dd><a href="[!--news.url--]e/member/article/">发布文章</a></dd>
                <dd><a href="[!--news.url--]e/member/favorite/">我的收藏</a></dd>
            </dl>
        </div>
        <!-- 右侧内容 -->
        <div class="content">
            <h2>快捷操作</h2>
            <div class="shortcut">
                <a href="[!--news.url--]e/member/buyinfo/" class="btn">发布信息</a>
                <a href="[!--news.url--]e/member/article/" class="btn">投稿文章</a>
                <a href="[!--news.url--]e/member/recharge/" class="btn">在线充值</a>
            </div>
            <h2>最近发布</h2>
            [ecmsinfo]"select * from phome_ecms_news where userid='$userid' order by newstime desc limit 5",10,30,0,0,24,0[/ecmsinfo]
            <!-- 这里的[e:loop]标签是用来查询并显示会员自己发布的最新5条文章 -->
            <ul>
                [e:loop={'select * from [!db.pre!]ecms_news where userid='.$_COOKIE[ecms_member_id].' order by newstime desc limit 5',10,24,0}]
                <li><a href="<?=$bqsr['titleurl']?>" target="_blank"><?=$bqr['title']?></a> (<?=date('Y-m-d',$bqr['newstime'])?>)</li>
                [/e:loop]
            </ul>
        </div>
    </div>
</body>
</html>

常用模板标签(函数)

这是模板的核心,用于动态获取数据。

A. 全局标签

  • [!--page.title--]:当前页面的标题。
  • [!--news.url--]:网站根目录URL,用于引用CSS、JS等资源。
  • [!--username--]:当前登录会员的用户名。
  • [!--userid--]:当前登录会员的ID。
  • [!--usergroupname--]:当前会员的用户组名称。
  • [!--money--]:当前会员的余额。
  • [!--userfen--]:当前会员的积分。

B. 信息调用标签 (e:loop)

e:loop 是最强大的标签,用于查询并循环显示数据。

帝国cms7.0会员中心模板
(图片来源网络,侵删)

基本语法:

[e:loop={栏目ID, 显示条数, 操作类型, 只看头条, 循环样式, 添加SQL条件, 排序方式}]
    循环内容...
[/e:loop]

示例:显示当前会员发布的最新5条文章

[e:loop={'select * from [!db.pre!]ecms_news where userid='.$_COOKIE[ecms_member_id].' order by newstime desc limit 5',10,24,0}]
    <li>
        <a href="<?=$bqsr['titleurl']?>" target="_blank"><?=$bqr['title']?></a>
        <span><?=date('Y-m-d', $bqr['newstime'])?></span>
    </li>
[/e:loop]
  • $bqr['title']
  • $bqr['titleurl']:文章链接。
  • $bqr['newstime']:文章发布时间。
  • $bqr[字段名]:可以调用文章的任意自定义字段。

C. 会员信息标签

  • <?php $userr=$empire->fetch1("select * from {$dbtbpre}enewsmemberadd where userid='$userid'"); ?>
    • 这段PHP代码用于获取会员的扩展信息(如昵称、头像、生日等)。
    • 然后可以通过 <?=$userr['nicheng']?> 来调用昵称,<?=$userr['userpic']?> 来调用头像地址。

如何修改和自定义模板(实战案例)

假设你想修改会员中心首页的欢迎语。

  1. 找到文件:通过FTP或文件管理器,进入 /e/member/templets/你的模板文件夹/ 目录,打开 index.html 文件。

  2. 定位代码:在文件中找到显示欢迎语的部分,通常是类似这样的代码:

    <div class="welcome">欢迎您,<strong>[!--username--]</strong>!</div>
  3. 修改代码:将 [!--username--] 改为你想要的文字,或者用其他标签组合。

    <!-- 方案一:直接写死文字 -->
    <div class="welcome">欢迎光临本站,尊敬的会员!</div>
    <!-- 方案二:结合用户名和问候语 -->
    <div class="welcome">
        <?php
        $hour = date('H');
        if($hour < 12) {
            $greeting = "早上好";
        } elseif($hour < 18) {
            $greeting = "下午好";
        } else {
            $greeting = "晚上好";
        }
        ?>
        <?=$greeting?>,<strong>[!--username--]</strong>!今天是 <?=date('Y年m月d日')?>。
    </div>
  4. 保存文件:保存 index.html 文件。

  5. 清空缓存:登录帝国CMS后台,点击“系统” -> “更新缓存”,然后清空浏览器缓存,刷新会员中心首页查看效果。


高级技巧与注意事项

A. 响应式设计

为了让会员中心在手机上也能良好显示,建议你的模板采用响应式设计。

  • 使用CSS框架:可以像引入普通CSS一样引入Bootstrap、Foundation等框架。
    <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.1.3/css/bootstrap.min.css" rel="stylesheet">
  • 媒体查询:在 style.css 中使用 @media 查询来为不同屏幕尺寸设置不同的样式。

B. JS/CSS文件管理

  • 路径问题:模板中的CSS、JS、图片路径,强烈建议使用 [!--news.url--] 变量来构建绝对路径,这样可以防止在子目录或绑定多域名时出现路径错误。

    <!-- 错误的相对路径 -->
    <link href="css/style.css" ...>
    <!-- 正确的绝对路径 -->
    <link href="[!--news.url--]e/member/templets/mycenter/css/style.css" ...>
  • 合并与压缩:对于大型网站,可以将多个CSS/JS文件合并并压缩,以提高加载速度。

C. 安全性

  • XSS防御:在输出用户提交的内容(如文章标题、留言)时,使用帝国CMS自带的过滤函数 RepPostVar() 来防止跨站脚本攻击。
    <?=$bqr['title']?>  <!-- 不安全 -->
    <?=RepPostVar($bqr['title'])?>  <!-- 安全 -->
  • 权限控制:确保只有登录会员才能访问会员中心页面,帝国CMS会自动处理,但自定义功能时要注意。

希望这份详细的指南能帮助你完全掌握帝国CMS 7.0会员中心模板的定制!如果你有更具体的问题,比如某个特定页面的实现,可以随时提出。