增强博客布局示例

欢迎体验增强版博客布局

这篇文章展示了我们全新的经典博客布局增强版，它在保持简洁优雅的同时，添加了更多实用的功能。

新增功能特性

1. 丰富的元信息显示

• 作者信息：显示文章作者
• 发布日期：格式化的发布时间
• 阅读时间：自动计算或手动设置
• 分类标签：文章分类和标签系统

2. 交互体验优化

• 阅读进度条：页面顶部显示阅读进度
• 返回顶部按钮：滚动时自动显示
• 响应式设计：适配各种屏幕尺寸

3. 视觉设计提升

• 优化的图片显示：固定高度，等比裁剪
• 现代化的标签样式：圆润的标签设计
• 清晰的信息层次：合理的间距和排版

技术实现

这个增强版布局使用了以下技术：

// 扩展的博客schema
schema: z.object({
  title: z.string(),
  description: z.string(),
  pubDate: z.coerce.date(),
  updatedDate: z.coerce.date().optional(),
  heroImage: z.string().optional(),
  tags: z.array(z.string()).optional(),
  author: z.string().optional(),
  readingTime: z.number().optional(),
  category: z.string().optional(),
})

自动阅读时间计算

系统会自动计算文章的预估阅读时间，基于平均每分钟200字的阅读速度。当然，你也可以在frontmatter中手动指定：

---
readingTime: 5
---

响应式标签系统

标签不仅仅是装饰，它们采用了现代化的设计：

• 圆润的边框
• 悬停动画效果
• 移动端优化的尺寸

使用指南

要使用这个增强版布局，只需在你的markdown文件的frontmatter中添加相应字段：

---
title: '你的文章标题'
description: '文章描述'
pubDate: 'Dec 15 2023'
heroImage: '/your-image.jpg'
tags: ['标签1', '标签2', '标签3']
author: '作者姓名'
category: '文章分类'
readingTime: 8
---

总结

这个增强版的经典博客布局在保持原有简洁风格的基础上，添加了更多实用功能，提升了用户的阅读体验。无论是内容创作者还是读者，都能从这些改进中受益。

欢迎尝试这个新布局，并给我们反馈您的使用体验！