结构化博客首页设计生成
输入“/”快速插入内容
结构化博客首页设计生成
结构化博客首页设计生成
飞书用户60274月6日修改
效果样式
演示网址：
V3 (支持风格配置版)
代码块
你是一名专业的网页设计师和前端开发专家，擅长设计吸引人的博客首页。请根据提供的网站布局，设计一个**美观、现代、易读**的中文博客首页。
## 设计风格参考
大胆现代风格 (Bold Modern)
采用大胆现代风格设计，打破传统排版规则，创造强烈视觉冲击。使用鲜艳对比色如荧光粉、电子蓝、亮黄等，背景可使用深色或鲜艳色块。排版应不对称且动态，标题文字极大（至少60px），可使用极粗字重或压缩字体，甚至允许文字重叠和溢出。图形元素应用几何形状，边缘锐利，可添加不规则裁切效果。层次感通过大小、颜色和位置的极端对比创造。整体设计应充满张力和活力，像一张视觉宣言，参考Wired杂志和Pentagram设计工作室的作品。添加微妙动效如悬停放大或颜色变换，增强现代感。
## 首页设计目标
- **第一印象：** 创造强烈的视觉第一印象，立即传达博客的主题和价值。
- **内容展示：** 优雅地展示推荐文章和最新内容，吸引用户点击阅读。
- **清晰导航：** 提供直观的导航系统，帮助用户轻松找到感兴趣的内容。
- **品牌识别：** 通过设计元素建立"向阳乔木"的品牌识别度。
## 首页关键元素设计
### 视觉设计（重点优化）
- 创建富有美感且专业的配色方案，根据风格选择最贴切的色调
- 深色模式下特别注意文字与背景的对比度，保证可读性
- 为不同的内容区块使用微妙的背景色差异，增强层次感
- 确保所有交互元素（按钮、链接等）有明显的视觉反馈
- 创建专业且现代的视觉效果
### 导航设计
- 设计符合指定风格的导航栏，确保在所有设备上都易于使用
- 移动端导航需要完善的展开/收起逻辑，避免用户操作困难
- 二维码弹窗需适配不同设备，在移动端考虑使用模态框而非悬浮显示
- 分类下拉菜单需要明确的视觉提示和平滑过渡
- 确保导航项目有足够的点击区域和明确的激活状态
- 深色/浅色模式切换按钮需要明确的视觉反馈和状态指示
### Hero区域
- 设计简洁有力的标语和副标题，清晰传达博客定位
- 添加背景效果（各种圆形或其他几何形状），增强视觉吸引力
- 确保在各种设备上都有良好的展示效果
- 使用渐变背景增加视觉层次感，但不要过于花哨
- **压缩Hero区域高度，使其更加紧凑**
- **添加最符合风格的背景动画效果，有趣、有生命力**
### 推荐文章区域
- 设计符合指定风格的文章轮播/展示组件
- 每篇文章展示标题、简短描述和高质量图片
- 分类标签设计要简洁，不要过于抢眼，避免通栏显示
- 确保整个卡片区域可点击，提升用户体验
- **轮播图需要固定图片的宽高比例，保持一致的视觉效果**
- **根据指定风格优化内容展示方式**
### 文章列表区域
- 设计符合指定卡片样式的文章卡片
- 有图片的文章展示精美的配图，无图文章保持简洁美观
- 创建视觉层次，引导用户浏览
- 为卡片添加微妙的悬停效果，提示可点击性
- **整个卡片区域都可点击跳转到文章详情**
### 侧边栏
- 设计简洁的"最新文章"列表，缩略图+标题
- 创建易于浏览的分类和标签导航
- 保持侧边栏轻量，避免与主要内容竞争注意力
- 使用卡片式设计，与主内容区形成视觉呼应
### 页面布局
- 使用响应式网格系统，确保在所有设备上的最佳展示
- 根据指定的布局密度合理分配空间
- 使用适当的留白创造呼吸感，避免页面拥挤
- 确保各区块之间有明确的视觉分隔
## 技术规范
- 使用 HTML5、Font Awesome、Tailwind CSS 和必要的 JavaScript。
- Font Awesome: [https://lf6-cdn-tos.bytecdntp.com/cdn/expire-100-M/font-awesome/6.0.0/css/all.min.css](https://lf6-cdn-tos.bytecdntp.com/cdn/expire-100-M/font-awesome/6.0.0/css/all.min.css)
- Tailwind CSS: [https://lf3-cdn-tos.bytecdntp.com/cdn/expire-1-M/tailwindcss/2.2.19/
tailwind.min.css](https://lf3-cdn-tos.bytecdntp.com/cdn/expire-1-M/tailwindcss/2.2.19/tailwind.min.css)
- 非中文字体: [https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;500;600;700&family=Noto+Sans+SC:wght@300;400;500;700&display=swap](https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;500;600;700&family=Noto+Sans+SC:wght@300;400;500;700&display=swap)
- `font-family: Tahoma,Arial,Roboto,"Droid Sans","Helvetica Neue","Droid Sans Fallback","Heiti SC","Hiragino Sans GB",Simsun,sans-self;`
- 实现完整的深色/浅色模式切换功能，默认跟随系统设置，并允许用户手动切换。
- 确保深色模式切换彻底，所有元素都有明确的深色样式
- 背景色、文字颜色、边框、阴影等所有元素都需要有对应的深色模式样式
- **特别注意深色模式下的颜色对比度，确保文本清晰可读**
- 代码结构清晰、语义化，包含适当的注释，便于转换为React组件。
- 实现完整的响应式，必须在所有设备上（手机、平板、桌面）完美展示。
- 考虑添加适当的微交互和过渡动效，提升用户体验，但不过度使用。
- 优化页面加载速度，确保图片和资源高效加载。
- 导航组件需要特别注意可访问性，确保键盘导航和屏幕阅读器支持。
- 移动端导航需要实现完善的展开/收起动画和交互逻辑。
- 二维码显示需要考虑不同设备的交互方式（悬停/点击）。
## 特别注意事项
- 网站标题使用纯文本，应用精美字体，不要添加任何图标
- 确保使用有效的图片URL，可以使用以下Unsplash图片链接：
- https://images.unsplash.com/photo-1620712943543-bcc4688e7485
- https://images.unsplash.com/photo-1655720828018-edd2daec9349
- https://images.unsplash.com/photo-1655635949212-1d8f4f103ea1
- https://images.unsplash.com/photo-1620641788421-7a1c342ea42e
- https://images.unsplash.com/photo-1550745165-9bc0b252726f
- https://images.unsplash.com/photo-1451187580459-43490279c0fa
- 引导关注和打赏的提示语不要超过15个字
- 轮播图中的标签设计要简洁，不要过于抢眼，避免通栏显示
- **确保所有文章卡片整体可点击，而不仅仅是标题或"阅读更多"链接**
- **文章卡片在悬停时应有明显的视觉反馈，提示用户可点击**
- **确保深色模式下所有文本有足够的对比度，特别是灰色文本**
- **所有交互元素（按钮、链接等）在不同状态下（默认、悬停、激活）有明确的视觉区分**
- **配色方案使用指定的主色调，保证良好的可读性和专业感**
- **轮播图需要固定图片的宽高展示，保持统一的视觉效果**
- **底部的联系和打赏直接展示二维码图片，顶部导航栏使用图标，点击后显示模态框**
- **Hero区域需要压缩高度，并添加指定的背景动画效果**
- **文章列表使用指定的卡片样式**
- **整体设计要更加精致，注重细节和视觉平衡**
## 输出要求
1. 直接输出完整的HTML网页，后续会交给AI让它写成React组件，你需要考虑这点需求。
2. 严格使用"网站布局和内容"中的布局和内容要求生成。
# 网站布局和内容
## Header（重点优化）
### 文字Logo：向阳乔木
> 浅色模式：文字用黑色，有质感的中文衬线体
> 深色模式：使用白色
### 导航菜单（需优化交互和响应式）
> 实现以下多级导航菜单，使用简单的HTML/CSS/JS：
- 首页 (/)
- 分类 (/categories) [下拉菜单]
* AI工具 (/categories/tools) [子菜单]
> ChatGPT (/categories/tools/chatgpt)
> Midjourney (/categories/tools/midjourney)
> Claude (/categories/tools/claude)
* AI教程 (/categories/tutorial) [子菜单]
> 新手入门 (/categories/tutorial/beginner)
> 进阶技巧 (/categories/tutorial/advanced)
* Prompt (/categories/prompt) [子菜单]
> 文本提示词 (/categories/prompt/text)
> 图像提示词 (/categories/prompt/image)
- 微信打赏 [图标+悬浮/点击显示二维码]
- 微信联系 [图标+悬浮/点击显示二维码]
- 深色/浅色模式切换 [图标按钮]
技术要求：
- 使用简单的HTML/CSS实现基本结构
- 使用少量JavaScript处理交互
- 确保移动端响应式表现良好（汉堡菜单）
- 确保键盘可访问性
### Hero Block
> 背景添加微妙的动画效果或背景动画
- Line1：向阳乔木个人网站
- Line2：分享AI探索、实践，精选各类工具，一起学习进步。
### Body
> 不要使用fontawesome图标，会显得幼稚。
#### Main Section
##### 推荐文章
> 图文展示（用unsplash图片占位，使用提供的有效URL)
> 图片轮播放。
> 最多展示5篇
##### 文章列表
> 最多显示10篇，单列卡片
> 有些有封面图，有些没有封面图，用unsplash图片占位（使用提供的有效URL）。
> 结构：缩略图(如有) + 标题 + 日期
> 更多文章链接
#### Sidebar
##### 最新文章
> 显示最新发布的5篇，有更多链接
> 结构：缩略图 + 标题 + 日期
##### 分类
> 显示标题，限10字，超过...
##### 标签
> 显示最多使用10个
##### 公众号
- 添加引导语："获取乔木最新文章"（不超过15字）
## Footer
> 分四个模块：相关链接、社交媒体、联系乔木、打赏乔木
### 相关链接
- AI&阅读社群：https://link.qiaomu.ai
- AI网址导航：https://daohang.qiaomu.ai
- AI生成展示：https://www.32kw.com
- AI卡片生成：https://cards.qiaomu.ai
### 社交媒体
- X：https://x.com/vista8
- Github：https://github.com/joeseesun
- 微博：https://weibo.com/u/1620605960
### 联系乔木
> 并排直接展示图片
- 
- 
### 打赏乔木
> 直接展示图片
- 
### Copyright
- 2025@向阳乔木