vite-pages-theme-basic

Basic theme

This theme is deprecated. Please use vite-pages-theme-doc instead.

vite-pages-theme-basic provides a nice theme. It should satisfy most users' needs. This document site is powered by this theme.

How to use

You should config the theme in _theme.tsx:

// _theme.tsx
import React from 'react'
import { createTheme } from 'vite-pages-theme-basic'

export default createTheme({
  topNavs: [
    { text: 'index', path: '/' },
    { text: 'Vite', href: 'https://github.com/vitejs/vite' },
  ],
  logo: 'Vite Pages',
  // Other configs...
})

Here is a complete example.

Auto menu generation

Basic theme can generation a side navigation menu automatically, based on the pages information.

You can control the label and sorting of the nav menu, by notating these page static data:

• title
• sort (default value is 1)

For markdown pages, notate the static data like this:

---
title: Basic Theme
order: 0.5
---

markdown content...

For jsx/tsx pages, notate the static data like this:

/**
 * @title page1 title
 * @sort 1
 */

// js code....

Page search

Basic theme also generate a search box automatically. It help readers to filter pages by their titles. As an example, you can find the search box at the topbar of this document site.

You can turn off the auto-generated search box in the theme configs. You can also customize the topbar operations area.

Theme configs

The createTheme exported by vite-pages-theme-basic accepts these options:

interface Option {
  /**
   * Take fully control of side nav menu.
   */
  sideMenuData?: SideMenuData[]
  /**
   * Navigation menu at top bar.
   */
  topNavs?: TopNavData[]
  /**
   * Logo area at top bar.
   */
  logo?: React.ReactNode
  /**
   * Operation area at top bar.
   */
  topbarOperations?: React.ReactNode
  /**
   * Footer area.
   */
  footer?: React.ReactNode
  /**
   * Enable search.
   * @default true
   */
  search?: boolean
}

export type SideMenuData = { text: string; path: string }

export type TopNavData =
  | {
      text: string
      /**
       * The url.
       * @example 'https://www.google.com/'
       */
      href: string
    }
  | {
      text: string
      /**
       * The path in the current webapp.
       * @example '/posts/hello-world'
       */
      path: string
    }

Fully theme customization

If the basic theme doesn't satisfy your need, you can create your own theme.

Contributions to the basic theme are always welcomed.