vitepress+vue

简客陈
554 阅读5分钟

搭建 Vite 项目

网址

Vite：cn.vitejs.dev/

创建项目

  • 我的node版本16.19.0

  • vitepress-project为项目名称可修改名称

  • 回车选择vue+js

     npm create vite@latest vitepress-project

进入项目安装依赖运行项目

 cd vitepress-project
 npm install

启动服务

  • 项目正常运行即可

     npm run dev

安装和搭建 vitepress

网址

VitePress：vitepress.dev/

VitePress中文网：vitejs.cn/vitepress/

安装 vitepress

 npm add -d vitepress
 或
 npm install -D vitepress vue
 或
 yarn add --dev vitepress
 或
 pnpm add -D vitepress
 或
 bun add -D vitepress

配置脚本命令

  • 在 package.json 中，添加 scripts 脚本命令

     "scripts": {
  "docs:dev": "vitepress dev docs",
  "docs:build": "vitepress build docs",
  "docs:serve": "vitepress serve docs"
 }

启动服务

  • 输入下面命令运行启动项目预览，启动项目后会生成docs等一系列基本文件夹

  • 项目正常运行即可

     npm run docs:dev

  • 如果没有生成基本文件夹就手动创建目录结构如下

     ├─ docs
 │  ├─ .vitepress
 │  │  └─ config.js
 │  └─ index.md
 └─ package.json

创建静态文件目录 public 方便存放图片

  • 在docs 文件夹下创建 public 文件目录，目录结构如下

     ├─ docs
 │  ├─ .vitepress
 │  │  └─ config.js
 │  ├─ public
 │  └─ index.md
 └─ package.json

创建配置文件 config.js

  • 在 docs 文件夹下的 .vitepress 文件夹中创建 config.js 文件，复制下面内容到该文件中

     import { defineConfig } from 'vitepress'
 export default defineConfig({
 ​
 })

