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

VUE2024-02-22 10:08

1. vitepress 介绍

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

SSG 说明:

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

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

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

vitepress 特点

  1. 专注内容:

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

  2. 享受 Vite 无可比拟的体验

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

  3. 使用 Vue 自定义

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

  4. 速度真的很快！

    • 采用静态 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...

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

md 复制代码 
---
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="测试">
js 复制代码 
 export default defineConfig({
  // 站点标题 就是网站的名字
  title: "测试1",
  description: "xxxxxxx",
})

4.2 导航栏logo图标和文字

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

js 复制代码 
  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文件
js 复制代码 
  themeConfig: {
    ...

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

4.4 侧边导航栏配置

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

  • 比如学习相关的知识放在一个目录下面
  • 自己平常一些生活感悟放在一个目录下面
  • 自己平常一些繁琐的事情放在一个目录下面

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

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

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

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

js 复制代码 
  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 底部版权配置

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

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

5. 网站样式美化

新建文件, 如下图所示

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

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文件进行配置的

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

效果:

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

7. config.mjs文件 代码

js 复制代码 
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 搭建, 更有参与感,成就感.

相关推荐
周亚鑫9 分钟前
vue3 pdf base64转成文件流打开
前端·javascript·pdf
落魄小二18 分钟前
el-table 表格索引不展示问题
javascript·vue.js·elementui
y52364819 分钟前
Javascript监控元素样式变化
开发语言·javascript·ecmascript
Justinc.26 分钟前
CSS3新增边框属性（五）
前端·css·css3
fruge33 分钟前
纯css制作声波扩散动画、js+css3波纹催眠动画特效、【css3动画】圆波扩散效果、雷达光波效果完整代码
javascript·css·css3
neter.asia42 分钟前
vue中如何关闭eslint检测？
前端·javascript·vue.js
~甲壳虫42 分钟前
说说webpack中常见的Plugin？解决了什么问题？
前端·webpack·node.js
嚣张农民1 小时前
JavaScript中Promise分别有哪些函数？
前端·javascript·面试
光影少年1 小时前
vue2与vue3的全局通信插件，如何实现自定义的插件
前端·javascript·vue.js
As977_1 小时前
前端学习Day12 CSS盒子的定位（相对定位篇“附练习”）
前端·css·学习
热门推荐
01【HarmonyOS】HUAWEI DevEco Studio 下载地址汇总02(欧拉)openEuler系统添加网卡文件配置流程、(欧拉)openEuler系统手动配置ipv6地址流程、(欧拉)openEuler系统网络管理说明03组基轨迹建模 GBTM的介绍与实现（Stata 或 R）04【AIGC】重塑未来的科技巨轮05全面解析：构建基于深度学习的安全帽检测系统（UI界面+YOLO代码+数据集）06【经验分享】Ubuntu22.04安装微信(linux官方版)07基于YOLOv10深度学习的CT扫描图像肾结石智能检测系统【python源码+Pyqt5界面+数据集+训练代码】深度学习实战、目标检测08Ubuntu 20.04使用Livox mid 360 测试 FAST_LIO09RAG 实践- Ollama+RagFlow 部署本地知识库10红米手机使用google play