织梦前台会员中心模板改造

会员中心模板目录结构

织梦前台会员中心模板位于 /member/templets/ 目录，主要文件包括：

index.htm         会员中心首页
login.htm         登录页
reg-new.htm       注册页
edit_info.htm     资料编辑页
edit_face.htm     头像修改页
myfeed.htm        我的消息
article_add.htm   发布文章
article_edit.htm  编辑文章
content_list.htm  内容列表
mystow.htm        我的收藏
myorder.htm       我的订单
guestbook.htm     留言管理
head.htm          顶部公共模板
foot.htm          底部公共模板
css/              样式文件
images/           图片资源

改造的核心是替换这些 .htm 模板与对应 CSS，不动 /member/ 下的 PHP 处理程序。

改造步骤

第一步：备份原模板

整目录复制一份 templets_bak，方便对比与回滚。

第二步：规划新模板风格

建议参考主流 SaaS 后台风格：左侧导航 + 顶部条 + 主内容区。配色与主站保持一致，但用更紧凑的布局。

第三步：替换公共模板

先改 head.htm 与 foot.htm，让所有页面共用同一套头部底部。例如新 head.htm：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title><?php echo $cfg_ml->M_UserName; ?> - 会员中心</title>
  <link rel="stylesheet" href="/member/templets/css/style.css">
</head>
<body>
<header class="mc-header">
  <div class="mc-logo">会员中心</div>
  <nav class="mc-nav">
    <a href="index.php">首页</a>
    <a href="edit_info.php">资料</a>
    <a href="content_list.php">我的内容</a>
    <a href="../">返回主站</a>
    <a href="exit.php">退出</a>
  </nav>
</header>
<div class="mc-container">
  <aside class="mc-sidebar">
    <?php include 'menu.htm'; ?>
  </aside>
  <main class="mc-main">

第四步：改造具体页面

逐个改造 index.htm、edit_info.htm 等页面，保留其中的 PHP 变量与表单字段，仅调整 HTML 结构与样式类名。

关键页面改造要点

会员中心首页 index.htm

展示用户概览信息、最近动态、快捷入口。建议用数据卡片布局：

<div class="dashboard">
  <div class="card">
    <h3>账户信息</h3>
    <p>用户名：<?php echo $cfg_ml->M_UserName; ?></p>
    <p>积分：<?php echo $cfg_ml->M_Scores; ?></p>
    <p>等级：<?php echo GetMemberLevel($cfg_ml->M_Rank); ?></p>
  </div>
  <div class="card">
    <h3>内容统计</h3>
    <p>已发布：<?php echo GetArcCount($cfg_ml->M_ID); ?> 篇</p>
    <p>待审核：<?php echo GetPendingCount($cfg_ml->M_ID); ?> 篇</p>
  </div>
</div>

资料编辑页 edit_info.htm

改为表单分组+卡片样式，提升填写体验。注意保留原 input 的 name 属性，确保提交到 edit_info.php 能正常接收。

内容列表页 content_list.htm

改为表格或卡片列表，每行加状态标签（已发布/待审核/已驳回）、操作按钮（编辑/删除）。

响应式与移动端适配

会员中心在移动端常被忽略，但实际很多用户用手机管理内容。建议：

.mc-container {
  display: flex;
  min-height: calc(100vh - 60px);
}
.mc-sidebar { width: 200px; background: #f5f5f5; }
.mc-main { flex: 1; padding: 1.5rem; }

@media (max-width: 768px) {
  .mc-container { flex-direction: column; }
  .mc-sidebar { width: 100%; }
  .mc-nav { display: flex; overflow-x: auto; }
  .mc-nav a { white-space: nowrap; padding: 10px 15px; }
}

增强功能集成

消息通知小铃铛

在 head.htm 加入消息提醒，AJAX 轮询未读消息数：

<span class="bell" id="msgBell">
  消息<sup id="msgCount">0</sup>
</span>
<script>
setInterval(function(){
  fetch('msg_count.php').then(r=>r.text()).then(n=>{
    document.getElementById('msgCount').textContent=n;
  });
}, 60000);
</script>

头像上传组件

替换原 edit_face.htm 中的 Flash 上传为 HTML5 FormData 异步上传，兼容移动端。

动态侧边栏菜单

根据会员等级显示不同菜单项，例如 VIP 用户才看到“高级投稿”“数据导出”入口。

注意事项

1. 改模板时务必保留原 <form> 的 action 与 name 属性，否则提交后 PHP 程序取不到数据。

2. 不要删除模板里的 {dede:field.xxx/} 或 PHP 变量占位符，仅调整外围 HTML。

3. 升级织梦版本时，/member/templets/ 可能被覆盖，建议把定制模板放在独立目录如 templets_my/，通过修改 config.php 中的 $cfg_df_style 指向。

4. 会员中心 CSS/JS 路径建议用绝对路径（/member/templets/css/...），避免子页面层级不同导致资源 404。

5. 移动端表单输入框要加 inputmode 属性（如手机号 inputmode="numeric"），优化键盘弹出体验。

后续优化方向

会员中心改造完成后，建议接入数据看板，让会员直观看到内容数据、积分变化、互动趋势，提升留存。可逐步把表单改造为 AJAX 异步提交，配合 Toast 提示，减少页面跳转。长期可考虑把会员中心拆为独立子域名（如 user.example.com），与主站解耦，便于后续接入小程序、APP 等多端会员体系，让数据互通、体验一致。