# VRSSG

**Repository Path**: xiaoyaohihiq/vrssg

## Basic Information

- **Project Name**: VRSSG
- **Description**: 基于Vite与Mdx语法的静态站点生成器
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 3
- **Forks**: 0
- **Created**: 2024-09-14
- **Last Updated**: 2024-09-15

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# VRSSG

### 介绍
基于Vite与Mdx语法的静态站点生成器

### 安装教程

1.  npm i pnpm -g 
2.  下载依赖 pnpm i 
3.  npm link 进行软连接

### 使用说明
#### 首页配置
在资源文件根目录下(默认docs)的index.mdx的源信息中进行配置

```md
pageType: home 页面类型

bg:
  /back.jpg  首页背景

bg_music:  首页背景音乐 点击logo即可播放
  /music.ogg

hero:
  name: VRSSG  
  text: 基于 Vite & MDX 语法的静态站点生成器
  image:     
    src: /logo.png
    alt: logo,
    opt: 0.5    图标透明度

  actions:
    - theme: brand
      text: 快速开始
      link: /guide/
    - theme: alt
      text: Gitte 地址  
      link: https://gitee.com/xiaoyaohihiq
      
features:   首页介绍相关
  - title: 'Vite: 极速的开发响应速度'
    details: 基于 Vite 构建，开发时的响应速度极快，即时的热更新，带给你极致的开发体验。
    icon: 🚀

```
#### 文章配置
通过资源文件根目录下的config文件进行配置
```js
{
  title: 'vrssg',
  themeConfig: {
    nav: [
      { text: '主页', link: '/' },
      { text: '指南', link: '/guide/' }
    ],
    sidebar: { //侧边栏
      '/guide/': [
        {
          text: '教程',
          items: [
            {
              text: '快速上手',
              link: '/guide/start'
            },
            {
              text: '如何安装',
              link: '/guide/install'
            },
            {
              text: '配置讲解',
              link: '/guide/note'
            },{
              text: '项目原理',
              link: '/guide/principle'
            }
          ]
        }
      ]
    },
    doc_bg: '/back.jpg', //doc背景
    vite?: 其余vite相关配置
  }
}
```
#### 静态资源
public目录下

![输入图片说明](%E5%B1%8F%E5%B9%95%E6%88%AA%E5%9B%BE%202024-09-14%20015634.png)
![输入图片说明](%E5%B1%8F%E5%B9%95%E6%88%AA%E5%9B%BE%202024-09-14%20015615.png)