一个即用型、专注于 SEO 和无障碍访问的 Astro 入门模板。它以现代 Web 标准和 WCAG 指南为基础构建，为创建包容性网站提供了坚实的基础。功能包括 Tailwind CSS 4 集成、全面的组件库、颜色对比度检查器，以及采用 Atkinson Hyperlegible 字体以提高可读性的排版。包含带有社交分享的动态博客/作品集页面，并支持完整的 MDX。
（无障碍）功能
- Astro 5.7.5+
- 支持 Tailwind CSS 4
- TypeScript 集成，带有路径别名，便于导入
- Prettier 集成，支持 prettier-plugin-astro 和 prettier-plugin-tailwind
- ESLint 集成，为 eslint-plugin-jsx-a11y 提供严格的无障碍设置
- 支持 Markdown 和 MDX，提供全面的示例和组件
- 现代 OKLCH 颜色系统，可根据主/次颜色自动生成调色板
- Atkinson Hyperlegible 字体，提高可读性和无障碍性
- 通过 astro-icon 使用 Lucide 图标集，提供一致友好的图标
- 出色的 Lighthouse/PageSpeed 分数
- 可访问的地标，如 header、main、footer、section 和 nav
- 适用于深色和浅色背景的轮廓焦点指示器
- 多个 aria 属性，为屏幕阅读器用户提供更好的体验
- [...page].astro 和 [post].astro 演示了动态路由的使用，并提供了一个带有面包屑和分页的基本博客
- 404.astro 提供了一个自定义 404 错误页面，您可以根据需要进行调整
- Header.astro 组件，具有优化的无障碍性和设计
- Footer.astro 组件，包含信息性内容和链接
- SkipLinks.astro 组件，可跳至主菜单或主要内容
- Navigation.astro 组件，具有键盘可访问（下拉式）导航和高亮菜单项选项
- ResponsiveToggle.astro 组件，具有无障碍响应式切换功能
- DarkMode.astro 组件切换，带有无障碍按钮和用户系统偏好颜色方案设置
- SiteMeta.astro SEO 组件，用于在不同页面上设置自定义元数据
- sr-only 工具类，用于屏幕阅读器专用文本内容（视觉上隐藏文本）
- prefers-reduced-motion 为开启此偏好的用户禁用动画
- 组件包括 ColorContrast.astro、BlockQuote.astro、BreakoutImage.astro、ExternalLink.astro、Logo.astro、SocialShares.astro 和 PageHeader.astro
- 博客和作品集页面，包含特色图片、作者详情、社交分享和突破性图片
- 无障碍声明模板页面
- 颜色对比度检查器交互页面
- 悬停、打开和关闭状态下的流畅微交互和动画（尊重减弱动画偏好）
- 全面的 SCSS 实用类
- 使用逻辑属性和自定义属性的 CSS
- 带有清晰焦点状态的无障碍按钮和超链接样式
- 带样式的 <kbd> 元素，用于键盘快捷键文档
快速开始
- 克隆仓库或用作模板
- npm install 安装依赖
- npm run dev 在 localhost:4321 启动本地开发服务器
- npm run build 构建生产站点到 ./dist/
- npm run preview 在部署前在本地预览您的构建
阅读文档了解更多 🚀
