{content:}内容标签详解：详情页字段调用与自定义字段扩展

发布人：鲸弘科技

发布时间：2026-04-22

浏览量：0 次

本文由广东鲸弘科技有限公司提供惠州小程序开发 / 网站建设专业分享。

在PbootCMS开发中，{content:}标签是内容详情页（如文章详情、产品详情、单页详情）的核心标签，核心作用是“调用当前详情页的所有关联数据”，包括系统默认字段（标题、内容、发布时间等）和自定义扩展字段（如产品价格、作者简介等）。本文从基础字段调用、高级用法、自定义字段扩展三个维度，结合实战代码示例，全面详解{content:}标签的用法，解决新手“字段调用混乱、自定义字段不会加、调用报错”等问题，所有代码均经过实测，可直接复制复用。

适用场景：PbootCMS内容详情页开发、字段个性化渲染、自定义字段添加与调用、详情页数据兜底处理；适配PbootCMS所有稳定版本，兼容官方默认模板及自定义模板，无需二次开发核心代码，仅需掌握标签用法和自定义字段配置流程。

一、{content:}标签基础认知（必学）

{content:}标签是PbootCMS内置的“详情页专属标签”，仅在内容详情页（content.html）、单页详情页（single.html）中生效，无法在列表页、首页直接使用。其核心优势是“自动关联当前访问内容，无需手动指定ID”，直接通过标签+字段名的形式，即可调用对应数据，大幅提升详情页开发效率。

1.1 核心语法格式

{content:}标签用法简单，无需闭合，核心格式分为两种，覆盖所有字段调用场景：

// 1. 基础调用（直接调用字段值，无额外配置）
{content:字段名}

// 2. 带参数调用（适配特殊字段，如日期、图片、上下篇）
{content:字段名 参数=值}

// 示例：调用发布日期并格式化，调用下一篇标题并设置无数据提示
{content:date format="Y-m-d"}
{content:nexttitle notext='暂无下一篇'}

1.2 核心规则

生效范围：仅在详情页（content.html）、单页详情页（single.html）生效，列表页需使用{list:}标签，首页需使用指定内容标签{pboot:content id=*}调用。
字段名区分大小写：如{content:title}正确，{content:Title}会报错，需严格对应系统字段或自定义字段的名称。
参数用法：部分字段支持自定义参数（如日期格式化、无数据提示），参数值若含空格，需用单引号包裹（如notext='暂无数据'）。
可嵌套使用：可与{pboot:if}条件判断标签、{pboot:substring}截取标签等嵌套，实现字段个性化渲染（如下文空值兜底、内容截取）。

二、详情页核心字段调用（高频实战）

PbootCMS默认提供了丰富的详情页字段，涵盖基础信息、SEO信息、互动数据等，无需额外配置，直接调用即可。以下按“高频程度”分类整理，附实战代码和说明，新手可直接复制使用。

2.1 基础核心字段（必用）

此类字段是所有详情页的必备字段，适用于文章、产品、单页等所有内容类型，调用方法简单，无复杂参数：

<!-- 1. 标题相关（核心） -->
<h1 class="detail-title">{content:title}</h1>  <!-- 主标题 -->
<p class="detail-subtitle">{content:subtitle}&lt;/p&gt;  <!-- 副标题（需后台填写） -->
<span class="title-color" style="color:{content:titlecolor}">{content:title}</span>  <!-- 带标题颜色（后台设置） -->

<!-- 2. 内容主体（核心） -->
&lt;div class="detail-content"&gt;
    {content:content}  <!-- 富文本内容，自动渲染后台编辑的格式（图片、段落、表格等） -->
</div>

<!-- 3. 基础信息 -->
<div class="detail-meta">
    <span>发布时间：{content:date format="Y-m-d H:i:s"}&lt;/span&gt;  <!-- 日期格式化，默认Y-m-d -->
    <span>所属栏目：<a href="{content:sortlink}">{content:sortname}&lt;/a&gt;&lt;/span&gt;  <!-- 所属栏目（带链接） -->
    &lt;span&gt;作者：{content:author}&lt;/span&gt;  <!-- 作者（后台填写） -->
    <span>来源：{content:source}</span><!-- 内容来源（后台填写） -->
    <span>阅读量：{content:visits}&lt;/span&gt;  <!-- 访问量（自动统计） -->
