DedeCMS内容页怎么设计？内容页模板如何制作？

星降

发布时间：2025-09-10 10:35:01

478人浏览过

来源于php中文网

原创

答案：dedecms内容页设计需结合模板标签、html结构与css样式，通过article_article.htm文件实现数据动态展示。首先搭建语义化html结构，使用、等标签组织标题、元信息、正文及侧边栏；接着应用dedecms核心标签如{dede:field.title/}、{dede:field.body/}调用文章数据，结合{dede:prenext/}、{dede:likearticle/}增强导航与关联推荐；为满足个性化需求，可在后台添加自定义字段（如video_url），并在模板中用{dede:field.video_url/}调用，支持runphp逻辑判断实现视频嵌入等动态效果；布局上常见单栏全宽、两栏（内容+侧边栏）和三栏模式，推荐使用flexbox实现响应式设计，配合meta viewport标签、流式布局及媒体查询（@media）适配不同设备；性能优化方面，应压缩图片、启用懒加载、合并css/js、将js置于底部并异步加载，优先使用静态化生成html以提升访问速度；seo层面需优化title、keywords、description标签，合理使用h1-h3标题层级，添加图片alt属性，构建内部链接网络，并确保url简洁含关键词；最终实现兼顾用户体验、加载效率与搜索引擎可见性的内容页

dedecms内容页怎么设计？内容页模板如何制作？

DedeCMS内容页的设计和模板制作，说到底，就是如何将后台录入的文章内容，以一种既美观又符合用户阅读习惯的方式展现出来。核心在于理解DedeCMS的模板解析机制，然后通过HTML结构、CSS样式以及DedeCMS特有的标签，将数据动态地呈现在前端。这并不是一个简单的复制粘贴过程，更多的是一种对用户体验和内容呈现逻辑的思考。

解决方案

DedeCMS内容页模板的制作，通常围绕着

article_article.htm

这个文件展开。这是文章模型默认的内容页模板。

首先，你需要找到这个文件，它通常位于

templets/default/

目录下（如果你使用的是默认模板）。打开它，你会看到里面已经有一些基本的HTML结构和DedeCMS标签。

设计内容页，你可以从以下几个方面着手：

HTML结构搭建： 内容页的核心是文章主体，但围绕它，你还需要布局标题、作者、发布时间、来源、相关文章、评论区等元素。我会习惯性地用HTML5的语义化标签，比如

<article>

包裹文章主体，

<header>

放标题和元信息，

<aside>

放侧边栏推荐或广告，

<footer>

放版权信息或相关链接。例如，一个基本的结构可能是这样的：

<!DOCTYPE html>
<html>
<head>
<meta charset="{dede:global.cfg_soft_lang/}" />
<title>{dede:field.title/}_{dede:global.cfg_webname/}</title>
<meta name="keywords" content="{dede:field.keywords/}" />
<meta name="description" content="{dede:field.description function='cn_substr(@me,250)'/}" />
<link href="{dede:global.cfg_templets_skin/}/css/style.css" rel="stylesheet" media="screen" type="text/css" />
</head>
<body>
    <div class="header">{dede:include filename="head.htm"/}</div>
    <div class="main-container">
        <div class="article-content">
            <h1 class="article-title">{dede:field.title/}</h1>
            <div class="article-meta">
                <span>发布时间：{dede:field.pubdate function="MyDate('Y-m-d H:i',@me)"/}</span>
                <span>来源：{dede:field.source/}</span>
                <span>作者：{dede:field.writer/}</span>
                <span>点击：<script src="{dede:field.phpurl/}/count.php?viewid={dede:field.id/}&mid={dede:field.mid/}" type='text/javascript' language="javascript"></script></span>
            </div>
            <div class="article-body">
                {dede:field.body/}
            </div>
            <div class="article-prenext">
                {dede:prenext get='pre'/}
                {dede:prenext get='next'/}
            </div>
            <div class="related-articles">
                <h3>相关文章</h3>
                <ul>
                    {dede:likearticle row='8' titlelen='50'}
                    <li><a href="[field:arcurl/]">[field:title/]</a></li>
                    {/dede:likearticle}
                </ul>
            </div>
        </div>
        <div class="sidebar">
            {dede:include filename="right.htm"/} <!-- 侧边栏通常是公共部分 -->
        </div>
    </div>
    <div class="footer">{dede:include filename="footer.htm"/}</div>
</body>
</html>

DedeCMS标签的应用： 这是最关键的部分。DedeCMS提供了一系列标签来调用数据库中的数据。
- ```
{dede:field.title/}
```
  ：文章标题。
