dede关于我们如何去掉图片属性？-DEDE建站-盈思创科技

核心思路

DedeCMS的文章内容（包括“关于我们”页面）通常是通过一个叫 article_article.htm 的模板文件来显示的,这个模板文件里有一句关键的PHP代码用来调用文章内容：

（图片来源网络，侵删）

{dede:field.body/}

这句代码会输出数据库中 #@__addonarticle 表（如果是独立模型）或 #@__archives 表（如果是普通文章模型）里存储的 body 字段内容，这个 body 字段的内容是经过编辑器（如ckeditor）处理过的HTML代码。

我们的目标就是修改 {dede:field.body/} 输出内容的呈现方式。

修改模板文件（最推荐、最安全）

这是最直接、最推荐的方法，因为它不涉及核心文件修改，升级网站时不会被覆盖,而且只影响你指定的页面。

适用场景：只想让“关于我们”这个页面（或特定几个页面）的图片去掉属性。

（图片来源网络，侵删）

操作步骤：

找到“关于我们”页面的模板文件
- 登录你的DedeCMS后台。
- 进入【模板】->【模板管理】。
- 在左侧选择你当前使用的网站模板（default）。
- 在右侧的列表中，找到并编辑 article_article.htm 文件,这个文件是文章内容页的模板。
修改模板中的调用代码
- 打开 article_article.htm 文件，找到 {dede:field.body/} 这一行。
- 将其替换为以下代码：
```
{dede:field.body function='htmlspecialchars_decode(@me)'/}
```
代码解释：
（图片来源网络，侵删）
- function='htmlspecialchars_decode(@me)'：这是一个DedeCMS的底层函数调用。
- @me：代表 {dede:field.body/} 的原始输出内容。
- htmlspecialchars_decode()：这是一个PHP函数，它的作用是将HTML实体（如 <, >, "）转换回它们对应的HTML字符（如 <, >, ）。
- 为什么需要这个？ 因为DedeCMS为了安全，默认在输出文章内容时会对HTML标签进行转义，通过 htmlspecialchars_decode，我们先把转义过的内容“还原”成正常的HTML代码,这样后续的CSS才能正确地作用于它。
添加CSS样式来控制图片
- 现在你需要添加CSS来强制移除图片的尺寸和样式属性，在 article_article.htm 文件的 <head> 标签内，或者你的网站主CSS文件中,添加以下CSS代码：
```
/* 只针对“关于我们”页面内容区域的图片 */
.article-content img {
  max-width: 100%; /* 图片宽度最大为父容器宽度，防止溢出 */
  height: auto;    /* 高度自动，保持图片比例 */
  /* 下面这行是关键，它会移除内联的 width, height, style 属性 */
  all: unset; 
}
```
CSS解释：
- .article-content img：这里假设你的文章内容被包裹在一个 class 为 article-content 的 <div> 中，请根据你实际模板的结构修改这个选择器，#article-content img 或 .artibody img 等,找到正确的父级容器类名很重要。
- max-width: 100% 和 height: auto：这是现代网页响应式设计的最佳实践，能确保图片在不同屏幕尺寸下都能正常显示,不会被拉伸或压缩。
- all: unset：这是一个非常强大的CSS属性，它会重除一个元素上所有的CSS属性（包括那些通过 style 内联属性设置的），让元素的样式回归到初始状态或由外部CSS表继承，这能有效地清除掉图片上残留的 width="xxx"、height="xxx" 和 style="..." 等属性。
更新并生成
- 保存模板文件。
- 进入【生成】->【一键更新网站】->【更新所有】，重新生成“关于我们”页面,使修改生效。

修改编辑器默认配置（治本方法）

如果你希望所有通过编辑器上传的图片都默认不带尺寸属性,可以从编辑器本身入手。

适用场景：希望全局生效,所有新上传的图片都不带属性。

操作步骤：

找到编辑器配置文件
- DedeCMS默认使用的是 ckeditor 编辑器。
- 配置文件路径通常是：/include/ckeditor/config.js。
修改配置文件
- 用文本编辑器打开 config.js 文件。
- 在文件中找到或添加以下配置项：
```
CKEDITOR.editorConfig = function( config ) {
  // ... 其他配置 ...
  // 禁用图片尺寸工具栏按钮
  config.removeButtons = 'Maximize,Anchor'; // 可以添加更多要移除的按钮
  // 关键配置：移除图片的 'width' 和 'height' 属性
  config.removeAttrs = 'width,height';
  // ... 其他配置 ...
};
```
配置解释：
- config.removeAttrs = 'width,height';：这行代码会告诉CK编辑器，在将图片插入到编辑器中时，自动移除 <img> 标签上的 width 和 height 属性。
- 注意：这个方法通常只对新插入的图片有效，对于已经存在于文章内容中的旧图片，它们仍然带有这些属性，你需要结合方法一中的CSS来清除这些旧图片的属性。

修改PHP核心文件（不推荐，有风险）

这种方法会修改DedeCMS的核心文件，可以全局性地改变文章内容的输出方式。但强烈不推荐，因为网站升级后，这些修改会被覆盖,需要重新修改。

适用场景：作为临时解决方案,或者你对网站代码非常熟悉且不打算升级。

操作步骤：

找到并修改文件
- 文件路径：/include/helpers/extend.helper.php
- 在这个文件中找到 GetMeida 函数（或者类似的、负责处理文章内容的函数）。

修改函数逻辑

在函数中找到生成 <img> 标签的代码段，移除或注释掉拼接 width、height 和 style 属性的代码。

示例（伪代码，实际代码可能不同）：

// 原始代码可能类似这样
// $imgtag = "<img src='".$imgsrc."' width='".$imgwidth."' height='".$imgheight."' style='".$imgstyle."' border='0'>";
// 修改后，只保留src和alt
$imgtag = "<img src='".$imgsrc."' alt='".$alt."'>";

风险提示
- 升级风险：每次DedeCMS官方发布新版本并覆盖文件时,你的修改都会丢失。
- 影响范围：这会影响整个网站所有调用该函数的地方，不仅仅是“关于我们”页面。
- 调试困难：如果修改出错,可能导致网站所有图片无法正常显示。

总结与建议

方法	优点	缺点	推荐度
修改模板+CSS	安全、精准、可逆，只影响特定页面，符合模板分离思想。	需要一点点CSS知识。	★★★★★ (强烈推荐)
修改编辑器	治本，从源头控制新图片，全局有效。	对旧图片无效，需配合方法一。	★★★☆☆ (作为辅助方法很好)
修改核心文件	全局生效，一步到位。	高风险、易被覆盖，不推荐普通用户使用。	★☆☆☆☆ (不推荐)

最佳实践：

首先使用【方法一】，为你的“关于我们”页面创建一个干净、可控的显示效果。
如果希望未来发布的所有文章图片都遵循这个规则，再考虑【方法二】来配置你的编辑器。

通过以上方法，你就可以轻松地在DedeCMS中实现“关于我们”页面图片属性的去除,使页面布局更加灵活和现代化。

dede关于我们如何去掉图片属性？

核心思路

修改模板文件（最推荐、最安全）

修改编辑器默认配置（治本方法）

修改PHP核心文件（不推荐，有风险）

总结与建议

相关文章

目录[+]