Skip to content

Ficorcc/FicorWing

BranchesTags

Repository files navigation

Wing Blog (Astro)

一个基于 Astro 框架构建的现代化、高性能静态博客主题，名为 "Wing"，意为 "月光下的过客"。

Wing Blog Screenshot

📋 项目概述

Wing Blog 是一个轻量级、高性能的静态博客主题，功能完整、结构清晰的 Astro 博客模板，适合用于搭建个人博客网站。 采用现代化的设计理念和技术栈，提供了丰富的功能和灵活的配置选项。它专为喜欢简洁、优雅设计的博主打造，同时保持了良好的扩展性和可定制性。它具有现代化的设计风格、良好的性能和可扩展性，可以根据需要进行自定义配置和功能扩展。

🛠️ 技术栈

  • 框架: Astro 5.16.9
  • 内容格式: Markdown + MDX
  • 样式: Tailwind CSS 4.1.18
  • 构建工具: Vite
  • 类型检查: TypeScript
  • RSS 生成: @astrojs/rss
  • 站点地图: @astrojs/sitemap
  • 部署支持: @astrojs/vercel
  • 评论系统: Artalk + Giscus

✨ 核心功能

📝 博客功能

  • 日期路由: 按发布日期生成 {yyyymmdd}.html 格式的URL，无需 /blog/ 前缀
  • 文章列表: 支持分页显示（默认每页5篇）
  • 阅读时间: 基于 reading-time 自动计算并显示阅读时长
  • RSS & Sitemap: 自动生成，便于搜索引擎收录和订阅
  • Markdown/MDX 支持: 支持两种格式的文章编写，提供丰富的内容创作能力

🎨 设计与体验

  • 现代化 UI: 采用简洁、优雅的设计风格
  • 响应式设计: 完美适配各种设备尺寸
  • 深色/浅色主题: 自动切换，支持用户点击头像手动切换并持久化
  • 视图过渡: 共享元素动画（标题/卡片/日期），流畅的页面切换效果
  • Tailwind CSS 4: 利用最新的 Tailwind CSS 4 特性，包括动画变量

💬 互动功能

  • 评论系统: 支持 Artalk（默认）和 Giscus 两种评论系统，可自由切换
  • 评论开关: 支持在文章级别控制评论开关
  • 社交分享: 内置社交网络链接配置

📦 内容管理

  • 集中式配置: 所有站点配置集中在 src/config.ts 中，便于管理和修改
  • 灵活的导航: 支持自定义导航菜单
  • 文章元数据: 支持丰富的文章元数据，包括标题、描述、发布日期、更新日期、封面图片等

页面结构

  • 首页：最新文章列表
  • 归档页：所有文章按时间排序
  • 友链页：展示友情链接
  • 友圈页：社交网络功能
  • 关于页：博主信息
  • RSS 订阅：提供文章订阅功能

🚀 快速开始

安装依赖

npm install

开发模式

npm run dev

访问 http://localhost:4321 查看效果

构建生产版本

npm run build

预览生产版本

npm run preview

🗂️ 项目结构

Wing/
├── src/
│   ├── assets/          # 静态资源文件（图片、图标等）
│   ├── components/      # 可复用组件
│   │   ├── ArtalkComment.astro   # Artalk 评论组件
│   │   ├── BaseHead.astro        # 页面头部基础组件
│   │   ├── Footer.astro          # 页脚组件
│   │   ├── FormattedDate.astro   # 格式化日期组件
│   │   ├── GiscusComment.astro   # Giscus 评论组件
│   │   ├── Header.astro          # 头部导航组件
│   │   ├── HeaderLink.astro      # 导航链接组件
│   │   ├── Pagination.astro      # 分页组件
│   │   ├── PostsLists.astro      # 文章列表组件
│   │   ├── SkillsScroll.astro    # 技能滚动组件
│   │   └── comment.astro         # 评论系统入口组件
│   ├── config/          # 配置文件
│   │   └── links.ts     # 友链配置
│   ├── content/         # 博客文章内容
│   │   └── blog/        # Markdown/MDX 文章
│   ├── layouts/         # 页面布局
│   │   ├── BaseLayout.astro      # 基础布局
│   │   └── PostLayout.astro      # 文章布局
│   ├── pages/           # 页面组件
│   │   ├── blog/        # 博客相关页面
│   │   ├── page/        # 分页相关页面
│   │   ├── [slug].astro          # 日期路由页面
│   │   ├── about.astro           # 关于页面
│   │   ├── archive.astro         # 归档页面
│   │   ├── blog.astro            # 博客列表页面
│   │   ├── circle.astro          # 友圈页面
│   │   ├── index.astro           # 首页
│   │   ├── links.astro           # 友链页面
│   │   └── rss.xml.js            # RSS 生成页面
│   ├── styles/          # 样式文件
│   │   ├── artalk.css            # Artalk 评论样式
│   │   └── global.css            # 全局样式
│   ├── utils/           # 工具函数
│   │   ├── artalk.js             # Artalk 配置
│   │   └── dataFormatte.ts       # 数据格式化工具
│   ├── config.ts                 # 站点主配置
│   └── content.config.ts         # 内容配置
├── public/              # 公共静态资源
│   ├── fonts/           # 字体文件
│   ├── artalk.js        # Artalk 脚本
│   └── favicon.svg      # 网站图标
├── .astro/              # Astro 生成的文件（自动生成，无需修改）
├── dist/                # 构建输出目录（自动生成）
├── astro.config.mjs     # Astro 配置
├── package.json         # 项目依赖和脚本
├── pnpm-lock.yaml       # pnpm 锁文件
└── tsconfig.json        # TypeScript 配置

