如何使用 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: '文章标题'
summary: '文章描述'
date: '2024-03-26'
tags: ['标签1', '标签2'] # 文章标签, 可以为空
heroImage: '/static/images/blog/hero.jpg' # 文章封面图, 默认没有封面图
hide: false # 是否隐藏文章, 默认 false
---

文章中的图片有两种引用方式：

本地图片，图片需要放在 src/public/image 目录下

![图片描述](/static/images/blog/image.jpg)

网络图片

![图片描述](https://example.com/image.jpg)

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', // 标签页面标题
    summary: 'All the tags used in posts.', // 标签页面描述
  },
}

6. 部署到自有服务器

推荐使用 CNB.COOL 进行代码托管和自动化部署，具体教程请参考新手指南：白嫖 CNB.COOL 实现代码托管和自动化部署