十万个为什么 API：如何优雅展示 title 与 content 科普内容？
十万个为什么 APIcontent展示前端排版科普内容免费接口 # 十万个为什么 API：如何优雅展示 title 与 content 科普内容？
> 接口：十万个为什么（apiCode=1706）· 接入点：详情(1706-2) · 免费 · 返回格式：JSON · 适用人群：前端 / 全栈开发者 · 阅读时间：约 6 分钟
## 核心要点
- 详情返回 `title`（标题）与 `content`（**整段科普文本字符串**），没有独立的段落、图片或视频 URL 字段。
- 优雅展示的关键是：把 `content` 当"纯文本长文"处理——分段、加标题层级、控制行长与字号，而不是当数组遍历。
- 文档称"提供文章、视频等多媒体内容"，但**未给出独立视频字段**，具体多媒体结构以实际返回为准，不要预设字段名。
## Why：为什么展示也是一门学问
很多开发者拿到 `content` 直接 `innerHTML` 一把梭，结果一段密密麻麻的文字挤在屏幕里，孩子和家长都不爱看。其实只要做一点排版，阅读体验能提升一大截。本篇给可直接用的前端处理思路。
## What：字段回顾
| 字段 | 类型 | 展示方式 |
|------|------|---------|
| `title` | string | 作为文章大标题（H1/H2） |
| `content` | string（整段） | 正文长文本，需自行分段 |
## How：前端排版示例
**步骤 1 — 拿到数据（以详情接入点为例）**
```javascript
const APP_KEY = "YOUR_APPKEY";
const res = await fetch(
`https://route.showapi.com/1706-2?appKey=${APP_KEY}`,
{
method: "POST",
headers: { "content-type": "application/x-www-form-urlencoded" },
body: new URLSearchParams({ id: "5bac6e8ec1b458bb0892f6ff" }),
}
);
const body = (await res.json()).showapi_res_body;
const { title, content } = body;
```
**步骤 2 — 把整段文本按句号切分为自然段落**
```javascript
// content 是一整段字符串，按句号/问号/叹号切分后渲染为段落
function toParagraphs(text) {
return text
.split(/(?<=[。！？])/)
.map((s) => s.trim())
.filter(Boolean);
}
```
**步骤 3 — 渲染**
```jsx
<article>
<h1>{title}</h1>
{toParagraphs(content).map((p, i) => (
<p key={i}>{p}</p>
))}
</article>
```
> 也可用 CSS `line-height`、`max-width` 控制阅读舒适度；儿童场景建议字号稍大、行距宽松。
## 返回示例与解析
```json
{
"showapi_res_body": {
"ret_code": 0,
"remark": "查询成功！",
"title": "为什么无声手枪射击时没声音？",
"content": "在无声手枪的枪管上套有一个圆筒形的消音器，能把从枪口里喷出的大部分高压气体消耗掉……"
}
}
```
`content` 是**一整段字符串**，不是数组，渲染时整体处理。
## 进阶 / 边界
- **不要预设图片/视频字段**：文档只说"提供文章、视频等多媒体内容"，未定义 `imageUrl`/`videoUrl` 之类字段；若返回中确实带媒体信息，以实际 JSON 为准再决定如何渲染。
- **敏感/适龄**：科普内容面向儿童时，建议先做一遍家长侧审核或简化，接口不提供年龄段过滤。
- **长文性能**：`content` 通常为中短篇，直接渲染即可；如要做"朗读""划词"等增强，可基于文本自行分词。
## FAQ
**Q1：content 里有图片链接吗？**
文档未定义独立图片字段，不要假设存在 `img` 字段；以实际返回 JSON 为准。
**Q2：能把 content 当数组遍历吗？**
不能，它是整段字符串，需自行按标点分段。
**Q3：视频内容怎么展示？**
文档称有多媒体内容但未给视频字段，实际结构以接口返回为准，不要硬编码视频 URL。
**Q4：title 能作为页面 H1 吗？**
可以，也建议同时用于页面 `<title>` 利于 SEO。
**Q5：中文标点分段的正则可靠吗？**
对绝大多数科普正文足够；如遇到无标点长段，可退化为整段展示。
## 相关能力 / 下一步阅读
- [十万个为什么 API 返回字段全解：ret_code / contentlist / content 一文读懂](https://www.showapi.com/guides/why100k-response-fields-1706)
- [十万个为什么 API：列表→详情两接入点串联的全链路设计](https://www.showapi.com/guides/why100k-list-detail-flow-1706)
- [十万个为什么 API 家长辅助教育场景：儿童科学问答小程序集成](https://www.showapi.com/guides/why100k-kids-education-1706)
- **本系列共 11 篇**：查看[十万个为什么 API 指南总目录](https://www.showapi.com/guides/why100k-guides-1706)
