健康知识 API 内容渲染避坑：无图、时间格式、简介与标题
# 健康知识 API 内容渲染避坑：无图、时间格式、简介与标题
- **接口/接入点**：健康知识（搜索 `90-87` / 详情 `90-88`）
- **返回格式**：JSON
- **适用人群**：前端开发者 ｜ **阅读时间**：约 6 分钟
## 核心要点
- `img` 字段文档标注"图片（无）"，实际通常为空，前端必须做无图兜底。
- `ctime` 为发布时间，文档未规定统一格式，以接口实际返回字符串为准。
- `title` 与 `stitle`（副标题）、`intro`（简介）职责不同，不要混用或重复堆叠。
## Why：内容渲染是用户最后一公里
接口数据正确只是第一步，最终用户看到的是卡片、详情页和摘要。健康知识接口有几个"看着像有、实际没有/不确定"的字段（`img`、`ctime` 格式、`stitle`），处理不当就会出现裂图、时间显示为原始字符串、副标题与标题重复等尴尬。本文把常见坑一次性列清。
## What：各字段的真实情况
| 字段 | 真实情况 | 渲染建议 |
|------|---------|---------|
| `img` | 文档标注"图片（无）"，通常返回空 | 判空后显示占位图/纯文字卡片 |
| `ctime` | 发布时间，格式以接口实际返回为准 | 先原样显示，或做容错格式化 |
| `title` | 标题 | 作为主标题 |
| `stitle` | 副标题 | 作为副标题，无则不显示 |
| `intro` | 简介 | 列表页摘要，详情页可作导语 |
| `keywords` | 关键词 | 可作为标签展示 |
## How：健壮的渲染处理
### 无图兜底（前端）
```javascript
function coverImage(img) {
if (img && img.trim()) return img; // 有图才用
return "/assets/placeholder-health.png"; // 否则占位图
}
// 用法：<img src={coverImage(item.img)} />
```
### 时间容错显示
```javascript
function formatCtime(ctime) {
if (!ctime) return "";
const d = new Date(ctime.replace(/-/g, "/")); // 兼容 "2024-01-15 10:00:00"
if (isNaN(d.getTime())) return ctime; // 解析失败原样返回
return `${d.getFullYear()}-${String(d.getMonth() + 1).padStart(2, "0")}-${String(d.getDate()).padStart(2, "0")}`;
}
```
### 标题与副标题区分
```html
<h1>{{ item.title }}</h1>
<p class="sub" v-if="item.stitle">{{ item.stitle }}</p>
<p class="intro">{{ item.intro }}</p>
```
## 返回示例与解析
搜索/详情返回片段（结构示意）：
```json
{
"title": "感冒了怎么办",
"stitle": "居家应对小指南",
"img": "",
"ctime": "2024-01-15 10:00:00",
"intro": "感冒常见症状与居家应对建议。"
}
```
- `img` 为空 → 走占位图；
- `ctime` 为 `"2024-01-15 10:00:00"` 形式字符串 → 按字符串或容错格式化展示；
- `stitle` 有值 → 作为副标题；无值则不渲染副标题节点。
## 进阶 / 边界
- **`content` 是长文**：详情接口 `item.content` 为长文正文，若是 HTML 请做 XSS 白名单过滤后再渲染（详见[详情与长文渲染](https://www.showapi.com/guides/health-knowledge-detail-90)）。
- **`intro` 截断**：列表卡片空间有限，可对 `intro` 做长度截断并加省略号，但详情页建议完整展示。
- **`keywords` 转标签**：多个关键词可能以逗号分隔，渲染前先 split 再生成标签列表。
## FAQ
**Q：为什么图片裂了？**
A：因为 `img` 字段文档标注"图片（无）"，实际常为空字符串；前端判空后使用占位图即可解决。
**Q：ctime 显示成 2024-01-15 10:00:00 能不能直接展示？**
A：可以。文档未规定统一格式，以接口实际返回字符串为准；如需统一展示样式，做容错格式化（解析失败则原样显示）。
**Q：title 和 stitle 都要显示吗？**
A：建议 `title` 作主标题、`stitle` 作副标题；`stitle` 无值时不要强行显示占位，避免重复。
**Q：intro 和 content 会重复吗？**
A：列表页用 `intro` 作摘要，详情页用 `content` 作全文；两者职责不同，详情页可用 `intro` 作导语，但不要把整段 `content` 当摘要。
## 相关能力与下一步阅读
- [健康知识 API：查看单条知识详情与长文渲染](https://www.showapi.com/guides/health-knowledge-detail-90)
- [健康知识 API 返回字段全解：分类列表 / 搜索结果 / 知识详情三大结构](https://www.showapi.com/guides/health-knowledge-fields-90)
- [健康养生类应用如何集成健康知识 API：从内容栏目到每日推送](https://www.showapi.com/guides/health-knowledge-app-90)
- **本系列共 12 篇**：查看[健康知识 API 使用指南总目录](https://www.showapi.com/guides/health-knowledge-guides-90)
