超低成本展示型独立站配套资源

上一篇完成了 SEO、性能和 Analytics 优化，这里集中提供本系列的模板与执行资源。

本篇会给你一个完整的、可直接使用的模板 + 实用资源，包括：

完整模板仓库结构 + 核心组件代码
Tailwind 组件库（10+ 个高复用组件）
GEO 搜索意图优化提示
AI 辅助写作 prompt（从 AI 辅助到全自动生成）
部署指南（Vercel/Netlify/Cloudflare）
内容规划 Checklist

1. 完整模板仓库结构（直接复制使用）

blktech-showcase-template/
├── public/
│   ├── images/             # 放你的项目图片
│   └── favicon.png
├── src/
│   ├── components/         # 所有复用组件
│   │   ├── Navbar.astro
│   │   ├── Hero.astro
│   │   ├── ProjectCard.astro
│   │   ├── AboutCard.astro
│   │   ├── ContactForm.astro
│   │   ├── Footer.astro
│   │   └── ...（更多）
│   ├── content/            # 占位内容（稍后替换）
│   ├── pages/              # 页面
│   │   ├── index.astro
│   │   ├── about.astro
│   │   ├── projects.astro
│   │   └── contact.astro
│   ├── layouts/
│   │   └── BaseLayout.astro
│   ├── styles/
│   │   └── globals.css
│   └── lib/
│       └── utils.ts
├── tailwind.config.mjs
├── astro.config.mjs
├── package.json
├── .env.example
└── README.md              # 使用说明

2. Tailwind 组件库（直接复制粘贴）

`src/components/Hero.astro`

---
interface Props {
  title: string;
  subtitle: string;
  ctaText?: string;
  ctaLink?: string;
  image?: string;
}

const { title, subtitle, ctaText = '开始使用', ctaLink = '#', image = '' } = Astro.props;
---

<section class="relative min-h-[90vh] flex items-center">
  <div class="max-w-5xl mx-auto px-6 grid md:grid-cols-2 gap-12 items-center">
    <div class="space-y-8">
      <h1 class="text-5xl md:text-6xl font-bold leading-tight">
        {title}
      </h1>
      <p class="text-xl text-gray-600">
        {subtitle}
      </p>
      
      <a href={ctaLink} 
         class="inline-block bg-blue-600 text-white px-8 py-4 rounded-2xl text-lg font-medium hover:bg-blue-700 transition-colors">
        {ctaText}
      </a>
    </div>
    
    {image && (
      <div class="relative">
        <img src={image} alt="展示图" class="rounded-3xl shadow-2xl" />
      </div>
    )}
  </div>
</section>

`src/components/ProjectCard.astro`

---
interface Props {
  title: string;
  description: string;
  image: string;
  tags?: string[];
  link?: string;
}

const { title, description, image, tags = [], link = '#' } = Astro.props;
---

<div class="group bg-white rounded-3xl overflow-hidden border border-gray-100 hover:border-blue-200 transition-all">
  <div class="relative">
    <img src={image} alt={title} class="w-full h-48 object-cover transition-transform group-hover:scale-105" />
    <div class="absolute inset-0 bg-gradient-to-t from-black/60 to-transparent opacity-0 group-hover:opacity-100 transition-opacity" />
  </div>
  
  <div class="p-6">
    <h3 class="text-xl font-semibold mb-2">{title}</h3>
    <p class="text-gray-600 mb-4 line-clamp-2">{description}</p>
    
    {tags.length > 0 && (
      <div class="flex flex-wrap gap-2">
        {tags.map(tag => (
          <span class="text-xs bg-gray-100 px-3 py-1 rounded-full">{tag}</span>
        ))}
      </div>
    )}
  </div>
</div>

3. GEO 搜索意图优化提示

用于写作时的提示词：

# GEO 内容创作模板

## 品牌展示意图（About 页）
- 开头：用一句话概括品牌核心价值
- 核心：加入「能力树」或「技术栈」视觉化展示
- 结尾：写「谁在用这个品牌」或「适合什么行业」

## 项目案例意图（Projects 页）
- 每个项目包含：标题 + 日期 + 简短描述 + 主要技术 + 链接
- 建议每页 6-12 个项目
- 最后放「更多案例」CTA

## 转化意图（Contact 页）
- 表单要好用（带提交状态）
- 社交链接要全（GitHub、Twitter、LinkedIn、WhatsApp）
- 最后加「我们一起做大事」的语气

4. AI 辅助写作 Prompt（从 AI 辅助到全自动生成）

基础写作 Prompt（推荐用于 Claude / GPT-4o）

你是一个顶级展示型独立站文案专家。帮我写一个展示型独立站的 About 页内容。

品牌信息：
- 品牌名：{品牌名}
- 定位：{定位，比如：独立开发者 / 品牌设计师}
- 核心价值：{核心价值}
- 技术栈：{技术栈}
- 目标用户：{目标用户}

要求：
1. 总字数 300-500 字
2. 采用「故事 + 能力」混合写法
3. 加入「能力树」或「技术栈」展示
4. 结尾要有轻微的 CTA
5. 语言专业又亲和

高级全自动生成 Prompt（推荐用于 Claude / GPT-4o）

你现在是我的展示型独立站全流程执行助手。

我将给你以下信息，请一步步完成：

**品牌信息：**
- 品牌名：
- 定位：
- 核心价值：
- 技术栈：
- 目标受众：

**任务：**
1. 规划完整的内容结构（包括所有页面）
2. 写 About 页完整文案
3. 写 Projects 页 6 个项目示例
4. 写 Contact 页完整文案
5. 给出 GEO 搜索意图优化建议

请用中文回复，结构清晰，内容专业。