如何自定义织梦内容模型字段样式？-织梦建站-盈思创科技

后台的字段管理：在这里定义字段的基本信息和前台显示的HTML代码模板。
前台的模板文件：通过特定的织梦标签，调用后台定义好的字段内容,并应用其样式。

下面我将分步详细说明,并提供最常用字段的完整示例。

（图片来源网络，侵删）

后台字段管理中的样式设置

这是设置样式的第一步，也是最重要的一步，在后台为你的内容模型添加或编辑字段时，你会看到“字段参数”区域。

操作路径： 后台 -> 核心 -> 内容模型 -> [选择你的模型，如“文章”] -> 字段管理 -> [添加字段或编辑已有字段]

在字段编辑页面，找到 前台显示 这个输入框,这里就是定义字段在前台如何显示的地方。

单行文本

这是最简单的字段，通常用于标题、作者、来源等。

（图片来源网络，侵删）

字段名：author
前台显示代码：
```
<span class="d-author">作者：[field:author/]</span>
```
- [field:author/] 是织梦的标签,会自动替换为该字段的值。
- <span class="d-author"> 是我们自定义的HTML标签，用于包裹内容,方便在前台CSS中进行样式控制。

多行文本

适用于简介、详情等较长文本。

字段名：description

前台显示代码：

<div class="d-description">
    <h3>内容简介</h3>
    <p>[field:description/]</p>
</div>

编辑器

正文最常用的字段类型。

字段名：body
前台显示代码：
```
<div class="d-article-body">
    [field:body/]
</div>
```
- 这个字段通常直接调用，不需要额外复杂的HTML结构，因为编辑器本身已经生成了<p>、<h2>、<img>等标签。

单选/下拉选择

适用于状态、类型、颜色等选项固定的场景。

字段名：status
选项值 (在“字段管理”的“选项”中设置)：
- 选项1: 推荐 @me <span class="badge badge-warning">推荐</span>
- 选项2: 置顶 @me <span class="badge badge-danger">置顶</span>
- 选项3: 普通 @me <span class="badge badge-secondary">普通</span>
前台显示代码：
```
<div class="d-status">
    状态：[field:status/]
</div>
```
- 关键点：这里的 @me 是一个占位符，它会被替换成当前选项的完整HTML代码，这样，我们就可以为不同的选项直接定义不同的CSS类（如badge、badge-warning）和样式，实现“所见即所得”的前端效果。

多选/复选框

适用于标签、属性等多选场景。

（图片来源网络，侵删）

字段名：tags
选项值 (在“字段管理”的“选项”中设置)：
- 选项1: 科技 @me <span class="tag">科技</span>
- 选项2: 生活 @me <span class="tag">生活</span>
- 选项3: 旅游 @me <span class="tag">旅游</span>

前台显示代码：

<div class="d-tags">
    标签：[field:tags/]
</div>
*   原理同单选，`@me` 会被替换为用户所选的所有选项的HTML代码，用户选择了“科技”和“旅游”，`[field:tags/]` 就会渲染成 `<span class="tag">科技</span><span class="tag">旅游</span>`。

图片/图片集

适用于上传单张或多张图片。

字段名：litpic (缩略图), image (多图)
前台显示代码：
- 单张图片:
```
<div class="d-litpic">
    <img src="[field:litpic/]" alt="[field:title/]" />
</div>
```
- 多图:
```
<div class="d-images">
    {dede:field name='image' function='GetImageUrls(@me)'/}
</div>
```
  - 多图字段存储的是路径字符串，不能直接使用 [field:image/]，需要使用 {dede:field} 标签并配合 function='GetImageUrls(@me)' 函数来解析出所有图片的URL,然后通过循环来显示。

附件/文件

适用于下载文档、软件等。

字段名：file

前台显示代码：

<div class="d-file">
    下载链接：<a href="[field:file/]" target="_blank">[field:filename/]</a>
    (大小：[field:filesize/])
</div>

[field:file/] 是附件的URL。
[field:filename/] 是附件的原始文件名。
[field:filesize/] 是附件的大小。

前台模板文件中的调用与整合

后台设置好字段样式后，我们需要在前台的模板文件（通常是 article_article.htm）中调用这些字段。

操作路径： 后台 -> 模板 -> 默认模板管理 -> 内容页模板 -> [编辑你的内容页模板]

