feat(content): C端正文富文本渲染(HTML)
- 小程序 content-detail:<RichText nodes=body> 渲染 HTML(图片/视频/排版),样式对齐 - 网站 Content.jsx 详情展开:dangerouslySetInnerHTML 渲染富文本 Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
@@ -1,4 +1,4 @@
|
||||
import { View, Text, Image, Video, ScrollView, Button } from '@tarojs/components';
|
||||
import { View, Text, Image, Video, ScrollView, Button, RichText } from '@tarojs/components';
|
||||
import Taro from '@tarojs/taro';
|
||||
import { useState, useEffect } from 'react';
|
||||
import { getContent } from '@/utils/content';
|
||||
@@ -45,7 +45,9 @@ export default function ContentDetail() {
|
||||
</View>
|
||||
|
||||
{item.summary ? <Text className="cd-summary">{item.summary}</Text> : null}
|
||||
<Text className="cd-body">{item.body || '暂无正文'}</Text>
|
||||
{item.body
|
||||
? <RichText className="cd-body" nodes={item.body} />
|
||||
: <Text className="cd-body">暂无正文</Text>}
|
||||
|
||||
{/* 图集 */}
|
||||
{images.length > 0 && (
|
||||
|
||||
@@ -9,7 +9,9 @@
|
||||
.cd-dot { font-size: 24rpx; color: #6d6d72; }
|
||||
.cd-meta-at { font-size: 24rpx; color: #7c7c80; }
|
||||
.cd-summary { display: block; margin: 20rpx 28rpx 0; font-size: 27rpx; color: #c4c2c3; line-height: 1.7; }
|
||||
.cd-body { display: block; margin: 20rpx 28rpx 0; font-size: 28rpx; color: #e4e4e6; line-height: 1.8; white-space: pre-wrap; }
|
||||
.cd-body { display: block; margin: 20rpx 28rpx 0; font-size: 28rpx; color: #e4e4e6; line-height: 1.8; }
|
||||
.cd-body img, .cd-body video { max-width: 100%; border-radius: 14rpx; }
|
||||
.cd-body p { margin: 0 0 8rpx; }
|
||||
.cd-gallery { display: flex; gap: 12rpx; margin: 24rpx 28rpx 0; white-space: nowrap; }
|
||||
.cd-gal-img { width: 240rpx; height: 240rpx; border-radius: 14rpx; flex-shrink: 0; margin-right: 12rpx; }
|
||||
.cd-link { margin: 28rpx 28rpx 0; }
|
||||
|
||||
Reference in New Issue
Block a user