Astro作品集

xirf-portofolio — Astro 作品集模板

作者 xirf

基于 Astro 与 UnoCSS 的极简个人博客与作品集模板，灵感源自 antfu.me。

打开源站下载源码 ZIP

看看你的网站会是什么样

浏览真实页面截图，比较内容排版与手机效果。点击下方缩略图切换，放大查看整页细节。

3 个预览视图

桌面端首页1 / 3

访问演示网站在新标签页打开

桌面端截图

演示站首页的真实桌面布局。

全部页面与视图 3

截图用于了解视觉与布局，交互效果请以实际项目为准。

采集于 2026-09-27查看来源

值得关注的模板亮点

从已有项目资料中，快速了解它的特点。

基于 Astro 构建，支持静态生成与轻量交互

使用 UnoCSS 提供原子化样式，便于定制主题

内置浅色与深色模式，并配有对应截图预览

内容通过 src/content/blog 管理，结构直观

灵感源自 antfu.me，代码风格简洁，适合学习参考

采用 MIT 许可证，可自由修改与商用（注意内容协议）

模板详细介绍

xirf-portofolio 是一套以 Astro 和 UnoCSS 构建的个人博客与作品集模板，整体风格简洁干净，适合用来展示个人项目、写作内容或作为技术简历的补充页面。它的信息架构很直接：博客文章与作品展示都通过内容目录管理，视觉上则依赖 UnoCSS 的原子化样式，让页面保持轻量与统一。如果你熟悉 Astro 的内容集合和 UnoCSS 的类名写法，上手会非常快。

模板的代码结构清晰，注释和文档都指向 Astro 与 UnoCSS 的官方指南，方便二次开发。它支持浅色与深色模式，并在截图里分别展示了两种外观。项目作者明确表示未来会引入 CMS，因此目前的内容管理仍以本地文件为主，适合个人维护，不适合需要多人协作或频繁更新内容的团队场景。

需要注意的是，这个仓库并非从零设计，而是从 VitePress 移植到 Astro，灵感来自 antfu.me。虽然采用 MIT 许可证，但博客文章和部分公共目录下的内容使用 CC BY 4.0 协议，外部图片和视频链接仍归原作者所有。上线前请务必替换所有示例内容与媒体资源，并确认你对这些素材拥有合法使用权。

Astro作品集

适合你的项目吗？

适用场景

个人开发者搭建作品集网站
技术博主发布文章与项目更新
作为 Astro 学习项目，研究内容集合与样式方案
快速搭建一个带明暗主题的极简个人主页

适合人群

熟悉 Astro 和 UnoCSS 的开发者
偏好极简设计、不需要复杂后台的个人网站
希望基于现有代码二次开发并保留学习价值的人
能接受手动管理内容文件的独立开发者

上手与定制指南

结合仓库当前版本的说明，按下面的资料检查内容、配置与运行要求。

1
需要 Node.js 和 npm（或 pnpm/yarn）。
2
克隆仓库后安装依赖，运行开发服务器即可在 localhost:4321 预览。
3
修改内容时需关注 src/content/blog 下的 Markdown 文件，以及 public 目录中的媒体资源。
4
部署前请替换所有示例内容与外部媒体链接，并检查许可证合规性。

查看仓库使用说明

授权与来源资料

使用条件与限制

有额外使用条件

代码MIT可免费使用修改，但博客内容采用CC BY 4.0需署名，外部媒体不在许可范围内。

使用时需要遵守

保留原作者版权声明和 MIT 许可证声明。
保留MIT版权与许可声明
使用src/content/blog内容时按CC BY 4.0署名
使用外部媒体需自行取得授权

额外费用与待核对事项

外部图片视频权利归属未确认

查看原文依据

All content in the `src/content/blog` and some in `public` directory is licensed under the [Creative Commons Attribution 4.0 International License]
README 原文