最近在给AI心理测试网站增加博客功能，搜了很多种方案。
最后选择了Astro的headless CMS方案，因为它是完全静态化的非常适合我。
但是实际做的时候还是遇到了不少坑，因为我本身有一个静态网站， 博客只是静态网站的一个子目录。
好在跟AI一步一步沟通就解决了。
最后通过添加tailwind的preline库一步提升了博客的颜值！非常推荐大家用一用！
提示词：
你是一位顶尖的全栈开发者和 UI/UX 设计师，尤其擅长利用 Astro、Tailwind CSS 和 Preline UI 打造兼具性能与美学的 Web 应用。
请为我设计并生成一个现代化、SEO 优化且设计美观的个人博客项目。
核心技术栈：
Astro
Tailwind CSS
Preline UI
一、设计与美学要求 (UI/UX Focus):
整体风格：简洁、专业、留白充足，提供卓越的阅读体验。整体色调柔和，支持流畅切换的深色模式，并能自动适应用户系统偏好。
导航栏 (Header)：使用 Preline 设计一个悬浮、半透明的响应式导航栏，带有微妙的毛玻璃效果 (backdrop-blur)。当页面向下滚动时，导航栏背景变为不透明。
首页文章列表：采用 Preline 的卡片网格布局，卡片要有悬停放大效果，并清晰展示文章封面图、标题、摘要和发布日期。
文章详情页：
正文区域使用 Tailwind Typography (prose 类) 深度优化排版，确保代码块、引用、列表等元素样式精美。
在文章顶部，优雅地展示文章标题、作者、发布日期和预计阅读时间。
集成 Preline 的目录 (Table of Contents) 组件，在侧边栏或文章顶部，实现滚动监听高亮。
页脚 (Footer)：设计一个简洁的页脚，包含社交媒体链接图标和版权信息。
二、SEO 优化要求 (SEO Focus):
Sitemap & RSS：自动生成 sitemap.xml 和 rss.xml 文件，以便搜索引擎和订阅工具收录。
动态元数据 (Meta Tags)：
所有页面都必须有唯一的 <title> 和 <meta name="description">。
文章页面需要自动生成丰富的 Open Graph (用于社交分享) 和 Twitter Card 元数据，包含文章标题、描述和封面图。
规范链接 (Canonical URL)：在每个页面的 <head> 中自动生成 rel="canonical" 链接，以避免内容重复问题。
结构化数据 (Schema Markup)：为博客文章页面添加 JSON-LD 格式的结构化数据（例如 Article 或 BlogPosting），以增强搜索引擎的理解。
大家对了解自己的潜意识感兴趣的话，欢迎试试森林心理测试和罗夏墨迹测试。
最近在给AI心理测试网站增加博客功能，搜了很多种方案。
最后选择了Astro的headless CMS方案，因为它是完全静态化的非常适合我。
但是实际做的时候还是遇到了不少坑，因为我本身有一个静态网站， 博客只是静态网站的一个子目录。
好在跟AI一步一步沟通就解决了。
最后通过添加tailwind的preline库一步提升了博客的颜值！非常推荐大家用一用！
提示词：
大家对了解自己的潜意识感兴趣的话，欢迎试试森林心理测试和罗夏墨迹测试。