IndieShow 图标IndieShow 使用文档

作品展示配置

配置 IndieShow 项目的作品展示功能，包括项目展示、平台支持、技术标签和在线状态等设置

作品展示是展现您项目成果的重要窗口。IndieShow-Starter-Nuxt 提供了灵活的作品展示配置系统，支持多种项目类型、平台标识和技术标签，让您的作品展示更加专业和吸引人。

配置文件结构

作品展示配置相关文件位于：

showcase.ts

类型定义

types/config/showcase.d.ts
import type { ColorTag, IconItem } from "../core/common"
 
// 平台类型
export interface Platform extends IconItem {
  name: string
}
 
// 作品展示项目类型
export interface ShowcaseItem {
  id?: string                           // 项目唯一标识
  type: "web" | "mobile" | "desktop"    // 项目类型
  image: string                         // 项目展示图片
  link?: string                         // 项目链接
  platforms: Platform[]                 // 支持的平台
  qrCode?: string                       // 二维码图片
  qrCodeDescription?: string           // 二维码描述
  tags: ColorTag[]                     // 技术标签
  isOnline: boolean                    // 是否在线
}
 
// 作品展示配置类型
export interface ShowcaseConfig {
  items: ShowcaseItem[]
}
 
// 二维码弹窗状态类型
export interface QRCodeModalState {
  isOpen: boolean
  title: string
  qrCodeUrl: string
  description: string
}

作品展示配置

基本配置示例

config/showcase.ts
export const showcaseConfig: ShowcaseConfig = {
  items: [
    {
      id: "project1",
      type: "web",
      image: "/images/showcase/project1.svg",
      link: "https://github.com/your-username/project",
      platforms: [
        { name: "Web", icon: "simple-icons:googlechrome" }
      ],
      qrCode: "/images/showcase/qr-code-1.png",
      tags: [
        { name: "Vue.js", icon: "lucide:code", color: "text-emerald-500" },
        { name: "TypeScript", icon: "lucide:file-code", color: "text-blue-500" },
        { name: "Tailwind CSS", icon: "lucide:wind", color: "text-cyan-500" }
      ],
      isOnline: true
    }
  ]
}

项目类型

字段名描述可选值是否必填
id项目唯一标识project1、project2 等递增值是
type项目类型web: Web应用项目
mobile: 移动应用项目
desktop: 桌面应用项目		是
image项目展示图片图片路径，如：/images/showcase/project1.svg是
link项目链接任意有效的URL地址否
isOnline项目在线状态true: 已上线
false: 未上线		是

平台支持

字段名描述可选值示例
name平台名称任意平台名称Web, iOS, Android
icon平台图标Simple Icons 图标名称simple-icons:apple
simple-icons:android
simple-icons:googlechrome

示例配置：

config/showcase.ts
platforms: [
  { name: "iOS", icon: "simple-icons:apple" },
  { name: "Android", icon: "simple-icons:android" },
  { name: "Web", icon: "simple-icons:googlechrome" }
]

技术标签

字段名描述可选值示例
name技术名称任意技术名称Vue.js, React, Node.js
icon技术图标Lucide Icons 图标名称lucide:code
lucide:server
lucide:database
color标签颜色Tailwind CSS 颜色类text-emerald-500
text-blue-500
text-green-600

示例配置：

config/showcase.ts
tags: [
  { name: "React", icon: "lucide:code", color: "text-sky-500" },
  { name: "Node.js", icon: "lucide:server", color: "text-green-500" },
  { name: "MongoDB", icon: "lucide:database", color: "text-green-600" }
]

颜色选择建议：

  • 使用 Tailwind CSS 的颜色系统
  • 选择 500-600 范围的颜色饱和度
  • 确保颜色与深色模式兼容

配置方法

基本配置步骤

添加新项目

在 config/showcase.ts 中的 items 数组添加新项目：

config/showcase.ts
export const showcaseConfig: ShowcaseConfig = {
  items: [
    // ... 现有项目
    {  
      id: "new-project",  
      type: "mobile",  
      image: "/images/showcase/new-project.svg",  
      link: "https://example.com/new-project",  
      platforms: [  
        { name: "iOS", icon: "simple-icons:apple" },  
        { name: "Android", icon: "simple-icons:android" }  
      ],  
      qrCode: "/images/showcase/qr-code-new.png",  
      tags: [  
        { name: "Flutter", icon: "lucide:code", color: "text-blue-500" }  
      ],  
      isOnline: true
    }  
  ]
}

配置项目图片

  1. 将项目展示图片添加到 /public/images/showcase/ 目录
  2. 如果有二维码图片，也添加到相同目录
  3. 在配置中使用正确的图片路径
config/showcase.ts
{
  image: "/images/showcase/new-project.svg",    // 项目展示图片
  qrCode: "/images/showcase/qr-code-new.png"   // 项目二维码
}

获取作品列表

使用提供的工具函数获取作品信息：

config/showcase.ts
// 获取所有作品
const allItems = getShowcaseItems()
 
// 获取指定索引的作品
const firstItem = getShowcaseItemByIndex(0)

图片要求

项目展示图片建议：

  • 使用 SVG 或高质量 PNG 格式
  • 保持统一的宽高比（建议 16:9）
  • 图片大小建议不超过 200KB
  • 二维码图片使用 PNG 格式，大小 200x200 像素

下一步

部署指南

了解如何部署您的 IndieShow 网站

PWA 配置

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

主题配置

自定义网站的主题样式和外观

新增页面

学习如何添加新的页面到网站

目录