使用vitepress搭建自己的静态个人博客 || 个人知识库

2024-08-12 81

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介： 使用vitepress搭建自己的静态个人博客 || 个人知识库

1. vitepress 介绍

VitePress 由 Vite 和 Vue 驱动的静态站点生成器简单、强大、快速。就是你想要的现代 SSG 框架！

SSG 说明:

SSG（Static Site Generator）是一种用于生成静态网站的工具或框架。

它将网站的内容和模板文件作为输入，然后根据预定义的规则和配置生成静态的HTML、CSS和JavaScript文件。

与动态网站相比，静态网站不需要在每次请求时生成页面内容，因此可以提供更快的加载速度和更高的安全性。

vitepress 特点

专注内容:

只需 Markdown 即可轻松创建美观的文档站点。

享受 Vite 无可比拟的体验

服务器即时启动，闪电般的热更新，还可以使用基于 Vite 生态的插件。

使用 Vue 自定义

直接在 Markdown 中使用 Vue 语法和组件，或者使用 Vue 组件构建自定义主题。

速度真的很快！

采用静态 HTML 实现快速的页面初次加载，使用客户端路由实现快速的页面切换导航。

2. 安装

2.1 初始化项目

shell

pnpm init

或者

shell

npm init -y

2.2 安装vitepress

大家使用对应包管理工具进行安装即可,因为我是用的是pnpm 所以就以pnpm进行演示了

shell

pnpm add vitepress

2.3 使用vitepress指令快速搭建项目

shell

pnpm vitepress init

执行 pnpm run docs:dev 进去项目的启动

3. 首页配置文件介绍

官方关于首页相关的配置说明: vitepress.dev/zh/referenc…

相关配置说明我放在下面代码的注释里面了, 很好理解

---
layout: home
hero:
  # 主标题
  name: SunFei博客
  #   副标题
  text: VitePress + Vue 搭建
  #   内容介绍
  tagline: JavaScript Html CSS ThreeJs Uniapp Echarts ...
  
  
  # 右边图片
  image:
    src: /sq.svg
    alt: VitePress
    
    
  actions:
    # 按钮主题
    - theme: brand
    # 按钮文字
      text: 快速开始
      link: /markdown-examples
    - theme: alt
      text: vitepress官方
      link: https://vitepress.dev/
# 特色
features:
   # icon图标,目前只支持emoji
  - icon: ⚡️
    # 标题
    title: 前端知识
    #  介绍
    details: HTML CSS JavaScript TypeScript Vue3等部分的基础以及进阶的内容知识点,整合自己以及别人的资料 
  - icon: 🖖
    title: 数据结构与算法
    details: 介绍了基本数据结构以及相关的经典算法，强调问题-数据-算法的抽象过程，关注数据结构与算法的时间空间效率，培养编写出高效程序从而解决实际问题的综合能力。
  - icon: 🛠️
    title: 常用前端工具
    details: 提供一系列的提高前端开发效果的工具网站,例如UI渐变色生成器 盒子阴影调试 Flex Grid 布局调试 包括常用的图标库...
  - icon: 💓
    title: 个人项目难点总结
    details: 个人在开发项目中所遇到的技术难点,以及解决方案...
---

配置完之后,我们的首页就应该变成了这样

4. config.mjs文件说明

配置文件 (.vitepress/config.js) 让你能够自定义 VitePress 站点的各个方面，最基本的选项是站点的标题和描述,还有更多.... 下面进行介绍:

4.1 站点标题和介绍

站点 标题和介绍 类似于我们的html文件里面写的

html

<!-- 网站的标题 -->
    <title>测试</title>
    <!-- 网站的介绍说明 -->
    <meta name="description" content="测试">

export default defineConfig({
  // 站点标题 就是网站的名字
  title: "测试1",
  description: "xxxxxxx",
})

4.2 导航栏logo图标和文字

然后就是 导航栏的标题和 logo