</div>

说明：{content:date}的format参数支持多种格式，如“Y-m-d”（2026-04-22）、“m月d日”（04月22日）、“Y年m月d日 H:i”（2026年04月22日 10:30），可根据网站风格自定义。

2.2 SEO相关字段（优化必备）

此类字段用于详情页SEO优化，通常放在页面头部<head>标签内，提升页面搜索权重，调用方法如下：

<head>
    <title>{content:title} - {pboot:sitename}&lt;/title&gt;  <!-- 页面标题（主标题+站点名称） -->
    <meta name="keywords" content="{content:keywords}">  <!-- 关键词（后台填写） -->
    <meta name="description" content="{content:description}"&gt;  <!-- 描述（后台填写） -->
</head>

说明：若后台未填写keywords、description，可结合{pboot:if}标签设置兜底内容（下文会讲解），避免SEO信息为空。

2.3 媒体与附件字段（图文/产品详情常用）

适用于需要展示图片、附件的场景（如产品详情、图文资讯），包括单张缩略图、多图图集、附件下载等，调用方法如下：

<!-- 1. 单张缩略图（核心） -->
<div class="detail-thumb">
    {pboot:if [content:isico] == 1}  <!-- 判断是否有缩略图（1=有，0=无） -->
        <img src="{content:ico}" alt="{content:title}">
    {else}
        &lt;img src="/upload/default.jpg" alt="{content:title}"&gt;  <!-- 无图兜底 -->
    {/pboot:if}
</div>

<!-- 2. 多图图集（V2.0.2+新增） -->
<div class="detail-pics">
    {pboot:if [content:ispics] == 1}  <!-- 判断是否有多图（1=有，0=无） -->
        {content:pics}  <!-- 自动渲染多图，默认横向排列 -->
    {else}
        <p class="no-pics">暂无图集</p>
    {/pboot:if}
</div>

<!-- 3. 附件下载 -->
{content:enclosure}  <!-- 直接调用附件链接，自动显示附件名称和下载入口 -->
<!-- 自定义附件显示样式 -->
{pboot:if [content:enclosure] != ""}
    <a href="{content:enclosure}" class="download-btn">
        下载附件（大小：{content:enclosuresize}）
    </a>
{/pboot:if}

说明：{content:ico}在无缩略图时，会自动调用文章内容中的第一张图片，可结合{pboot:if}标签设置自定义兜底图，提升页面完整性；{content:enclosuresize}会自动显示附件大小（如2.5MB），无需手动计算。

2.4 上下篇导航字段（提升用户留存）

用于详情页底部显示“上一篇、下一篇”导航，引导用户浏览更多内容，支持自定义无数据提示，调用方法如下：

<div class="prev-next">
    <div class="prev">
        <span>上一篇：</span>
        {content:precontent notext='暂无上一篇'}  <!-- 带链接的上一篇标题 -->
        <!-- 单独调用上一篇标题和链接 -->
        <!-- {pboot:if [content:pretitle] != ""}
            <a href="{content:prelink}">{content:pretitle}</a>
        {else}
            <span>暂无上一篇</span>
        {/pboot:if} -->
    </div>
    <div class="next">
        <span>下一篇：</span>
        {content:nextcontent notext='暂无下一篇'}  <!-- 带链接的下一篇标题 -->
        <!-- 单独调用下一篇缩略图（V2.0+支持） -->
        <!-- {pboot:if [content:nextico] != ""}
            <img src="{content:nextico}" alt="{content:nexttitle}">
        {/pboot:if} -->
    </div>
</div>

说明：notext参数用于设置“无上下篇”时的提示文本，若不设置，默认显示空值；{content:precontent}、{content:nextcontent}会自动渲染带链接的标题，无需手动拼接<a>标签。

2.5 互动相关字段（提升用户参与度）

