🚚 安装

npm install astro-tweet-card

或

yarn add astro-tweet-card

🔦 使用方法

---
import TweetCard from 'astro-tweet-card';
---

<TweetCard id="1654079444816936969" />

或在 MDX 使用：

import TweetCard from 'astro-tweet-card';

<TweetCard id="1654079444816936969" />

推文图片由 Astro 在构建时优化处理，其托管于 pbs.twimg.com，因此需要把该域名加入 astro.config.js 的 image.domains：

// astro.config.js
export default defineConfig({
	image: {
		domains: ['pbs.twimg.com'],
	},
});

🔧 配置项

属性类型默认值描述
idstring（必填）要渲染的推文 ID（纯数字字符串）
timeoutnumber10000推文数据请求的超时时间（毫秒）
textPartial<TextLabels>{}对内置 UI 标签的覆盖（见「本地化配置」）

本地化配置

通过 text 选项可将推文卡片的界面文本本地化为任意语言。例如，封装一个中文的推文卡片：

---
import TweetCard from 'astro-tweet-card';

const { id } = Astro.props;

const text = {
	replies: '回复',
	reposts: '转发',
	quotes: '引用',
	likes: '喜欢',
	replyingTo: '回复',
	viewOnX: '在 X 上查看',
	notFound: '推文不可用',
};
---

<TweetCard id={id} text={text} />

🎨 自定义样式

组件内置默认样式，所有可调外观均通过 CSS 自定义属性（CSS variables）暴露。你只需覆盖下列变量即可定制外观：

变量说明默认值（亮色）
--tc-bg卡片背景色#ffffff
--tc-border边框颜色#cfd9de
--tc-text主文字色#0f1419
--tc-text-muted次要文字色#536471
--tc-link链接颜色#1d9bf0
--tc-primary主题色（按钮、悬停）#1d9bf0
--tc-verified认证徽章色#1d9bf0
--tc-font-family字体-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif
--tc-overlay视频播放按钮背景rgba(0,0,0,0.65)
--tc-hover-bg悬停背景色rgba(29,155,240,0.1)

深色模式

组件默认不含深色样式，请根据你项目的主题实现自行覆盖，例如：

@media (prefers-color-scheme: dark) {
	:root {
		--tc-bg: #16181c;
		--tc-border: #2f3336;
		--tc-text: #e7e9ea;
		--tc-text-muted: #71767b;
	}
}

或

.dark {
	--tc-bg: #16181c;
	--tc-border: #2f3336;
	--tc-text: #e7e9ea;
	--tc-text-muted: #71767b;
}