社交媒体配置

NEXTDEVKIT 提供了一个集中式的社交媒体配置系统，用于在整个网站上显示社交媒体链接和图标。社交媒体配置位于 src/config/social-media.tsx。

🔧 社交媒体结构

社交媒体系统为显示社交媒体链接提供了一致的接口：

src/config/social-media.tsx

import { SocialMediaIcons as Icons } from "@/components/icons/social-media";
import { useTranslations } from "next-intl";
import type { ReactNode } from "react";

export interface SocialMedia {
	name: string;
	href: string;
	icon: ReactNode;
}

export function getSocialMediaData(): {
	title: string;
	media: SocialMedia[];
} {
	const t = useTranslations("footer");

	return {
		title: t("social.title"),
		media: [
			{
				name: "Facebook",
				href: "https://www.facebook.com",
				icon: <Icons.Facebook className="h-4 w-4" />,
			},
			{
				name: "X",
				href: "https://www.x.com",
				icon: <Icons.X className="h-4 w-4" />,
			},
			{
				name: "Instagram",
				href: "https://www.instagram.com",
				icon: <Icons.Instagram className="h-4 w-4" />,
			},
			{
				name: "Linkedin",
				href: "https://www.linkedin.com",
				icon: <Icons.LinkedIn className="h-4 w-4" />,
			},
		],
	};
}

📋 社交媒体类型

SocialMedia 接口

export interface SocialMedia {
  name: string;
  href: string;
  icon: ReactNode;
}

属性	类型	描述
`name`	`string`	社交媒体平台的显示名称
`href`	`string`	您的社交媒体个人资料URL
`icon`	`ReactNode`	平台的React图标组件

社交媒体数据结构

属性	类型	描述
`title`	`string`	社交媒体链接的部分标题
`media`	`SocialMedia[]`	社交媒体配置数组

🎨 图标集成

社交媒体配置使用图标系统中的图标组件：

src/components/icons/social-media.tsx

import { SocialMediaIcons as Icons } from "@/components/icons/social-media";
import GitHub from "@/components/icons/social-media/github";

可用的社交媒体图标

图标系统包括全面的社交媒体图标：