dede个人中心模板如何自定义修改？-DEDE建站-盈思创科技

个人中心模板文件位置

DedeCMS 的模板文件都位于 /templets/ 目录下，个人中心的模板通常位于：

/templets/plus/ 目录下。

主要涉及的文件有：

profile.htm：这是个人中心的主页面，是所有功能模块的容器，它包含了用户信息、导航菜单等。
space.htm：用户个人空间/主页，通常用于展示用户公开的信息和动态。
templets/default/ 目录下的文件：许多功能模块（如修改密码、我的订单等）的模板文件存放在这个默认主题目录下。

个人中心主页面 (`profile.htm`) 结构解析

打开 /templets/plus/profile.htm，你会看到它主要由三部分构成：

头部 (<head>)：引入 CSS 和 JS 文件。
主体 (<body>)：
- 左侧导航菜单：通常是一个列表，包含“我的资料”、“修改密码”、“我的订单”、“我的收藏”等链接。
- 区：这是动态加载的区域，当用户点击左侧菜单的不同选项时，右侧会通过 AJAX 或直接跳转来显示对应的内容。
底部 (<footer>)：网站版权信息等。

关键代码片段分析：

左侧导航菜单

<div class="usidebar">
    <ul>
        <li><a href="javascript:;" onclick="ShowMenu('modify')">修改资料</a></li>
        <li><a href="javascript:;" onclick="ShowMenu('face')">更换头像</a></li>
        <li><a href="javascript:;" onclick="ShowMenu('password')">修改密码</a></li>
        <li><a href="javascript:;" onclick="ShowMenu('mytag')">我的标签</a></li>
        <!-- 更多菜单项... -->
    </ul>
</div>

onclick="ShowMenu('modify')"：这是关键。ShowMenu() 是一个 JavaScript 函数，它会根据传入的参数（如 'modify'）来决定在右侧内容区加载哪个模板。
这个函数会向服务器发送一个请求,获取对应模块的 HTML 内容并填充到右侧的 <div id="main"> 中。

区

<div id="main">
    <!-- 默认内容，比如用户信息概览 -->
    <div class="userinfo">
        <!-- 用户信息显示... -->
    </div>
    <!-- 其他模块内容将通过 JS 动态加载到这里 -->
    <!-- 点击“修改资料”后，这里会加载 include/modify.htm 的内容 -->
</div>

id="main" 是一个固定的 ID，JavaScript 函数 ShowMenu() 就是通过这个 ID 来定位并更新内容的。

如何自定义个人中心模板

步骤 1：备份原文件

在进行任何修改之前,务必备份 /templets/plus/profile.htm 以及其他你可能要修改的模板文件。

步骤 2：修改主页面 (`profile.htm`)

你可以像修改普通 HTML 页面一样修改 profile.htm。

示例：更改左侧菜单样式

<!-- 原始样式 -->
<div class="usidebar">
    <ul>
        <!-- ... -->
    </ul>
</div>
<!-- 修改后的样式，增加一些 class -->
<div class="user-center-sidebar">
    <ul class="sidebar-menu">
        <li class="menu-item"><a href="javascript:;" onclick="ShowMenu('modify')" class="menu-link">修改资料</a></li>
        <li class="menu-item"><a href="javascript:;" onclick="ShowMenu('face')" class="menu-link">更换头像</a></li>
        <!-- ... -->
    </ul>
</div>

在你的 CSS 文件（/templets/default/style/dedecms.css）中添加新的样式：

.user-center-sidebar {
    background-color: #f8f9fa;
    border-radius: 8px;
    padding: 15px;
}
.sidebar-menu .menu-item {
    margin-bottom: 10px;
    list-style: none;
}
.sidebar-menu .menu-link {
    display: block;
    padding: 10px 15px;
    color: #333;
    text-decoration: none;
    border-radius: 5px;
    transition: background-color 0.3s;
}
.sidebar-menu .menu-link:hover {
    background-color: #e9ecef;
}

步骤 3：修改具体功能模块的模板

当你点击“修改资料”时，右侧加载的是 /templets/plus/modify.php 执行后生成的 HTML，这个 PHP 文件会引入 templets/default/ 目录下的模板。

“修改资料”功能对应的模板文件是： /templets/default/plus/modify.htm

你可以直接编辑这个文件来修改“修改资料”页面的布局和样式。

如何找到某个功能对应的模板文件？

