IndieShow 图标IndieShow 使用文档

社交媒体配置

配置 IndieShow 项目的社交媒体链接，包括全球和中文社交平台的设置，以及如何自定义和验证社交媒体配置

社交媒体链接是展示您品牌形象和与用户互动的重要渠道。IndieShow-Starter-Nuxt 提供了灵活的社交媒体配置系统，支持全球和中文社交平台，并可根据用户的语言自动切换显示相应的社交媒体链接。

配置文件结构

社交媒体配置相关文件位于：

social.ts

社交媒体配置

全球社交平台

全球社交平台配置示例：

config/social.ts
export const globalSocialConfig: SocialConfig = {
  discord: {
    name: "Discord",
    url: "https://discord.gg/your-server",
    icon: "simple-icons:discord",
  },
  github: {
    name: "GitHub",
    url: "https://github.com/your-username/",
    icon: "simple-icons:github",
  },
  x: {
    name: "X",
    url: "https://x.com/your-handle",
    icon: "simple-icons:x",
  },
  // ... 其他全球社交平台
}

支持的全球社交平台包括：

  • Discord
  • GitHub
  • X (Twitter)
  • Instagram
  • Facebook
  • YouTube

中文社交平台

中文社交平台配置示例：

config/social.ts
export const cnSocialConfig: SocialConfig = {
  blog: {
    name: "博客",
    url: "https://your-blog.com",
    icon: "simple-icons:blogger",
  },
  zhihu: {
    name: "知乎",
    url: "https://zhihu.com/your-profile",
    icon: "simple-icons:zhihu",
  },
  weibo: {
    name: "微博",
    url: "https://weibo.com/your-profile",
    icon: "simple-icons:sinaweibo",
  },
  // ... 其他中文社交平台
}

支持的中文社交平台包括：

  • 博客
  • 知乎
  • 微博
  • B站（哔哩哔哩）
  • 小红书

配置方法

基本配置步骤

更新社交平台链接

修改 config/social.ts 中的配置：

config/social.ts
export const globalSocialConfig: SocialConfig = {
  discord: {
    name: "Discord",
    url: "https://discord.gg/your-server", 
    url: "https://discord.gg/new-server",  
    icon: "simple-icons:discord",
  },
  // ... 其他配置
}

添加新的社交平台

在相应的配置对象中添加新平台：

config/social.ts
export const globalSocialConfig: SocialConfig = {
  // ... 现有配置
  linkedin: {  
    name: "LinkedIn",  
    url: "https://linkedin.com/in/your-profile",  
    icon: "simple-icons:linkedin",  
  },  
}

多语言支持

系统会根据用户的语言自动选择显示相应的社交媒体配置：

config/social.ts
/**
 * 根据语言获取社交媒体配置
 * @param locale - 语言代码 ('zh' | 'en')
 * @returns 对应语言的社交媒体配置
 */
export function getSocialConfigByLocale(locale: string): SocialConfig {
  return locale === "zh" ? cnSocialConfig : globalSocialConfig
}
  • 中文用户（locale="zh"）将看到中文社交平台配置
  • 其他语言用户将看到全球社交平台配置

图标配置

社交媒体图标使用 Simple Icons 和 Lucide Icons：

types/config/social.d.ts
// Simple Icons 示例
icon: "simple-icons:github"
icon: "simple-icons:discord"
icon: "simple-icons:x"
 
// Lucide Icons 示例
icon: "lucide:github"

选择图标时建议：

  • 优先使用 Simple Icons 的品牌图标
  • 对于自定义或通用图标，使用 Lucide Icons
  • 保持图标风格的一致性

配置验证确保：

  • 所有必填字段都已提供
  • 所有 URL 都使用 HTTPS
  • 配置格式符合类型定义

下一步

数据统计

集成各类数据统计工具，追踪网站性能

案例展示

展示使用 IndieShow 构建的优秀网站

部署指南

了解如何部署您的 IndieShow 网站

PWA 配置

将网站配置为渐进式 Web 应用

目录