book/page.tsx - 书籍首页

基本信息

属性	值
路径	`src/app/book/page.tsx`
类型	Next.js 页面组件 (Server Component)
功能	《提示工程互动书》着陆页

功能描述

展示提示工程学习书籍的着陆页，包含书籍介绍、目录结构、开始学习入口，以及 PDF 下载功能。具有完整的 SEO 优化和结构化数据。

导入依赖

import Link from "next/link";
import Image from "next/image";
import { Schoolbell } from "next/font/google";
import { ArrowRight, BookOpen, Sparkles, Brain, Layers, Target, Lightbulb, Gamepad2, Download } from "lucide-react";
import { Button } from "@/components/ui/button";
import type { Metadata } from "next";
import { PixelRobot } from "@/components/kids/elements/pixel-art";
import { getTranslations, getLocale } from "next-intl/server";
import { ContinueReadingButton } from "@/components/book/continue-reading";

字体配置

const kidsFont = Schoolbell({
  subsets: ["latin"],
  weight: "400",
});

元数据

SEO 配置

{
  title: t("metaTitle"),
  description: t("metaDescription"),
  keywords: ["prompt engineering", "ChatGPT prompts", ...],
  authors: [{ name: "Fatih Kadir Akın", url: "..." }],
  creator: "Fatih Kadir Akın",
  publisher: "prompts.chat",
  openGraph: { /* ... */ },
  twitter: { /* ... */ },
  robots: { index: true, follow: true }
}

关键词列表

prompt engineering
ChatGPT prompts / AI prompts
prompt engineering guide/book
how to write prompts
chain of thought prompting
few-shot learning
prompt chaining
system prompts
LLM prompts / GPT prompts / Claude prompts

结构化数据 (JSON-LD)

const jsonLd = {
  "@context": "https://schema.org",
  "@type": "Book",
  name: "The Interactive Book of Prompting",
  author: { "@type": "Person", name: "Fatih Kadir Akın" },
  publisher: { "@type": "Organization", name: "prompts.chat" },
  isAccessibleForFree: true,
  numberOfPages: 25,
  bookFormat: "https://schema.org/EBook",
  license: "https://creativecommons.org/publicdomain/zero/1.0/"
};

UI 结构

Container (max-w-2xl)
├── ContinueReadingButton (条件显示)
├── Book Cover Image
├── Header
│   ├── Author Intro
│   ├── Title
│   └── Subtitle
├── Author Bio
├── Highlights (6 items)
├── Book Structure (8 parts)
├── CTA Buttons (3)
│   ├── Start Reading → /book/00a-preface
│   ├── Skip to Chapter 1 → /book/01-understanding-ai-models
│   └── Download PDF
├── Update Note
├── Kids Section (Promi the Robot)
└── Footer

亮点列表

图标	键值	主题
`Brain`	`highlights.understanding`	理解 AI 模型
`Target`	`highlights.crafting`	构建有效提示
`Layers`	`highlights.advanced`	高级技术
`Sparkles`	`highlights.interactive`	互动示例
`Lightbulb`	`highlights.realWorld`	真实用例
`BookOpen`	`highlights.future`	未来趋势

书籍结构

键值	内容
`structure.introduction`	简介
`structure.part1`	第1部分: 理解基础
`structure.part2`	第2部分: 核心技术
`structure.part3`	第3部分: 高级策略
`structure.part4`	第4部分: 实际应用
`structure.part5`	第5部分: 行业应用
`structure.part6`	第6部分: 未来展望
`structure.chapters`	章节总结

CTA 按钮

按钮	链接	样式
Start Reading	`/book/00a-preface`	Primary (lg)
Skip to Chapter 1	`/book/01-understanding-ai-models`	Outline (lg)
Download PDF	GitHub raw PDF URL	Outline (lg)

PDF URL 格式:

https://raw.githubusercontent.com/f/prompts.chat/refs/heads/main/public/book-pdf/book-{locale}-print.pdf

儿童模式推广

Gradient Box (amber/orange)
├── PixelRobot illustration
├── Question text
├── Title (pixel font)
├── Description
└── Start Playing → /kids

翻译键值

命名空间	键值
`book`	`title`, `subtitle`, `interactiveGuideBy`
`book`	`authorIntro`, `bookDescription`
`book`	`whatYouWillLearn`, `highlights.*`
`book`	`bookStructure`, `structure.*`
`book`	`startReading`, `skipToChapter1`, `downloadPdf`
`book`	`continuousUpdate`, `partOfProject`
`book`	`kidsSection.*`

图片资源

资源	路径	说明
书籍封面	`/book-cover-photo.jpg`	OG 图片和页面展示
PDF 文件	`/book-pdf/book-{locale}-print.pdf`	多语言 PDF

组件引用

组件	来源	用途
`ContinueReadingButton`	`@/components/book/continue-reading`	继续阅读按钮
`PixelRobot`	`@/components/kids/elements/pixel-art`	像素机器人插图

响应式布局

默认: max-w-2xl 居中内容
CTA 按钮: flex-col sm:flex-row
儿童区域: flex-col sm:flex-row

路由

路径	说明
`/book`	书籍首页（当前）
`/book/00a-preface`	前言/开始阅读
`/book/01-understanding-ai-models`	第1章
`/kids`	儿童模式