自动安装
使用以下命令之一自动安装组件，根据你的包管理器选择：
npx tofu-ui-cli@latest add big-post
手动安装 (可选)
注意
如果你使用手动安装，将无法获取更新
如果你需要手动安装，请在项目目录中创建如下路径文件：
components/ui/tofu/big-post.tsx然后复制此代码：
"use client"
/**
* TofuUI BigPost 文章展示组件
* @author shuakami
* @version 1.0.0
* @copyright ByteFreeze&TofuUI
*/
import React, { useState } from 'react';
import { useImageColor } from './useImageColor';
interface BigPostProps {
title: string;
excerpt: string;
imageUrl: string;
imageAlt: string;
videoUrl?: string;
linkUrl?: string;
}
const BigPost: React.FC<BigPostProps> = ({ title, excerpt, imageUrl, imageAlt, videoUrl, linkUrl }) => {
const [isPlaying, setIsPlaying] = useState(true);
const { color } = useImageColor(imageUrl, imageAlt);
const togglePlayPause = () => {
const videoElement = document.querySelector('video');
if (videoElement) {
videoElement.paused ? videoElement.play() : videoElement.pause();
setIsPlaying(!isPlaying);
}
};
return (
<div className="relative w-full sm:w-96 md:w-[32rem] lg:w-[40rem] aspect-[4/3] mx-2 my-8 overflow-hidden rounded-md group">
{imageUrl && (
<img
alt={imageAlt}
loading="lazy"
decoding="async"
src={imageUrl}
className="absolute inset-0 w-full h-full object-cover object-center transition-transform duration-500 ease-in-out group-hover:scale-105"
/>
)}
{videoUrl && (
<div className="absolute inset-0">
<video
autoPlay
muted
playsInline
preload="auto"
loop
className="w-full h-full object-cover object-center"
ref={(ref) => {
if (ref) {
ref.addEventListener('play', () => setIsPlaying(true));
ref.addEventListener('pause', () => setIsPlaying(false));
}
}}
>
<source src={videoUrl} type="video/mp4" />
<p>您的浏览器不支持视频播放。</p>
</video>
<div className="absolute top-2 right-2 z-50">
<svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
fill="currentColor"
className={`bi bi-pause-fill text-tofu-light mt-1 ${isPlaying ? 'hidden' : ''}`}
viewBox="0 0 16 16"
onClick={togglePlayPause}
>
<path
d="m11.596 8.697-6.363 3.692c-.54.313-1.233-.066-1.233-.697V4.308c0-.63.692-1.01 1.233-.696l6.363 3.692a.802.802 0 0 1 0 1.393z"/>
</svg>
<svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
fill="currentColor"
className={`bi bi-play-fill text-tofu-light mt-1 ${!isPlaying ? 'hidden' : ''}`}
viewBox="0 0 16 16"
onClick={togglePlayPause}
>
<path
d="M5.5 3.5A1.5 1.5 0 0 1 7 5v6a1.5 1.5 0 0 1-3 0V5a1.5 1.5 0 0 1 1.5-1.5zm5 0A1.5 1.5 0 0 1 12 5v6a1.5 1.5 0 0 1-3 0V5a1.5 1.5 0 0 1 1.5-1.5z"/>
</svg>
</div>
</div>
)}
<a href={linkUrl} target="_blank" rel="noopener noreferrer" className="absolute inset-0 z-20"></a>
<div className="absolute top-0 left-0 p-4">
<div className={`text-base ${color === 'dark' ? 'text-tofu-light' : 'text-tofu-light-ds-2'}`}>{excerpt}</div>
</div>
<div className="absolute bottom-0 left-0 p-4">
<h2 className={`text-2xl font-bold ${color === 'dark' ? 'text-tofu-light' : 'text-tofu-light-ds-2'}`}>{title}</h2>
</div>
</div>
);
};
export default BigPost;导入组件
import { BigPost } from '@/components/ui/tofu/big-post';使用组件
<BigPost
title="你的标题"
excerpt="描述"
// 下面图片和视频链接2选1必填
imageUrl="图片地址"
imageAlt="图片描述"
linkUrl="点击卡片跳转出去的链接"
videoUrl="视频链接"
/>搭配PostCarousel使用
有时候你会发现，如果你有多个放入BigPost的内容，不太好展示。
这个时候你可以尝试使用PostCarousel组件来组合展示它们。
关于PostCarousel，还有很多令人惊叹的内容，如果需要了解，请移步至此页面。
参数
| ⭐参数名 | 🤔类型 | 🐳默认值 | 🌎说明 |
|---|---|---|---|
| title | string | - | 文章或视频的标题 |
| excerpt | string | - | 文章摘要，通常在图片左上方 |
| imageUrl | string | - | 图片链接，用于显示文章或视频的预览图 |
| imageAlt | string | - | 图片的替代文本，增强无障碍访问性 |
| videoUrl | string | undefined | 可选，视频链接，若提供则显示视频内容 |
| linkUrl | string | undefined | 可选，点击图片或视频后跳转的链接地址 |