https://github.com/zhou-tao/vitepress-theme-me
:books: vitepress theme for personal website.
https://github.com/zhou-tao/vitepress-theme-me
vitepress vitepress-theme website
Last synced: 14 days ago
JSON representation
:books: vitepress theme for personal website.
- Host: GitHub
- URL: https://github.com/zhou-tao/vitepress-theme-me
- Owner: zhou-tao
- License: mit
- Created: 2023-08-28T14:52:07.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2024-03-30T07:55:46.000Z (about 1 year ago)
- Last Synced: 2024-08-09T12:12:17.264Z (9 months ago)
- Topics: vitepress, vitepress-theme, website
- Language: CSS
- Homepage:
- Size: 511 KB
- Stars: 12
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# vitepress-theme-me
A lightweight VitePress theme plugin to help you quickly build personal sites.
- :sparkles: Simple and beautiful theme, inspired by [antfu.me](https://antfu.me).
- :rocket: Fastest localized full-text search powered by [flexsearch](https://github.com/nextapps-de/flexsearch).
- :speech_balloon: Configurable site comment system based on [waline](https://waline.js.org/).
Visit [my site](https://toryz-me.netlify.app/) to get a quick look at **vitepress-theme-me** features.
Documentation is coming soon...
### Install
Please prepare the [VitePress](https://vitepress.dev/zh/guide/getting-started) app first. then install it:
```bash
pnpm add vitepress-theme-me flexsearch vitepress-plugin-search unocss -D
```
### Usage
1. Extends base configs of `vitepress-theme-me`.
```js
// .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: ''
}
},
{
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](https://github.com/zhou-tao/vitepress-theme-me/tree/main/example).
2. Replaces the vitepress default theme.
```js
// .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)
}
}
```
3. Config the full-context search plugin.
> [!NOTE]
> you need to add `vite.config.js` to your root directory.
```js
// 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](https://github.com/zhou-tao/vitepress-theme-me/tree/main/example).
### License
[MIT](./LICENSE) LICENSE © 2023-PRESENT [Toryz](https://github.com/zhou-tao)