VitePress 主题 Nex 是一个 VitePress 用户设计的现代化博客主题。它不仅提供了简洁美观的视觉风格，还具有多种实用的功能，帮助您快速构建高质量的博客页面。

特性

• 自动分页：系统会根据您的文章文件夹自动生成索引页面，让您的博客内容展示更有条理。
• 风格一致性：Nex 主题采用与 Vue Point 相似的视觉风格，确保与 VitePress 平台的原生设计完美融合，保持一致的品牌形象。
• 多用途自定义目录：支持创建无限数量的自定义目录，不仅适用于博客页面，还可用于发布更新日志、动态消息、招聘信息等多种用途。
• 暗色模式适配：提供优质的暗色模式适配，提升阅读体验。

安装

使用前请确保已完成 VitePress 安装

https://vitepress.dev/zh/guide/getting-started#setup-wizard

然后进行下面操作

npm

npm add -D vitepress-theme-nex

pnpm

pnpm add -D vitepress-theme-nex

yarn

yarn add -D vitepress-theme-nex

bun

bun add -D vitepress-theme-nex

配置

// .vitepress/theme/index.js
import { NexTheme } from "vitepress-theme-nex"; 

export default {
    extends: NexTheme 
    // ...
}

// .vitepress/config.js
export default defineConfig({
    // ...
    vite: { 
        ssr: { noExternal: ['vitepress-theme-nex'] } 
    } 
})

新建文件

├── docs
│   ├── .vitepress
│   │   ├── theme
│   │   └── config.js
│   ├── blog
│   │   ├── posts
│   │   ├── [page].md
│   │   ├── [page].paths.js
│   │   └── posts.data.ts
│   ├── api-examples.md
│   ├── index.md
│   └── markdown-examples.md
├── package.json

posts.data.ts

import { createContentLoader } from 'vitepress'
import { NTransform, type Post } from 'vitepress-theme-nex/composables'

declare const data: Post[]
export { data }

export default createContentLoader('jobs/posts/*.md', {
  render: true,
  excerpt: true,
  transform(rawData) {
    return NTransform(rawData, 'asc')
  }
})

[page].md

---
title: 博客
aside: false
layout: home
---  

<script setup>
import { data as posts } from './posts.data.ts'
</script>

<NIndex v-bind="{ posts, showDate: true }">
    <template #description>
        这里写介绍
    </template>
</NIndex>

[page].paths.js

import { NPathGen } from "vitepress-theme-nex/composables";

export default {
  paths() {
    return NPathGen('docs/blog/posts')
  }
}