VuePress搭建文档网站/个人博客(简单配置、易上手)


天行健,君子以自强不息;地势坤,君子以厚德载物。


每个人都有惰性,但不断学习是好好生活的根本,共勉!


文章均为学习整理笔记,分享记录为主,如有错误请指正,共同学习进步。


金陵子弟来相送,欲行不行各尽觞。
请君试问东流水,别意与之谁短长?
——《金陵酒肆留别》



本篇为博客的简易配置

关于其他详细配置项,如站点基础配置参数、主题配置、打包工具配置、通用配置等等
可参考文章专栏链接:VuePress个人博客专栏


VuePress搭建站点的简易配置

1. 配置文件config.js

VuePress站点的基本配置文件是.vuepress/config.js

1.1 配置文件优先级

需要注意,配置文件也支持ts,会有更好的类型提示,即可将文件定义为.vuepress/config.ts
如果同时配置了多个config配置文件(如config.ts、config.js、config.mjs),生效的优先级如下
优先级从高到低:

ts>js>mjs 
.vuepress/config.ts>.vuepress/config.js>.vuepress/config.mjs

1.2 指定配置文件

除默认的配置文件外,还可以通过–config命令指定配置文件,命令如下

vuepress dev docs --config my-config.ts

1.3 配置文件内容

config.js基础的配置内容如下

import {
    
     viteBundler } from '@vuepress/bundler-vite'
import {
    
     defaultTheme } from '@vuepress/theme-default'
import {
    
     defineUserConfig } from 'vuepress'

export default defineUserConfig({
    
    
  bundler: viteBundler(),
  theme: defaultTheme(),

  lang: 'zh-CN',
  title: '你好, VuePress !',
  description: '这是我的第一个 VuePress 站点',
})

2. 关于博客站点的简易配置

现在开始,逐一实现博客的页面文件、路由、导航栏等配置

2.1 页面文件的创建

vuepress搭建的站点,页面显示的内容就是markdown文件中的内容
我们需要创建一些markdown文件并填充一些内容
docs目录下的README.md文件(如没有该文件可直接创建)
该文件就是访问站点的首页默认展示的页面文件
内容填充如下
README.md

# 寒山李白的个人博客


## 1. 作者介绍
### 1.1 姓名
寒山
李白
寒山李白

### 1.2 籍贯
安徽

### 1.3 技能
睡觉
吃饭
码字
王者

### 1.4 爱好
爬山
跑步
冥想

### 1.5 名言
多学技能,多读书,有个信仰,自律点



## 2. 博客介绍

### 2.1 主题
学习新技能,实践见真知

### 2.2 内容
该博客内容以娱乐为主

### 2.3 宗旨
不断克服困难,永攀第二

### 2.4 合作
和自己合作,和自己和解


## 3. 将进酒
君不见黄河之水天上来,奔流到海不复回。

君不见高堂明镜悲白发,朝如青丝暮成雪。

人生得意须尽欢,莫使金樽空对月。

天生我材必有用,千金散尽还复来。

烹羊宰牛且为乐,会须一饮三百杯。

岑夫子,丹丘生,将进酒,杯莫停。

与君歌一曲,请君为我倾耳听。

钟鼓馔玉不足贵,但愿长醉不复醒。

古来圣贤皆寂寞,惟有饮者留其名。

陈王昔时宴平乐,斗酒十千恣欢谑。

主人何为言少钱,径须沽取对君酌。

五花马、千金裘,呼儿将出换美酒,与尔同销万古愁。 



### 3.1 将近酒
君不见黄河之水天上来,奔流到海不复回。

君不见高堂明镜悲白发,朝如青丝暮成雪。

人生得意须尽欢,莫使金樽空对月。

天生我材必有用,千金散尽还复来。

烹羊宰牛且为乐,会须一饮三百杯。

岑夫子,丹丘生,将进酒,杯莫停。

与君歌一曲,请君为我倾耳听。

钟鼓馔玉不足贵,但愿长醉不复醒。

古来圣贤皆寂寞,惟有饮者留其名。

陈王昔时宴平乐,斗酒十千恣欢谑。

主人何为言少钱,径须沽取对君酌。

五花马、千金裘,呼儿将出换美酒,与尔同销万古愁。 
### 3.2 将进酒
君不见黄河之水天上来,奔流到海不复回。

君不见高堂明镜悲白发,朝如青丝暮成雪。

人生得意须尽欢,莫使金樽空对月。

天生我材必有用,千金散尽还复来。

烹羊宰牛且为乐,会须一饮三百杯。

岑夫子,丹丘生,将进酒,杯莫停。

与君歌一曲,请君为我倾耳听。

钟鼓馔玉不足贵,但愿长醉不复醒。

古来圣贤皆寂寞,惟有饮者留其名。

陈王昔时宴平乐,斗酒十千恣欢谑。

主人何为言少钱,径须沽取对君酌。