适用于需要展示点赞、反对、标签等互动内容的场景，调用方法如下：

<!-- 1. 点赞/反对 -->
<div class="interactive">
    <a href="{content:likeslink}" class="like-btn">点赞（{content:likes}）</a>
    <a href="{content:opposelink}" class="oppose-btn">反对（{content:oppose}）</a>
</div>

<!-- 2. 标签（关键词）遍历 -->
<div class="detail-tags">
    <span&gt;标签：&lt;/span&gt;
    {content:tags split=','}  <!-- split参数指定标签分隔符（后台填写时用逗号分隔） -->
        <a href="/tag/?tag={pboot:tag}" class="tag">{pboot:tag}</a>
    {/content:tags}
</div>

说明：{content:tags}标签支持遍历输出多个标签，split参数需与后台标签填写的分隔符一致（默认逗号）；{pboot:tag}是遍历过程中的单个标签变量，用于拼接标签链接，实现“点击标签跳转相关内容”的功能。

三、{content:}标签高级用法（避坑+个性化）

在实际开发中，单纯的字段调用无法满足个性化需求，结合{pboot:if}条件判断、内容截取等标签，可实现“空值兜底、内容截取、个性化显示”等效果，解决常见开发痛点。

3.1 空值检测与兜底显示（核心避坑）

后台内容可能存在“未填写字段”的情况（如无作者、无摘要），若不做处理，页面会显示空白，影响用户体验。使用{pboot:if}标签检测空值，设置兜底内容，示例如下：

<!-- 1. 作者字段兜底 -->
<span class="author">作者：{pboot:if [content:author] != ""}{content:author}{else}匿名{/pboot:if}</span>

<!-- 2. SEO描述兜底（避免空描述） -->
<meta name="description" content="{pboot:if [content:description] != ""}{content:description}{else}{pboot:substring str=[content:content] start=0 length=120}{/pboot:if}">

<!-- 3. 附件字段兜底（无附件时不显示下载按钮） -->
{pboot:if [content:enclosure] != ""}
    <a href="{content:enclosure}" class="download-btn">下载附件</a>
{/pboot:if}

3.2 内容截取与格式优化

若详情页需要展示“精简内容”（如摘要、简介），可结合{pboot:substring}标签截取{content:content}字段，避免内容过长，示例如下：

<!-- 截取内容前150字作为简介，末尾加... -->
<div class="detail-brief">
    {pboot:substring str=[content:content] start=0 length=150}...
</div>

<!-- 截取标题前20字，避免标题过长换行 -->
<h2 class="list-title">{pboot:substring str=[content:title] start=0 length=20}{pboot:if strlen([content:title])>20}...{/pboot:if}</h2>

3.3 外部链接与栏目跳转控制

部分内容可能设置了“外部链接”（后台填写outlink字段），需要判断链接类型，实现“内部内容跳转”或“外部链接跳转”，示例如下：

{pboot:if [content:outlink] != ""}
    <a href="{content:outlink}" target="_blank" class="external-link">{content:title}（外部链接）</a>
{else}
    <a href="{content:link}" class="internal-link">{content:title}</a>
{/pboot:if}

说明：target="_blank"用于设置外部链接新窗口打开，避免用户离开当前网站；{content:link}是内容的内部链接，{content:outlink}是后台设置的外部链接，两者二选一。

四、自定义字段扩展（核心进阶）

PbootCMS默认字段无法满足所有场景（如产品详情需要“价格、规格、库存”，人物详情需要“年龄、职业”），此时需要添加“自定义字段”，并通过{content:ext_*}格式调用，实现内容扩展。全程分为“后台添加自定义字段”和“前台调用”两步，新手可按步骤操作，无需代码开发。

4.1 步骤1：后台添加自定义字段（必做）

自定义字段需在“内容模型管理”中添加，不同内容模型（文章、产品、单页）可添加不同的自定义字段，步骤如下：

登录PbootCMS后台，进入【内容模型管理】（后台左侧菜单），选择需要添加自定义字段的模型（如“文章”“产品”，若没有自定义模型，可先创建模型）。
点击对应模型的【编辑】按钮，进入模型编辑页面，找到【自定义字段】区域，点击【新增字段】。
填写自定义字段信息（核心参数）：

