织梦CMS模板制作教程，新手如何快速上手？-织梦建站-盈思创科技

织梦CMS模板制作全教程：从零开始打造你的专属网站

第一部分：准备工作与核心概念

在开始之前，你需要了解几个核心概念,并准备好开发环境。

（图片来源网络，侵删）

什么是织梦CMS模板？

织梦CMS的模板系统是一个“标签化”的模板引擎，它不是像WordPress那样使用PHP和HTML混合的代码，而是通过大量的织梦标签 来调用数据和生成内容，你只需要编写HTML结构和样式,然后用织梦标签替换掉需要动态显示的内容即可。

核心思想：

HTML/CSS/JS： 负责网站的“骨架”和“外貌”（样式和交互）。
织梦标签： 负责网站的“血肉”（从数据库中获取并展示内容）。

开发环境准备

为了不影响正在运行的网站,我们强烈建议在本地搭建一个测试环境。

服务器环境： 使用集成环境包，如 phpStudy (Windows) 或 MAMP (Mac)。
织梦CMS程序： 从织梦官网下载最新版本的DedeCMS程序。
代码编辑器： 推荐使用 VS Code、Sublime Text 或 Dreamweaver，它们支持语法高亮,能让你更清晰地编写代码。

织梦模板的核心文件结构

一个标准的织梦模板通常包含以下文件和目录，存放在 /templets/ 目录下：

（图片来源网络，侵删）

/templets/
├── default/          # 默认模板文件夹
│   ├── index.html   # 首页模板
│   ├── list_*.html  # 列页模板 (如 list_article.html)
│   ├── article_*.html # 文页模板 (如 article_article.html)
│   ├── header.html  # 公共头部文件
│   ├── footer.html  # 公共底部文件
│   └── style/       # 样式文件目录
│       └── style.css
└── ...              # 其他自定义模板文件夹

index.html: 网站首页模板。
*`list_.html**: 内容列表页模板。*代表栏目ID，例如list_1.html` 是ID为1的栏目列表页。
*`article_.html**: 内容详情页模板。*代表栏目ID或文章ID，例如article_1.html` 是ID为1的栏目下的文章详情页。
header.html / footer.html: 公共部分,方便全站统一修改。
style/: 存放CSS、JS、图片等静态资源。

第二部分：模板制作实战步骤

我们将以制作一个简单的企业网站首页为例,走完整个流程。

创建模板文件夹

在 /templets/ 目录下创建一个新文件夹，命名为 mycompany (或者你喜欢的任何名字)。

编写基础HTML结构

在 mycompany 文件夹中，创建一个 index.html 文件,先写一个标准的HTML5骨架。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">{dede:global.cfg_webname/}</title>
    <link rel="stylesheet" href="/templets/mycompany/style/style.css">
</head>
<body>
    <!-- 网站头部 -->
    <header>
        <div class="logo">我的公司Logo</div>
        <nav>
            <ul>
                <li><a href="/">首页</a></li>
                <li><a href="/list-1.html">关于我们</a></li>
                <li><a href="/list-2.html">产品展示</a></li>
                <li><a href="/list-3.html">新闻中心</a></li>
                <li><a href="/list-4.html">联系我们</a></li>
            </ul>
        </nav>
    </header>
    <!-- 主要内容区 -->
    <main>
        <!-- 轮播图区域 -->
        <section class="banner">
            <!-- 这里将放置轮播图 -->
        </section>
        <!-- 公司简介 -->
        <section class="intro">
            <h2>公司简介</h2>
            <p>{dede:global.cfg_description/}</p>
        </section>
        <!-- 产品展示 -->
        <section class="products">
            <h2>产品展示</h2>
            <div class="product-list">
                <!-- 这里将循环显示产品 -->
            </div>
        </section>
        <!-- 新闻中心 -->
        <section class="news">
            <h2>新闻中心</h2>
            <div class="news-list">
                <!-- 这里将循环显示新闻 -->
            </div>
        </section>
    </main>
    <!-- 网站底部 -->
    <footer>
        <p>Copyright &copy; {dede:global.cfg_webname/} - {dede:global.cfg_powerby/}</p>
    </footer>
</body>
</html>

说明：

（图片来源网络，侵删）