五花马、千金裘,呼儿将出换美酒,与尔同销万古愁。 
### 3.3 将进酒
君不见黄河之水天上来,奔流到海不复回。

君不见高堂明镜悲白发,朝如青丝暮成雪。

人生得意须尽欢,莫使金樽空对月。

天生我材必有用,千金散尽还复来。

烹羊宰牛且为乐,会须一饮三百杯。

岑夫子,丹丘生,将进酒,杯莫停。

与君歌一曲,请君为我倾耳听。

钟鼓馔玉不足贵,但愿长醉不复醒。

古来圣贤皆寂寞,惟有饮者留其名。

陈王昔时宴平乐,斗酒十千恣欢谑。

主人何为言少钱,径须沽取对君酌。

五花马、千金裘,呼儿将出换美酒,与尔同销万古愁。 

此时可访问页面,效果如下
在这里插入图片描述
在docs目录下创建文件LIBAI.md,内容填充如下

# 李白诗集精选

李白的唐诗精选内容

在docs目录下创建note目录,在note目录下创建两个md文件
dufu.md

# dufu

dufu

wangwei.md

# wangwei

wangwei

文件创建完毕,接下来进行页面内容中的链接配置

2.2 链接配置

在页面中除了文字还可以配置链接,链接可进行跳转,链接可以是文件路径也可以是url网址
在README.md文件中添加以下几种链接
相对路径链接(LIBAI.md)

<!-- 相对路径 以当前路径为起点-->
[李白个人主页](./LIBAI.md)

绝对路径链接(dufu.md)

<!-- 绝对路径 docs为根路径 -->
[杜甫个人主页](/note/dufu.md)

url链接(百度)

<!-- url链接 -->
[百度地址](https://www.baidu.com)

页面效果展示
在这里插入图片描述

2.3 导航栏配置

在首页的右上方,除了主题黑白按钮外,还可以配置一些路由导航,可以是文件路由也可以是网页路由
导航栏配置是在docs/.vuepress/config.js文件中的theme部分中用navbar进行配置

  theme: defaultTheme({
    
    

    // 导航栏
    navbar: [{
    
    
    	//导航栏配置部分
    }],
  }),
2.3.1 文件路由配置

文件路由配置,分为首页导航、单层导航、导航栏组

      // 首页导航栏配置,默认路径为/
      {
    
    
        text: '首页',
        link: '/'
      },
      // 其他页面文件的导航配置
      {
    
    
        text: '杜甫',
        link: '/note/dufu.md'
      },
      {
    
    
        text: '王维',
        link: '/note/wangwei.md'
      },
      // 导航栏组的配置
      {
    
    
        text: '诗人名单',
        prefix: '/note/',
        children: [
          {
    
    
            text: '杜甫',
            link: '/note/dufu.md'
          },
          {
    
    
            text: '王维',
            link: '/note/wangwei.md'
          },
        ]
      },
2.3.2 网页路由配置

网页路由导航的配置,即直接跳转到别的网址

      // url导航栏配置
      {
    
    
        text: '百度',
        link: 'https://www.baidu.com'
      },
2.3.3 完整代码及页面展示

docs/.vuepress/config.js完整代码如下

import {
    
     viteBundler } from '@vuepress/bundler-vite'
import {
    
     defaultTheme } from '@vuepress/theme-default'
import {
    
     defineUserConfig } from 'vuepress'

export default defineUserConfig({
    
    
  // 导包配置
  bundler: viteBundler(),
  // 主题配置
  theme: defaultTheme({
    
    

    // 导航栏
    navbar: [
      // 首页导航栏配置,默认路径为/
      {
    
    
        text: '首页',
        link: '/'
      },
      // 其他页面文件的导航配置
      {
    
    
        text: '杜甫',
        link: '/note/dufu.md'
      },
      {
    
    
        text: '王维',
        link: '/note/wangwei.md'
      },
      // 导航栏组的配置
      {
    
    
        text: '诗人名单',
        prefix: '/note/',
        children: [
          {
    
    
            text: '杜甫',
            link: '/note/dufu.md'
          },
          {
    
    
            text: '王维',
            link: '/note/wangwei.md'
          },
        ]
      },
      // url导航栏配置
      {
    
    
        text: '百度',
        link: 'https://www.baidu.com'
      },

    ],

  }),
  
  // 语言配置
  lang: 'zh-CN',
  // 标题配置
  title: '欢迎来到寒山李白的博客!',
  // 描述
  description: '这是我的第一个 VuePress 站点',
})

页面效果展示
在这里插入图片描述
点击导航栏可进行跳转,查看不同的文件页面

3. 总结

到此,关于个人博客的基础配置就完成了
可以进行简单的博客配置,创建属于自己的博客内容
当然了,这只是本地启动的一个服务,如果想部署到服务器,或者配置更多功能
可以参考文章专栏:VuePress个人博客专栏


感谢阅读,祝君暴富!


猜你喜欢

转载自blog.csdn.net/mo_sss/article/details/141986683