使用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.rhkb.cn/news/383446.html

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

相关文章

七、SpringBoot日志

1. 得到日志对象 import org.slf4j.Logger; import org.slf4j.LoggerFactory; import org.springframework.stereotype.Controller; import org.springframework.web.bind.annotation.RequestMapping; import org.springframework.web.bind.annotation.ResponseBody; //打印日志…

【Django】django模板与前端技术(html模板)

文章目录 “python包html”还是“html包python”?1.新建模板2.模板语法3.views.py测试 “python包html”还是“html包python”? 在前端页面中html代码比python多得多,所以一定是html包python最优!于是引出今天的模板。 大体分为三个步骤:…

独立站外链如何影响搜索引擎排名?

独立站的外链对搜索引擎排名有着非常重要的影响。简单来说,外链就像是别的网站对你的网站投的信任票。每一条外链都告诉搜索引擎:“这个网站的内容是有价值的,值得推荐。”因此,外链的数量和质量直接影响你的网站在搜索引擎中的排…

Lc60---1189. “气球” 的最大数量(排序)---Java版

1.题目 2.思路 (1)用字典的方法,ballon,这个单词里面每个字母,需要的个数 (2)再创一个字典的方法统计,输入的字符串的字母的个数 (3)计算能拼凑出多少个“ballon" (4)代码解释 for (char c : text.toCharArray()) {count.put(c, count.getOrDefau…

vue3编程-import.meta.glob实现动态路由(菜单)

import.meta.glob 是vite提供的批量懒加载组件的方法 本地开发环境: const modules import.meta.glob(../views/**/*.vue)这段代码返回的modules是一个Map: key是vue文件的相对路径,值是一个函数,将函数打印出来,如…

Python鲁汶意外莱顿复杂图拓扑分解算法

🎯要点 🎯算法池化和最佳分区搜索:🖊网格搜索 | 🖊发现算法池 | 🖊返回指定图的最佳划分 | 🖊返回指定图的最佳分区 | 🎯适应度和聚类比较功能:🖊图的划分 |…

Python3网络爬虫开发实战(1)爬虫基础

一、URL 基础 URL也就是网络资源地址,其满足如下格式规范 scheme://[username:password]hostname[:port][/path][;parameters][?query][#fragment] scheme:协议,常用的协议有 Http,https,ftp等等;usern…

构建高效园区导览系统:基于3DGIS与物联网技术的实现方案

园区导航的挑战与机遇 在现代化的大型园区中,随着面积的不断扩张和布局的日益复杂,传统的纸质地图已难以满足日益增长的导航需求。每栋楼、每层楼都有着不同的办公室,不同的业务。这种低效的寻路过程不仅影响了客户的来访体验,也…

Flink时间和窗口

目录 时间语义 水位线(Watermarks) 并行流中的水位线 窗口 滚动窗口—Tumbling Windows 滑动窗口—Sliding Windows 会话窗口—Session Windows 全局窗口—Global Windows 例子 时间语义 如图所示,由事件生成器(Event Pr…

LeetCode - #103 二叉树的锯齿形层序遍历

文章目录 前言1. 描述2. 示例3. 答案关于我们 前言 我们社区陆续会将顾毅(Netflix 增长黑客,《iOS 面试之道》作者,ACE 职业健身教练。)的 Swift 算法题题解整理为文字版以方便大家学习与阅读。 LeetCode 算法到目前我们已经更新…

雪花算法 集群uid重复问题 uid-generator-spring-boot-starter

1、在生成环境 在某个业务使用该插件生成uid,由于业务整合了 mybatis-plus模块 2、该业务是分部署集群部署以及使用的多线程获取uid,使用中发现唯一建冲突,生成的uid有重复。 然后查看日志发现 workerId 始终为0 怀疑是生成workerId出了问题。 查看跟…

饥荒dst联机服务器搭建基于Ubuntu

目录 一、服务器配置选择 二、项目 1、下载到服务器 2、解压 3、环境 4、启动面板 一、服务器配置选择 首先服务器配置需要2核心4G,4G内存森林加洞穴大概就占75% 之后进行服务器端口的开放: tcp:8082 tcp:8080 UDP:10888 UDP:10998 UDP:10999 共…

前端:Vue学习 - 购物车项目

前端:Vue学习 - 购物车项目 1. json-server,生成后端接口2. 购物车项目 - 实现效果3. 参考代码 - Vuex 1. json-server,生成后端接口 全局安装json-server,json-server官网为:json-server npm install json-server -…

基于STM32瑞士军刀--【FreeRTOS开发】学习笔记(一)|| RISC / 底层代码执行步骤 / 汇编指令

本篇文章基于韦东山老师讲课笔记和自己理解编写。 RISC ARM芯片属于精简指令集计算机(RISC:Reduced Instruction Set Computing),它所用的指令比较简单,有如下特点: ① 对内存只有读、写指令 ② 对于数据的运算是在CPU内部实现 …

CasaOS设备使用Docker安装SyncThing文件同步神器并实现远程管理

💝💝💝欢迎来到我的博客,很高兴能够在这里和您见面!希望您在这里可以感受到一份轻松愉快的氛围,不仅可以获得有趣的内容和知识,也可以畅所欲言、分享您的想法和见解。 推荐:kwan 的首页,持续学…

加密软件有什么用?五款电脑文件加密软件推荐

加密软件对于个人和企业来说至关重要,尤其是在2024年这样一个高度数字化的时代,数据安全变得尤为重要。 数据保护:加密软件可以保护敏感信息不被未经授权的人访问。这包括个人数据、财务记录、健康信息、企业机密等。 防泄漏:防…

Python 全栈体系【三阶】(三)

第一章 Django 七、静态文件 1. 概述 静态文件是指在WEB应用中的图像文件、CSS文件、Javascript文件。 2. 静态文件的配置 settings.py中关于静态文件的配置如下: STATICFILES_DIRS [BASE_DIR , static, ]STATIC_URL /static/其中: STATICFILES…

java面试题,有synchronized锁,threadlocal、数据可以设置默认值、把redis中的json转为对象

有面试题,有synchronized锁,threadlocal 一、面试题小记二、加锁synchronized1. 先看代码2. synchronized 讲解2.1. 同步代码块2.2. 同步方法2.3. 锁的选择和影响2.4. 注意事项2.5 锁的操作,手动释放锁,显式地获取锁(属…

【llama3.1】ollama的使用--本地部署使用llama3.1模型

快速入门 安装完成ollama后,在命令行窗口输入 ollama run llama3 上图表示 Ollama 正在下载 llama3 任务所需的资源文件,并显示了当前的下载进度、速度和预计剩余时间。这是 Ollama 在准备运行 llama3 任务之前所需的步骤。 上面的步骤完成后,就可以在本地进行聊天了,…

Golang | Leetcode Golang题解之第268题丢失的数字

题目: 题解: func missingNumber(nums []int) int {n : len(nums)total : n * (n 1) / 2arrSum : 0for _, num : range nums {arrSum num}return total - arrSum }