- ```
{dede:field.pubdate function="MyDate('Y-m-d H:i',@me)"/}
```
  ：发布时间，可以自定义格式。
- ```
{dede:field.source/}
```
  、
```
{dede:field.writer/}
```
  ：文章来源和作者。
- ```
{dede:field.body/}
```
  ：文章正文内容，这个标签会输出编辑器里的所有HTML。
- ```
{dede:field.keywords/}
```
  、
```
{dede:field.description/}
```
  ：用于SEO的关键词和描述。
- ```
{dede:prenext get='pre'/}
```
  、
```
{dede:prenext get='next'/}
```
  ：上一篇和下一篇文章链接。
- ```
{dede:likearticle row='8' titlelen='50'}
```
  ：相关文章列表，可以根据关键词或同栏目推荐。
- ```
{dede:include filename="head.htm"/}
```
  ：引入公共头部文件，这样可以避免重复编写代码，方便维护。
CSS样式美化： 有了HTML结构和数据，接下来就是用CSS来控制布局、字体、颜色、间距等。我通常会把通用的样式写在
```
style.css
```
里，然后针对内容页的特殊元素，比如
```
.article-body
```
里的图片、段落样式，进行细致调整。务必确保在不同设备上（响应式设计）也能有良好的显示效果。
JavaScript交互（可选）： 如果你需要一些更高级的交互，比如图片懒加载、分享按钮、回到顶部、评论提交等，就需要引入JavaScript。DedeCMS本身对JS的集成比较开放，你可以在模板里直接写JS代码，或者引入外部JS文件。

记住，设计内容页的理念是让用户能舒适地阅读，快速找到他们需要的信息，并且能方便地分享或继续浏览其他内容。

如何为DedeCMS内容页添加自定义字段和实现动态内容展示？

在DedeCMS中，标准的内容页可能无法满足所有需求，比如你可能需要为文章添加一个“视频链接”或“推荐指数”这样的额外信息。这时候，自定义字段就派上用场了。

要添加自定义字段，你需要进入DedeCMS后台，找到“核心” -> “频道模型” -> “文章模型管理”（或你正在使用的具体模型）。点击“字段管理”，然后“增加新字段”。在这里，你可以定义字段的名称（比如

video_url

）、类型（文本、多行文本、图片、文件等），以及是否在前台显示。

添加自定义字段的步骤：

后台操作：
- 登录DedeCMS后台。
- 点击“核心” -> “频道模型” -> “文章模型管理”。
- 点击你想要修改的模型（通常是“普通文章”或“图集模型”）旁边的“字段管理”。
- 点击“增加新字段”。
- 填写字段信息：
  - 字段名称：
```
video_url
```
    (英文小写，不含特殊字符)
  - 字段标题：视频链接 (前台显示名称)
  - 数据类型：单行文本 (根据你的需求选择)
  - 字段提示信息：请输入视频的外部链接
  - 保存。
- 更新缓存。
模板中调用： 一旦自定义字段添加并保存，你就可以在内容页模板
```
article_article.htm
```
中通过
```
{dede:field.你的字段名/}
```
来调用它了。例如，要显示上面创建的
```
video_url
```
字段：
```
{dede:field.video_url runphp='yes'}
    if (@me != '') {
        @me = '<div class="article-video"><iframe src="' . @me . '" frameborder="0" allowfullscreen></iframe></div>';
    } else {
        @me = '';
    }
{/dede:field.video_url}
```
这里我用了一个
```
runphp
```
属性，判断如果
```
video_url
```
不为空，就把它包装成一个
```
iframe
```
来播放视频。这种方式非常灵活，可以根据字段内容动态生成不同的HTML结构。如果你只是想简单显示文本，直接
```
{dede:field.你的字段名/}
```
即可。

实现动态内容展示：

除了自定义字段，DedeCMS还有很多标签可以实现动态内容。

条件判断：
```
{dede:if field.typeid == 1}
```
...
```
{/dede:if}
```
。可以根据文章的栏目ID来显示不同的内容或样式。
循环调用：
```
{dede:arclist typeid='1' row='5'}
```
...
```
{/dede:arclist}
```
。在内容页中，你可能想在侧边栏或底部展示同栏目的最新文章，这个标签就非常有用。
留言评论： DedeCMS自带了评论功能，通常通过
```
{dede:include filename="plus/feedback.htm"/}
```
引入评论模板。你可以根据需要修改
```
feedback.htm
```
来定制评论区的样式和功能。

通过这些手段，内容页不再是死板的，它可以根据文章的属性、用户的操作，甚至服务器端的数据，展现出丰富多样的动态效果。

