页脚配置

NEXTDEVKIT 提供了一个全面的页脚配置系统，支持多个链接部分、新闻简报注册、社交媒体集成和国际化。页脚配置位于 src/config/footer.ts。

📁 页脚结构

页脚系统支持不同类型内容的多个部分：

src/config/footer.ts

export function getFooterData(): FooterData {
  const t = useTranslations("footer");
  const socialData = getSocialMediaData();

  return {
    newsletter: {
      title: t("newsletter.title"),
      description: t("newsletter.description"),
      inputPlaceholder: t("newsletter.inputPlaceholder"),
      submitAriaLabel: t("newsletter.submitAriaLabel"),
    },
    quickLinks: {
      title: t("quickLinks.title"),
      links: [
        { label: t("quickLinks.home"), href: "/#hero" },
        { label: t("quickLinks.features"), href: "/#feature-tabs" },
        { label: t("quickLinks.pricing"), href: "/pricing" },
        { label: t("quickLinks.testimonials"), href: "/#testimonials" },
        { label: t("quickLinks.faq"), href: "/#faq" },
      ],
    },
    resources: {
      title: t("resources.title"),
      links: [
        { label: t("resources.gettingStarted"), href: "/docs" },
        { label: t("resources.blog"), href: "/blog" },
        { label: t("resources.docs"), href: "/docs" },
        { label: t("resources.contact"), href: "/contact" },
      ],
    },
    social: socialData,
    copyright: t("copyright"),
    legalLinks: [
      { label: t("legal.privacy"), href: "/legal/privacy-policy" },
      { label: t("legal.terms"), href: "/legal/terms-of-service" },
    ],
  };
}

🔧 页脚配置类型

FooterData 结构

属性	类型	描述
`newsletter`	`NewsletterConfig`	新闻简报注册配置
`quickLinks`	`LinkSection`	快速导航链接
`resources`	`LinkSection`	资源和文档链接
`social`	`SocialSection`	社交媒体集成
`copyright`	`string`	版权文本
`legalLinks`	`LegalLink[]`	法律页面链接

NewsletterConfig 结构

属性	类型	描述
`title`	`string`	新闻简报部分标题
`description`	`string`	新闻简报描述文本
`inputPlaceholder`	`string`	邮箱输入占位符文本
`submitAriaLabel`	`string`	提交按钮无障碍标签

LinkSection 结构

属性	类型	描述
`title`	`string`	部分标题
`links`	`QuickLink[]`	此部分中的链接数组

QuickLink 结构

属性	类型	描述
`label`	`string`	链接显示文本
`href`	`string`	链接URL或路径

LegalLink 结构

属性	类型	描述
`label`	`string`	法律链接显示文本
`href`	`string`	法律页面URL或路径

📧 新闻简报配置

配置新闻简报注册部分：

newsletter: {
  title: t("newsletter.title"),
  description: t("newsletter.description"),
  inputPlaceholder: t("newsletter.inputPlaceholder"),
  submitAriaLabel: t("newsletter.submitAriaLabel"),
}

新闻简报集成

新闻简报部分与您的邮件提供商集成：

// 新闻简报表单提交
const handleNewsletterSubmit = async (email: string) => {
  try {
    await subscribeToNewsletter(email);
    // 成功处理
  } catch (error) {
    // 错误处理
  }
};

🔗 链接部分

快速链接部分

配置快速导航链接：

quickLinks: {
  title: t("quickLinks.title"),
  links: [
    { label: t("quickLinks.home"), href: "/#hero" },
    { label: t("quickLinks.features"), href: "/#feature-tabs" },
    { label: t("quickLinks.pricing"), href: "/pricing" },
    { label: t("quickLinks.testimonials"), href: "/#testimonials" },
    { label: t("quickLinks.faq"), href: "/#faq" },
  ],
}

资源部分

配置资源和文档链接：

resources: {
  title: t("resources.title"),
  links: [
    { label: t("resources.gettingStarted"), href: "/docs" },
    { label: t("resources.blog"), href: "/blog" },
    { label: t("resources.docs"), href: "/docs" },
    { label: t("resources.contact"), href: "/contact" },
  ],
}

🌐 社交媒体集成

页脚与社交媒体配置集成：

// 社交媒体集成
const socialData = getSocialMediaData();

// 在页脚中使用
social: socialData,

这从 src/config/social-media.tsx 配置中提取社交媒体链接。

⚖️ 法律链接

配置法律页面链接：

legalLinks: [
  { label: t("legal.privacy"), href: "/legal/privacy-policy" },
  { label: t("legal.terms"), href: "/legal/terms-of-service" },
]

🌍 国际化支持

所有页脚内容都支持国际化：

// messages/en.json中的页脚翻译
{
  "footer": {
    "newsletter": {
      "title": "保持更新",
      "description": "获取有关 NEXTDEVKIT 的最新更新和新闻",
      "inputPlaceholder": "输入您的邮箱",
      "submitAriaLabel": "订阅新闻简报"
    },
    "quickLinks": {
      "title": "快速链接",
      "home": "首页",
      "features": "功能特性",
      "pricing": "定价",
      "testimonials": "客户见证",
      "faq": "常见问题"
    },
    "resources": {
      "title": "资源",
      "gettingStarted": "快速开始",
      "blog": "博客",
      "docs": "文档",
      "contact": "联系我们"
    },
    "social": {
      "title": "关注我们"
    },
    "copyright": "© 2024 NEXTDEVKIT. 保留所有权利。",
    "legal": {
      "privacy": "隐私政策",
      "terms": "服务条款"
    }
  }
}

On this page