dede文章页背景如何制作？-DEDE建站-盈思创科技

使用CSS为整个文章页设置统一静态背景（最简单）

这种方法最直接,适用于整个文章列表页和文章详情页都使用同一张背景图。

（图片来源网络，侵删）

操作步骤：

准备背景图片
- 将你的背景图片（bg_article.jpg）上传到DedeCMS的模板目录下的images文件夹中，通常路径是 /templets/你的模板名称/images/。

修改CSS文件

找到你的模板的CSS文件，它通常位于 /templets/你的模板名称/style/ 目录下，文件名可能是 style.css、main.css 等。
在CSS文件中，找到控制文章内容区域（通常是 articlecontent 或类似ID的容器）的样式，或者在 body 标签上直接设置。
添加或修改以下CSS代码：

/* 方案A：为整个文章页面（body）设置背景 */
body {
    background-image: url('/templets/你的模板名称/images/bg_article.jpg');
    background-repeat: repeat; /* 背景平铺，可选值: no-不重复, repeat-平铺, repeat-x-横向平铺, repeat-y-纵向平铺 */
    background-attachment: fixed; /* 背景固定，滚动页面时背景不动 */
    background-position: center top; /* 背景居中顶部 */
}
/* 方案B：仅为文章内容区域设置背景（推荐） */
/* 首先需要知道你的文章内容区域的class或ID，通常是 .article-content 或 #article-content */
.article-content {
    background-image: url('/templets/你的模板名称/images/bg_article.jpg');
    background-repeat: repeat;
    background-attachment: fixed;
    padding: 20px; /* 加上内边距，避免文字紧贴边缘 */
}

更新缓存
（图片来源网络，侵删）

登录DedeCMS后台，点击顶部菜单的“系统” -> “清除缓存”，然后选择“一键更新网站缓存并生成HTML”，最后点击“开始执行”。

优点：

实现简单,只需修改CSS。
对网站性能影响小。

缺点：

所有文章页都是同一张背景,无法个性化。

为不同栏目设置不同的背景（进阶）

如果你的不同栏目需要不同的风格（新闻栏目用蓝色背景，教程栏目用绿色背景）,可以使用这个方法。

（图片来源网络，侵删）

操作步骤：

准备背景图片
- 为每个栏目准备一张背景图，并上传到相应位置。
  - /templets/你的模板名称/images/bg_news.jpg (新闻栏目)
  - /templets/你的模板名称/images/bg_tutorial.jpg (教程栏目)

修改CSS文件

在CSS文件中为不同栏目的内容区域定义好样式类，我们使用 body 标签的 class 属性来区分不同栏目。

/* 假设新闻栏目的ID是 1 */
body#channel-1 .article-content {
    background-image: url('/templets/你的模板名称/images/bg_news.jpg');
}
/* 假设教程栏目的ID是 2 */
body#channel-2 .article-content {
    background-image: url('/templets/你的模板名称/images/bg_tutorial.jpg');
}
/* 默认背景 */
.article-content {
    background-image: url('/templets/你的模板名称/images/default_bg.jpg');
    background-repeat: repeat;
    padding: 20px;
}

修改文章页模板文件
- 找到文章页的模板文件，通常位于 /templets/你的模板名称/article_article.htm。
- 找到 <body> 标签，我们需要给它动态添加一个 id 或 class 来标识当前栏目。
```

<body>

<body id="channel-{dede:fieldtypeid/}">
```
- {dede:fieldtypeid/} 这个标签会自动输出当前文章所在的栏目ID，如果文章在ID为1的栏目下，<body> 标签就会变成 <body id="channel-1">。
更新缓存

同样，在后台执行“一键更新网站缓存并生成HTML”。

优点：

可以实现不同栏目的差异化设计。
逻辑清晰,易于维护。

缺点：

需要修改模板文件。

为每篇文章设置独立的背景（高级）

这是最灵活但实现也最复杂的方法,可以为每一篇文章都设置独一无二的背景。

操作步骤：

修改文章表
- 进入DedeCMS后台，点击“系统” -> “SQL命令行工具”。
- 在输入框中执行以下SQL语句，为 dede_archives (文章主表) 添加一个新字段 bgpic 用于存储背景图片路径。
```
ALTER TABLE `dede_archives` ADD `bgpic` CHAR(255) NOT NULL DEFAULT '';
```

修改文章发布/编辑页面

找到文章内容发布/编辑的模板文件，它位于 /templets/system/ 目录下，文件名为 article_add.htm (发布) 和 article_edit.htm (编辑)。
在你希望添加背景图片选择框的位置（在“文章内容”编辑框上方或下方）添加以下HTML代码：

<tr>
    <td height="24" colspan="2" bgcolor="#f5f5f5">
        <strong>文章背景图片：</strong>
        <input name="bgpic" type="text" id="bgpic" size="50" value="{dede:field.bgpic/}" />
        <input type="button" name="setbg" value="选择图片" style="width: 80px" onClick="SelectImage('form1.bgpic','bigimage');" />
    </td>
</tr>

修改文章显示模板

打开文章页模板 /templets/你的模板名称/article_article.htm。
在 <body> 标签中,通过PHP调用刚刚添加的字段来动态设置背景。

<body style="background-image: url({dede:field.bgpic/});">

为了更好的控制，推荐使用方法二的结构,将背景应用到内容区域：

<body>
    <div class="article-content" style="background-image: url({dede:field.bgpic/});">
        <!-- 这里是文章原有的所有内容 -->
        {dede:include filename="head.htm"/}
        <h1>{dede:field.title/}</h1>
        <div class="article-info">...</div>
        {dede:field.body/}
        ...
    </div>
</body>

发布文章
- 现在去发布或编辑一篇文章，你会看到多了一个“文章背景图片”的输入框，你可以点击“选择图片”按钮上传或选择一张图片,路径会自动填入。
- 保存文章后,该文章的页面就会显示你设置的背景图。
更新缓存

在后台执行“一键更新网站缓存并生成HTML”。

优点：

极高的自由度和个性化。
每篇文章都可以拥有独特的视觉风格。

缺点：

操作最复杂，需要修改数据库、后台模板和前台模板。
如果文章数量巨大,可能会增加服务器负载。

总结与建议

方法	难度	灵活性	适用场景
统一静态背景	★☆☆☆☆	低	整个网站风格统一，追求简单快捷。
栏目差异化背景	★★☆☆☆	中	不同栏目有不同风格，需要一定的个性化。
单文章独立背景	★★★★☆	高	艺术类、作品展示类等需要极致个性化文章的网站。

给你的建议：

如果只是想简单地美化一下文章页，使用方法一。
如果你的网站栏目划分清晰，且每个栏目希望有不同的氛围，使用方法二。
如果你的网站是设计作品集、摄影作品展示等，每篇文章都是独立的“作品”，值得拥有独特的背景，那么挑战方法三会给你带来最好的效果。

dede文章页背景如何制作？

使用CSS为整个文章页设置统一静态背景（最简单）

为不同栏目设置不同的背景（进阶）

为每篇文章设置独立的背景（高级）

总结与建议

相关文章

目录[+]