毛桃的小世界

Go Back

如何使用 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
---

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

  1. 本地图片,图片需要放在 src/public/image 目录下
![图片描述](/image/image.jpg)
  1. 网络图片
![图片描述](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", // 标签页面标题
    description: "All the tags used in posts.", // 标签页面描述
  },
};

6. 部署到自有服务器

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