字段名称：自定义（如“price”“spec”“stock”，英文小写，无空格，后续调用需用到）。
字段描述：用于后台显示（如“产品价格”“产品规格”，方便后台编辑人员识别）。
字段类型：根据需求选择（如“单行文本”用于价格、规格；“多行文本”用于详细说明；“图片”用于产品图集；“数字”用于库存）。
是否必填：根据需求设置（如价格为必填项，选择“是”）。
排序：设置字段在后台编辑页面的显示顺序（数字越小，显示越靠前）。

点击【保存】，完成自定义字段添加。此时，在后台编辑对应内容（如产品）时，会出现新增的自定义字段，填写对应内容即可。

4.2 步骤2：前台调用自定义字段（核心）

自定义字段的调用格式固定：{content:ext_字段名称}，其中“字段名称”与后台添加的“字段名称”完全一致（区分大小写），示例如下（以产品详情为例）：

<!-- 产品详情自定义字段调用 -->
<div class="product-info">
    <div class="product-price"&gt;
        价格：¥{content:ext_price}  <!-- 调用自定义字段price（产品价格） -->
    </div>
    <div class="product-spec"&gt;
        规格：{content:ext_spec}  <!-- 调用自定义字段spec（产品规格） -->
    </div>
    <div class="product-stock"&gt;
        库存：{content:ext_stock}件  <!-- 调用自定义字段stock（产品库存） -->
    </div>
    <div class="product-brand"&gt;
        品牌：{content:ext_brand}  <!-- 调用自定义字段brand（产品品牌） -->
    </div>
    <!-- 自定义图片字段调用 -->
    <div class="product-cover">
        <img src="{content:ext_cover}" alt="{content:title}">
    </div>
</div>

4.3 自定义字段高级用法

（1）自定义字段空值兜底

与默认字段一样，自定义字段也可能存在空值，需结合{pboot:if}标签设置兜底，示例如下：

<div class="product-stock">
    库存：{pboot:if [content:ext_stock] != ""}{content:ext_stock}件{else}无库存{/pboot:if}
</div>

（2）多值自定义字段遍历（如多选字段）

若自定义字段为“多选类型”（如产品标签、适用场景），后台填写时用逗号分隔多个值，前台可结合{content:ext_*}标签遍历输出，示例如下：

<!-- 自定义多选字段ext_tags（产品标签），后台填写格式：家用,商用,工业 -->
<div class="product-tags">
    <span>适用场景：</span>
    {content:ext_tags split=','}
        <span class="tag">{pboot:tag}</span>
    {/content:ext_tags}
</div>

（3）自定义字段与默认字段联动

结合自定义字段和默认字段，实现个性化渲染，示例：若产品价格（ext_price）低于100元，显示“低价促销”标签：

<div class="product-price">
    价格：¥{content:ext_price}
    {pboot:if [content:ext_price] < 100}
        <span class="promotion-tag">低价促销</span>
    {/pboot:if}
</div>

五、常见问题汇总（避坑指南）

问题1：{content:}标签调用无效果，页面显示空白？

解决方法：1. 检查页面是否为详情页（content.html/single.html），列表页、首页无法直接使用{content:}标签；2. 检查字段名拼写是否正确（区分大小写，如{content:Title}错误，{content:title}正确）；3. 检查后台对应内容是否填写该字段（如作者、摘要）；4. 清除网站缓存（后台【系统设置】→【清除缓存】）后重试。

问题2：自定义字段{content:ext_*}调用失败，显示空值？

解决方法：1. 检查后台“自定义字段”的“字段名称”与前台调用的名称一致（如后台是price，前台必须是{content:ext_price}）；2. 检查后台对应内容是否填写了该自定义字段；3. 检查自定义字段是否添加到对应内容模型（如产品模型的字段，不能在文章详情页调用）；4. 确认字段类型与调用方式匹配（如图片字段需用<img>标签包裹，不可直接输出）。