VuePress安装及使用——使用 Markdown 创建你自己的博客网站和电子书

目录

  • 前言
  • 一、依赖环境
  • 二、vuepress 安装和使用
    • 1.初始化
    • 2.将 VuePress 安装为本地依赖
    • 3. package.json 中添加脚本
    • 4. 新建 docs 文件夹
    • 5.启动
    • 6. 效果
  • 三、进阶使用
    • 1.新增配置文件
    • 2.安装搜索插件
    • 3.config.js 中增加配置
    • 4.效果展示
    • 5.注意
  • 四、使用主题
    • 1.安装
    • 2. 目录结构说明
      • (1)README.md
      • (2).vuepress 文件夹
    • 3. 修改配置
    • 4. 启动
    • 5. 效果

前言

VuePress 是一个以 Markdown 为中心的静态网站生成器。你可以使用 Markdown 语法来书写内容(如文档、博客等),然后 VuePress 会帮助你生成一个静态网站来展示它们。

例如:JavaFX 前言

这个博客网站就是使用 VuePress 生成的,你只需要使用 Markdown 来书写文章内容,其他的 VuePress 帮你搞定。

VuePress 相比于其他以 Markdown 为中心的静态网站生成器,如 mdBook 、GitBook、Hexo、Nuxt、VitePress、Docsify 、Docute 更加简单方便,如果你会前端你还可以自己定制主题。

一、依赖环境

  • Node.js ,版本需要大于等于 18.16.0
  • 包管理器,如 npm 或者 pnpm、yarn 等。

若你还没安装 Node.js,可以参考 Node.js安装与配置 进行下载安装。

二、vuepress 安装和使用

1.初始化

新建一个文件夹,我这里新建的文件夹叫 vuepress ,打开 cmd 窗口进入 vuepress 文件夹所在路径。

然后 cmd 命令行中输入下面的命令,将初始化生成一个 package.json 文件:

npm init -y

2.将 VuePress 安装为本地依赖

npm install -D vuepress@next

3. package.json 中添加脚本

package.json 中的 scripts 里添加两行启动脚本

	"docs:dev": "vuepress dev docs","docs:build": "vuepress build docs"

最终的 package.json 长这样:

{"name": "vuepress","version": "1.0.0","description": "","main": "index.js","scripts": {"test": "echo \"Error: no test specified\" && exit 1","docs:dev": "vuepress dev docs","docs:build": "vuepress build docs"},"keywords": [],"author": "","license": "ISC","devDependencies": {"vuepress": "^2.0.0-rc.0"}
}

4. 新建 docs 文件夹

vuepress 文件夹下新建 docs 文件夹,用于存放所有的 Markdown 文件。

docs 文件夹下新建 README.md 文件,你可以在 README.md 写点内容。

5.启动

执行如下命令启动,启动成功后,会在 docs 下自动生成 .vuepress 文件夹,用于配置。

npm run docs:dev

启动后,你可以浏览器打开http://localhost:8080/ 查看刚才的 README.md 渲染效果 。

6. 效果

在这里插入图片描述

三、进阶使用

假如你有很多文章,其中一些是 java 相关的,其中一些是 python 相关的,那怎么让左边的侧边栏分类并只显示文章名称呢?

另外,怎么给最上面的导航栏加上自己的头像、昵称、文章搜索框、和其他导航呢?

1.新增配置文件

vuepress/docs/.vuepress/ 下新建 config.js 文件。该配置文件用于配置插件、主题、导航栏、侧边栏等。

vuepress/docs/.vuepress/ 下新建 public 文件夹 ,public 文件夹 下 再新建 images 文件夹,把你的头像 logo 图片放里面。

2.安装搜索插件

vuepress 目录下,命令行执行如下命令安装搜索插件:

npm i -D @vuepress/plugin-search@next

3.config.js 中增加配置

下面是我的配置,可参考修改使用。

