当前位置: 首页 > news >正文

使用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。

 

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

相关文章:

  • 北京网站建设多少钱?
  • 辽宁网页制作哪家好_网站建设
  • 高端品牌网站建设_汉中网站制作
  • linux进程——状态——linux与一般操作系统的状态
  • GraphRAG的实践
  • django实现用户的注册、登录、注销功能
  • jenkins+gitlab+harbor+maven自动化容器部署
  • Eureka基本概念
  • 【NLP实战】基于TextCNN的新闻文本分类
  • 5G mmWave PAAM 开发平台
  • Python爬虫实战 | 爬取携程网景区评论|美食推荐|景点列表数据
  • LeetCode岛屿的最大面积(深度搜索)/什么是深搜,简单案例回顾图用邻接表实现图的深度优先遍历。
  • 深度学习入门——与学习相关的技巧
  • 学习记录--GPT
  • QT获取电脑网卡IP等信息
  • Spring boot 运行环境搭建之Spring Tools 4 for Eclipse
  • STM32、Spring Boot、MQTT和React Native:智能停车管理系统的全栈开发详解(附代码示例)
  • react-draft-wysiwyg API
  • 《剑指offer》分解让复杂问题更简单
  • 【347天】每日项目总结系列085(2018.01.18)
  • ECMAScript入门(七)--Module语法
  • Js实现点击查看全文(类似今日头条、知乎日报效果)
  • leetcode98. Validate Binary Search Tree
  • linux学习笔记
  • php面试题 汇集2
  • PHP那些事儿
  • Rancher如何对接Ceph-RBD块存储
  • SOFAMosn配置模型
  • spring boot下thymeleaf全局静态变量配置
  • Spring Cloud(3) - 服务治理: Spring Cloud Eureka
  • SpringCloud(第 039 篇)链接Mysql数据库,通过JpaRepository编写数据库访问
  • VuePress 静态网站生成
  • Wamp集成环境 添加PHP的新版本
  • 机器人定位导航技术 激光SLAM与视觉SLAM谁更胜一筹?
  • 如何选择开源的机器学习框架?
  • 如何用Ubuntu和Xen来设置Kubernetes?
  • 手机app有了短信验证码还有没必要有图片验证码?
  • 算法-图和图算法
  • 小程序01:wepy框架整合iview webapp UI
  • 云栖大讲堂Java基础入门(三)- 阿里巴巴Java开发手册介绍
  • 3月27日云栖精选夜读 | 从 “城市大脑”实践,瞭望未来城市源起 ...
  • PostgreSQL 快速给指定表每个字段创建索引 - 1
  • SAP CRM里Lead通过工作流自动创建Opportunity的原理讲解 ...
  • 从如何停掉 Promise 链说起
  • # 利刃出鞘_Tomcat 核心原理解析(七)
  • $.ajax()方法详解
  • (152)时序收敛--->(02)时序收敛二
  • (C#)Windows Shell 外壳编程系列9 - QueryInfo 扩展提示
  • (rabbitmq的高级特性)消息可靠性
  • (ZT)北大教授朱青生给学生的一封信:大学,更是一个科学的保证
  • (附源码)计算机毕业设计SSM基于java的云顶博客系统
  • (机器学习的矩阵)(向量、矩阵与多元线性回归)
  • (教学思路 C#之类三)方法参数类型(ref、out、parmas)
  • (十二)Flink Table API
  • (十一)JAVA springboot ssm b2b2c多用户商城系统源码:服务网关Zuul高级篇
  • (转)Android学习笔记 --- android任务栈和启动模式
  • (转)Oracle存储过程编写经验和优化措施
  • (转载)hibernate缓存