Alpha 项目站样式展示

这篇文章用于展示项目说明文档里常用的内容样式。后续真实项目可以沿用类似结构：背景、目标、架构、实现、部署和复盘。

项目说明

Alpha 项目站主要用于整理：

项目作品
技术说明
实验记录
投资与 Crypto/Web3 相关研究

文档重点放在事实、过程和结果，不做复杂包装。

马赛克文字

有些内容适合先遮住，比如这是一段 hover 或点击后才显示的隐藏文字。如果只希望点击显示，可以写成点击后显示的重点信息。

画廊

封面示例 1

用于展示项目文章中的多图布局。

Alpha Gallery

封面示例 2

鼠标悬停时会显示图片标题和说明。

Alpha Gallery

封面示例 3

移动端会自动减少列数，保持阅读宽度。

Alpha Gallery

表格

模块	内容	状态
Frontend	交互界面、静态站点、组件设计	进行中
Backend	API、数据处理、服务集成	进行中
AI	Agent、LLM 应用、自动化流程	进行中
Invest	数据分析、策略记录、研究笔记	规划中
Crypto/Web3	链上数据、Web3 工具、加密项目	规划中

代码高亮

1
type Project = {
2
  name: string;
3
  category: "项目" | "随笔";
4
  tags: string[];
5
  published: boolean;
6
};
7

8
const project: Project = {
9
  name: "Alpha Projects",
10
  category: "项目",
11
  tags: ["Astro", "MDX", "Vercel"],
12
  published: true,
13
};
14

15
console.log(`${project.name} is ready.`);

数学公式

行内公式示例：收益率可以写作 $r = \frac{P_1 - P_0}{P_0}$ 。

块级公式示例：

Sharpe = \frac{R_p - R_f}{\sigma_p}

💡 提示：选中任意公式后复制（Ctrl+C），会自动复制为 LaTeX 源码，方便直接粘贴到其他编辑器中使用。

高亮引用 Callout

提示

这是 info 类型的 Callout，适合给出补充说明或提示信息。支持 Markdown 语法。

完成

任务模块已完成部署，所有测试通过。支持行内代码 const x = 1。

注意

API 接口将在下月升级，旧版本将停止维护，请及时迁移。

警告

生产环境数据库密码请勿提交到代码仓库中！使用环境变量管理敏感信息。

笔记

不传 title 属性时，会自动使用默认标题。这是一条普通笔记。

折叠展开

点击查看项目架构详情

Alpha 项目采用 Astro + SolidJS 的前端架构，后端服务使用 Cloudflare Workers 部署。

构建工具：Astro 5.x
UI 框架：SolidJS
样式方案：Tailwind CSS 4 + DaisyUI
内容管理：MDX 文件
评论系统：Giscus
搜索：Pagefind

代码示例：

1
const stack = {
2
  framework: "Astro",
3
  ui: "SolidJS",
4
  css: "Tailwind CSS",
5
  hosting: "Vercel"
6
};

部署注意事项

构建前运行 astro check 检查类型错误
确保环境变量已配置（Vercel Dashboard）
部署后验证 Pagefind 搜索索引是否正常生成
检查 Giscus 评论是否能正常加载

列表

先记录项目背景和目标。
再说明技术选型和架构。
最后补充部署方式、结果和后续计划。

任务清单

配置 Alpha 站点信息
接入 Giscus 评论
整理基础分类
持续补充真实项目文档

后续

下一步可以逐篇补充真实项目，把这篇文章保留为写作样式参考。