![图片[1]-vhAstro-Theme:一款基于 Astro 构建的优雅的响应式博客主题](https://www.mohe-sc.com/wp-content/uploads/2025/04/vhAstro-Theme:一款基于-Astro-构建的优雅的响应式博客主题-1024x576.jpg)
Astro 为基础开发的 vhAstro-Theme 主题模版,是一款优雅的响应式博客主题,它具有简洁的设计、流畅的动画和页面过渡。
Astro 活跃的社区支持、广泛的现代框架兼容性、高效的性能优化、优秀的开发体验以及原生 SEO 优化,支持 Markdown/MDX 编写内容,且允许开发者混合使用 React、Vue、Svelte 等主流框架的组件,是我心目中最适合构建博客这样的以内容驱动的网站的 Web 框架。
从 Z-Blog 到 Emlog,从 Typecho 到 Hexo,从动态博客到静态博客,作为一个前端,我深入了解了多种 SSG 工具,如 Hexo、Vitepress、Hugo 等,并最终锁定了 Astro 作为重构博客的选择。
功能特性
- 简洁的响应式设计
- 流畅的动画和页面过渡
- 丝滑的阻尼滚动效果
- 顶部Banner
- 两列布局
- 阅读时间
- 字数统计
- 代码块
- 语法高亮
- 图片懒加载
- 图片灯箱
- LivePhoto
- LaTex 数学公式
- 赞赏功能
- 评论 – 内置【Twikoo、Waline】
- 本地搜索
- 公告
- 标签
- 分类
- 归档
- 动态
- 圈子
- 关于
- 留言板
- 友情链接
- 推荐文章
- 置顶文章
- 谷歌广告
- 侧边栏选择性展示
- 内置 404 页面
- Sitemap 支持
- RSS 支持
- 活跃的社区支持
- 广泛的现代框架兼容性
- 高效的性能优化
- 优秀的开发体验
使用方法
使用 Github 模板
- 使用此模板 生成新仓库或 Fork 此仓库
- 进行本地开发,Clone 新的仓库,执行
pnpm install
以安装依赖 - 若未安装 pnpm,执行
npm install -g pnpm
- 通过配置文件
src/config.ts
自定义博客 - 执行 pnpm newpost ‘文章标题’ 创建新文章,并在 src/content/posts/ 目录中编辑
- 参考官方指南将博客部署至 Vercel, Netlify,Cloudflare Pages, GitHub Pages 等
Cloudflare Pages 自动部署
使用命令拉取模板
# 使用 pnpm
pnpm create astro@latest --template uxiaohan/vhAstro-Theme astro-blog
# 或者 yarn
yarn create astro --template uxiaohan/vhAstro-Theme astro-blog
# 或者 npm
npm create astro@latest -- --template uxiaohan/vhAstro-Theme astro-blog
# 进入项目目录
cd astro-blog
本地开发
# 安装依赖
pnpm install
# 本地开发
pnpm dev
# 构建静态文件
pnpm build
# 创建新文章
pnpm newpost '文章标题'
Hexo 迁移 Astro 方法
将
Hexo
博客的src/_posts/
目录下的文章文件,复制到Astro
的src/content/blog/
目录下即可,然后自定义src/config.ts
配置文件去自定义博客。⚠️Hexo
的部署、使用、自动化部署等方法 完全适用于Astro
博客!
🎉 此时,你已成功迁移 Hexo 博客至 Astro 博客!
© 版权声明
文章版权归作者所有,未经允许请勿转载。
THE END
请登录后查看评论内容