All configuration options for the theme
Options
logo
- 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
nav
- 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' },
],socialLinks
- 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
footer
- Type:
object
The content displayed in the footer
ts
footer: {
copyright: 'copyright © 2023',
},search
- 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