DedeCMS内容页模板的常见布局模式有哪些，以及如何实现响应式设计？

DedeCMS内容页的布局模式，其实和普通网页设计理念是相通的，主要就是围绕内容区和辅助信息区（侧边栏）的排布。常见的几种模式包括：

单栏全宽布局： 这是最简洁的模式，文章内容占据整个页面宽度，没有侧边栏。这种布局适合阅读体验优先，尤其是长篇文章或图片较多的内容。
- 实现方式： 整个内容区用一个
```
div
```
  包裹，设置
```
width: 100%; max-width: 1200px; margin: 0 auto;
```
  让其居中并限制最大宽度。
- 优点： 聚焦内容，阅读干扰少，在移动设备上适配性好。
- 缺点： 无法放置侧边栏广告、相关推荐等辅助信息。
两栏布局（内容区 + 左侧或右侧侧边栏）： 这是最经典、最常用的布局。内容区通常占据70%-75%的宽度，侧边栏占据25%-30%的宽度，用于放置导航、热门文章、广告、标签云等。
- 实现方式：
  - Flexbox布局： 最推荐的方式。父容器设置
```
display: flex;
```
    ，内容区和侧边栏分别设置
```
flex: 1;
```
    或指定宽度。
```
.main-container {
display: flex;
justify-content: space-between; /* 或者 space-around */
max-width: 1200px;
margin: 0 auto;
padding: 20px;
}
.article-content {
flex: 1; /* 或者 width: 70%; */
margin-right: 20px; /* 如果侧边栏在右边 */
}
.sidebar {
width: 300px; /* 或者 width: 25%; */
}
```
  - 浮动布局（传统方式）： 内容区和侧边栏都设置
```
float: left;
```
    或
```
float: right;
```
    ，并给它们指定宽度。父容器需要清除浮动。
- 优点： 信息量大，功能丰富，用户可以同时浏览主内容和辅助信息。
- 缺点： 布局相对复杂，需要注意浮动清除和响应式处理。
三栏布局（内容区 + 左右侧边栏）： 这种布局在门户网站或新闻站点常见，左右两侧都有侧边栏，中间是主要内容。
- 实现方式： 同样推荐Flexbox。父容器
```
display: flex;
```
  ，中间内容区
```
flex: 1;
```
  ，左右侧边栏固定宽度。
- 优点： 信息展示能力最强。
- 缺点： 页面容易显得拥挤，主次不分明，移动端适配难度大。

如何实现响应式设计：

响应式设计是现代网页的标配，DedeCMS内容页也不例外。核心思想是利用CSS媒体查询（Media Queries）根据设备的屏幕尺寸调整布局和样式。

Meta Viewport标签： 在HTML的
```
<head>
```
部分添加：
```
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
```
这告诉浏览器，页面的宽度应该等于设备的宽度，并禁止用户缩放。

I-Shop购物系统
部分功能简介：商品收藏夹功能热门商品最新商品分级价格功能自选风格打印结算页面内部短信箱商品评论增加上一商品，下一商品功能增强商家提示功能友情链接用户在线统计用户来访统计用户来访信息用户积分功能广告设置用户组分类邮件系统后台实现更新用户数据系统图片设置模板管理CSS风格管理申诉内容过滤功能用户注册过滤特征字符IP库管理及来访限制及管理压缩，恢复，备份数据库功能上传文件管理商品类别管理商品添加/修改/

下载
流式布局： 所有宽度都使用百分比或
```
max-width
```
，而不是固定的像素值。图片也应该设置
```
max-width: 100%; height: auto;
```
以防止溢出。

媒体查询（Media Queries）： 这是实现不同屏幕尺寸下不同布局的关键。

/* 默认样式，针对桌面端 */
.main-container {
    display: flex;
    /* ... 其他桌面端样式 ... */
}

/* 当屏幕宽度小于等于768px时（平板和手机） */
@media (max-width: 768px) {
    .main-container {
        flex-direction: column; /* 将两栏或三栏变为单栏垂直堆叠 */
        padding: 10px;
    }
    .article-content, .sidebar {
        width: 100%; /* 占据全宽 */
        margin-right: 0;
        margin-bottom: 20px; /* 增加间距 */
    }
    .article-meta span {
        display: block; /* 元信息垂直显示 */
    }
    /* 调整字体大小、图片边距等 */
    .article-title {
        font-size: 24px;
    }
}

/* 当屏幕宽度小于等于480px时（更小的手机） */
@media (max-width: 480px) {
    /* 进一步调整样式，例如更小的字体，更紧凑的布局 */
    .article-title {
        font-size: 20px;
    }
}

通过媒体查询，你可以针对不同断点（例如