{dede:global.cfg_webname/}: 调用网站后台设置的“网站名称”。
{dede:global.cfg_description/}: 调用网站后台设置的“网站描述”。
{dede:global.cfg_powerby/}: 调用织梦版权信息。

使用织梦标签替换静态内容

我们用织梦的标签来替换掉那些注释掉的静态内容。

调用轮播图

假设后台有一个“首页焦点图”的单页文档模型,我们可以这样调用：

<!-- 轮播图区域 -->
<section class="banner">
    {dede:arclist row='5' titlelen='24' typeid='2' orderby='pubdate'}
    <a href='[field:arcurl/]'><img src='[field:litpic/]' alt='[field:title/]'></a>
    {/dede:arclist}
</section>

标签解析：

{dede:arclist ...}: 文章列表标签,用于获取文章列表。
row='5': 获取5条数据。
typeid='2': 只调用ID为2的栏目（假设“首页焦点图”栏目的ID是2）。
orderby='pubdate': 按发布时间排序。
[field:arcurl/]: 文章链接地址。
[field:litpic/]: 文章缩略图地址。
[field:title/]: 文章标题。

循环显示产品列表

假设“产品展示”栏目的ID是3。

<!-- 产品展示 -->
<section class="products">
    <h2>产品展示</h2>
    <div class="product-list">
        {dede:arclist row='6' typeid='3' titlelen='20'}
        <div class="product-item">
            <a href='[field:arcurl/]'>
                <img src='[field:litpic/]' alt='[field:title/]'>
                <h3>[field:title/]</h3>
            </a>
        </div>
        {/dede:arclist}
    </div>
</section>

循环显示新闻列表

假设“新闻中心”栏目的ID是4。

<!-- 新闻中心 -->
<section class="news">
    <h2>新闻中心</h2>
    <div class="news-list">
        {dede:arclist row='4' typeid='4' titlelen='30'}
        <div class="news-item">
            <h3><a href='[field:arcurl/]'>[field:title/]</a></h3>
            <span class="date">[field:pubdate function="MyDate('Y-m-d', @me)"/]</span>
            <p class="summary">[field:description function="cn_substr(@me, 100)"/]...</p>
        </div>
        {/dede:arclist}
    </div>
</section>

标签解析：

function="MyDate('Y-m-d', @me)": 对日期字段进行格式化，输出 年-月-日。
function="cn_substr(@me, 100)": 截取描述字段的前100个字符,用于摘要。

创建公共文件（头部和底部）

为了提高代码复用性和维护性，我们将 header 和 footer 拆分成独立的文件。

创建 header.html

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">{dede:global.cfg_webname/} - {dede:field.title/}</title>
    <link rel="stylesheet" href="/templets/mycompany/style/style.css">
</head>
<body>
    <!-- 网站头部 -->
    <header>
        <div class="logo"><a href="/">{dede:global.cfg_webname/}</a></div>
        <nav>
            <ul>
                <li><a href="/">首页</a></li>
                <li><a href="/list-1.html">关于我们</a></li>
                <li><a href="/list-2.html">产品展示</a></li>
                <li><a href="/list-3.html">新闻中心</a></li>
                <li><a href="/list-4.html">联系我们</a></li>
            </ul>
        </nav>
    </header>

创建 footer.html

    <!-- 网站底部 -->
    <footer>
        <p>Copyright &copy; {dede:global.cfg_webname/} - {dede:global.cfg_powerby/}</p>
    </footer>
</body>
</html>

在 index.html 中引入公共文件

修改 index.html，使用 {dede:include} 标签引入头部和底部。

{dede:include filename="header.html"/}
<!-- 主要内容区 -->
<main>
    <!-- ... (轮播图、产品、新闻等内容保持不变) ... -->
</main>
{dede:include filename="footer.html"/}

编写CSS样式

在 mycompany 文件夹下创建 style 目录，并在其中创建 style.css 文件，然后根据你的HTML结构，编写相应的CSS样式来美化你的网站，这部分是纯CSS工作,与织梦标签无关。

