Skip to content

Theme Configuration

All configuration options for the theme

Options

  • Type: string | object

The logo image of the website

ts
logo: 'https://avatars.githubusercontent.com/u/23313167?v=4',
// Or
logo: {
  src: 'https://avatars.githubusercontent.com/u/23313167?v=4',
  alt: 'logo',
},
// Or
logo: {
  light: 'https://avatars.githubusercontent.com/u/23313167?v=4',
  dark: 'https://avatars.githubusercontent.com/u/23313167?v=4',
  alt: 'logo',
},

cover

  • Type: string | object

The cover image of the website, used in the same way as the logo

  • Type: array

The navigation bar of the website, configured the same as in vitepress

ts
nav: [
  { text: 'Home', link: '/' },
  { text: 'Tag', link: '/tag' },
  { text: 'Category', link: '/category' },
],
  • Type: array

The social links of the website, configured the same as in vitepress

ts
socialLinks: [
  {
    ariaLabel: 'GitHub',
    link: 'https://github.com/tolking/vitepress-theme-ououe',
    icon: 'github',
  },
],

pagination

  • Type: object | array

Pagination configuration, for detailed usage please refer to Pagination

excerpt

  • Type: string | boolean | function
  • default: ---

How to split the article excerpt

ts
excerpt: '<!-- more -->',

tag

  • Type: string

The link address of the tag. Before using, you need to refer to Tags and Categories to configure the tag page

ts
tag: '/tag',

category

  • Type: string

The link address of the category. Before using, you need to refer to Tags and Categories to configure the category page

ts
category: '/category',

createTime

  • Type: object

How to display the creation time

ts
createTime: {
  text: 'Creation Time',
  format: (date) => new Date(date).toLocaleDateString(),
},

lastUpdated

  • Type: object

How to display the last update time

ts
lastUpdated: {
  text: 'Last Updated',
  format: (date) => new Date(date).toLocaleDateString(),
},

readingProgress

  • Type: boolean | 'top' | 'bottom' | 'left' | 'right'

How to display the reading progress bar, only effective on article pages

  • Type: object

The content displayed in the footer

ts
footer: {
  copyright: 'copyright © 2023',
},
  • Type: object

Search configuration, for detailed usage please refer to Search

ts
search: {
  provider: 'local',
},
Type Declaration
ts
import type { DefaultTheme } from 'vitepress'
import type { MaybeArray } from './index'

export interface Theme {
  /**
   * The logo of website
   *
   * @example { src: '/public/logo.png', alt: 'logo' }
   * @example { src: 'https://avatars.githubusercontent.com/u/23313167?v=4', alt: 'logo' }
   */
  logo?: DefaultTheme.ThemeableImage
  /**
   * The cover image of pagination, tag, category pages
   *
   * @example { src: '/public/cover.png', alt: 'cover image' }
   */
  cover?: DefaultTheme.ThemeableImage
  /**
   * The nav items.
   */
  nav?: DefaultTheme.NavItem[]
  /**
   * The social links to be displayed at the end of the nav bar. Perfect for
   * placing links to social services such as GitHub, Twitter, Facebook, etc.
   */
  socialLinks?: DefaultTheme.SocialLink[]
  /**
   * Customize how to paginate posts
   *
   * Before using, you need to add some files to your directory
   *
   * ```md
   * // [page].md
   * ---
   * layout: page
   * ---
   * ```
   *
   * ```js
   * // [page].paths.ts
   * export default {
   *   paths() { ... }
   * }
   * ```
   *
   * Refer to [examples](https://github.com/tolking/vitepress-theme-ououe/blob/main/docs/%5Bpage%5D.paths.ts) for more information
   *
   * @example
   * ```ts
   * // When you only have a pagination in the root directory
   * {
   *   group: 7,
   *   // ...
   * }
   * // When you have multiple directories that require pagination
   * [
   *   {
   *     match: (path) => /^\/($|index|page-)/.test(path), // match the root directory
   *     // ...
   *   },
   *   {
   *     dir: 'posts', // match posts
   *     // ...
   *   },
   *   // ...
   * ]
   * ```
   */
  pagination?: MaybeArray<PaginationItem>
  /**
   * If `boolean`, whether to parse and include excerpt? (rendered as HTML)
   *
   * If `function`, control how the excerpt is extracted from the content.
   *
   * If `string`, define a custom separator to be used for extracting the
   * excerpt. Default separator is `---` if `excerpt` is `true`.
   *
   * @default true
   *
   * @example '<!-- more -->'
   */
  excerpt?: boolean | ExcerptFunction | string
  /**
   * Link of the tag page
   *
   * Before using, you need to add a files to your directory. (eq. tag.md -> '/tag')
   *
   * ```
   * ---
   * layout: tag
   * ---
   * ```
   *
   * @example '/tag'
   */
  tag?: string
  /**
   * Link of the tag page
   *
   * Before using, you need to add a files to your directory. (eq. category.md -> '/category')
   *
   * ```
   * ---
   * layout: category
   * ---
   * ```
   *
   * @example '/category'
   */
  category?: string
  /**
   * Whether to show the create time?
   *
   * @example { text: 'Create Time', format(date) { ... }}
   */
  createTime?: TimeFormatOptions
  /**
   * Whether to show the last updated time?
   *
   * Before using, you need add `lastUpdated` options to your config
   *
   * @example { text: 'Last updated', format(date) { ... }}
   */
  lastUpdated?: TimeFormatOptions
  /**
   * Whether to show the reading progress bar?
   *
   * @default 'top'
   */
  readingProgress?: ReadingProgress
  /**
   * The footer configuration.
   */
  footer?: {
    /** The copyright message of the footer */
    copyright?: string
    /** The nav of the footer */
    nav?: DefaultTheme.NavItemWithLink[]
  }
  /**
   * Whether to enable the local search function?
   *
   * https://vitepress.dev/reference/default-theme-search#local-search
   */
  search?:
    | { provider: 'local'; options?: DefaultTheme.LocalSearchOptions }
    | { provider: 'algolia'; options: DefaultTheme.AlgoliaSearchOptions }
}

