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

news2024/12/23 5:05:17

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

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

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

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

文章目录

  • VuePress搭建站点的简易配置
    • 1. 配置文件config.js
      • 1.1 配置文件优先级
      • 1.2 指定配置文件
      • 1.3 配置文件内容
    • 2. 关于博客站点的简易配置
      • 2.1 页面文件的创建
      • 2.2 链接配置
      • 2.3 导航栏配置
        • 2.3.1 文件路由配置
        • 2.3.2 网页路由配置
        • 2.3.3 完整代码及页面展示
    • 3. 总结

本篇为博客的简易配置

关于其他详细配置项，如站点基础配置参数、主题配置、打包工具配置、通用配置等等
可参考文章专栏链接：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个人博客专栏

感谢阅读，祝君暴富！

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/2135797.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

sourcetree配置ssh连接gitee

sourcetree配置ssh连接gitee

使用PuttyGen.exe生成的公钥私钥格式和git文档方法生成的不一样&#xff0c; SSH 公钥设置 | Gitee 帮助中心 gitee方法生成的公钥类似&#xff1a; ssh-ed25519 AAAA***5B Gitee SSH Key PuttyGen.exe生成的&#xff1a; 公钥 ---- BEGIN SSH2 PUBLIC KEY ---- Comment:…
阅读更多...
15个顶级ChatGPT学术提示词指令，让学术研究与撰写论文，轻松上手，效率翻倍

15个顶级ChatGPT学术提示词指令，让学术研究与撰写论文，轻松上手，效率翻倍

大家好，我将通过这篇文章详细介绍如何有效利用ChatGPT来增强学术写作的各个环节。从论文陈述的精炼到数据的深入分析，从研究主题的探索到论文各部分的撰写，为大家一步一步展示如何通过这些工具来提升研究工作的质量和效率。 1.完善论文陈述： 输入你的初步论文陈述，ChatG…
阅读更多...
【YashanDB知识库】数据库获取时间和服务器时间不一致

【YashanDB知识库】数据库获取时间和服务器时间不一致

本文转自YashanDB官网&#xff0c;具体内容可见数据库获取时间和服务器时间不一致 【问题分类】功能使用 【关键字】服务器时间、数据库时间 【问题描述】数据库获取的时间和服务器时间不一致。 【问题原因分析】YashanDB并没有时区的概念&#xff0c;数据库的时间以数据库启…
阅读更多...
红黑树的删除

红黑树的删除

文章目录 前言一.删除的节点左子树右子树都有二.删除的节点只有左/右子树删除调整操作 三.删除的节点没有孩子1.删除的节点为红色2.删除的节点为黑色1).兄弟节点为黑色(1).兄弟节点至少有一个红色的孩子节点LL型RR型RL型LR型 (2).兄弟节点没有孩子或所有孩子为黑色 2).兄弟节点…
阅读更多...
Redis实现发布/订阅功能（实战篇）

Redis实现发布/订阅功能（实战篇）

前言 博主在学习 Redis 实现发布订阅功能的时候&#xff0c;踩了太多的坑。 不是讲解不详细&#xff0c;看的一知半解&#xff1b;就是代码有问题&#xff0c;实际压根跑不起来&#xff01; 于是博主萌生了自己写一个最新版且全程无错的博客供各位参考。希望各位不要把我才过…
阅读更多...
C语言浮点型数据在内存中的存储(23)

C语言浮点型数据在内存中的存储(23)

文章目录 前言一、浮点数在内存中的存储练习引入浮点数的存储浮点数存的过程 二、浮点数取的过程E不全为0或不全为1E全为0E全为1 三、再回顾练习总结 前言 哎&#xff0c;之前写了一篇&#xff0c;可是中途退出没保存&#xff0c;只能再写一遍了~   浮点数在内存中的存储跟整…
阅读更多...
智汇创想pytest接口自动化测试框架

智汇创想pytest接口自动化测试框架

本测试框架是基于pytest搭建的接口自动化框架&#xff0c;对象为深圳智汇创想官方网站。深圳智汇创想科技有限责任公司&#xff08;深圳智汇创想科技有限责任公司&#xff09;&#xff0c;是一家专注于跨境电子商务的集团公司&#xff0c;全球电商平台多品类多品牌的零售商&…
阅读更多...
什么是APT攻击，有哪些防御策略

什么是APT攻击，有哪些防御策略

在数字化时代&#xff0c;网络安全已成为国家、企业和个人不可忽视的重要议题。其中&#xff0c;高级持续性威胁&#xff08;APT&#xff09;攻击以其隐蔽性强、攻击规模大、持续时间长等特点&#xff0c;成为网络安全领域最为棘手的问题之一。面对APT攻击的严峻挑战&#xff0…
阅读更多...
Unity 场景优化（1） game视口的Statistics 内容介绍

Unity 场景优化（1） game视口的Statistics 内容介绍

Unity的 Statistics &#xff08;stats&#xff09; Unity是多线程的。但是控制使用unity的api必须在主线程中&#xff0c;比如控制物体的transform信息。 Audio Level&#xff1a; DSP Load&#xff1a;数字信号处理&#xff08;Digital Signal Processing&#xff09;负载&…
阅读更多...
空间视频化趋势理解

