织梦CMS模板修改如何操作？-织梦建站-盈思创科技

这篇指南将从核心概念、文件结构、常用标签到具体修改步骤，为你提供一个全面、系统的教程。

（图片来源网络，侵删）

核心概念：织梦模板是如何工作的？

理解这一点至关重要，织梦的模板系统可以看作是“数据 + 模板 = 最终网页”的过程。

数据: 存储在你的网站数据库里，比如文章标题、内容、发布时间、栏目名称、产品信息等。
模板: 存放在 /templets/ 目录下的 HTML 文件，它们是网站的“骨架”和“皮肤”，包含了 HTML 结构、CSS 样式和 PHP 标签。
引擎: 当用户访问一个页面时（比如一篇文章），织梦程序会：
- 从数据库中读取对应的数据。
- 加载对应的模板文件。
- 将数据“填充”到模板文件中的特定标签位置。
- 最终生成一个完整的 HTML 页面,发送给用户的浏览器。

简单比喻： 模板就像一个空表格，数据库里的数据就是你要填入表格的内容，织梦就是那个帮你填表的人，最后生成一份完整的报告（网页）。

模板文件结构解析

织梦的模板文件都存放在 /templets/ 目录下，默认情况下,你会看到以下结构：

/templets/
├── default/              # 默认模板文件夹，存放所有默认风格的模板文件
│   ├── index.htm        # 首页模板
│   ├── list_article.htm  # 文章列表页模板
│   ├── article_article.htm # 文章内容页模板
│   ├── search.htm       # 搜索页模板
│   ├── plus/            # 公共模板文件夹
│   │   ├── head.htm     # 公共头部
│   │   ├── footer.htm   # 公共底部
│   │   └── ...
│   ├── style/           # CSS 样式文件夹
│   │   └── dedecms.css  # 默认样式表
│   ├── images/          # 图片文件夹
│   │   └── logo.png     # 默认 Logo
│   └── ...
└── your_theme_name/     # 你自己创建的模板文件夹
    # ... (结构和 default 文件夹一样)

重要提示：

（图片来源网络，侵删）

不要直接修改 default 文件夹！这是系统自带的模板,升级时可能会被覆盖。
正确的做法是：复制 default 文件夹，重命名为你自己的主题名（如 mytheme），然后在后台的“系统” -> “系统基本参数” -> “核心设置”里，将“默认模板风格”修改为 mytheme。

模板中的核心标签（DedeTag）

标签是织梦模板的灵魂，它们像占位符一样，告诉系统“这里需要插入什么数据”。

全局标签 (常用)

这些标签可以在任何模板页面使用。

{dede:global.cfg_webname/}: 网站名称
{dede:global.cfg_weburl/}: 网站网址
{dede:global.cfg_description/}: 网站描述
{dede:global.cfg_keywords/}: 网站关键词
{dede:include filename="plus/head.htm"/}: 包含公共头部文件
{dede:include filename="plus/footer.htm"/}: 包含公共底部文件

首页标签

: <title>{dede:global.cfg_webname/}</title>
调用栏目: {dede:channel type='top' row='8'} <a href="[field:typelink/]">[field:typename/]</a> {/dede:channel}
- type='top': 只调用顶级栏目。
- row='8': 调用8个栏目。
- [field:typelink/]: 栏目链接。
- [field:typename/]: 栏目名称。
调用文章列表: {dede:arclist row='5' titlelen='30' typeid='1'}
- row='5': 调用5篇文章。
- titlelen='30': 标题长度限制为30个字符。
- typeid='1': 只调用ID为1的栏目下的文章,不写则调用所有。
- 内部字段:
  - [field:title/]: 文章标题
  - [field:arcurl/]: 文章链接
  - [field:pubdate function='strftime("%Y-%m-%d",@me)'/]: 发布时间 (使用函数格式化)
  - [field:description/]: 文章摘要
  - [field:litpic/]: 文章缩略图

列表页标签

栏目名称: {dede:field.title/}
栏目描述: {dede:field.description/}

文章列表循环:

{dede:list pagesize='10'}
<li>
    <a href="[field:arcurl/]">[field:title/]</a>
    <span>[field:pubdate function='strftime("%Y-%m-%d",@me)'/]</span>
</li>
{/dede:list}

分页: {dede:pagelist listitem='index,pre,next,end,option' listsize='5'/}
- listitem: 控制显示哪些分页元素。
- listsize: 显示的页码数量。

内容页标签

: {dede:field.title/}
: {dede:field.body/}
发布时间: {dede:field.pubdate function='strftime("%Y-%m-%d %H:%M:%S",@me)'/}
文章来源: {dede:field.source/}
作者: {dede:field.writer/}
点击数: {dede:field.click/}

{dede:prenext get='pre'/}  <!-- 上一篇 -->
{dede:prenext get='next'/} <!-- 下一篇 -->

模板修改实战步骤

假设我们要修改首页,把默认的布局改成两栏布局。

步骤 1：准备模板文件

通过 FTP 或主机文件管理器，进入 /templets/ 目录。
复制 default 文件夹，粘贴并重命名为 my_new_home。
进入后台“系统” -> “系统基本参数” -> “核心设置”，将“默认模板风格”修改为 my_new_home。