768px

、

480px

等）重写CSS规则，将多栏布局变为单栏堆叠，调整字体大小、图片尺寸、元素间距等，确保内容在任何设备上都能清晰、舒适地阅读。我个人在做响应式时，会优先考虑移动端（Mobile First），先设计好手机版，再逐步扩展到平板和桌面。

优化DedeCMS内容页的加载速度和SEO表现有哪些实用技巧？

DedeCMS内容页的加载速度和SEO表现，直接影响用户体验和网站的搜索引擎排名。这方面确实有很多细节值得我们去打磨。

加载速度优化：

图片优化：
- 压缩： 上传图片前先进行压缩，减小文件大小。DedeCMS后台有图片水印功能，但没有内置的图片压缩。可以借助在线工具或图片处理软件。
- 懒加载（Lazy Load）： 对于长文章中的图片，只加载当前视口可见的图片，当用户滚动时再加载后续图片。这需要JavaScript实现。
```

@@##@@

<script src="path/to/lazysizes.min.js" async=""></script>
```
- WebP格式： 考虑使用WebP格式图片，它在相同质量下文件更小，但需要浏览器支持。DedeCMS默认不支持，可能需要开发插件或手动转换。
CSS和JavaScript优化：
- 合并与压缩： 将多个CSS文件合并成一个，多个JS文件合并成一个，减少HTTP请求。DedeCMS后台有“系统”->“系统基本参数”->“性能选项”中可以开启JS/CSS压缩合并，但效果有限，更推荐在开发阶段就做好。
- 异步加载JS： 对于非关键的JavaScript文件，使用
```
defer
```
  或
```
async
```
  属性，避免阻塞页面渲染。
- CSS放置在
  <head>
  ，JS放置在
  <body>
  底部：这样可以确保CSS先加载，页面结构和样式能尽快呈现，JS则在HTML渲染完成后再执行，不影响首屏加载速度。
静态化： DedeCMS的强项就是静态化。内容页生成静态HTML文件后，用户访问时服务器直接返回HTML，无需PHP解析和数据库查询，速度极快。
- 后台操作： “生成” -> “更新文档HTML”，选择你需要生成的文章。
- 注意事项： 静态化后，一些动态功能（如点击数统计、评论提交）可能需要AJAX或JS来实现。DedeCMS的点击数通常是JS调用一个PHP文件来统计的，所以静态化不影响。
服务器与CDN：
- 优化服务器配置： 合理配置Nginx/Apache，开启Gzip压缩。
- 使用CDN： 对于图片、CSS、JS等静态资源，使用CDN（内容分发网络）可以显著提升全国乃至全球用户的访问速度。

SEO表现优化：

标题（Title）优化：
- ```
{dede:field.title/}_{dede:global.cfg_webname/}
```
  ：确保标题包含文章核心关键词，且网站名称在后。
- 标题长度适中，一般不超过70个字符，避免截断。
关键词（Keywords）和描述（Description）优化：
- ```
{dede:field.keywords/}
```
  ：确保关键词与文章内容高度相关，数量3-5个为宜。
- ```
{dede:field.description function='cn_substr(@me,250)'/}
```
  ：描述是对文章内容的精炼总结，包含主要关键词，吸引用户点击，长度控制在150字左右。这些DedeCMS都可以直接在后台文章发布时填写。
URL结构优化：
- DedeCMS支持伪静态或纯静态。推荐使用纯静态，URL结构清晰、简洁，包含关键词，对SEO更有利。例如：
```
你的域名/栏目名/文章ID.html
```
  。
H标签的使用：
- ```
<h1>
```
  ：文章标题只用一个
```
<h1>
```
  ，这是最重要的。
- ```
<h2>
```
  、
```
<h3>
```
  等：用于文章内部的子标题，形成清晰的层级结构，帮助搜索引擎理解文章内容。
内部链接：
- 在文章正文中，适当地添加指向站内其他相关文章的链接，可以提高页面权重，引导用户浏览更多内容，降低跳出率。
- “相关文章”模块（
```
{dede:likearticle/}
```
  ）也是重要的内部链接。
图片Alt属性：
- 所有图片都应该添加
```
alt
```
  属性，描述图片内容，方便搜索引擎识别，也有利于视障用户。DedeCMS编辑器上传图片时可以填写。
内容质量：
- 这是最重要的。原创、高质量、有深度的内容是SEO的基石。避免关键词堆砌，保持自然流畅的行文。
社交分享：
- 在内容页添加社交分享按钮，鼓励用户分享文章，增加外部链接和曝光度。这需要一些JS代码或第三方分享插件。