“简洁”意味着去繁就简，核心是内容；“响应式”意味着网站能在不同尺寸的设备（手机、平板、桌面）上都有良好的显示效果；“自适应”是响应式实现的目标。
（图片来源网络，侵删）
下面我将从核心理念、具体步骤、代码示例和注意事项四个方面，为你提供一个完整的指南。
核心理念：移动优先 (Mobile-First)
在开始之前,请树立一个核心思想：移动优先。
- 先设计手机版：想象你的用户首先是用手机访问你的网站，手机屏幕小，所以必须优先展示最重要的内容，去掉所有不必要的装饰。
- 再逐步增强：当屏幕尺寸变大时（平板、桌面），再通过 CSS 逐步添加布局、增加内容、美化样式。
这个理念能让你自然而然地做出一个结构清晰、重点突出的简洁网站。
具体实施步骤
步骤 1：选择并修改一个简洁的模板
DedeCMS 自带的模板通常比较陈旧且臃肿，我们有两个选择：
（图片来源网络，侵删）
选择 A：使用现有的响应式模板
网上有很多基于 DedeCMS 的响应式模板，关键词可以是 dedecms 响应式模板、dedecms 移动端自适应模板，选择一个你喜欢的，直接覆盖安装。
选择 B：自己动手改造现有模板（推荐，更灵活） 这是最能体现“简洁”和“自定义”的方式。
- 备份！备份！备份！ 修改任何文件前，请务必备份你的网站文件和数据库。
- 清理模板文件：
- 打开
templets/default目录（或你自定义的模板目录）。 - 删除或简化
index.htm、list_article.htm、article_article.htm等核心模板文件中的冗余代码，比如复杂的表格嵌套、过时的marquee标签、不必要的装饰性图片等。 - 保留核心的循环标签和内容结构。
- 打开
步骤 2：引入核心 CSS 框架（推荐使用 Bootstrap）
使用成熟的 CSS 框架是最高效实现响应式的方法，这里以 Bootstrap 5 为例，它非常现代、简洁且强大。
- 下载 Bootstrap：访问 Bootstrap 官网 下载最新版本。
- 引入文件：
- 将下载的
bootstrap.min.css文件放到你的模板目录下的css文件夹中（如果没有就创建一个）。 - 在你模板的
<head>标签内引入这个 CSS 文件。<!-- 在 head.htm 或其他公共头部文件中 --> <link rel="stylesheet" href="{dede:global.cfg_templets_skin/}/css/bootstrap.min.css">
- 将下载的
步骤 3：重构 HTML 结构，使用 Bootstrap 的栅格系统
这是实现响应式的核心,Bootstrap 的栅格系统将页面划分为12列。
（图片来源网络，侵删）
示例：修改首页 index.htm 的文章列表
修改前（可能的样子）：
<table width="100%">
<tr>
<td>
{dede:arclist titlelen='30' row='10'}
<a href="[field:arcurl/]">[field:title/]</a><br>
{/dede:arclist}
</td>
</tr>
</table>
修改后（使用 Bootstrap 栅格系统）：
<!-- container 是一个居中且有最大宽度的容器 -->
<div class="container mt-4"> <!-- mt-4 是上边距，美化一下 -->
<!-- 标题 -->
<h2>最新文章</h2>
<!-- row 是栅格系统的行 -->
<div class="row">
<!-- dede:arclist 循环开始 -->
<!-- col-md-6 表示在中等屏幕上（如笔记本）每行显示2列 (12/6=2) -->
<!-- col-sm-12 表示在小屏幕上（如手机）每行显示1列，占满12列 -->
<!-- 这是典型的“移动优先”写法：小屏幕先定义，大屏幕再覆盖 -->
{dede:arclist titlelen='30' row='6'}
<div class="col-12 col-md-6 mb-3"> <!-- mb-3 是下边距 -->
<!-- 卡片组件，让内容更美观 -->
<div class="card">
<!-- 如果有缩略图，可以这样放 -->
{if $fields['litpic'] != ''}
<img src="[field:litpic/]" class="card-img-top" alt="[field:title/]">
{/if}
<div class="card-body">
<h5 class="card-title">
<a href="[field:arcurl/]" class="text-decoration-none">[field:title/]</a>
</h5>
<p class="card-text text-muted small">[field:pubdate function="MyDate('Y-m-d', @me)"/]</p>
</div>
</div>
</div>
{/dede:arclist}
</div>
</div>
代码解释：
container: 创建一个居中的响应式容器。row: 代表一行，是列的容器。col-12 col-md-6: 这是关键。col-12: 在所有屏幕尺寸（手机、平板、桌面）下，默认占满12列（即一行一列）。col-md-6: 当屏幕宽度达到“中等”(md) breakpoint（断点）时，该列宽度变为6，即一行显示两列。- 你还可以使用
col-lg-4(大屏幕，一行三列) 等，组合出非常灵活的布局。
card: Bootstrap 的卡片组件，让文章列表块状化，更简洁美观。mt-4,mb-3,text-muted,small,text-decoration-none: 都是 Bootstrap 的工具类，用于快速添加样式，无需写自定义 CSS。
步骤 4：添加响应式导航栏
网站导航栏是响应式设计的重中之重,我们可以使用 Bootstrap 的导航组件。
在 head.htm 中添加导航栏：
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container">
<a class="navbar-brand" href="/">网站名称</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
{dede:channel type='top' row='8'}
<a class="nav-link" href="[field:typelink/]">[field:typename/]</a>
{/dede:channel}
</div>
</div>
</nav>
navbar-toggler: 这是一个“汉堡菜单”按钮，在手机端会显示，点击后展开下面的导航链接。navbar-collapse: 默认是折叠的，当屏幕变大或点击汉堡按钮时展开。
步骤 5：设置视口标签
这是让浏览器正确处理响应式布局的必须步骤，在你的模板的 <head> 标签内，第一行就应该加上这个标签。
<meta name="viewport" content="width=device-width, initial-scale=1.0">
width=device-width: 告诉浏览器，页面的宽度应该等于设备的屏幕宽度。initial-scale=1.0: 设置初始的缩放比例为1.0。
步骤 6：优化图片和内容
- 图片：
- 给所有
<img>标签添加class="img-fluid"，这个类会让图片最大宽度为100%，并保持其宽高比，防止图片撑破容器。<img src="..." class="img-fluid" alt="...">
- 在后台发布文章时,上传的图片会被自动处理成不同尺寸，你可以检查一下
include/helpers/image.helper.php文件，确保缩略图生成逻辑符合你的需求。
- 给所有
- 页 (
article_article.htm)，给文章正文内容所在的div添加container类，让它在桌面端有合适的阅读宽度。<div class="container py-4"> <div class="article-content"> [field:body/] </div> </div>
- 页 (
完整代码示例 (简化版 index.htm)
<!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>
<!-- 引入 Bootstrap CSS -->
<link rel="stylesheet" href="{dede:global.cfg_templets_skin/}/css/bootstrap.min.css">
</head>
<body>
<!-- 引入导航栏 -->
{dede:include filename='head.htm'/}
<main>
<div class="container mt-5">
<h1 class="mb-4">欢迎来到 {dede:global.cfg_webname/}</h1>
<div class="row">
<!-- 左侧主要内容区 -->
<div class="col-lg-8">
<h2>最新文章</h2>
<div class="row">
{dede:arclist titlelen='30' row='6'}
<div class="col-12 col-md-6 mb-4">
<div class="card h-100">
{if $fields['litpic'] != ''}
<img src="[field:litpic/]" class="card-img-top" alt="[field:title/]">
{/if}
<div class="card-body">
<h5 class="card-title">
<a href="[field:arcurl/]" class="text-decoration-none">[field:title/]</a>
</h5>
<p class="card-text text-muted">[field:description function='cn_substr(@me, 100)'/]...</p>
<p class="card-text"><small class="text-muted">发布于：[field:pubdate function="MyDate('Y-m-d', @me)"/]</small></p>
</div>
</div>
</div>
{/dede:arclist}
</div>
<!-- 分页 -->
{dede:pagelist listsize='4'/}
</div>
<!-- 右侧边栏 -->
<div class="col-lg-4">
{dede:include filename='side.htm'/}
</div>
</div>
</div>
</main>
<!-- 引入页脚 -->
{dede:include filename='footer.htm'/}
<!-- 引入 Bootstrap JS (需要 Popper.js) -->
<script src="{dede:global.cfg_templets_skin/}/js/bootstrap.bundle.min.js"></script>
</body>
</html>
重要注意事项
- CSS 冲突：DedeCMS 自带的一些样式可能与 Bootstrap 冲突，如果发现样式错乱，可以使用浏览器的开发者工具（F12）检查是哪个 CSS 规则在起作用，然后在你的模板中通过更具体的选择器或
!important（慎用）来覆盖它。 - 模板标签：不要害怕使用 DedeCMS 的模板标签。
{dede:arclist}、{dede:channel}、{dede:pagelist}等是动态内容的核心，将它们正确地放入 Bootstrap 的栅格和组件结构中，就能实现动态的响应式效果。 - 性能优化：响应式网站如果图片和脚本过大，在移动端会非常慢。
- 压缩所有图片。
- 压缩合并 CSS 和 JS 文件。
- 使用 CDN 加速 Bootstrap 等公共库。
- 测试：在 Chrome 浏览器中，按
F12打开开发者工具，可以模拟不同设备（手机、平板、桌面）的屏幕尺寸，实时预览效果，这是最方便的测试方法。
通过以上步骤,你就可以将一个传统的 DedeCMS 网站，改造成为一个现代、简洁、在各种设备上都能完美展示的响应式网站了，祝你成功！