⚙️ 配置说明

核心配置文件

  • src/config.ts : 站点配置、导航菜单、分页设置、社交网络链接等
  • src/content.config.ts : 博客文章元数据 schema 定义
  • astro.config.mjs : Astro 框架配置
  • package.json : 项目依赖和脚本

站点配置

所有站点配置集中在 src/config.ts 文件中，主要包括：

  • 站点基本信息: 标题、描述、URL、头像、作者等
  • 导航菜单: 自定义导航链接和图标
  • 分页配置: 每页显示的文章数量
  • 社交网络: 配置各种社交平台链接
  • 评论系统: Artalk 和 Giscus 的配置

文章配置

每篇文章需要在头部添加元数据，示例：

title: "文章标题"
description: "文章描述"
pubDate: "2023-01-01"
updatedDate: "2023-01-02"  # 可选
heroImage: "/images/hero.jpg"  # 可选

评论系统配置

在 src/config.ts 中可以配置默认使用的评论系统，目前支持：

  1. Artalk: 轻量级、自托管的评论系统
  2. Giscus: 基于 GitHub Discussions 的评论系统

📝 内容管理

编写文章

文章存储在 src/content/blog/ 目录下，支持 .md 和 .mdx 格式。

文章路由

文章默认使用日期路由，格式为 {yyyymmdd}.html，例如：

  • 发布日期为 2023-01-01 的文章，URL 为 /20230101.html

分类与标签

目前主题支持通过文件夹结构进行简单的分类管理，文章会根据其所在的文件夹自动分类。

🎨 主题定制

样式定制

使用 Tailwind CSS 4，可以通过修改 tailwind.config.js（如需要）和组件中的类名来定制样式。

颜色方案

支持通过 CSS 变量定制主题颜色，主要颜色定义在 src/styles/global.css 文件中。

组件定制

可以通过修改 src/components/ 目录下的组件来定制页面元素和功能。

🚀 部署

Vercel 部署

项目已配置 @astrojs/vercel 集成，可以直接部署到 Vercel：

  1. 将代码推送到 GitHub 仓库
  2. 在 Vercel 中导入该仓库
  3. 按照提示完成部署配置
  4. 部署完成后，访问生成的域名即可

其他平台部署

可以使用 npm run build 构建生产版本，然后将 dist/ 目录下的文件部署到任何静态文件服务器上。

📈 性能优化

  • 静态生成: 所有页面都在构建时生成，提供最快的访问速度
  • 按需加载: 组件和资源按需加载，减少初始加载时间
  • 图片优化: 支持自动图片优化
  • CSS 优化: Tailwind CSS 自动移除未使用的样式

🤝 贡献

欢迎提交 Issue 和 Pull Request 来帮助改进这个项目！

贡献指南

  1. Fork 项目
  2. 创建功能分支 (git checkout -b feature/AmazingFeature)
  3. 提交更改 (git commit -m 'Add some AmazingFeature')
  4. 推送到分支 (git push origin feature/AmazingFeature)
  5. 开启 Pull Request

📄 许可证

MIT License - 查看 LICENSE 文件了解详情

🙏 致谢

  • Astro - 现代化的静态站点生成器
  • Tailwind CSS - 实用优先的 CSS 框架
  • Artalk - 轻量级评论系统
  • Giscus - 基于 GitHub Discussions 的评论系统
  • Wing - Wing主题作者

📞 联系方式

如有问题或建议，欢迎通过以下方式联系：

Wing Blog - 月光下的过客，记录生活的点点滴滴 📝

About

一个基于Wing魔改的清爽的Astro主题

ficor-wing.vercel.app

Resources

Readme
Activity

Stars

0 stars

Watchers

0 watching

Forks

1 fork
Report repository

Releases

No releases published

Packages

 
 
 

Contributors

Languages