export default defineConfig({
  // 站点标题 就是网站的名字
  title: "测试1",
  description: "xxxxxxx",
  themeConfig: {
    // nav导航栏 左边的logo旁边的文字
    siteTitle: 'Sun_Fei',
    // 网站左上角的logo图标
    logo: '/planet.svg',
 }
})

/planet.svg 会默认读取public文件下的planet.svg, 所以需要在目录里面创建该文件

效果:

4.3 顶部导航项

{} 一个对象表示一个路由配置
text: 文字
link: 点击文字跳转到指定的md文件

themeConfig: {
    ...
    // 右上角导航配置(路由)
    nav: [
      { text: '首页', link: '/' },
      { text: '样例', link: '/markdown-examples' },
      { text: '学习笔记', link: '/study/studyNotes' }
    ],
  }

4.4 侧边导航栏配置

通过配置侧边导航栏我们可以更好的管理每个模块的知识,

通过这样,对各个模块进行分类管理,使我们更好的查看笔记或者感悟什么的

我们以学习笔记这个模块进行编写

在study目录下面新建3个文件

然后在配置文件config.mjs 进行配置

themeConfig: {
    ....
  
    sidebar: [
      {
        items: [
          {
            text: '学习笔记',
            // 开启折叠按钮
            collapsible: true,
            collapsed: true,
            items: [
              { text: 'Vue学习笔记', link: '/study/vue.md' },
              { text: 'Node学习笔记', link: '/study/node.md' },
              { text: 'React学习笔记', link: '/study/react.md' }
            ]
          },
          { text: 'Markdown Examples', link: '/markdown-examples'},
          { text: 'Runtime API Examples', link: '/api-examples' }
        ]
      }
    ],
    
    ...
  }

效果:

对于其他的目录添加也是相同的 , 创建好文件, 在配置文件进行正确的路由配置,然后就可以正常跳转访问了.

4.5 底部版权配置

首页面底部展示版权相关的信息

sidebar: [],
    // 底部版权部分
    footer: {
      message: 'Released under the MIT License.',
      copyright: 'Copyright © 2023-present SunFei',
    },

5. 网站样式美化

新建文件, 如下图所示

在theme/index.js文件里面编写代码

// .vitepress/theme/index.js
import DefaultTheme from 'vitepress/theme'
import './custom.css'
export default DefaultTheme

在theme/custom.css进行样式代码编写

他将会应用到全局

css

