理解 DedeCMS 的模板文件结构
在开始之前，你需要明白 DedeCMS 是如何工作的,它的页面通常由三部分组成：
- 公共头部文件：通常命名为
head.htm，它包含了网站的基本结构、<head>标签、CSS 文件引入、网站标题等,几乎所有页面都会包含这个文件。 - 公共底部文件：通常命名为
footer.htm，它包含了页脚信息、版权声明、JavaScript 文件引入等,几乎所有页面也会包含这个文件。 - 独立页面模板：例如首页
index.htm、列表页list_article.htm页article_article.htm等，这些文件主要负责展示页面的主体内容，并且通过{dede:include filename="head.htm"/}和{dede:include filename="footer.htm"/}来引入公共部分。
最佳实践：将所有的 CSS 代码都放在 head.htm 文件中，这样所有页面都能共享这些样式,避免代码重复。
CSS 文件的三种引入方式
在 head.htm 文件中，你有三种主要的方式来引入 CSS 样式表。
外部链接式（最推荐，最常用）
这是最标准、最推荐的方式，你将所有的 CSS 代码写在一个或多个独立的 .css 文件中（style.css），然后在 HTML 文件中通过 <link> 标签链接它。
优点：
- 代码分离：HTML 结构和 CSS 样式完全分离,便于维护。
- 缓存利用：浏览器会缓存 CSS 文件，用户再次访问网站时,加载速度更快。
- 可维护性高：修改样式时只需编辑
.css文件，无需改动 HTML 文件。
示例代码（放在 head.htm 的 <head> 标签内）：
<link rel="stylesheet" href="/templets/你的默认模板目录/style.css" type="text/css" />
说明：
href="/templets/你的默认模板目录/style.css"：这里的路径是相对于网站根目录的，你需要将你的默认模板目录替换成你实际使用的模板文件夹名称，如果你的模板文件夹是default，那么路径就是/templets/default/style.css。- 如果你的 CSS 文件在
/static/css/目录下，路径就是/static/css/style.css。
内部样式表
这种方式将 CSS 代码直接写在 HTML 文件的 <head> 部分内，使用 <style> 标签包裹。
适用场景：
- 单个页面需要一些特殊的、不会在其他页面使用的样式。
- 快速测试或修改一些小样式。
示例代码（放在 head.htm 的 <head> 标签内）：
<style type="text/css">
body {
font-family: "Microsoft YaHei", Arial, sans-serif;
background-color: #f4f4f4;
}
.special-title {
color: #ff6600;
font-size: 24px;
font-weight: bold;
}
</style>
内联样式
这种方式将 CSS 样式直接写在 HTML 元素的 style 属性里。
适用场景：
- 极少使用，通常用于需要动态改变样式的 JavaScript 场景,或者对某个特定元素进行快速微调。
示例代码：
<h1 style="color: blue; text-align: center;">这是一个蓝色居中的标题</h1>
在 DedeCMS 模板中实际操作步骤
假设你要给你的网站标题 <h1 class="site-title"> 添加一个样式,让它变成红色。
第 1 步：创建 CSS 文件
-
在你的模板文件夹（
/templets/default/）下新建一个文件夹，css。 -
在
css文件夹里新建一个文件，命名为style.css。 -
用代码编辑器打开
style.css,写入以下内容：/* style.css */ .site-title { color: red; /* 将文字颜色设置为红色 */ font-size: 36px; /* 设置字体大小 */ font-weight: bold; /* 设置字体加粗 */ }
第 2 步：在 head.htm 中引入 CSS 文件
-
打开你的
head.htm文件。 -
在
<head>和</head>标签之间，找到合适的位置（通常在<title>标签之后）,添加以下代码：<!-- 在 head.htm 中添加 --> <link rel="stylesheet" href="/templets/default/css/style.css" type="text/css" />
第 3 步：在页面模板中应用 CSS 类
- 打开你想要修改的页面模板，比如首页
index.htm。 - 找到你的网站标题的 HTML 代码，假设它原来是这样的：
<h1>我的网站名称</h1>
- 修改它，为你想要添加样式的元素添加
class属性，并值为你在 CSS 文件中定义的类名.site-title：<h1 class="site-title">我的网站名称</h1>
- 保存并上传所有修改过的文件 (
style.css,head.htm,index.htm) 到你的服务器。
刷新你的网站首页，你就会看到网站标题已经变成了红色、大号、加粗的样式。
进阶技巧与常见问题
使用 DedeCMS 全局变量路径
为了提高模板的通用性，避免更换域名或目录后路径失效，强烈建议使用 DedeCMS 的全局变量 {dede:global.cfg_templets_dir/}。
这个变量会自动指向你的模板目录 /templets/。
修改后的 head.htm 代码：
<link rel="stylesheet" href="{dede:global.cfg_templets_dir/}/default/css/style.css" type="text/css" />
这样，即使你把网站移动到其他目录，只要模板文件夹名不变,路径就始终正确。
CSS 样式不生效？排查步骤
如果样式没有生效,请按以下顺序检查：
- 缓存问题：
- 浏览器缓存：按
Ctrl + F5(Windows) 或Cmd + Shift + R(Mac) 强制刷新浏览器。 - DedeCMS 缓存：登录 DedeCMS 后台，点击“系统” -> “系统基本参数” -> “性能选项”，将“是否开启模板缓存”设置为“否”，保存后刷新页面，改回“是”。
- 浏览器缓存：按
- 路径错误：检查
href中的路径是否正确，可以在浏览器开发者工具（按 F12）的“网络”或“元素”面板中查看 CSS 文件是否加载成功,以及路径是否正确。 - CSS 语法错误：检查你的
style.css文件中是否有拼写错误、缺少大括号 或分号 ,一个语法错误可能会导致整个文件都无法加载。 - 选择器优先级问题：确保你的 CSS 选择器没有比其他地方的样式优先级低，浏览器默认样式或更具体的选择器可能会覆盖你的样式，可以使用开发者工具检查元素，看哪些样式被应用了,哪些被划掉了。
- 文件未上传：确认你修改的所有文件（CSS、HTML模板文件）都已经正确上传到服务器上对应的目录。
使用 CSS 预处理器（Less/Sass）
对于复杂的网站项目，可以使用 Less 或 Sass 等 CSS 预处理器，这需要你在服务器端配置编译环境，或者使用前端工具（如 Gulp, Webpack）进行编译，然后将编译后的 .css 文件部署到服务器上，这超出了 DedeCMS 本身的范畴,但是一种专业的工作流。
| 方法 | 优点 | 缺点 | 推荐场景 |
|---|---|---|---|
| 外部链接式 | 代码分离、利于缓存、易于维护 | 需要额外文件 | 所有网站的主要样式 |
| 内部样式表 | 简单、无需额外文件 | 无法缓存、HTML文件臃肿 | 单个页面特殊样式、快速测试 |
| 内联样式 | 优先级最高、直接作用于元素 | 样式与结构混杂、难以维护 | 动态样式、JS操作、紧急修复 |
对于 DedeCMS 用户，最核心、最常用的就是“外部链接式”，请务必养成将 CSS 代码写入独立文件，并在 head.htm 中通过 {dede:global.cfg_templets_dir/}/... 的方式引入的好习惯。