空间视频化趋势理解

「视频空间化」这个趋势不是从现在开始&#xff0c;而是潜在发展了很多年了&#xff0c;而且我个人觉得「视频空间化」的背后其实对应的是「空间视频化」的趋势&#xff0c;所以未来我们还是要注重自己的技术栈中对视频相关处理技术的吸收以及整合&#xff0c;下面是我的几个理…
阅读更多...
Jenkins生成html报告

Jenkins生成html报告

下载插件 1.需要下载插件 html Publisher plugins 2.下载Groovy(设置css样式&#xff09;&#xff0c;默认没有css样式 在Job配置页面&#xff0c;增加构建步骤Execute system Groovy script&#xff0c;在Groovy Command中输入上面命令&#xff0c;即可&#xff1a; System.…
阅读更多...
清理C盘缓存的垃圾，专业清理C盘缓存垃圾与优化运行内存的策略

清理C盘缓存的垃圾，专业清理C盘缓存垃圾与优化运行内存的策略

专业清理C盘缓存垃圾与优化运行内存的策略 一、清理C盘缓存垃圾 在Windows操作系统中&#xff0c;C盘通常作为系统盘&#xff0c;其健康状况直接影响到系统的整体性能。定期清理C盘中的缓存和垃圾文件是维护系统性能的重要步骤。以下是一些专业建议&#xff1a; 1.使用磁盘清…
阅读更多...
二叉树链式结构与简单实现

二叉树链式结构与简单实现

二叉树链式结构与简单实现 一、二叉树的链式结构二、二叉树的简单实现二叉树的遍历前序、中序以及后序遍历层序遍历 结点个数以及高度等二叉树的创建和销毁判断二叉树是否为完全二叉树 三、源码展示在 BinaryTree.h 中&#xff1a;在 BinaryTree.c 中&#xff1a; 以下代码环境…
阅读更多...
建筑机器人通用操作系统设计方案

建筑机器人通用操作系统设计方案

建筑机器人操作系统通用发行版概述 1. 基础版&#xff08;Entry Level&#xff09; 目标用户&#xff1a;小型建筑公司、DIY爱好者或初学者。特点&#xff1a;提供基础的机器人控制和任务管理功能&#xff0c;支持简单的自动化作业流程&#xff0c;如基础的混凝土搅拌、物料搬…
阅读更多...
微信批量自动添加好友

微信批量自动添加好友

现代社交领域中&#xff0c;微信已然成为人们生活中不可或缺的一部分。它不仅是朋友之间保持联系、分享生活点滴的重要沟通工具&#xff0c;更是商务人士拓展人脉、开展业务的得力助手。 在日常生活中&#xff0c;我们每天都会结识许多新朋友&#xff0c;这无疑为我们的社交圈…
阅读更多...
两段有趣的代码（C语言函数指针）

两段有趣的代码（C语言函数指针）

目录 part1part2 两段有趣的代码 part1 (*(void (*)())0)();我们知道函数指针&#xff1a; void (*p)()去掉函数指针变量名就是函数指针的类型&#xff1a; void (*)()那这段代码我们就可以理解为将0强制转换为函数指针类型&#xff0c;再进行解引用;进行调用函数&#xff…
阅读更多...
python容器四之字典

python容器四之字典

文章目录 1. 字典介绍2. 使用字典3. 字典的常见操作3.1 添加元素3.2 删除元素3.3 修改元素3.4 查找元素 4. 字典遍历方法4.1 遍历字典元素 5. 公共运算符6. 公共方法 1. 字典介绍 先来看看现实生活中的字典。我们知道&#xff0c;可以应用字典来查找汉字。 在这里插入图片描述…
阅读更多...
Hash 专题

Hash 专题

一、散列表 根据 key 计算 key 在表中的位置的数据结构&#xff1b;是 key 和其所在 存储地址的映射关系&#xff1b; 注意&#xff1a;散列表的节点中 kv 是存储在一起的&#xff1b; 结构&#xff1a; 二、选择hash的原因 1、需要很强的查找效率 2、强随机分布&#xff…
阅读更多...
计算机网络：概述 - 计算机网络概述

计算机网络：概述 - 计算机网络概述

目录 一. 互联网概述 1.1 网络 1.2 互联网 1.3 因特网 二. 互联网发展的三个阶段 三. 互联网的标准化工作 四. 互联网的组成 五. 计算机网络的类别 5.1 计算机网络的定义 5.2 计算机网络的不同类别 一. 互联网概述 起源于美国的互联网现如今已…
阅读更多...
前端必知必会-响应式网页设计之媒体查询

前端必知必会-响应式网页设计之媒体查询

文章目录 响应式网页设计 - 媒体查询什么是媒体查询&#xff1f;添加断点始终以移动设备为先进行设计另一个断点典型的设备断点方向&#xff1a;纵向/横向使用媒体查询隐藏元素使用媒体查询更改字体大小 总结 响应式网页设计 - 媒体查询 什么是媒体查询&#xff1f; 媒体查询…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023