使用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 搭建, 更有参与感,成就感.

相关推荐
jessezappy3 分钟前
jQuery-Word-Export 使用记录及完整修正文件下载 jquery.wordexport.js
前端·word·jquery·filesaver·word-export
旧林84330 分钟前
第八章 利用CSS制作导航菜单
前端·css
yngsqq42 分钟前
c#使用高版本8.0步骤
java·前端·c#
Myli_ing1 小时前
考研倒计时-配色+1
前端·javascript·考研
余道各努力，千里自同风1 小时前
前端 vue 如何区分开发环境
前端·javascript·vue.js
PandaCave1 小时前
vue工程运行、构建、引用环境参数学习记录
javascript·vue.js·学习
软件小伟1 小时前
Vue3+element-plus 实现中英文切换（Vue-i18n组件的使用）
前端·javascript·vue.js
醉の虾2 小时前
Vue3 使用v-for 渲染列表数据后更新
前端·javascript·vue.js
张小小大智慧2 小时前
TypeScript 的发展与基本语法
前端·javascript·typescript
hummhumm2 小时前
第 22 章 - Go语言 测试与基准测试
java·大数据·开发语言·前端·python·golang·log4j
热门推荐
01(欧拉)openEuler系统添加网卡文件配置流程、(欧拉)openEuler系统手动配置ipv6地址流程、(欧拉)openEuler系统网络管理说明02PyTorch机器学习实现液态神经网络03【HarmonyOS】HUAWEI DevEco Studio 下载地址汇总04玄机平台应急响应—webshell查杀05Coze扣子平台完整体验和实践（附国内和国际版对比）06Ubuntu 20.04使用Livox mid 360 测试 FAST_LIO07怎样让音频速度变慢？请跟随以下方法进行操作08Unity中PICO实现 隔空取物 和 接触抓取物体09RAG 实践- Ollama+RagFlow 部署本地知识库10【目标跟踪】相机运动补偿