打开 profile.htm。
找到对应功能的 onclick 事件，onclick="ShowMenu('modify')"。
打开 include/ 目录下的 inc_fun_funAdmin.php 文件（或类似功能的文件），找到 ShowMenu() 函数的定义。
在函数内部,你会看到类似这样的代码：
```
// 在 inc_fun_funAdmin.php 中
function ShowMenu($dopost) {
    // ...
    require_once(DEDEINC.'/membermodel/'.$dopost.'.php');
    // ...
    $pv->SetTemplet($cfg_basedir.$cfg_templets_dir.'/plus/modify.htm');
    // ...
}
```
这行 $pv->SetTemplet($cfg_basedir.$cfg_templets_dir.'/plus/modify.htm'); 就明确指出了它使用的模板文件是 /templets/plus/modify.htm，如果这个文件不存在，它会尝试使用默认主题下的 /templets/default/plus/modify.htm。

添加自定义功能模块

如果你想添加一个全新的功能,我的优惠券”，你需要做以下几件事：

创建数据表：如果新功能需要存储数据（如优惠券列表），需要在数据库中创建一个新表，dede_member_coupons。

创建后台处理逻辑：在 /member/ 目录下创建一个新文件，my_coupons.php，这个文件负责从数据库中查询数据，并调用模板来显示。

// my_coupons.php 示例
require_once(dirname(__FILE__).'/config.php');
CheckRank(0, 0);
$uid = $cfg_ml->M_ID;
// 查询用户的优惠券
$dsql->SetQuery("SELECT * FROM `dede_member_coupons` WHERE uid = {$uid}");
$dsql->Execute();
$coupons = array();
while($row = $dsql->GetArray()){
    $coupons[] = $row;
}
// 加载模板
include(DEDEMEMBER."/templets/my_coupons.htm");

创建模板文件：在 /templets/default/ 目录下创建 my_coupons.htm，用于循环显示优惠券列表。
修改 profile.htm：
- 在左侧导航菜单中添加一个新的 <li>。
- 将 onclick 事件修改为直接跳转到你的新页面，因为新功能可能不适合用 AJAX 加载。
```
<li><a href="/member/my_coupons.php">我的优惠券</a></li>
```

常见问题与技巧

如何让某个菜单项默认激活？ 在 profile.htm 中，你可以通过 JavaScript 检测 URL 的 hash 值来决定哪个菜单项应该高亮。

$(document).ready(function() {
    var hash = window.location.hash.substring(1); // 获取 # 后面的内容
    if(hash) {
        // 给对应的菜单项添加 active 类
        $('.sidebar-menu a').each(function() {
            if($(this).attr('onclick').indexOf(hash) > -1) {
                $(this).parent().addClass('active');
            }
        });
        // 加载对应的模块
        ShowMenu(hash);
    }
});

然后你的链接可以这样写：<a href="#modify" onclick="ShowMenu('modify')">修改资料</a>

如何修改“我的订单”等复杂模块？ 这些模块通常有独立的文件，如 /member/ordertable.php，你需要修改这个文件中的 SQL 查询逻辑和模板调用路径，这需要对 PHP 和 DedeCMS 的底层结构有一定了解。
CSS 和 JS 文件加载问题：确保你的自定义 CSS 和 JS 文件路径正确，并且被正确地引入到 profile.htm 的 <head> 部分。

任务	操作位置	关键点
修改整体布局和样式	`/templets/plus/profile.htm` 及 CSS 文件	修改 HTML 结构和 CSS 类名。
修改单个功能页面	`/templets/default/plus/功能名.htm`	找到对应功能的模板文件进行修改。
添加新功能	创建后台逻辑 (`/member/newfunc.php`) 2. 创建模板 (`/templets/default/plus/newfunc.htm`) 3. 修改 `profile.htm` 添加导航链接	需要了解 PHP 和数据库基础。
调试	浏览器开发者工具 (F12)	检查网络请求、HTML 结构和 CSS 样式。

通过以上步骤,你就可以对 DedeCMS 的个人中心模板进行深度定制，使其更符合你的网站风格和功能需求。

dede个人中心模板如何自定义修改？

个人中心模板文件位置

个人中心主页面 (`profile.htm`) 结构解析

关键代码片段分析：

如何自定义个人中心模板

步骤 1：备份原文件

步骤 2：修改主页面 (`profile.htm`)

步骤 3：修改具体功能模块的模板

添加自定义功能模块

常见问题与技巧

相关文章

目录[+]

个人中心模板文件位置

个人中心主页面 (profile.htm) 结构解析

关键代码片段分析：

如何自定义个人中心模板

步骤 1：备份原文件

步骤 2：修改主页面 (profile.htm)

步骤 3：修改具体功能模块的模板

添加自定义功能模块

常见问题与技巧

相关文章

目录[+]

个人中心主页面 (`profile.htm`) 结构解析

步骤 2：修改主页面 (`profile.htm`)