教程 - 介绍

预配置
脚本介绍
目录结构
版权
灵感启发以及呜谢

Vitesse ✘ QB 模版

Vite-SSG 搭建静态个人网站模板
页面数据和页面功能都由自己实现
对于构建过程和工具使用有更多控制
感受轻量级，快速且自由的创作过程

Tip: 如果你喜欢开箱即用的声明式配置站点，或对于页面开发没有经验，也许 Vitepress 或其他成熟的站点生成器会更适合你

如果你决定使用 Vite-SSG 构建你的个人站点，来探索吧，本模版已做了下列工作，你可以根据自己的需要更改或移除他们:

基础站点的基础样式
编写 Markdown 文章的基础样式
Markdown 的语法增强
站点功能的构建增强脚本

预配置

UI 框架: UnoCSS - 高性能且极具灵活性的即时原子化 CSS 引擎
Icons: Iconify - 使用任意的图标集，浏览 🔍Icônes
Markdown-it:
- markdown-it-shiki - Shiki 语法高亮
- markdown-it-container - 创建自定义容器
- markdown-it-mark - <mark> 高亮标签
- markdown-it-task-checkbox - 复选框
- markdown-it-anchor - 标题描点
- markdown-it-link-attributes - 链接属性增强
- markdown-it-table-of-contents - 大纲列表
插件:
- unplugin-vue-components - 自动加载组件
- unplugin-auto-import - 直接使用 Composition API 等，无需导入
- vite-plugin-pages - 以文件系统为基础的路由
- vite-plugin-vue-layouts - 页面布局系统
- vite-plugin-pwa - PWA
- vite-plugin-vue-markdown - Markdown 作为组件，也可以让组件在 Markdown 中使用
- @vueuse/head - 响应式地操作文档头信息
…

脚本介绍

json

{
  "scripts": {
    // 开发模式
    "dev": "vite --host",
    // 构建打包站点
    "build": "vite-ssg build && pnpm build:post",
    // 在构建站点之后并发生成站点地图 和 RSS
    "build:post": "run-p -c gen:rss gen:sitemap",
    // 预览构建站点效果
    "serve": "vite preview --host",
    // Lint code
    "lint": "eslint .",
    // 快速应用 commit message CLI. 配置(.czrc)
    // 使用 e.g: pnpm cz :a
    "cz": "czg",
    // 生成文章 RSS
    "gen:rss": "tsx ./build/node/rss.ts",
    // 生成站点地图
    "gen:sitemap": "tsx ./build/node/sitemap.ts"
  }
}
{
  "scripts": {
    // 开发模式
    "dev": "vite --host",
    // 构建打包站点
    "build": "vite-ssg build && pnpm build:post",
    // 在构建站点之后并发生成站点地图 和 RSS
    "build:post": "run-p -c gen:rss gen:sitemap",
    // 预览构建站点效果
    "serve": "vite preview --host",
    // Lint code
    "lint": "eslint .",
    // 快速应用 commit message CLI. 配置(.czrc)
    // 使用 e.g: pnpm cz :a
    "cz": "czg",
    // 生成文章 RSS
    "gen:rss": "tsx ./build/node/rss.ts",
    // 生成站点地图
    "gen:sitemap": "tsx ./build/node/sitemap.ts"
  }
}

目录结构

├── build
│  ├── markdown       Markdown-it 插件和自定义插件
│  └── node           脚本
├── pages             站点内容编写
│  └── posts        * 编写文章的地方
├── public            静态资源 图片...
└── src
   ├── components     页面组件
   ├── composables    可组合逻辑
   ├── layouts        页面布局
   ├── modules        公共模块
   ├── styles         页面样式
   └── utils          工具集
├── build
│  ├── markdown       Markdown-it 插件和自定义插件
│  └── node           脚本
├── pages             站点内容编写
│  └── posts        * 编写文章的地方
├── public            静态资源 图片...
└── src
   ├── components     页面组件
   ├── composables    可组合逻辑
   ├── layouts        页面布局
   ├── modules        公共模块
   ├── styles         页面样式
   └── utils          工具集

教程 - 介绍

Vitesse ✘ QB 模版

预配置 #

脚本介绍 #

目录结构 #

版权 #

灵感启发以及呜谢 #

预配置

脚本介绍

目录结构

版权

灵感启发以及呜谢