2.9 KiB
2.9 KiB
🍥Fuwari
基于 Astro 开发的静态博客模板。
✨ 功能特性
- 基于 Astro 和 Tailwind CSS 开发
- 流畅的动画和页面过渡
- 亮色 / 暗色模式
- 自定义主题色和横幅图片
- 响应式设计
- 评论
- 搜索
- 文内目录
👀 要求
- Node.js <= 22
- pnpm <= 9
🚀 使用方法 1
使用 create-fuwari 在本地初始化项目。
# npm
npm create fuwari@latest
# yarn
yarn create fuwari
# pnpm
pnpm create fuwari@latest
# bun
bun create fuwari@latest
# deno
deno run -A npm:create-fuwari@latest
- 通过配置文件
src/config.ts自定义博客 - 执行
pnpm new-post <filename>创建新文章,并在src/content/posts/目录中编辑 - 参考官方指南将博客部署至 Vercel, Netlify, GitHub Pages 等;部署前需编辑
astro.config.mjs中的站点设置。
🚀 使用方法 2
- 使用此模板生成新仓库或 Fork 此仓库
- 进行本地开发,Clone 新的仓库,执行
pnpm install和pnpm add sharp以安装依赖- 若未安装 pnpm,执行
npm install -g pnpm
- 若未安装 pnpm,执行
- 通过配置文件
src/config.ts自定义博客 - 执行
pnpm new-post <filename>创建新文章,并在src/content/posts/目录中编辑 - 参考官方指南将博客部署至 Vercel, Netlify, GitHub Pages 等;部署前需编辑
astro.config.mjs中的站点设置。
⚙️ 文章 Frontmatter
---
title: My First Blog Post
published: 2023-09-09
description: This is the first post of my new Astro blog.
image: ./cover.jpg
tags: [Foo, Bar]
category: Front-end
draft: false
lang: jp # 仅当文章语言与 `config.ts` 中的网站语言不同时需要设置
---
🧞 指令
下列指令均需要在项目根目录执行:
| Command | Action |
|---|---|
pnpm install 并 pnpm add sharp |
安装依赖 |
pnpm dev |
在 localhost:4321 启动本地开发服务器 |
pnpm build |
构建网站至 ./dist/ |
pnpm preview |
本地预览已构建的网站 |
pnpm new-post <filename> |
创建新文章 |
pnpm astro ... |
执行 astro add, astro check 等指令 |
pnpm astro --help |
显示 Astro CLI 帮助 |
