A lightweight VitePress theme plugin to help you quickly build personal sites.
- ✨ Simple and beautiful theme, inspired by antfu.me.
- 🚀 Fastest localized full-text search powered by flexsearch.
- 💬 Configurable site comment system based on waline.
Visit my site to get a quick look at vitepress-theme-me features.
Documentation is coming soon...
Please prepare the VitePress app first. then install it:
pnpm add vitepress-theme-me flexsearch vitepress-plugin-search unocss -D- Extends base configs of
vitepress-theme-me.
// .vitepress/config.js
import { defineConfigWithTheme } from 'vitepress'
import baseConfig from 'vitepress-theme-me/config'
export default defineConfigWithTheme({
extends: baseConfig,
title: 'vitepress.me',
description: 'vitepress theme for personal website.',
head: [
[
'link',
{ rel: 'icon', href: '/logo.svg' } // add logo.svg to under the public dir
]
],
themeConfig: {
logo: '/logo.svg',
nav: [
{ text: '文章', link: '/posts' }, // add posts.md from example and mkdir posts
{ text: '项目', link: '/projects' }, // add projects.md
{ text: '友链', link: '/friend-links' }, // add friend-links.md
{
text: '为爱发电',
link: 'https://afdian.net/a/toryz?tab=home',
icon: {
svg: '<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 32 32"><path fill="currentColor" d="M11.61 29.92a1 1 0 0 1-.6-1.07L12.83 17H8a1 1 0 0 1-1-1.23l3-13A1 1 0 0 1 11 2h10a1 1 0 0 1 .78.37a1 1 0 0 1 .2.85L20.25 11H25a1 1 0 0 1 .9.56a1 1 0 0 1-.11 1l-13 17A1 1 0 0 1 12 30a1.09 1.09 0 0 1-.39-.08ZM17.75 13l2-9H11.8L9.26 15h5.91l-1.59 10.28L23 13Z"/></svg>'
}
},
{
text: 'Github',
link: 'https://github.com/zhou-tao',
icon: {
name: 'github'
}
}
]
},
waline: {
// !Notice: need replace to your site and see more details (https://waline.js.org/guide/get-started/)
serverURL: 'https://replace.your.site/example',
requiredMeta: ['nick', 'mail'],
wordLimit: 200,
pageSize: 5,
dark: 'html.dark'
}
}) For the files that need to be added, see the example.
- Replaces the vitepress default theme.
// .vitepress/theme/index.js
import { Layout, useProgressBar } from 'vitepress-theme-me'
import 'uno.css'
import 'vitepress-theme-me/style.css'
export default {
Layout,
async enhanceApp({ app, router }) {
await useProgressBar(import.meta.env.SSR, router)
}
}- Config the full-context search plugin.
Note
you need to add vite.config.js to your root directory.
// vite.config.js
import { SearchPlugin } from 'vitepress-plugin-search'
import { defineConfig } from 'vite'
export default defineConfig({
plugins: [
SearchPlugin({
placeholder: 'Search Posts',
buttonLabel: 'Search',
previewLength: 10,
tokenize: 'full'
})
],
optimizeDeps: { exclude: ['fsevents'] },
server: {
fs: {
// Allow serving files from one level up to the project root
allow: ['../..']
}
}
})Next, it's time to launch the app and build your site!
And you can also check out the example app.