/* style.css */
body { font-family: 'Microsoft YaHei', sans-serif; margin: 0; padding: 0; }
header { background: #333; color: white; padding: 20px; }
.logo { float: left; }
nav ul { list-style: none; padding: 0; margin: 0; float: right; }
nav ul li { display: inline-block; margin-left: 20px; }
/* ... 更多样式 ... */

后台设置与生成

上传模板文件 将你制作好的整个 mycompany 文件夹通过FTP上传到网站的 /templets/ 目录下。

后台模板选择 登录织梦后台，进入 模板 -> 默认模板管理。

找到“首页模板”，选择 mycompany/index.html。
找到“列表页模板”，选择 mycompany/list_*.html。
找到“文章页模板”，选择 mycompany/article_*.html。
点击“更新”按钮。

生成网站

进入 主页HTML生成 -> HTML更新首页，点击“开始生成”。
如果需要生成栏目页和文章页，可以进入 主页HTML生成 -> 一键更新网站，选择“所有栏目”和“所有文档”，然后点击“开始生成”。

生成完成后,你的网站首页就通过你自定义的模板显示出来了！

第三部分：常用织梦标签速查手册

标签类别	标签名称	作用	示例
全局标签	`{dede:global.cfg_webname/}`	调用网站名称	`<title>{dede:global.cfg_webname/}</title>`
	`{dede:global.cfg_weburl/}`	调用网站网址	`<link rel="canonical" href="{dede:global.cfg_weburl/}">`
文章列表	`{dede:arclist}`	调用文章列表	`{dede:arclist row='10' typeid='1'}`
	`row`	调取文章数量	`row='5'`
	`typeid`	指定栏目ID	`typeid='2,3,4'` (多个用逗号隔开)
	`orderby`	排序方式	`orderby='hot'` (热门), `orderby='pubdate'` (发布时间)
	`[field:title/]`		`<a href="[field:arcurl/]">[field:title/]</a>`
	`[field:arcurl/]`	文章链接
	`[field:litpic/]`	文章缩略图	`<img src="[field:litpic/]">`
	`[field:description/]`	文章摘要
栏目列表	`{dede:channel}`	调用栏目列表	`{dede:channel type='top'}`
	`type`	栏目类型	`type='top'` (顶级栏目), `type='son'` (下级栏目)
	`[field:typename/]`	栏目名称	`<a href="[field:typeurl/]">[field:typename/]</a>`
	`[field:typeurl/]`	栏目链接
当前位置	`{dede:field.title/}`	当前页面标题	`<h1>{dede:field.title/}</h1>`
	`{dede:position/}`	面包屑导航	`<a href="/">首页</a> > {dede:position/}`
分页	`{dede:pagelist/}`	列表页分页条	直接放在列表循环标签后面即可
其他	`{dede:include filename='header.html'/}`	引入公共文件

第四部分：进阶技巧与注意事项

模板缓存：织梦有模板缓存机制，修改模板后，如果前台没有更新，请先进入后台 系统 -> 一键更新网站 -> 更新HTML -> 更新首页,然后清除浏览器缓存。
自定义函数：如果需要更复杂的数据处理，可以在 /include/extend.func.php 文件中编写自定义PHP函数，然后在模板中通过 function="myfunction(@me)" 调用。
响应式设计：在编写CSS时，使用媒体查询（Media Queries）让你的模板在不同设备上（PC、平板、手机）都有良好的显示效果。
安全第一：不要在模板中直接使用 <?php ?> 执行危险的PHP代码，织梦的标签系统已经足够强大,尽量使用标签完成。
官方文档：遇到不熟悉的标签，最好的查询方式是搜索“织梦CMS 标签大全”或查阅官方文档。

这份教程涵盖了从零开始制作一个织梦模板的全过程，多动手实践，遇到问题多查资料，你很快就能熟练掌握织梦模板制作,祝你成功！

织梦CMS模板制作教程，新手如何快速上手？

织梦CMS模板制作全教程：从零开始打造你的专属网站

第一部分：准备工作与核心概念

什么是织梦CMS模板？

开发环境准备

织梦模板的核心文件结构

第二部分：模板制作实战步骤

创建模板文件夹

编写基础HTML结构

使用织梦标签替换静态内容

创建公共文件（头部和底部）

编写CSS样式

后台设置与生成

第三部分：常用织梦标签速查手册

第四部分：进阶技巧与注意事项

相关文章

目录[+]