interface TimeFormatOptions {
  /**
   * Set custom time text
   *
   * @requires
   */
  text: string
  /** Set custom time format, Default transition to local timestamp */
  format?: (date: string | number) => string
}

export type ReadingProgress = boolean | 'top' | 'bottom' | 'left' | 'right'

export interface PostsItem {
  url: string
  title?: string
  description?: string
  excerpt?: string
  date?: string
  image?: DefaultTheme.ThemeableImage
  tags: string[]
  categories: string[]
  // eslint-disable-next-line @typescript-eslint/no-explicit-any
  [key: string]: any
}

// #region pagination
export interface PaginationItem {
  /**
   * Pagination collapses when the total page count exceeds this value
   *
   * @default 5
   */
  group?: number
  /**
   * The prev button text
   *
   * @default 'Prev'
   */
  prev?: string
  /**
   * The next button text
   *
   * @default 'Next'
   */
  next?: string
  /**
   * Directory that requires statistical pagination data. **It is best to have a unique value throughout the pagination config**
   *
   * default value: [srcDir](https://vitepress.dev/reference/site-config#srcdir)
   *
   * When your blog requires multiple pagination, you need to set dir to the current directory name
   */
  dir?: MaybeArray<string>
  /**
   * Customize how to match the path of route and current config
   *
   * If your pagination data is incorrect, you should increase it
   */
  match?: (path: string) => boolean
  /**
   * Customize how to filter the posts data
   */
  filter?: (item: PostsItem) => boolean
  /**
   * Customize how to sort the posts data
   */
  sort?: (a: PostsItem, b: PostsItem) => number
  /**
   * Custom pagination jump link data
   */
  formatPage?: (page: number) => DefaultTheme.NavItemWithLink
}

export interface PaginationParams {
  /**
   * File name for generating [dynamic-routes](https://vitepress.dev/guide/routing#dynamic-routes)
   *
   * @example n === 1 ? 'index' : `page-${n}`
   *
   * If you are not using the recommended format, you need to custom `pagination -> formatPage` match
   */
  page: string
  /**
   * Current pagination, starting from 1
   *
   * @requires
   */
  current: number
  /**
   * Item count of each page
   *
   * @requires
   */
  limit: number
}
// #endregion pagination

type ExcerptFunction = (
  file: {
    // eslint-disable-next-line @typescript-eslint/no-explicit-any
    data: { [key: string]: any }
    content: string
    excerpt?: string
  },
  // eslint-disable-next-line @typescript-eslint/no-explicit-any
  options?: any,
) => void

Create Time:

Last Updated: