这里是初五的博客主题 Charlotte ,使用 Fuwari 主题为蓝本搭建
| 命令 | 描述 |
|---|---|
pnpm install |
安装项目依赖 |
pnpm dev |
启动开发服务器 |
pnpm build |
构建生产版本 |
pnpm preview |
预览构建结果 |
pnpm check |
TypeScript 错误检查 |
pnpm format |
Biome 格式检查 |
pnpm format <file> |
格式化单个文件 |
pnpm lint |
Biome 代码检查和修复 |
pnpm lint <file> |
检查并修复单个文件 |
pnpm astro <command> |
运行 Astro CLI 命令 |
使用内置脚本快速创建新文章:
pnpm new-post <filename>清理 src/content/assets 目录下未被引用的图片文件:
pnpm clean编辑 src/config.ts 文件来自定义博客配置:
export const siteConfig: SiteConfig = {
title: "Example",
subtitle: "example",
url: "https://blog.xxx.xxx/", // 博客 URL
lang: "zh_CN", // 语言代码,例如 'en', 'zh_CN', 'ja' 等
keywords: "Astro, Blog, Theme", // SEO 关键词
description:
"一个基于 Astro 的博客主题", // 站点描述
themeColor: {
hue: 60, // 主题颜色的默认色相,范围 0-360。
fixed: false, // 隐藏访客的主题颜色选择器
},
banner: {
enable: true,
src: "assets/images/banner.png", // 相对于 /src 目录的路径。如果以 '/' 开头则相对于 /public 目录
position: "center", // 等同于 object-position,仅支持 'top', 'center', 'bottom'。默认为 'center'
credit: {
enable: false, // 显示横幅图片的版权信息
text: "", // 要显示的版权文本
url: "", // (可选)原始作品或艺术家页面的 URL 链接
},
},
toc: {
enable: true, // 在文章右侧显示目录
depth: 2, // 目录中显示的最大标题深度,范围 1-3
},
favicon: [
// 留空此数组以使用默认网站图标
{
src: "/favicon/icon.png", // 网站图标的路径,相对于 /public 目录
// theme: 'light', // (可选)'light' 或 'dark',仅在您为明暗模式设置了不同的网站图标时使用
// sizes: '32x32', // (可选)网站图标的尺寸,仅在您有不同尺寸的网站图标时设置
},
],
pinnedPost: "xxx", // 置顶文章的 slug 路径,如果为空则不置顶
};编辑 src/constants.ts 文件:
export const BANNER_HEIGHT = 35; // Banner 基础高度,单位 vh
export const BANNER_HEIGHT_EXTEND = 35; // Banner 主页高度扩展,单位 vh文章使用 Markdown 格式,支持 frontmatter:
---
title: 文章标题
published: 2025-01-01
description: 文章描述
image: ./cover.jpg
tags: [标签1, 标签2]
category: 分类
draft: false
---
这里是文章正文...构建后的静态文件默认位于 dist/ 目录,可部署到任何静态托管平台。
注意:由于 Cloudflare Pages 构建环境的限制,项目有可能无法在该平台正常部署。 推荐使用 Vercel 或 Netlify 进行部署。
欢迎提交 Issue 和 Pull Request!
感谢以下项目与项目开发者: