使用VuePress-Reco快速搭建博客(保姆级)

简介:VuePress-Reco

        一款简洁的 vuepress 博客 & 文档 主题,可以自由搭建自己的风格,比较方便简洁。

链接:vuepress-reco

准备环境:

                Node.Js >=20.5.0,Npm >= 10.8.2 OR Yarn >= 1.22.19

        注:如果不会安装node.js和npm的,可以看这篇文章,之前博主写过怎么安装的。安装Node

搭建脚手架:

# 初始化,并选择 2.x
npx @vuepress-reco/theme-cli init

.第一个是你是否要新建一个目录,选择Y。

.第二个是你的目录名字叫什么名字?博主这里写的是Blog

.第三个是你的项目叫什么名字? 博主这里写的是 PersonBlog

.第四个是你的项目的描述是什么?这里我写的是爱好,这里写与不写都可以的

.第五个是作者的名字?这里我写的是CSDN的名字,各位童鞋看自己来

.第六个是选择项目的风格? 这里选择 2.x

这里是使用Npm和Yarn,博主这里使用Npx

# 初始化,并选择 2.x
npm install @vuepress-reco/theme-cli@1.0.7 -g
theme-cli init
# 初始化,并选择 2.x
yarn global add @vuepress-reco/theme-cli@1.0.7
theme-cli init

进入项目文件运行安装:

安装好之后,使用IDEA打开项目,博主使用VScode进行编写。

其中 .vuepress 文件夹放置了所有于 VuePress 相关的文件, public 放置静态图片, config.ts 配置网站的标题和路由等信息。 blogs 文件夹分类放置博客内容,而 docs 文件夹则用来放置展示的文档。

启动项目:

yarn dev

项目默认运行在8080端口: 

运行成功后会在 .vuepress 路径下生成两个临时文件(不要手动修改):

点击访问,此时可以看见博客的基本框架已经搭建好:

 

更改风格,定制个人博客

通过步骤之后,我们很快搭建好博客网站的模板,接下来我们开始个人博客的定制。

1.修改配置,将默认信息改为个人信息:

2.添加 head 标签属性,网站添加图标:

head: [['link', { rel: 'icon', href: '/logo.png' }]
]

3. 进入README.md修改首页信息,填上你想要展示的个人信息:

修改开屏的内容,GitHub可以换上自己的开源的,如背景图片(存放在 public 文件夹中),博客标题、描述等信息。

 4.删除不需要的内容:

在将默认信息换成我们个人信息之后,可以把不需要的功能可以隐藏掉或者删除掉。

首页 tagline 下方的两个按钮以及社媒图标我们可以直接删掉,这样首页会更加简洁(当然你也可以保留并替换上自己的文档地址):

如果我们暂时没有文档,可以把 docs相关的隐藏掉或者删除掉,后期有的话可以添加上以及相关跳转,把navbar路由跳转一些隐藏,可以把其他跳转改成跳到主页,因为目前咱们没有内容,跳过去是404。

 

如果正确完成了上述的所有步骤,此时点击运行你应该收获到这样的首页:

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

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

相关文章

Android C++系列:Linux信号(二)

PCB的信号集 如果在进程解除对某信号的阻塞之前这种信号产生过多次,将如何处理?POSIX.1允 许系统递送该信号一次或多次。Linux是这样实现的:常规信号在递达之前产生多次只 计一次,而实时信号在递达之前产生多次可以依次放在一个队列里。本文不讨论实时信 号。每个信号只有一…

Kafka介绍及Go操作kafka详解

文章目录 Kafka介绍及Go操作kafka详解项目背景解决方案面临的问题业界方案ELKELK方案的问题日志收集系统架构设计架构设计组件介绍将学到的技能消息队列的通信模型点对点模式 queue发布/订阅 topicKafka介绍Kafka的架构图工作流程选择partition的原则ACK应答机制Topic和数据日志…

0718,TCP协议,三次握手,四次挥手

目录 上课喵: TCP(Transmission Control Protocol,传输控制协议)的状态迁移图 TCP连接的状态迁移图 状态迁移说明: 注意: big_htonl.c 字节序转换 addr.c IP地址的转换 作业喵: …

django命令

Django 的命令行工具 django-admin(或 manage.py 中的 manage 函数)提供了一系列的命令,用于执行各种管理任务。 1. check: 检查项目的 full 路径,确保没有错误配置。 2. compilemessages: 编译 .po 文件中的翻译,生…

Python面试整理-Python中的控制流语句

在Python中,控制流语句用于根据特定的条件或逻辑来控制程序的执行流程。主要的控制流语句包括条件判断(if)、循环(for 和 while)以及其他辅助语句如 break, continue, 和 pass。下面详细介绍这些控制流语句: 1. 条件判断(if 语句) if 语句用于根据一个或多个条件来执行…

前端组件化实践:Vue自定义加载Loading组件的设计与实现

摘要 随着前端技术的飞速发展,组件化开发已成为提高开发效率、降低维护成本的重要方法。本文介绍了前端Vue自定义加载Loading组件的设计思路与实现过程,该组件通过设置gif动画实现加载效果,可广泛应用于页面请求加载场景。通过该组件的实践&…