步骤 2：修改首页模板

打开 /templets/my_new_home/index.htm 文件。
用代码编辑器（如 VS Code, Sublime Text, Dreamweaver）打开它。

步骤 3：分析并修改 HTML 结构

默认的 index.htm 可能是一个单栏布局，我们要把它改成两栏：左侧主要内容,右侧边栏。

原始结构 (简化版):

<body>
    {dede:include filename="head.htm"/}
    <div class="main">
        <!-- 这里是首页内容，可能是单栏的 -->
        {dede:arclist ...}
            ...
        {/dede:arclist}
    </div>
    {dede:include filename="footer.htm"/}
</body>

修改后的结构 (两栏布局):

<body>
    {dede:include filename="head.htm"/}
    <div class="main-container">
        <!-- 左侧主要内容区 -->
        <div class="main-content">
            <h1>最新文章</h1>
            {dede:arclist row='10' titlelen='40'}
            <div class="article-item">
                <h2><a href="[field:arcurl/]">[field:title/]</a></h2>
                <p>[field:description/]...</p>
                <span class="date">[field:pubdate function='strftime("%Y-%m-%d",@me)'/]</span>
            </div>
            {/dede:arclist}
        </div>
        <!-- 右侧边栏 -->
        <div class="sidebar">
            <div class="widget">
                <h3>热门排行</h3>
                {dede:hotartlist row='10'}
                <li><a href="[field:arcurl/]">[field:title/]</a></li>
                {/dede:hotartlist}
            </div>
            <div class="widget">
                <h3>友情链接</h3>
                {dede:flink type='text' row='10'}
                <a href="[field:url/]" target="_blank">[field:name/]</a>
                {/dede:flink}
            </div>
        </div>
    </div>
    {dede:include filename="footer.htm"/}
</body>

说明：

我们创建了 main-container 作为最外层容器。
main-content 用于存放主要文章列表。
sidebar 用于存放边栏组件，比如热门文章、友情链接等。
我们使用了新的标签 {dede:hotartlist} 来调用热门文章。

步骤 4：添加 CSS 样式

打开 /templets/my_new_home/style/dedecms.css 文件,在文件末尾添加你的新样式。
或者更好的做法：创建一个新的 CSS 文件，style/home.css，然后在 index.htm 的 <head> 部分引入它：
```
<link rel="stylesheet" type="text/css" href="{dede:global.cfg_templets_skin/}/style/home.css" />
```

CSS 样式示例:

/* home.css */
.main-container {
    width: 1200px;
    margin: 20px auto;
    display: flex; /* 使用 Flexbox 实现两栏 */
    gap: 20px;
}
.main-content {
    flex: 3; /* 占用3份宽度 */
}
.sidebar {
    flex: 1; /* 占用1份宽度 */
}
.article-item {
    border-bottom: 1px solid #eee;
    padding: 15px 0;
}
.article-item h2 {
    font-size: 18px;
    margin-bottom: 10px;
}
.article-item .date {
    color: #999;
    font-size: 14px;
}
.widget {
    background: #f9f9f9;
    padding: 15px;
    border-radius: 5px;
    margin-bottom: 20px;
}
.widget h3 {
    border-bottom: 1px solid #ddd;
    padding-bottom: 10px;
    margin-bottom: 15px;
}
.widget li {
    line-height: 1.8;
}

步骤 5：刷新并预览

保存所有修改的文件。
清理浏览器缓存。
访问你的网站首页,你应该能看到一个全新的两栏布局了。

常见问题与技巧

如何修改 Logo？
- 直接替换 /templets/your_theme/images/logo.png 文件。
- 在后台“系统” -> “系统基本参数” -> “站点信息”中，可以上传新的 Logo,织梦会自动覆盖或生成新的文件。
为什么修改后看不到效果？
1. 缓存问题：浏览器缓存、CDN缓存、服务器缓存（如 OPcache）,尝试清除缓存或使用无痕模式访问。
2. 模板路径错误：检查后台的“默认模板风格”是否设置正确。
3. 标签错误：检查标签拼写是否正确,参数是否有误。
4. 文件权限：确保 templets 目录及其子目录有可写权限（虽然修改模板本身不需要，但保存时可能需要）。
如何学习更多标签？
- 最佳参考：直接打开 default 文件夹下的模板文件,研究织梦官方是如何使用标签的。
- 官方文档：查阅织梦官方提供的模板标签手册。
- 模仿和拆解：找一个你喜欢的织梦网站，尝试模仿它的布局,然后去它的模板文件里看它是如何实现的。
如何制作自定义页面？
1. 在后台“核心” -> “频道模型” -> “自由页面管理”中，点击“增加自由页面”。
2. 输入页面名称，选择一个模板（通常是 default/article_article.htm 或你自定义的）。
3. 编辑器里，你可以像写文章一样编辑内容,也可以在里面使用织梦标签来调用动态数据。
4. 保存后，系统会生成一个链接，你可以在首页或其他地方通过 <a href="生成的链接"> 来引用它。

通过以上步骤和知识，你已经掌握了织梦CMS模板修改的核心技能，多练习、多拆解,很快你就能成为一名织梦模板高手。

织梦CMS模板修改如何操作？