import { defaultTheme } from 'vuepress'
import { searchPlugin } from '@vuepress/plugin-search'export default{title: '山下海棠',description: '山下海棠',theme: defaultTheme({logo: "/images/head.jpg", //头像logo,默认使用 public 文件夹下的资源,所以路径里不用加 public//头部导航栏配置。可使用link方式来自动扫描对应路径下的Markdown文章;也可以使用 children 方式手动向数组中加入文章navbar: [  {text: 'java',link: '/java/',},{text: 'python',children: ['/python/JSON.md', '/python/openpyxl.md', '/python/spider.md'],}],sidebarDepth: 0, //设置为0,左侧侧边栏文章下不显示标题列表sidebar: [       //sidebar控制左边侧边栏{text: "🧭 java",collapsible: true, //可折叠children: ["/java/socketAndNetty.md","/java/stream.md",],},{text: "☕ python",collapsible: true,	//可折叠children: ["/python/JSON.md","/python/openpyxl.md","/python/spider.md",],}]}),plugins: [searchPlugin({locales: {'/': {placeholder: '搜索文章',},},}),],
}

最终,我的文件目录结构如下:

(如果你的 Markdown 文章里要插入图片,可以在 docs 文件夹下新建 images 文件夹,把图片都放里面,然后在 Markdown 文章里使用相对路径来插入图片)

└─ docs└─ .vuepress│    ├─ public│    │   └─ images│    │	     └─ head.jpg│    └─ config.js  ├─ java │    ├─ socketAndNetty.md│    └─ stream.md├─ python│    ├─ JSON.md│    ├─ openpyxl.md│    └─ spider.md└─ README.md

4.效果展示

在这里插入图片描述

5.注意

在 markdown 语法里:
# 表示一级标题
## 表示二级标题
### 表示三级标题
而 vuepress 在解析渲染的时候会把 markdown 文章里第一个出现的 # 作为文章名,所以建议
文章中第一行使用 # 来作为文章名,使用 ## 作为一级标题 ,使用 ### 作为二级标题。

例如:
就像上面效果展示里,我的 python中JSON使用 这篇文章 markdown 是这样写的:

# python中JSON使用
::: details 目录[[toc]]:::## 一、字典(JSON 对象)与JSON字符串的转换### 1.字典转JSON字符串......省略代码块### 2.JSON字符串转字典......省略代码块

此外,vuepress 增加了一些对 Markdown 的语法扩展,可参考官网:Markdown 语法扩展

四、使用主题

上面三部分简单的讲解了怎么安装和使用 vuepress ,但页面还不够美观,为此我们可以使用主题。

vuepress 官方提供了一个官方的主题 vuepress-theme-hope

它满足了例如文本对齐、标记、流程图、公式、演示等,同时大大改进了美观度,而且通过主题插件为 VuePress 提供了全方位的增强功能。

如果你想安装其他主题,可在这里寻找社区主题:vuepress 主题

1.安装

vuepress 下新建一个文件夹,我这里建了一个叫 themeHope 的文件夹。

使用如下命令安装 vuepress-theme-hope 主题:

npm init vuepress-theme-hope add themeHope

按照提示选择语言和一些基本操作,等待安装完成,启动项目,然后打开 http://localhost:8080/ 可以看到预览效果。

2. 目录结构说明

当安装完 vuepress-theme-hope 主题后,themeHope 文件夹下会生成 README.md.vuepress 文件夹,下面对它们进行简单说明。

(1)README.md

README.md 是博客首页的配置,首页根据此配置文件生成。如果你不需要博客首页可以将其中的配置 home: true 修改为 home: false

首页的更多配置你可以参考官网的:首页配置 和 主页 Frontmatter 配置

(2).vuepress 文件夹

themeHope/.vuepress/ 文件夹下会生成如下配置文件和文件夹:

  • bublic :该文件夹用来存放图片和静态资源
  • config.ts :整体配置文件
  • navbar.ts :头部导航栏配置文件
  • sidebar.ts :左侧导航栏配置文件
  • theme.ts :主题配置文件

3. 修改配置

(1).删除 themeHope 文件夹下生成的 demo guide 演示示例文件夹。

(2).将项目根目录下 docs 文件夹下的 java python 文件夹复制到 themeHope 文件夹下,然后删除根目录下docs 文件夹。

(3).修改 hemeHope/.vuepress/sidebar.ts 侧边栏配置

import { sidebar } from "vuepress-theme-hope";export default sidebar({"/": ["",{text: "java",				 //显示的类目名称icon: "book",				//图标collapsible: true,        //侧边栏可折叠prefix: "java/",		   //该类目文章所在的文件夹children: "structure",   //自动获取所有文章生成侧边栏},{text: "python",icon: "laptop-code",collapsible: true,prefix: "python/",children: "structure",},],
});

(4).修改 hemeHope/README.md 首页配置,home: true 修改为 home: false 关闭首页

4. 启动

执行启动命令

npm run docs:dev

启动后, 浏览器打开 http://localhost:8080 查看效果。

5. 效果

在这里插入图片描述


参考:
vuepress快速上手
vuepress配置
theme-hope主题
秒建炫酷的开源项目文档,这款工具用起来够优雅!
VuePress-theme-hope2搭建个人网站

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

MeterSphere 和 Yapi 接口测试功能对比

一、产品介绍 MeterSphere 是一站式开源持续测试平台,涵盖测试跟踪、接口测试、UI 测试和性能测试等,全面兼容 JMeter、Selenium 等主流开源标准,有效助力开发和测试团队在线共享协作,实现端到端的测试管理跟踪可视化、自动化测试…

Hadoop3.x完全分布式模式下slaveDataNode节点未启动调整

目录 前言 一、问题重现 1、查询Hadoop版本 2、集群启动Hadoop 二、问题分析 三、Hadoop3.x的集群配置 1、停止Hadoop服务 2、配置workers 3、从节点检测 4、WebUI监控 总结 前言 在大数据的世界里,Hadoop绝对是一个值得学习的框架。关于Hadoop的知识&…

git修改远程commit信息

git 修改远程commit信息 如果你已经把本地commit的信息push到远程了,此时需要修改远程中的commit信息 第一步:git log 查看提交的信息,看下提交的commit日志 如下入所示 第二步:然后确定你需要修改的那一次commit,比如&#xf…

运营Instagram的实用必备工具分享!

Instagram作为目前全球最受欢迎的社交媒体平台之一,已经成为品牌推广和营销的重要渠道。然而,要在Instagram上成功运营并吸引更多的关注者和用户参与,需要借助一些实用的工具来提升效率和效果。在本篇博客文章中,我们将分享10个运…

简单的绑定发布事件

在绑定事情之前,我们需要对我们的需求进行分析;判断我们是否需要同时存在条件。 发布动态的时候,分为以下三种情况: ① 输入了标题,没有图片,可以发布动态 ②输入了图片,没有标题,…

清空缓存区的方法

fflush(文件指针) fflush()用于刷新相应文件的缓存区。 使用getchar()函数来清空标准输入缓存区 上面的fflush是一个函数,有些编译器不一定支持,这时候我们可以自己实现清空标准输入缓存区的操作。 代码示例: 使用scanf()的高级特性来清空标准输入缓存区 上面代码的意思是: …

GO 的 socks5代理 编写

这里学习一下 socks5 代理的编写 网上有很多 学习一下 go 语言实战入门案例之实现Socks5 - 知乎 滑动验证页面 socks5协议原理学习-腾讯云开发者社区-腾讯云 (tencent.com) 首先我们要了解一下socks5的代理方式 socks5 是基于 认证建立连接转发数据 所形成的代理 我们只…

Wireshark统计和可视化

第一章:Wireshark基础及捕获技巧 1.1 Wireshark基础知识回顾 1.2 高级捕获技巧:过滤器和捕获选项 1.3 Wireshark与其他抓包工具的比较 第二章:网络协议分析 2.1 网络协议分析:TCP、UDP、ICMP等 2.2 高级协议分析:HTTP…

LLMs推理框架总结

总结一下这些框架的特点,如下表所示: LLM推理有很多框架,各有其特点,下面分别介绍一下表中七个框架的关键点: vLLM:适用于大批量Prompt输入,并对推理速度要求高的场景;Text generat…

P1011 [NOIP1998 提高组] 车站 ---Java

主打一个枚举找规律... 站台123456...上车ababa2b2a3b3a5b下车bbaba2b2a3b人数aa2a2ab3a2b4a4b 上车这一行: 观察a的系数(假设是dx[i])可知: dx[i] dx[i-1] dx[i-2] b的系数(假设是dy[i])可知: dy[i] dy[i-1] dy[i-2] 人数…

黑豹程序员-vue3获取拖动div后的坐标

<script lang"ts" setup> import {ref, reactive, onMounted} from vuelet startclientX ref(0) // 元素拖拽前距离浏览器的X轴位置 let startclientY ref(0) //元素拖拽前距离浏览器的Y轴位置 let elLeft ref(770) // 元素的左偏移量 let elTop ref(220) …

android的bundle的常用函数(ChatGPT)

在 Android 中&#xff0c;Bundle 是一个用于保存和传递数据的容器类&#xff0c;它被广泛用于在不同组件&#xff08;如 Activity、Fragment&#xff09;之间传递数据。以下是一些 Bundle 中常用的函数&#xff1a; putXXX 系列方法&#xff1a; 用于将各种类型的数据放入 Bun…

C语言-> 文件操作(函数满屏)

系列文章目录 前言 ✅作者简介&#xff1a;大家好&#xff0c;我是橘橙黄又青&#xff0c;一个想要与大家共同进步的男人&#x1f609;&#x1f609; &#x1f34e;个人主页&#xff1a;橘橙黄又青_C语言,数据结构,函数-CSDN博客 目的&#xff1a;学习文件操作&#xff0c;即…

林杰:程序员依然是草根跨越阶级的最佳途径之一 | 程客有话说

《程客有话说》是我们最新推出的一个访谈栏目&#xff0c;邀请一些国内外有趣的程序员来分享他们的经验、观点与成长故事&#xff0c;尝试建立一个程序员交流与学习的平台&#xff0c;也欢迎大家推荐朋友或自己来参加我们的节目&#xff0c;一起加油。 本期我们邀请的程序员林…

2023-12-19 二叉搜索树的最小绝对差和二叉搜索树的众数和二叉树的最近公共祖先

二叉搜索树的最小绝对差 关键信息&#xff1a;二叉搜索树表明了树有序的&#xff01;遇到在二叉搜索树上求什么最值啊&#xff0c;差值之类的&#xff0c;就把它想成在一个有序数组上求最值&#xff0c;求差值 # Definition for a binary tree node. # class TreeNode: # …

微信私域管理工具如何帮助企业提升销售业绩?

现如今&#xff0c;微信已经从社交通讯软件&#xff0c;慢慢被默认为常规办公软件&#xff0c;工作沟通、业务洽谈、网络会议等都在微信上进行&#xff0c;完全变成职场首选的社交工具。 但受限于微信平台&#xff0c;许多公司在微信私域营销方面面临诸多挑战。 微信私域管理工…

调用第三方http接口 hutool工具类

1、引入依赖 <dependency> <groupId>cn.hutool</groupId> <artifactId>hutool-all</artifactId> <version>5.8.0.M2</version> </dependency>2、请求组装 String params"<BSXml>" " <MsgHeader>&…

Leetcode—16.最接近的三数之和【中等】

2023每日刷题&#xff08;六十四&#xff09; Leetcode—16.最接近的三数之和 实现代码 class Solution { public:int threeSumClosest(vector<int>& nums, int target) {sort(nums.begin(), nums.end());int s 0;int diff INT_MAX / 2;int n nums.size();int a…

四级作文考前积累(个人蒟蒻向)

观点类 With the giant leap of the economy,nowdays the youngsters have different opinions upon gratuation Some think that....,while others think that.... Personally ,i perfer the former,the letter. The following reasons can account for my preference. Fi…

计算机试题

选择题 在计算机中&#xff0c;RAM代表什么&#xff1f; A) Random Access MemoryB) Read-Only MemoryC) Real-time Access MemoryD) Remote Access Memory答案&#xff1a;A) Random Access Memory TCP和UDP之间的主要区别是什么&#xff1f; A) TCP是面向连接的&#xff0c;U…