使用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,一经查实,立即删除!

相关文章

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地址的转换 作业喵: …

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

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

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

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

VMware中Ubuntu磁盘空间的清理

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

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

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

第2章 矩阵

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

通过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…

CH03_布局

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

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

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

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

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

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

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

Linux文件和目录常用命令

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

pdf怎么压缩的小一点?PDF压缩变小的6种方法(2024全新)

pdf怎么压缩的小一点?首先,PDF文件可以进行压缩。职场文档传阅还是比较建议PDF压缩,PDF文件可以无障碍访问,保持原始文本、图像和表格,无需担心展示效果差异等等优势,成为我们日常工作中不可或缺的一部分。…

阿里云盾占用资源的问题AliYunDun,AliYunDunUpdate

目录 1.关闭AliYunDunUpdate,AliYunDun,AliYunDunMonitor。 2.发现报错如下 3.打开阿里云安全中心控制台 4.成功解决 2.开启云盾命令 “如果您在解决类似问题时也遇到了困难,希望我的经验分享对您有所帮助。如果您有任何疑问或者想分享您…

哪种SSL证书可以快速签发保护http安全访问?

用户访问网站,经常会遇到访问http网页时,提示网站不安全或者不是私密连接的提示,因为http是使用明文传输,数据传输中可能被篡改,数据不被保护,通常需要SSL证书来给数据加密。 SSL证书的签发速度&#xff0…

使用JWT双令牌机制进行接口请求鉴权

在前后端分离的开发过程中,前端发起请求,调用后端接口,后端在接收请求时,首先需要对收到的请求鉴权,在这种情况先我们可以采用JWT机制来鉴权。 JWT有两种机制,单令牌机制和双令牌机制。 单令牌机制服务端…

环信IM x 亚马逊云科技,助力出海企业实现可靠通讯服务

随着全球化进程的加速,越来越多的企业选择出海,拓展国际市场。然而,面对不同国家和地区的用户,企业在即时通讯方面遇到了诸多挑战。为了帮助企业克服这些困难,环信IM与亚马逊云科技强强联手,共同推出了一套…

LDR6020:重塑iPad一体式有线键盘体验的创新力量

在移动办公与娱乐日益融合的时代,iPad凭借其强大的性能和便携性,成为了众多用户不可或缺的生产力工具。然而,为了进一步提升iPad的使用体验,一款高效、便捷的键盘成为了不可或缺的配件。今天,我们要介绍的,…