/* 该文件配置网站的文字  图标 等等 一系列dom元素的样式文件 */
:root {
  /* 通过配置 自定义颜色 */
  --vp-home-hero-name-color: transparent;
  /* 主页标题文字的颜色  */
  --vp-home-hero-name-background: -webkit-linear-gradient(120deg, rgb(244, 145, 15), #7eaadf);
  /* 主页左侧背景添加渐变光圈 */
  --vp-home-hero-image-background-image: linear-gradient(135deg, #ff9100 10%, #ffc400 50%);
  --vp-home-hero-image-filter: blur(100px);
  /* botton按钮 */
  /* --vp-button-brand-border: #81634b; */
  /* 按钮文本颜色 */
  --vp-button-brand-text: #ffffff;
  /* 按钮背景颜色 */
  --vp-button-brand-bg: #ff9100;
  /* 鼠标悬停的效果之后的样式 */
  --vp-button-brand-hover-border: #00FFEE;
  --vp-button-brand-hover-text: #000000;
  --vp-button-brand-hover-bg: #00FFEE;
  --vp-button-brand-active-border: #ff7500;
  /* 主题基色 */
  --vp-c-brand: #ff8400;
  /* 白色模式 主题基色 */
  --vp-c-brand-light: #ff8400;
  /* 黑色模式 主题基色 */
  --vp-c-brand-dark: #ff8400;
}

在控制台找到对应的属性变量, 复制变量, 填写新值, 就可以覆盖原有的样式

6. 其他设置

6.1代码块行数显示和高亮

也是在config.mjs文件进行配置的

markdown: {
    // 代码块风格
    theme: 'material-theme-palenight',
    // theme:'github-light',
    // 代码块显示行数
    lineNumbers: true,
  },
themeConfig{ ...}

效果:

官方也给出了关于代码块相关的第三方插件大家感兴趣可以去看看,功能还是蛮多的 vitepress.dev/zh/guide/ma…

7. config.mjs文件代码

import { defineConfig } from 'vitepress'
// https://vitepress.dev/reference/site-config
export default defineConfig({
  // 站点标题 就是网站的名字
  title: "测试1",
  description: "xxxxxxx",
  themeConfig: {
    // nav导航栏 左边的logo旁边的文字
    siteTitle: 'Sun_Fei',
    // 网站左上角的logo图标
    logo: '/planet.svg',
    // 右上角导航配置(路由)
    nav: [
      { text: '首页', link: '/' },
      { text: '样例', link: '/markdown-examples' },
      { text: '学习笔记', link: '/study/studyNotes' }
    ],
    sidebar: [
      {
        items: [
          {
            text: '学习笔记',
            // 开启折叠按钮
            collapsible: true,
            collapsed: true,
            items: [
              { text: 'Vue学习笔记', link: '/study/vue.md' },
              { text: 'React学习笔记', link: '/study/react.md' },
              { text: 'Node学习笔记', link: '/study/node.md' },
            ]
          },
          { text: 'Markdown Examples', link: '/markdown-examples' },
          { text: 'Runtime API Examples', link: '/api-examples' }
        ]
      }
    ],
   
    // 配置成自己的的github地址, 当然也可以配置掘金的icon 和 掘金的地址
    socialLinks: [
      { icon: 'github', link: 'https://github.com/vuejs/vitepress' }
    ],
    // 底部版权部分
    footer: {
      message: 'Released under the MIT License.',
      copyright: 'Copyright © 2023-present SunFei',
    },
  },
  markdown: {
    // 代码块风格
    theme: 'material-theme-palenight',
    // theme:'github-light',
    // 代码块显示行数
    lineNumbers: true,
  },
})

8. 结语

先说到这里吧, 后续我会搭建一个基础模块,放在gitee里面,大家如果想使用vitepress 搭建自己的博客, 可以采用. 当然也可以自己从0 到 1 搭建, 更有参与感,成就感.

gitee地址: gitee.com/sunfei666/v… github地址: github.com/SunFei12345…

使用vitepress搭建自己的静态个人博客 || 个人知识库

1. vitepress 介绍

2. 安装

2.1 初始化项目

2.2 安装vitepress

2.3 使用vitepress指令快速搭建项目

3. 首页配置文件介绍

4. config.mjs文件说明

4.1 站点标题和介绍

4.2 导航栏logo图标和文字

4.3 顶部导航项

4.4 侧边导航栏配置

4.5 底部版权配置

5. 网站样式美化

6. 其他设置

6.1代码块行数显示和高亮

7. config.mjs文件代码

8. 结语

热门文章

最新文章

相关电子书

相关实验场景

热门

活动广场

任务中心

开发者评测

高校计划

乘风者计划

训练营

阿里云MVP

话题

直播

下载

镜像站

技术资料

插件

使用vitepress搭建自己的静态个人博客 || 个人知识库

1. vitepress 介绍

2. 安装

2.1 初始化项目

2.2 安装vitepress

2.3 使用vitepress指令快速搭建项目

3. 首页配置文件介绍

4. config.mjs文件说明

4.1 站点标题和介绍

4.2 导航栏logo图标和文字

4.3 顶部导航项

4.4 侧边导航栏配置

4.5 底部版权配置

5. 网站样式美化

6. 其他设置

6.1代码块行数显示 和 高亮

7. config.mjs文件 代码

8. 结语

热门文章

最新文章

相关电子书

相关实验场景

6.1代码块行数显示和高亮

7. config.mjs文件代码