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:

1// _theme.tsx
2import React from 'react'
3import { createTheme } from 'vite-pages-theme-basic'
4
5export default createTheme({
6  topNavs: [
7    { text: 'index', path: '/' },
8    { text: 'Vite', href: 'https://github.com/vitejs/vite' },
9  ],
10  logo: 'Vite Pages',
11  // Other configs...
12})

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:

1---
2title: Basic Theme
3order: 0.5
4---
5
6markdown content...

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

1/**
2 * @title page1 title
3 * @sort 1
4 */
5
6// 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:

1interface Option {
2  /**
3   * Take fully control of side nav menu.
4   */
5  sideMenuData?: SideMenuData[]
6  /**
7   * Navigation menu at top bar.
8   */
9  topNavs?: TopNavData[]
10  /**
11   * Logo area at top bar.
12   */
13  logo?: React.ReactNode
14  /**
15   * Operation area at top bar.
16   */
17  topbarOperations?: React.ReactNode
18  /**
19   * Footer area.
20   */
21  footer?: React.ReactNode
22  /**
23   * Enable search.
24   * @default true
25   */
26  search?: boolean
27}
28
29export type SideMenuData = { text: string; path: string }
30
31export type TopNavData =
32  | {
33      text: string
34      /**
35       * The url.
36       * @example 'https://www.google.com/'
37       */
38      href: string
39    }
40  | {
41      text: string
42      /**
43       * The path in the current webapp.
44       * @example '/posts/hello-world'
45       */
46      path: string
47    }

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.