2024年度上半年中国汽车保值率报告

来源:中国汽车流通协会&精真估 近期历史回顾: 2024上半年房地产企业数智化转型报告.pdf 2024国产院线电影路演数据洞察报告.pdf 空间数据智能大模型研究-2024年中国空间数据智能战略发展白皮书.pdf 2024年全球资产管理报告 2024年中型律师事务所的法…

VMware中Ubuntu磁盘空间的清理

最近发现Ubuntu占用空间过大,在网上找了一些方法,在这里总结一下。 1.删除快照 把不需要的快照删除,但要注意删除快照可能会影响到后续的快照链。每个快照依赖于前面的快照。如果删除一个中间快照,虚拟机可能无法找到完整的差异…

深入解析Linux文件权限管理:掌握`chmod`和`chown`命令

深入解析Linux文件权限管理:掌握chmod和chown命令 深入解析Linux文件权限管理:掌握chmod和chown命令 大纲:摘要:内容: 1. 引言2. 理解文件权限3. 使用chmod命令4. 使用chown命令5. 综合应用6. 常见问题与解决方案7. 结…

零基础入门:创建一个简单的Python爬虫管理系统

摘要: 本文将手把手教你,从零开始构建一个简易的Python爬虫管理系统,无需编程基础,轻松掌握数据抓取技巧。通过实战演练,你将学会设置项目、编写基本爬虫代码、管理爬取任务与数据,为个人研究或企业需求奠…

第2章 矩阵

A 乘以此列向量,1的位置依次往下,所以A的列向量全为0 B C、D 取BE 要统一

面经学习(厦门安全狗实习)

个人评价 安全狗主要还是做安全的,所以java开发约等于小厂。后端开发主要使用的技术栈技术sshjsp。 技术可谓是先当的古老,本次面试内容主要以项目为主。也是首次收到面试官的夸奖,面试下来也是非常开心的。 介绍一下实习项目吧&#xff1…

通过libx246 libfaac转换推送RTMP音视频直播流

一、RTMP简介及rtmplib库: RTMP协议是Real Time Message Protocol(实时信息传输协议)的缩写,它是由Adobe公司提出的一种应用层的协议,用来解决多媒体数据传输流的多路复用(Multiplexing)和分包(packetizing…

【体外诊断】ARM/X86+FPGA嵌入式计算机在免疫分析设备中的应用

体外诊断 信迈提供基于Intel平台、AMD平台、NXP平台的核心板、2.5寸主板、Mini-ITX主板、4寸主板、PICO-ITX主板,以及嵌入式准系统等计算机硬件。产品支持GAHDMI等独立双显,提供丰富串口、USB、GPIO、PCIe扩展接口等I/O接口,扩展性强&#xf…

Swagger生成Api文档的增强解决方案--knife4j

springboot版本号&#xff1a;2.7.3 knife4j:3.0.2 使用步骤 导入 knife4j 的maven坐标 在pom.xml中添加依赖 <dependency><groupId>com.github.xiaoymin</groupId><artifactId>knife4j-spring-boot-starter</artifactId><version>3.0.2…

CH03_布局

第3章&#xff1a;布局 本章目标 理解布局的原则理解布局的过程理解布局的容器掌握各类布局容器的运用 理解 WPF 中的布局 WPF 布局原则 ​ WPF 窗口只能包含单个元素。为在WPF 窗口中放置多个元素并创建更贴近实用的用户男面&#xff0c;需要在窗口上放置一个容器&#x…

【性能优化】在大批量数据下使用 HTML+CSS实现走马灯,防止页面卡顿

切换效果 页面结构变化 1.需求背景 项目首页存有一个小的轮播模块,保密原因大概只能这么展示,左侧图片右侧文字,后端一次性返回几百条数据(开发环境下,生产环境只会更多).无法使用分页解决,前端需要懒加载防止页面卡顿 写个小demo演示,如下 2.解决思路 获取到数据后,取第一…

开源模型应用落地-FastAPI-助力模型交互-进阶篇(四)

一、前言 FastAPI 的高级用法可以为开发人员带来许多好处。它能帮助实现更复杂的路由逻辑和参数处理&#xff0c;使应用程序能够处理各种不同的请求场景&#xff0c;提高应用程序的灵活性和可扩展性。 在数据验证和转换方面&#xff0c;高级用法提供了更精细和准确的控制&#…

科技赋能,智慧粮仓视频综合管理方案助力粮食安全

一、背景需求 随着科技的快速发展&#xff0c;智慧化、智能化管理已成为各行各业的重要发展方向。粮食仓储作为国家粮食安全战略的重要组成部分&#xff0c;其管理的科学性和智能化水平直接关系到粮食的存储安全、品质保障和运营效率。 因此&#xff0c;TSINGSEE青犀提出一套…

Linux文件和目录常用命令

1.操作命令 查看目录内容 ls 切换目录 cd 创建和删除操作 touch rm mkdir 拷贝和移动文件 cp mv 查看文件内容 cat more grep 其他 echo 重定向 > 和 >> 管道 | 1.1 终端实用技巧 1>自动补全 在敲出 文件/目录/命令 的前几个字母之后&#xff0c;按下…