-
This commit is contained in:
sunzhongyi
@@ -0,0 +1,192 @@
|
||||
'use client';
|
||||
|
||||
import { Demo } from '@/components/Demo';
|
||||
import { PropsTable } from '@/components/PropsTable';
|
||||
import { Layout, Section, Article, Headline, BodyText, Subhead } from '@newspaperui/components';
|
||||
|
||||
export default function ArticlePage() {
|
||||
return (
|
||||
<div className="prose prose-lg max-w-none">
|
||||
<h1>Article 组件</h1>
|
||||
<p className="text-xl text-gray-600">
|
||||
Article 是内容容器组件，用于组织文章内容，支持跨栏布局和优先级控制。
|
||||
</p>
|
||||
|
||||
<h2>组件说明</h2>
|
||||
<p>
|
||||
<code>Article</code> 组件是报纸布局中的基本内容单元，可以包含标题、正文、图片等多种内容。
|
||||
通过 span 属性控制文章占据的列数，实现灵活的跨栏布局。
|
||||
</p>
|
||||
|
||||
<h2>API 文档</h2>
|
||||
<PropsTable
|
||||
data={[
|
||||
{
|
||||
name: 'span',
|
||||
type: 'number',
|
||||
required: true,
|
||||
description: '文章占据的列数，必须 ≤ 所在 Section 的 columns',
|
||||
},
|
||||
{
|
||||
name: 'priority',
|
||||
type: 'number',
|
||||
default: '0',
|
||||
description: '优先级，数值越大优先级越高，影响排序',
|
||||
},
|
||||
{
|
||||
name: 'weight',
|
||||
type: '"High" | "Medium" | "Low"',
|
||||
default: '"Medium"',
|
||||
description: '视觉权重，影响内部文本组件的默认样式',
|
||||
},
|
||||
{
|
||||
name: 'breakable',
|
||||
type: 'boolean',
|
||||
default: 'true',
|
||||
description: '是否允许在此处分页断开',
|
||||
},
|
||||
{
|
||||
name: 'className',
|
||||
type: 'string',
|
||||
description: '自定义 CSS 类名',
|
||||
},
|
||||
{
|
||||
name: 'children',
|
||||
type: 'React.ReactNode',
|
||||
required: true,
|
||||
description: '文章内容',
|
||||
},
|
||||
]}
|
||||
/>
|
||||
|
||||
<h2>基础用法</h2>
|
||||
<Demo
|
||||
title="单列文章"
|
||||
description="创建一个占据 8 列的文章"
|
||||
code={`<Layout columns={24}>
|
||||
<Section columns={24}>
|
||||
<Article span={8}>
|
||||
<Headline weight="High">文章标题</Headline>
|
||||
<Subhead>副标题说明</Subhead>
|
||||
<BodyText>
|
||||
这是文章的正文内容。Article 组件提供了内容容器，
|
||||
可以包含多种文本和媒体组件。
|
||||
</BodyText>
|
||||
</Article>
|
||||
</Section>
|
||||
</Layout>`}
|
||||
>
|
||||
<Layout columns={24}>
|
||||
<Section columns={24}>
|
||||
<Article span={8}>
|
||||
<Headline weight="High">文章标题</Headline>
|
||||
<Subhead>副标题说明</Subhead>
|
||||
<BodyText>
|
||||
这是文章的正文内容。Article 组件提供了内容容器，
|
||||
可以包含多种文本和媒体组件。
|
||||
</BodyText>
|
||||
</Article>
|
||||
</Section>
|
||||
</Layout>
|
||||
</Demo>
|
||||
|
||||
<h2>跨栏布局</h2>
|
||||
<p>
|
||||
通过调整 span 属性，可以实现不同宽度的文章布局。较大的 span 值适合重要内容，
|
||||
较小的 span 值适合次要内容或侧边栏。
|
||||
</p>
|
||||
|
||||
<Demo
|
||||
title="多列文章并排"
|
||||
description="在 24 列布局中创建三个 8 列的文章"
|
||||
code={`<Layout columns={24}>
|
||||
<Section columns={24}>
|
||||
<Article span={8}>
|
||||
<Headline weight="High">主要文章</Headline>
|
||||
<BodyText>占据 8 列的主要内容</BodyText>
|
||||
</Article>
|
||||
<Article span={8}>
|
||||
<Headline weight="Medium">次要文章</Headline>
|
||||
<BodyText>占据 8 列的次要内容</BodyText>
|
||||
</Article>
|
||||
<Article span={8}>
|
||||
<Headline weight="Medium">更多内容</Headline>
|
||||
<BodyText>占据 8 列的更多内容</BodyText>
|
||||
</Article>
|
||||
</Section>
|
||||
</Layout>`}
|
||||
>
|
||||
<Layout columns={24}>
|
||||
<Section columns={24}>
|
||||
<Article span={8}>
|
||||
<Headline weight="High">主要文章</Headline>
|
||||
<BodyText>占据 8 列的主要内容，使用 High 权重突出显示。</BodyText>
|
||||
</Article>
|
||||
<Article span={8}>
|
||||
<Headline weight="Medium">次要文章</Headline>
|
||||
<BodyText>占据 8 列的次要内容，使用 Medium 权重。</BodyText>
|
||||
</Article>
|
||||
<Article span={8}>
|
||||
<Headline weight="Medium">更多内容</Headline>
|
||||
<BodyText>占据 8 列的更多内容，与其他文章并排显示。</BodyText>
|
||||
</Article>
|
||||
</Section>
|
||||
</Layout>
|
||||
</Demo>
|
||||
|
||||
<h2>不同宽度组合</h2>
|
||||
<Demo
|
||||
title="混合宽度布局"
|
||||
description="组合不同宽度的文章实现复杂布局"
|
||||
code={`<Layout columns={24}>
|
||||
<Section columns={24}>
|
||||
<Article span={16}>
|
||||
<Headline weight="High">宽文章 (16 列)</Headline>
|
||||
<BodyText>
|
||||
这是一篇占据 16 列的宽文章，适合放置重要内容或长篇文章。
|
||||
</BodyText>
|
||||
</Article>
|
||||
<Article span={8}>
|
||||
<Headline weight="Low">窄文章 (8 列)</Headline>
|
||||
<BodyText>这是占据 8 列的窄文章，适合侧边栏或简短内容。</BodyText>
|
||||
</Article>
|
||||
</Section>
|
||||
</Layout>`}
|
||||
>
|
||||
<Layout columns={24}>
|
||||
<Section columns={24}>
|
||||
<Article span={16}>
|
||||
<Headline weight="High">宽文章 (16 列)</Headline>
|
||||
<BodyText>
|
||||
这是一篇占据 16 列的宽文章，适合放置重要内容或长篇文章。
|
||||
更宽的列宽提供了更好的阅读体验。
|
||||
</BodyText>
|
||||
</Article>
|
||||
<Article span={8}>
|
||||
<Headline weight="Low">窄文章 (8 列)</Headline>
|
||||
<BodyText>这是占据 8 列的窄文章，适合侧边栏或简短内容。</BodyText>
|
||||
</Article>
|
||||
</Section>
|
||||
</Layout>
|
||||
</Demo>
|
||||
|
||||
<h2>使用建议</h2>
|
||||
<ul>
|
||||
<li>主要文章建议使用 12-16 列，提供良好的阅读宽度</li>
|
||||
<li>次要文章或侧边栏使用 6-8 列</li>
|
||||
<li>确保同一 Section 内所有 Article 的 span 总和 ≤ Section.columns</li>
|
||||
<li>使用 priority 属性控制文章的显示顺序</li>
|
||||
<li>通过 weight 属性影响内部文本组件的默认样式</li>
|
||||
<li>重要内容使用更大的 span 值以获得更多视觉权重</li>
|
||||
</ul>
|
||||
|
||||
<h2>注意事项</h2>
|
||||
<ul>
|
||||
<li>Article 的 span 值必须小于或等于所在 Section 的 columns 值</li>
|
||||
<li>如果 Section 内多个 Article 的 span 总和超过 Section.columns，会自动换行</li>
|
||||
<li>在响应式布局中，Article 会根据屏幕尺寸自动调整宽���</li>
|
||||
<li>breakable 属性在打印或分页场景中很有用</li>
|
||||
</ul>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,199 @@
|
||||
'use client';
|
||||
|
||||
import { Demo } from '@/components/Demo';
|
||||
import { PropsTable } from '@/components/PropsTable';
|
||||
import { Layout, Section, Article, Layer, Headline, BodyText } from '@newspaperui/components';
|
||||
|
||||
export default function LayerPage() {
|
||||
return (
|
||||
<div className="prose prose-lg max-w-none">
|
||||
<h1>Layer 组件</h1>
|
||||
<p className="text-xl text-gray-600">
|
||||
Layer 是浮动层组件，支持绝对定位，用于实现浮动广告、拉引、浮动图片等效果。
|
||||
</p>
|
||||
|
||||
<h2>组件说明</h2>
|
||||
<p>
|
||||
<code>Layer</code> 组件脱离正常的栅格流，使用绝对定位。
|
||||
它可以浮动在其他内容之上，常用于实现报纸中的浮动元素，如拉引、浮动广告、浮动图片等。
|
||||
</p>
|
||||
|
||||
<h2>API 文档</h2>
|
||||
<PropsTable
|
||||
data={[
|
||||
{
|
||||
name: 'position',
|
||||
type: '"absolute" | "fixed" | "sticky"',
|
||||
default: '"absolute"',
|
||||
description: 'CSS position 属性',
|
||||
},
|
||||
{
|
||||
name: 'top',
|
||||
type: 'string | number',
|
||||
description: '距离顶部的距离',
|
||||
},
|
||||
{
|
||||
name: 'right',
|
||||
type: 'string | number',
|
||||
description: '距离右侧的距离',
|
||||
},
|
||||
{
|
||||
name: 'bottom',
|
||||
type: 'string | number',
|
||||
description: '距离底部的距离',
|
||||
},
|
||||
{
|
||||
name: 'left',
|
||||
type: 'string | number',
|
||||
description: '距离左侧的距离',
|
||||
},
|
||||
{
|
||||
name: 'zIndex',
|
||||
type: 'number',
|
||||
default: '10',
|
||||
description: 'z-index 层级',
|
||||
},
|
||||
{
|
||||
name: 'className',
|
||||
type: 'string',
|
||||
description: '自定义 CSS 类名',
|
||||
},
|
||||
{
|
||||
name: 'children',
|
||||
type: 'React.ReactNode',
|
||||
required: true,
|
||||
description: '浮动层内容',
|
||||
},
|
||||
]}
|
||||
/>
|
||||
|
||||
<h2>基础用法</h2>
|
||||
<Demo
|
||||
title="浮动拉引"
|
||||
description="在文章旁边添加浮动的拉引文字"
|
||||
code={`<Layout columns={24}>
|
||||
<Section columns={24}>
|
||||
<div style={{ position: 'relative', minHeight: '300px' }}>
|
||||
<Article span={16}>
|
||||
<Headline weight="High">主要文章</Headline>
|
||||
<BodyText>
|
||||
这是一篇主要文章的内容。旁边有一个浮动的拉引，
|
||||
用于突出显示文章中的重要引用或观点。
|
||||
</BodyText>
|
||||
</Article>
|
||||
|
||||
<Layer position="absolute" top="20px" right="20px" zIndex={10}>
|
||||
<div className="bg-yellow-50 border-l-4 border-yellow-400 p-4 max-w-xs">
|
||||
<p className="text-lg font-semibold text-gray-800">
|
||||
"这是一段重要的引用文字"
|
||||
</p>
|
||||
</div>
|
||||
</Layer>
|
||||
</div>
|
||||
</Section>
|
||||
</Layout>`}
|
||||
>
|
||||
<Layout columns={24}>
|
||||
<Section columns={24}>
|
||||
<div style={{ position: 'relative', minHeight: '300px' }}>
|
||||
<Article span={16}>
|
||||
<Headline weight="High">主要文章</Headline>
|
||||
<BodyText>
|
||||
这是一篇主要文章的内容。旁边有一个浮动的拉引，
|
||||
用于突出显示文章中的重要引用或观点。Layer 组件使用绝对定位，
|
||||
可以精确控制元素的位置。
|
||||
</BodyText>
|
||||
</Article>
|
||||
|
||||
<Layer position="absolute" top="20px" right="20px" zIndex={10}>
|
||||
<div className="bg-yellow-50 border-l-4 border-yellow-400 p-4 max-w-xs">
|
||||
<p className="text-lg font-semibold text-gray-800">
|
||||
"这是一段重要的引用文字"
|
||||
</p>
|
||||
</div>
|
||||
</Layer>
|
||||
</div>
|
||||
</Section>
|
||||
</Layout>
|
||||
</Demo>
|
||||
|
||||
<h2>浮动广告</h2>
|
||||
<Demo
|
||||
title="侧边浮动广告"
|
||||
description="在页面侧边添加固定位置的广告"
|
||||
code={`<Layout columns={24}>
|
||||
<Section columns={24}>
|
||||
<div style={{ position: 'relative', minHeight: '400px' }}>
|
||||
<Article span={18}>
|
||||
<Headline weight="High">文章内容</Headline>
|
||||
<BodyText>
|
||||
这是文章的主要内容区域。右侧有一个浮动的广告位，
|
||||
使用 Layer 组件实现。
|
||||
</BodyText>
|
||||
</Article>
|
||||
|
||||
<Layer position="absolute" top="0" right="0" zIndex={5}>
|
||||
<div className="bg-blue-100 border border-blue-300 p-6 w-48">
|
||||
<p className="text-center font-bold text-blue-900">广告位</p>
|
||||
<p className="text-sm text-blue-700 mt-2">300x250</p>
|
||||
</div>
|
||||
</Layer>
|
||||
</div>
|
||||
</Section>
|
||||
</Layout>`}
|
||||
>
|
||||
<Layout columns={24}>
|
||||
<Section columns={24}>
|
||||
<div style={{ position: 'relative', minHeight: '400px' }}>
|
||||
<Article span={18}>
|
||||
<Headline weight="High">文章内容</Headline>
|
||||
<BodyText>
|
||||
这是文章的主要内容区域。右侧有一个浮动的广告位，
|
||||
使用 Layer 组件实现。广告不会影响正常的文章布局流。
|
||||
</BodyText>
|
||||
<BodyText>
|
||||
Layer 组件非常适合实现这类需要脱离文档流的元素。
|
||||
</BodyText>
|
||||
</Article>
|
||||
|
||||
<Layer position="absolute" top="0" right="0" zIndex={5}>
|
||||
<div className="bg-blue-100 border border-blue-300 p-6 w-48 text-center">
|
||||
<p className="font-bold text-blue-900">广告位</p>
|
||||
<p className="text-sm text-blue-700 mt-2">300x250</p>
|
||||
</div>
|
||||
</Layer>
|
||||
</div>
|
||||
</Section>
|
||||
</Layout>
|
||||
</Demo>
|
||||
|
||||
<h2>使用建议</h2>
|
||||
<ul>
|
||||
<li>Layer 的父容器需要设置 <code>position: relative</code></li>
|
||||
<li>使用 zIndex 控制多个 Layer 的层叠顺序</li>
|
||||
<li>浮动元素不应遮挡重要内容</li>
|
||||
<li>考虑移动端的显示效果，必要时隐藏或调整 Layer</li>
|
||||
<li>使用 <code>position="fixed"</code> 可以实现固定在视口的效果</li>
|
||||
<li>使用 <code>position="sticky"</code> 可以实现粘性定位效果</li>
|
||||
</ul>
|
||||
|
||||
<h2>注意事项</h2>
|
||||
<ul>
|
||||
<li>Layer 脱离了栅格系统，不受 Section 和 Article 的列数限制</li>
|
||||
<li>需要手动控制 Layer 的宽度和位置</li>
|
||||
<li>在响应式设计中，可能需要根据屏幕尺寸调整 Layer 的位置</li>
|
||||
<li>过多的 Layer 可能影响页面性能和可访问性</li>
|
||||
<li>确保 Layer 内容在所有屏幕尺寸下都能正常显示</li>
|
||||
</ul>
|
||||
|
||||
<h2>典型应用场景</h2>
|
||||
<ul>
|
||||
<li>浮动拉引 - 突出显示文章中的重要引用</li>
|
||||
<li>浮动广告 - 侧边或角落的广告位</li>
|
||||
<li>浮动图片 - 文章中的浮动配图</li>
|
||||
<li>固定导航 - 使用 fixed 定位的导航栏</li>
|
||||
<li>粘性标题 - 使用 sticky 定位的章节标题</li>
|
||||
</ul>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,271 @@
|
||||
'use client';
|
||||
|
||||
import { Demo } from '@/components/Demo';
|
||||
import { PropsTable } from '@/components/PropsTable';
|
||||
import { Layout, Section, Article, Headline, BodyText } from '@newspaperui/components';
|
||||
import { Image, Figure } from '@newspaperui/components';
|
||||
|
||||
export default function MediaPage() {
|
||||
return (
|
||||
<div className="prose prose-lg max-w-none">
|
||||
<h1>媒体组件</h1>
|
||||
<p className="text-xl text-gray-600">
|
||||
NewspaperUI 提供了 Image、Figure 和 Video 组件用于展示媒体内容。
|
||||
</p>
|
||||
|
||||
<h2>Image 组件</h2>
|
||||
<p>
|
||||
<code>Image</code> 组件用于显示图片，支持响应式和跨栏布局。
|
||||
</p>
|
||||
|
||||
<PropsTable
|
||||
data={[
|
||||
{
|
||||
name: 'src',
|
||||
type: 'string',
|
||||
required: true,
|
||||
description: '图片 URL',
|
||||
},
|
||||
{
|
||||
name: 'alt',
|
||||
type: 'string',
|
||||
required: true,
|
||||
description: '图片替代文本（无障碍）',
|
||||
},
|
||||
{
|
||||
name: 'span',
|
||||
type: 'number',
|
||||
description: '图片占据的列数',
|
||||
},
|
||||
{
|
||||
name: 'aspectRatio',
|
||||
type: 'string',
|
||||
default: '"16/9"',
|
||||
description: '图片宽高比',
|
||||
},
|
||||
{
|
||||
name: 'objectFit',
|
||||
type: '"cover" | "contain" | "fill"',
|
||||
default: '"cover"',
|
||||
description: '图片填充方式',
|
||||
},
|
||||
{
|
||||
name: 'className',
|
||||
type: 'string',
|
||||
description: '自定义 CSS 类名',
|
||||
},
|
||||
]}
|
||||
/>
|
||||
|
||||
<Demo
|
||||
title="基础图片"
|
||||
description="在文章中插入图片"
|
||||
code={`<Article span={12}>
|
||||
<Headline weight="High">带图片的文章</Headline>
|
||||
<Image
|
||||
src="https://via.placeholder.com/800x600"
|
||||
alt="示例图片"
|
||||
span={12}
|
||||
/>
|
||||
<BodyText>图片下方的文字说明</BodyText>
|
||||
</Article>`}
|
||||
>
|
||||
<Layout columns={24}>
|
||||
<Section columns={24}>
|
||||
<Article span={12}>
|
||||
<Headline weight="High">带图片的文章</Headline>
|
||||
<Image
|
||||
src="https://via.placeholder.com/800x600"
|
||||
alt="示例图片"
|
||||
span={12}
|
||||
/>
|
||||
<BodyText>图片下方的文字说明</BodyText>
|
||||
</Article>
|
||||
</Section>
|
||||
</Layout>
|
||||
</Demo>
|
||||
|
||||
<h2>Figure 组件</h2>
|
||||
<p>
|
||||
<code>Figure</code> 组件是带标题的图片容器，包含图片和图注。
|
||||
</p>
|
||||
|
||||
<PropsTable
|
||||
data={[
|
||||
{
|
||||
name: 'src',
|
||||
type: 'string',
|
||||
required: true,
|
||||
description: '图片 URL',
|
||||
},
|
||||
{
|
||||
name: 'alt',
|
||||
type: 'string',
|
||||
required: true,
|
||||
description: '图片替代文本',
|
||||
},
|
||||
{
|
||||
name: 'caption',
|
||||
type: 'string',
|
||||
required: true,
|
||||
description: '图注文字',
|
||||
},
|
||||
{
|
||||
name: 'span',
|
||||
type: 'number',
|
||||
description: 'Figure 占据的列数',
|
||||
},
|
||||
{
|
||||
name: 'aspectRatio',
|
||||
type: 'string',
|
||||
default: '"16/9"',
|
||||
description: '图片宽高比',
|
||||
},
|
||||
{
|
||||
name: 'className',
|
||||
type: 'string',
|
||||
description: '自定义 CSS 类名',
|
||||
},
|
||||
]}
|
||||
/>
|
||||
|
||||
<Demo
|
||||
title="带图注的图片"
|
||||
description="使用 Figure 组件添加图注"
|
||||
code={`<Article span={12}>
|
||||
<Headline weight="High">新闻标题</Headline>
|
||||
<Figure
|
||||
src="https://via.placeholder.com/800x600"
|
||||
alt="新闻配图"
|
||||
caption="这是图片的说明文字，描述图片内容"
|
||||
span={12}
|
||||
/>
|
||||
<BodyText>新闻正文内容...</BodyText>
|
||||
</Article>`}
|
||||
>
|
||||
<Layout columns={24}>
|
||||
<Section columns={24}>
|
||||
<Article span={12}>
|
||||
<Headline weight="High">新闻标题</Headline>
|
||||
<Figure
|
||||
src="https://via.placeholder.com/800x600"
|
||||
alt="新闻配图"
|
||||
caption="这是图片的说明文字，描述图片内容"
|
||||
span={12}
|
||||
/>
|
||||
<BodyText>新闻正文内容...</BodyText>
|
||||
</Article>
|
||||
</Section>
|
||||
</Layout>
|
||||
</Demo>
|
||||
|
||||
<h2>Video 组件</h2>
|
||||
<p>
|
||||
<code>Video</code> 组件用于嵌入视频内容。
|
||||
</p>
|
||||
|
||||
<PropsTable
|
||||
data={[
|
||||
{
|
||||
name: 'src',
|
||||
type: 'string',
|
||||
required: true,
|
||||
description: '视频 URL',
|
||||
},
|
||||
{
|
||||
name: 'poster',
|
||||
type: 'string',
|
||||
description: '视频封面图片 URL',
|
||||
},
|
||||
{
|
||||
name: 'span',
|
||||
type: 'number',
|
||||
description: '视频占据的列数',
|
||||
},
|
||||
{
|
||||
name: 'controls',
|
||||
type: 'boolean',
|
||||
default: 'true',
|
||||
description: '是否显示控制条',
|
||||
},
|
||||
{
|
||||
name: 'autoPlay',
|
||||
type: 'boolean',
|
||||
default: 'false',
|
||||
description: '是否自动播放',
|
||||
},
|
||||
{
|
||||
name: 'loop',
|
||||
type: 'boolean',
|
||||
default: 'false',
|
||||
description: '是否循环播放',
|
||||
},
|
||||
{
|
||||
name: 'muted',
|
||||
type: 'boolean',
|
||||
default: 'false',
|
||||
description: '是否静音',
|
||||
},
|
||||
{
|
||||
name: 'className',
|
||||
type: 'string',
|
||||
description: '自定义 CSS 类名',
|
||||
},
|
||||
]}
|
||||
/>
|
||||
|
||||
<Demo
|
||||
title="嵌入视频"
|
||||
description="在文章中嵌入视频内容"
|
||||
code={`<Article span={16}>
|
||||
<Headline weight="High">视频新闻</Headline>
|
||||
<Video
|
||||
src="https://example.com/video.mp4"
|
||||
poster="https://via.placeholder.com/800x450"
|
||||
span={16}
|
||||
controls
|
||||
/>
|
||||
<BodyText>视频相关的文字说明...</BodyText>
|
||||
</Article>`}
|
||||
>
|
||||
<Layout columns={24}>
|
||||
<Section columns={24}>
|
||||
<Article span={16}>
|
||||
<Headline weight="High">视频新闻</Headline>
|
||||
<div className="bg-gray-200 aspect-video flex items-center justify-center">
|
||||
<p className="text-gray-600">视频播放器占位</p>
|
||||
</div>
|
||||
<BodyText>视频相关的文字说明...</BodyText>
|
||||
</Article>
|
||||
</Section>
|
||||
</Layout>
|
||||
</Demo>
|
||||
|
||||
<h2>使用建议</h2>
|
||||
<ul>
|
||||
<li>使用 Image 组件展示简单图片</li>
|
||||
<li>使用 Figure 组件为图片添加说明文字</li>
|
||||
<li>使用 Video 组件嵌入视频内容</li>
|
||||
<li>通过 span 属性控制媒体元素的宽度</li>
|
||||
<li>设置合适的 aspectRatio 保持图片比例</li>
|
||||
<li>始终提供 alt 文本以提高无障碍性</li>
|
||||
<li>考虑图片和视频的加载性能</li>
|
||||
</ul>
|
||||
|
||||
<h2>响应式媒体</h2>
|
||||
<p>
|
||||
媒体组件会根据容器宽度自动调整大小。在小屏设备上，
|
||||
媒体元素会自动适应屏幕宽度，保持良好的显示效果。
|
||||
</p>
|
||||
|
||||
<h2>性能优化</h2>
|
||||
<ul>
|
||||
<li>使用适当的图片格式（WebP、AVIF）</li>
|
||||
<li>提供多种尺寸的图片用于响应式加载</li>
|
||||
<li>使用懒加载（lazy loading）优化页面性能</li>
|
||||
<li>压缩图片和视频文件大小</li>
|
||||
<li>考虑使用 CDN 加速媒体资源加载</li>
|
||||
</ul>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user