在模板文件中，织梦使用 {dede:field} 标签来调用字段，这个标签会自动使用你在后台“前台显示”中定义的HTML结构。

示例：一个完整的内容页模板片段

<!DOCTYPE html>
<html>
<head>{dede:field.title/} - {dede:global.cfg_webname/}</title>
</head>
<body>
    <article class="post">
        <h1 class="post-title">{dede:field.title/}</h1>
        <div class="post-meta">
            <!-- 作者：这里直接调用后台设置好的author字段 -->
            {dede:field.author/}
            <!-- 时间：这是织梦内置字段，同样可以设置样式 -->
            <span class="post-time">发布于：{dede:field.pubdate function="MyDate('Y-m-d H:i',@me)"/}</span>
            <!-- 状态：调用我们设置好的status字段 -->
            {dede:field.name='status'/}
            <!-- 标签：调用我们设置好的tags字段 -->
            <div class="post-tags">
                {dede:field.name='tags'/}
            </div>
        </div>
        <div class="post-content">
            <!-- 正文：调用body字段 -->
            {dede:field.body/}
        </div>
        <!-- 缩略图：调用litpic字段 -->
        {dede:field name='litpic' runphp='yes'}
        if(@me != ''){
            @me = '<div class="post-thumbnail"><img src="' . @me . '" alt="' . $GLOBALS['arcTitle'] . '" /></div>';
        }else{
            @me = '';
        }
        {/dede:field}
        <!-- 附件：调用file字段 -->
        {dede:field name='file' runphp='yes'}
        if(@me != ''){
            @me = '<div class="post-attachment"><a href="' . @me . '" target="_blank">下载附件</a></div>';
        }else{
            @me = '';
        }
        {/dede:field}
    </article>
</body>
</html>

CSS 样式美化

为了让前台显示的样式生效，你需要在CSS文件（通常是 /templets/你的模板/style.css）中为之前定义的类添加样式。

/* 作者样式 */
.d-author {
    color: #666;
    font-size: 14px;
}
/* 状态标签样式 (使用了Bootstrap的样式，你也可以自定义) */
.d-status span.badge {
    margin-right: 5px;
}
/* 标签样式 */
.d-tags .tag {
    display: inline-block;
    background-color: #007bff;
    color: white;
    padding: 2px 8px;
    border-radius: 12px;
    font-size: 12px;
    margin-right: 5px;
}
/* 缩略图样式 */
.post-thumbnail {
    margin: 20px 0;
    text-align: center;
}
.post-thumbnail img {
    max-width: 100%;
    height: auto;
    border-radius: 5px;
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}
/* 附件下载链接样式 */
.post-attachment a {
    display: inline-block;
    background-color: #28a745;
    color: white;
    padding: 8px 15px;
    border-radius: 5px;
    text-decoration: none;
    margin-top: 20px;
}
.post-attachment a:hover {
    background-color: #218838;
}
/* 文章元信息通用样式 */
.post-meta {
    color: #888;
    font-size: 14px;
    margin-bottom: 15px;
    border-bottom: 1px solid #eee;
    padding-bottom: 10px;
}
.post-meta span {
    margin-right: 15px;
}

总结与最佳实践

核心在于后台的“前台显示”：这是定义样式的源头，花时间在这里写好HTML结构,可以极大简化前台模板的编写。
善用 @me：在单选/多选字段的选项中，@me 是实现动态样式的利器,可以直接为不同选项赋予不同的CSS类。
{dede:field}：在前台模板中，使用 {dede:field name='你的字段名'/} 来调用后台设置好的完整HTML片段。

灵活使用 runphp='yes'：对于需要复杂逻辑判断的字段（如“如果图片存在才显示”），可以在 {dede:field} 中使用PHP代码来动态生成HTML。保持CSS的独立性：将所有的样式定义都放在CSS文件中，通过类名来控制，这样可以使HTML结构更清晰,也便于后期维护和修改。

通过以上步骤，你就可以完全掌控织梦内容模型字段的显示样式,打造出符合自己需求的网站界面。

如何自定义织梦内容模型字段样式？

后台字段管理中的样式设置

单行文本

多行文本

编辑器

单选/下拉选择

多选/复选框

图片/图片集

附件/文件

前台模板文件中的调用与整合

示例：一个完整的内容页模板片段

CSS 样式美化

总结与最佳实践

相关文章

目录[+]