vhAstro-Theme 开源响应式博客主题源码

资源介绍

vhAstro-Theme 是一款基于 Astro 构建的开源响应式博客主题，界面简约，采用左右卡片与内容区布局，可用于技术博客、个人文章和生活记录。项目使用 TypeScript 配置站点，并通过 Astro 构建可部署的静态页面。

功能特色

• 响应式卡片布局：支持顶部 Banner、两列内容布局、侧栏按需展示，以及颜色、圆角和页面宽度配置。
• 交互体验：页面动画与过渡、滚动阻尼、图片懒加载、灯箱和 LivePhoto 展示。
• 文章展示：支持 Markdown 内容、代码块与语法高亮、LaTeX 数学公式、阅读时间和字数统计。
• 内容管理：支持分类、标签、归档、本地搜索、公告、推荐文章与置顶文章。
• 多种页面：动态、圈子、关于、留言板与友情链接，可维护自己的页面数据。
• 可选评论：提供 Twikoo 与 Waline 配置，使用时需填写自己的评论服务地址。
• 站点输出：提供 404 页面、Sitemap 和 RSS，便于静态发布和内容订阅。

主题默认不加载站外统计、广告或示例收款码。评论、音乐和圈子等依赖外部服务的功能需要站长按实际服务自行配置。截图为主题效果示例，内容与展示由自己的文章和配置决定。

开发环境

本项目 package.json 的版本标记为 0.0.1，Astro 依赖为 ^5.13.10。建议使用 Node.js 22 LTS 与 pnpm，并按包内锁文件安装依赖。

安装与配置

1. 解压并进入包含 package.json 的项目根目录，执行 pnpm install 安装依赖。
2. 编辑 src/config.ts，填写自己的站点标题、Site 域名、描述、作者资料、导航、首页横幅和主题设置。
3. 执行 pnpm newpost "文章标题" 创建文章，并在 src/content/blog/ 目录中编辑 Markdown 内容；根据文章的 frontmatter 设置分类、标签、推荐和置顶等属性。
4. 在 src/page_data/ 中维护友情链接、动态与圈子页面数据；使用接口时填写自己的地址和配置。
5. 执行 pnpm dev 查看本地开发页面，确认自己的文章、图片、导航和可选服务配置。
6. 执行 pnpm build 构建静态页面，将生成的 dist/ 部署到自己的静态服务器，或按所选平台配置 Vercel、Netlify、Cloudflare Pages、GitHub Pages 等托管方式。

源码包不包含 Node.js 依赖，需要自行安装后构建。迁移旧博客时，应根据本包文章目录与 frontmatter 结构核对内容、图片地址和页面链接。

开源许可

项目作者为韩小韩（uxiaohan），使用 MIT 许可证；完整 LICENSE 与原版权声明随源码保留。

更多免费源码、AI资源和实用文章，欢迎访问烛九资源网。