一款基于 Astro 构建的优雅响应式博客主题，融合了极简主义设计与现代化技术栈。
FicorAstro 是一个基于 Astro 框架开发的静态博客主题，专注于提供流畅的用户体验和优雅的视觉设计。主题采用了现代化的技术栈，支持多种评论系统、本地搜索、响应式设计等功能，适合个人博客、技术分享和内容创作。
- ✅ 简洁优雅的响应式设计
- ✅ 流畅的页面过渡动画
- ✅ 丝滑的阻尼滚动效果
- ✅ 响应式两列布局
- ✅ 动态顶部 Banner
- ✅ 文章阅读时间统计
- ✅ 字数统计
- ✅ 代码块语法高亮
- ✅ 图片懒加载
- ✅ 图片灯箱效果
- ✅ LivePhoto 支持
- ✅ LaTex 数学公式支持
- ✅ 赞赏功能
- ✅ 本地搜索
- ✅ 首页与分页
- ✅ 文章详情页
- ✅ 分类页面
- ✅ 标签页面
- ✅ 归档页面
- ✅ 动态页面
- ✅ 圈子功能
- ✅ 关于页面
- ✅ 留言板
- ✅ 友情链接
- ✅ Twikoo 评论支持
- ✅ Waline 评论支持
- ✅ 自动生成 Sitemap
- ✅ RSS 订阅支持
- ✅ 推荐文章功能
- ✅ 置顶文章功能
- ✅ 文章隐藏功能
- ✅ 侧边栏自定义展示
- ✅ DNS 预解析优化
- ✅ 内置 404 页面
使用以下命令之一创建项目：
# 使用 npm
npm create astro@latest -- --template panjinye/FicorAstro
# 使用 yarn
yarn create astro --template panjinye/FicorAstro
# 使用 pnpm
pnpm create astro@latest --template panjinye/FicorAstro
# 进入项目目录
cd astro-blog# 使用 npm
npm install
# 使用 yarn
yarn install
# 使用 pnpm
pnpm install# 使用 npm
npm run dev
# 使用 yarn
yarn dev
# 使用 pnpm
pnpm dev访问 http://localhost:4321 查看效果。
# 使用 npm
npm run build
# 使用 yarn
yarn build
# 使用 pnpm
pnpm build构建产物将生成在 dist 目录中。
# 使用 npm
npm run newpost "文章标题"
# 使用 yarn
yarn newpost "文章标题"
# 使用 pnpm
pnpm newpost "文章标题"FicorAstro 支持部署到任何静态网站托管服务，如：
- Vercel
- Cloudflare Pages
- GitHub Pages
- GitLab Pages
- Netlify
- 阿里云 OSS
- 腾讯云 COS
---
title: 文章标题
categories: 分类名称
tags:
- 标签1
- 标签2
id: 文章ID
date: 2024-01-01 12:00:00
updated: 2024-01-02 12:00:00
cover: "封面图URL（为空则使用随机内置封面）"
recommend: false # 是否推荐
Top: false # 是否置顶
hide: false # 是否隐藏
---
文章内容...编辑 src/page_data/Link.ts 文件：
export default {
api: "", // API 接口请求优先
data: [
{
name: "网站名称",
link: "网站链接",
avatar: "头像链接",
descr: "网站描述"
}
]
};编辑 src/page_data/Talking.ts 文件：
export default {
api: "", // API 接口请求优先
data: [
{
date: "2024-01-01 12:00:00",
tags: ["标签1", "标签2"],
content: "说说内容"
}
]
};编辑 src/page_data/Friends.ts 文件：
export default {
api: "", // API 接口请求优先
data: [
{
title: "文章标题",
auther: "作者",
date: "2024-01-01",
link: "文章链接",
content: "文章摘要"
}
]
};主要配置文件位于 src/config.ts，可根据需要修改以下配置：
export default {
Title: '博客标题',
Site: '博客域名',
Subtitle: '博客副标题',
Description: '博客描述',
Author: '作者名称',
Motto: '个人座右铭',
Avatar: '头像链接',
CreateTime: '2021-09-01' // 网站创建时间
};export default {
Theme: {
"--vh-main-color": "#01C4B6", // 主题颜色
"--vh-font-color": "#34495e", // 字体颜色
"--vh-aside-width": "318px", // 侧边栏宽度
"--vh-main-radius": "0.88rem", // 全局圆角
"--vh-main-max-width": "1458px" // 主体内容宽度
}
};export default {
Comment: {
// Twikoo 评论
Twikoo: {
enable: true,
envId: 'https://twikoo.linglingtu.com'
},
// Waline 评论
Waline: {
enable: false,
serverURL: ''
}
}
};.
├── public/ # 静态资源
├── script/ # 自定义脚本
├── src/
│ ├── components/ # 组件
│ ├── content/ # 内容文件
│ │ └── blog/ # 博客文章
│ ├── layouts/ # 布局组件
│ ├── page_data/ # 页面数据
│ ├── pages/ # 页面路由
│ ├── plugins/ # 插件
│ ├── scripts/ # 脚本
│ ├── styles/ # 样式
│ ├── type/ # 类型定义
│ ├── utils/ # 工具函数
│ ├── config.ts # 主配置文件
│ └── content.config.ts # 内容配置
├── astro.config.mjs # Astro 配置
├── tsconfig.json # TypeScript 配置
└── package.json # 依赖管理
将 Hexo 博客的 source/_posts/ 目录下的文章文件，复制到 Astro 项目的 src/content/blog/ 目录下即可。然后根据需要修改 src/config.ts 配置文件来自定义博客。
FicorAstro 在 Lighthouse 测试中表现优秀：
- 性能：95+
- 可访问性：90+
- 最佳实践：95+
- SEO：90+
欢迎提交 Issue 和 Pull Request！
本项目采用 MIT 许可证，详见 LICENSE 文件。
- 官方网站：https://linglingtu.com
- 邮箱：ficor@qq.com
如果您喜欢这个主题，请给它一个 Star ⭐，这是对我最大的鼓励！
FicorAstro - 当极简主义遇上工程之美