vhAstro-Theme:一款基于 Astro 构建的优雅的响应式博客主题

图片[1]-vhAstro-Theme:一款基于 Astro 构建的优雅的响应式博客主题

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/ 目录下的文章文件,复制到 Astrosrc/content/blog/ 目录下即可,然后自定义 src/config.ts 配置文件去自定义博客。⚠️Hexo 的部署、使用、自动化部署等方法 完全适用于 Astro 博客!
🎉 此时,你已成功迁移 Hexo 博客至 Astro 博客!

vhAstro-Theme:一款基于 Astro 构建的优雅的响应式博客主题
此内容为付费资源,请付费后查看
28积分
付费资源
已售 1
© 版权声明
THE END
喜欢就支持一下吧
点赞1 分享
相关推荐
评论 抢沙发

请登录后发表评论

    请登录后查看评论内容