如何使用 PlainPage 博客主题
PlainPage 是一个基于 Astro 构建的极简主义博客主题,特点是:
- 快速加载,注重性能优化
- 以文本内容为中心的设计
- 极简主义风格
- 完全开源,可自由定制
快速开始
1. 创建项目
首先,克隆项目模板:
git clone https://github.com/ChurchTao/PlainPage.git
2. 安装依赖 & 预览
cd PlainPage
npm install
# 启动本地预览
npm run dev
3. 部署到自有服务器
npm run build
4. 文章格式说明
PlainPage 使用 Markdown 格式管理文章,所有文章都存放在 src/content/blog
目录下。每篇文章需要包含以下前置信息:
---
title: "文章标题"
description: "文章描述"
pubDate: "2024-03-26"
tags: ["标签1", "标签2"] # 文章标签, 可以为空
heroImage: "/image/hero.jpg" # 文章封面图, 默认没有封面图
hide: false # 是否隐藏文章, 默认 false
---
文章中的图片有两种引用方式:
- 本地图片,图片需要放在
src/public/image
目录下

- 网络图片

5. 自定义配置
自定义配置
编辑 src/config.ts
文件:
// 网站配置
export const SITE_TITLE = "PlainPage";
export const SITE_DESCRIPTION = "Welcome (. ❛ ᴗ ❛.)";
export const COPYRIGHT = "© 2024 PlainPage All Rights Reserved";
export const ICP_NUMBER = "";
// 社交媒体链接, 留空或注释=不显示
export const SOCIAL_LINKS = {
Github: "https://github.com/churchTao",
Twitter: "https://twitter.com/yourusername",
// LinkedIn: "https://www.linkedin.com/in/yourusername",
// Instagram: "https://www.instagram.com/yourusername",
// Facebook: "https://www.facebook.com/yourusername",
// YouTube: "https://www.youtube.com/yourusername",
};
// SEO 相关
export const SEO_CONFIG = {
ogImage: "/hero-img.png", // 默认的社交媒体分享图片
keywords: "blog, tech, programming", // 默认关键词
};
// 导航配置
export const NAV_ITEMS = [
{ text: "Home", link: "/" },
{ text: "Blog", link: "/blog" },
{ text: "Tags", link: "/tags" },
{ text: "About", link: "/about" },
];
// 博客配置
export const BLOG_CONFIG = {
locale: "en-us", // 日期格式化语言
authorName: "Author Name", // 作者名称
email: "mailto:your-email@example.com",
tags: {
title: "Tags", // 标签页面标题
description: "All the tags used in posts.", // 标签页面描述
},
};
6. 部署到自有服务器
推荐使用 CNB.COOL 进行代码托管和自动化部署,具体教程请参考 新手指南:白嫖 CNB.COOL 实现代码托管和自动化部署