创建文档首页

  • 在 docs 文件夹下创建 index.md 文件，复制下面内容到该文件中

     ---
 {
   "layout": "home",
   "title": "首页",
   "editLink": true,
   "hero":{
     "name":"令人敬畏的项目",
     "text":"一个VitePress网站",
     "tagline":"标语",
     "image":{
       "src":"/logo.png",
       "alt":"logo"
     },
     "actions":[
       {
         "theme":"brand",
         "text":"掘金个人主页",
         "link":"",
       },
       {
         "theme":"alt",
         "text":"码云个人主页",
         "link":"",
       },
     ]
   },
   "features":[
     {
       "icon":"🛠️",
       "title":"标题",
       "details":"描述文本",
       "linkText":"查看详情",
       "link":"/",
     },
     {
       "icon":"🛠️",
       "title":"标题",
       "details":"描述文本",
       "linkText":"查看详情",
       "link":"/",
     },
     {
       "icon":"🛠️",
       "title":"标题",
       "details":"描述文本",
       "linkText":"查看详情",
       "link":"/",
     },
   ]
 }
 ---
 ​
 <style>
   :root {
     --vp-home-hero-name-color: transparent;
     --vp-home-hero-name-background: -webkit-linear-gradient(120deg, #bd34fe, #41d1ff);
   }
 </style>

config.js 配置

标题

 import { defineConfig } from 'vitepress'
 export default defineConfig({
   // 标题
   title: "标题",
 })

标题模板

 import { defineConfig } from 'vitepress'
 export default defineConfig({
   // 标题模板
   titleTemplate: '标题模板',
 })

语言

 import { defineConfig } from 'vitepress'
 export default defineConfig({
   // 语言
   lang: 'zh-cn',
 })

上次更新时间

 import { defineConfig } from 'vitepress'
 export default defineConfig({
   // 上次更新时间
   lastUpdated: true,
 })

网站说明

 import { defineConfig } from 'vitepress'
 export default defineConfig({
   // 网站说明
   description: "网站说明",
 })

ico图标配置

 import { defineConfig } from 'vitepress'
 export default defineConfig({
   // ico图标配置
   head: [
     ['link', {
       rel: 'icon',
       href: '/logo.png'
     }],
   ],
 })

markdown配置

 import { defineConfig } from 'vitepress'
 export default defineConfig({
   // markdown配置
   markdown: {
     // 是否在代码块中启用行号
     lineNumbers: true,
   },
 })

忽略死链接

 import { defineConfig } from 'vitepress'
 export default defineConfig({
   // 忽略死链接
   ignoreDeadLinks: true,
 })

部署站点的基本 URL

 import { defineConfig } from 'vitepress'
 export default defineConfig({
   // 部署站点的基本 URL
   base: '',
 })

项目打包输出位置

 import { defineConfig } from 'vitepress'
 export default defineConfig({
   // 项目打包输出位置
   outDir: '',
 })

存储markdown的项目根目录

 import { defineConfig } from 'vitepress'
 export default defineConfig({
 // 存储markdown的项目根目录
   srcDir: '',
 })

导航

 import { defineConfig } from 'vitepress'
 export default defineConfig({
 // 主题配置
 themeConfig: {
     // 导航
     nav: [{
      text: '首页',
      link: '/index.md',
    },
    {
      text: '首页',
      link: '/index.md',
    },
  ],
 }
 })

侧栏

 import { defineConfig } from 'vitepress'
 export default defineConfig({
 // 主题配置
 themeConfig: {
     // 侧栏
     sidebar: {
    '/article/': [{
      text: '文章',
      collapsible: true,    //是不是可以动态展开
      collapsed: false, //默认是不是收缩的
      items: [{
          text: 'vitepress创建文档',
          link: '/article/vitepress创建文档'
        },
        {
          text: 'css笔记',
          link: '/article/vitepress创建文档'
        },
        {
          text: 'css笔记',
          link: '/article/vitepress创建文档'
        }
      ],
    }, ],
  },
 }
 })

社交链接

 import { defineConfig } from 'vitepress'
 export default defineConfig({
 // 主题配置
 themeConfig: {
     // 社交链接
     socialLinks: [{
      icon: 'discord',
      link: ''
    },
    {
      icon: 'facebook',
      link: ''
    },
    {
      icon: 'github',
      link: ''
    },
    {
      icon: 'instagram',
      link: ''
    },
    {
      icon: 'linkedin',
      link: ''
    },
    {
      icon: 'mastodon',
      link: ''
    },
    {
      icon: 'slack',
      link: ''
    },
    {
      icon: 'twitter',
      link: ''
    },
    {
      icon: 'youtube',
      link: ''
    },
    {
      icon: {
        svg: ''
      },
      link: ''
    },
  ],
 }
 })

显示h2到h6标题

 import { defineConfig } from 'vitepress'
 export default defineConfig({
 // 主题配置
 themeConfig: {
     // 显示h2到h6标题
     outline: 'deep',
 }
 })

小侧栏位置

  • 'left'、false、true
 import { defineConfig } from 'vitepress'
 export default defineConfig({
   // 主题配置
   themeConfig: {
     //  小侧栏位置,'left'、false、true
     aside: 'left',
   }
 })

大纲标题

 import { defineConfig } from 'vitepress'
 export default defineConfig({
 // 主题配置
 themeConfig: {
     // 大纲标题
     outlineTitle: '文章目录',
 }
 })

logo

 import { defineConfig } from 'vitepress'
 export default defineConfig({
 // 主题配置
 themeConfig: {
     // logo
     logo: '/logo.png',
 }
 })

网站标题

 import { defineConfig } from 'vitepress'
 export default defineConfig({
 // 主题配置
 themeConfig: {
     // 网站标题
     siteTitle: '网站标题',
 }
 })

上次更新时间之前显示的前缀文本

 import { defineConfig } from 'vitepress'
 export default defineConfig({
 // 主题配置
 themeConfig: {
     // 上次更新时间之前显示的前缀文本
     lastUpdatedText: '更新时间',
 }
 })

编辑此页面

 import { defineConfig } from 'vitepress'
 export default defineConfig({
 // 主题配置
 themeConfig: {
     // 编辑此页面
     editLink: {
       pattern: 'https://e.gitee.com/ckjdocs/repos/ckjdocs/vitepress-template/tree/master/docs/:path',
       text: '在gitee上编辑此页面'
     },
 }
 })

页脚

 import { defineConfig } from 'vitepress'
 export default defineConfig({
 // 主题配置
 themeConfig: {
     // 页脚
     footer: {
       message: '邮箱：xxxxxxxxx@qq.com',
       copyright: '免责声明：本站为个人博客，本站不贩卖软件，所有内容不作为商业行为。本网站所提供的所有资源均来源于网络，仅供学习和交流使用，版权归原作者所有。本网站不承担任何法律责任，亦不承担任何赔偿责任。如果您认为本网站某些资源侵犯了您的版权，请及时联系我们，并提供相关证明文件，我们将立即删除相关内容。'
     },
 }
 })

文档页脚

 import { defineConfig } from 'vitepress'
 export default defineConfig({
 // 主题配置
 themeConfig: {
     //文档页脚
     docFooter: {
       prev: '上一篇',
       next: '下一篇'
     },
 }
 })

搜索

 import { defineConfig } from 'vitepress'
 export default defineConfig({
 // 主题配置
 themeConfig: {
     // 搜索
     search: {
       provider: 'local',
       options: {
  			translations: {
  				button: {
  					buttonText: '搜索文档',
  					buttonAriaLabel: '搜索文档'
  				},
  				modal: {
  					noResultsText: '无法找到相关结果',
  					resetButtonTitle: '清除查询条件',
  					footer: {
  						selectText: '选择',
  						navigateText: '切换'
  					}
  				}
  			}
  		}
     },
 }
 })

返回顶部

 import { defineConfig } from 'vitepress'
 export default defineConfig({
 // 主题配置
 themeConfig: {
     // 返回顶部
     backToTop: {
       text: "返回顶部",
     },
 }
 })

搜索插件

  • 安装 vitepress-plugin-search 插件

     npm install vitepress-plugin-search --save-dev
 或
 npm i vitepress-plugin-search markdown-it flexsearch -D

  • 使用

     import {SearchPlugin} from "vitepress-plugin-search";
 import {defineConfig} from 'vitepress'
 export default defineConfig({
   vite: {
     plugins: [
       // 搜索插件
       SearchPlugin({
         previewLength: 62,
         buttonLabel: "搜索",
         placeholder: "搜索文档",
         tokenize: 'full',
       })
     ]
   },
 })
avatar
文章
阅读
粉丝