介绍

简介

基于 Vite 和 Island 架构，通过简单的配置即可搭建起文档站、博客、官网等静态内容为主的页面，让使用者只需专注于 md 文档的编写。

特性

• ✨ 基于 Island 孤岛架构实现生产高性能
• 🚀 基于 Vite 的极速开发响应
• 📦 使用 MDX 语法编写文档内容

快速开始

安装

在项目已经初始化的情况下，执行以下命令安装依赖：

pnpm install feather-press

首页配置文件

在项目根目录下新建 index.mdx 文件，内容如下：

- pageType: 页面类型
- hero: 头部配置
  - name: 标题
  - text: 副标题
  - tagline: 标语
  - image: 图片
  - actions: 按钮
    - theme: 按钮主题
- features: 特性
  - title: 标题
  - details: 详情
  - icon: 图标

使用事例：

---
pageType: home

hero:
  name: Feather
  text: 基于 Vite 和 Island 架构的静态站点生成器
  tagline: 简单、高效的 SSG 方案
  image:
    src: /feather.png
    alt: feather
  actions:
    - theme: brand
      text: 快速开始
      link: /guide/
    - theme: alt
      text: GitHub 地址
      link: https://github.com/cheerioInf/feather-press

features:
  - title: '基于 Island 孤岛架构实现生产高性能'
    details: 采用 feathers 架构，意味着更少的 JavaScript 代码、局部 hydration， 从而带来更好的首屏性能。
    icon: ✨
  - title: 基于 Vite 的极速开发响应
    details: 基于 Vite 构建，开发时的响应速度极快，即时的热更新，带给你极致的开发体验。
    icon: 🚀
  - title: '使用 MDX 语法编写文档内容'
    details: MDX 是一种强大的方式来写内容。你可以在 Markdown 中使用 React 组件。
    icon: 📦
---

文档配置文件

在项目根目录下新建 config.ts 文件，事例内容如下：

import { defineConfig } from 'feather-press';

export default defineConfig({
  title: 'FeatherPress', // 标题
  themeConfig: {
    // 菜单栏
    nav: [
      { text: '主页', link: '/' },
      { text: '指南', link: '/guide/quick-start' }
    ],
    // github 链接
    githubLink: 'https://github.com/cheerioInf/feather-press',
    // 侧边栏
    sidebar: {
      '/guide/': [
        {
          text: '教程',
          items: [
            {
              text: '介绍',
              link: '/guide/'
            },
            {
              text: '快速开始',
              link: '/guide/quick-start'
            }
          ]
        }
      ]
    }
  }
});

其中 link 的路径是以项目根目录为基准的。

静态资源

在项目根目录下新建 public 文件夹，将图片等静态资源放入其中。

打包后，静态资源会被复制到 dist 文件夹下。

启动项目

调试项目：

feather dev

打包项目：

feather build

预览打包后的项目：

feather preview