Vuepress使用指南(reco)

环境搭建

安装node

node官网

安装官网提示下载安装包安装即可

安装完成后打开命令行工具，输入node -v，若返回版本信息则安装成功。

安装npm

npm install

创建博客工程

# 安装脚手架工具
npm install @vuepress-reco/theme-cli -g# 创建项目
theme-cli init my-blog  #my-blog可替换成自己需要的项目名称

上述命令执行后，在命令行窗口会进行一系列的信息配置

? What's the title of your project?  #键入您的项目标题? What's the description of your project? #键入您的项目描述? What's the author's name? #键入作者姓名? What style do you want your home page to be?(Select afternoon-grocery, if you
want to download reco_luan's '午后南杂') (Use arrow keys)
❯ blog   # 此处通过方向键选择您首页风格，这里我们选择blogdoc afternoon-grocery

接下来进入您的工程目录，启动您的项目吧

# 接入项目目录
cd my-blog  #my-blog替换为之前您填入的项目名称# 安装npm
npm install# 运行测试环境
npm run dev

访问命令行输出的ip地址，一般为http://localhost:8080(若端口被占用则依次递增，以终端输出为准)，即可访问您的博客了！

博客配置

工程结构

├─ node_modules #存放着项目所需的依赖，我们不需要关心
├─ docs  #该目录下存放您编写的文档
│  └─ theme-reco
│     ├─ api.md
│     ├─ plugin.md
│     ├─ theme.md
│     └─ README.md
├─ blogs #该目录下存放您编写的博客文章
│     ├─ category1
│     │  ├─ 2018
│     │  │  └─ 121501.md
│     │  └─ 2019
│     │     └─ 092101.md
│     ├─ category2
│     │  ├─ 2016
│     │  │  └─ 121501.md
│     │  └─ 2017
│     │     └─ 092101.md
│     └─ other
│        └─ guide.md
├─ .vuepress # 该目录下存放项目配置文件与静态资源
│   ├─ config.js #该文件用于配置项目
│   └─ public # 该目录下存放网页中所需的静态资源
│     ├─ hero.png # 首页大图
│     ├─ logo.png # 站点logo
│     ├─ favicon.ico #站点图标
│     └─ avatar.png #头像
├─ package.json #依赖管理文件
└─ README.md #这里存放着博客首页的内容

配置启动页

启动页展示的内容为博客标题与描述，即您在创建工程时输入的内容

您可以在.vuepress/config.js下找到如下内容，通过修改对应的字符来改变您的启动页

// .vuepress/config.js
module.exports = {"title": "test", "description": "test",}

配置首页

首页即为启动页之后的主页面

首页的内容由项目根目录下的README.md 配置生成，您可以通过更改其中的配置项来变更您的首页

---
home: true  #指定该文件为您的首页，改为false则不作为首页
heroText: vuepress-theme-reco  #首页居中显示的文本
tagline: A simple and beautiful vuepress blog theme. # 首页显示的标语
# heroImage: /hero.png  #首页显示的主图，默认被注释，取消注释可显示图片
# heroImageStyle: {  # 首页主图的样式控制，默认被注释
#   maxWidth: '600px',
#   width: '100%',
#   display: block,
#   margin: '9rem auto 2rem',
#   background: '#fff',
#   borderRadius: '1rem',
# }
bgImageStyle: { #背景图片样式height: '450px'
}# 以下内容基本上不生效，可以不用关心
isShowTitleInHome: false
actionText: Guide
actionLink: /views/other/guide
features:
- title: Yesterdaydetails: 开发一款看着开心、写着顺手的 vuepress 博客主题
- title: Todaydetails: 希望帮助更多的人花更多的时间在内容创作上，而不是博客搭建上
- title: Tomorrowdetails: 希望更多的爱好者能够参与进来，帮助这个主题更好的成长
---

Tip:代码中所引用的图片，均以.vuepress/public 为根目录

到此为主，您会注意到首页内容远不止这些，例如个人资料卡、文章列表，这些如何更改呢？

文章列表是根据您的文章自动生成的，一旦您发布的文章中的含有Front Matter，系统会自动将其收集至首页，默认按时间顺序展示
个人资料卡的头像和昵称由.vuepress/config.js进行配置，您可以找到如下内容，并进行修改配置。Category和Tag项则跟您的文章中标注的分类和标签自动生成
```
    "author": "me", //昵称"authorAvatar": "/avatar.png", //头像
```
Friend Link 则是您可以自由更改的，它的配置在.vuepress/config.js中，您可以找到如下内容，并对应进行修改配置，如果可以的话，您可以尝试将本站点添加为友链~
```
    "friendLink": [{//每一个{}中为一个友链"title": "白开水", //友联标题"desc": "越努力，越热爱，越幸运",  //友链描述"email": "846188037@qq.com",   //友链邮箱"link": "https://www.hjxie.icu" //友链地址},{"title": "vuepress-theme-reco","desc": "A simple and beautiful vuepress Blog & Doc theme.","avatar": "https://vuepress-theme-reco.recoluan.com/icon_vuepress_reco.png","link": "https://vuepress-theme-reco.recoluan.com"}],
```
配置底部

底边栏展示了如主题、备案信息、版权、年份等信息，这些内容仍需要您前往.vuepress/config.js进行修改
```
    "author": "me", //版权信息，与昵称为同一数据"record": "xxxx", //备案信息"startYear": "2017" //开始年份
```
配置导航栏

logo

您需要前往.vuepress/config.js找到如下内容，修改您的logo图片，该图片存储在.vuepress/public中
```
    "logo": "/logo.png",
```
搜索

您需要前往.vuepress/config.js找到如下内容，修改搜索相关配置
```
    "search": true,  //是否开启搜索"searchMaxSuggestions": 10,  //最多的搜索建议条目
```
导航

您需要前往.vuepress/config.js找到如下内容，修改导航相关配置

其中：
- 导航文本为导航按钮所展示的文字信息
- 路由地址即为跳转路径，根目录/对应您项目的根目录，在项目打包时会将对应目录下的README.md文件生成为index.html，例如您想将链接指向您的/docs/myDocument/README.md,则将link内容改为``/docs/myDocument`,便可访问到您的文档。
- 图标则为导航文本左边显示的图标，可以在reco图标库中寻找您需要的图标，也可以不要图标
```
    "nav": [  //如下代码中，每个{...}即为一个导航块{"text": "Home",       //导航文本"link": "/",          //路由地址"icon": "reco-home"   //图标},{"text": "TimeLine","link": "/timeline/","icon": "reco-date"},{"text": "Docs","icon": "reco-message","items": [{"text": "vuepress-reco","link": "/docs/theme-reco/"}]},{"text": "Contact","icon": "reco-message","items": [{"text": "GitHub","link": "https://github.com/recoluan","icon": "reco-github"}]}],
```
或许您已经注意到，如果需要配置一个像Docs或者Contact这样的折叠的导航应该如何做呢？他们并不会直接跳转到对应的目标地址。

折叠导航的配置仍在之前所展示的导航配置代码中，现在将其单独提取出来进行分析。

即在导航块中加入一个items数组，数组元素为多个{...}，是的，此{...}与导航块的{...}是同样的，所以您可以继续在其中添加文本、图标、路由等属性。
```
 {"text": "Docs",  //导航文本"icon": "reco-message",  //导航图标"items": [  //导航子模块{"text": "vuepress-reco", //子模块文本"link": "/docs/theme-reco/" //子模块链接}]},{"text": "Contact","icon": "reco-message","items": [{"text": "GitHub","link": "https://github.com/recoluan","icon": "reco-github"}]}
```
文档写作

Front Matter

在markdown文档的顶部插入一段yaml配置代码

一个完整的 Front Matter 案例：
```
---
title: 烤鸭的做法
date: 2019-08-08
sidebar: 'auto'
categories:- 烹饪- 爱好
tags:- 烤- 鸭子
keys:- '123456'
publish: false
---
```
常用变量说明：

title :文章标题，放弃通过一级目录定义标题的方式，改在 Front Matter 中定义。

date :文章创建日期，格式 2019-08-08 或 2019-08-08 08:08:08。

sidebar:是否开启侧边栏。

categories :所属分类。

tags :所属标签。

keys: 所属标签。

publish :文章是否发布。

另外还有一些Vuepress 默认主题的变量例如prev, next，请移步官方文档

摘要

在markdown代码中，您将看到注释，注释前面的代码将显示在列表页面上的文章摘要中。

---
title: Vuepress使用指南(reco)
date: 2020-08-16
sidebar: 'auto'
categories:- 工具
tags:- vue
publish: true
---::: tip
Vuepress是Vue作者尤雨溪开发的文档工具，本文采用Vuepress的reco主题进行相关配置说明
:::<!-- more -->### markdown正文

效果

Vuepress使用指南(reco)相关推荐

Vuepress Reco主题备忘
文章目录 0. 前言 1. 感兴趣的功能 1.1. 页面介绍 1.2. Markdown 编辑功能 1.3. Markdown Front Matter 功能 1.4. 更多功能 2. 进一步配置备忘 ...
vuepress reco主题优化与修改
前言虽然Vuepress的vuepress-theme-reco主题已经很完美了,为了更加适合自己写技术类的文档,终究还是逃不过我一颗想要魔改的心: 更换主题到本地后,无法直接通过npm insta ...
vue论坛网站的文章自动排版_基于 VuePress 定制个人博客网站
VuePress 简单来说,VuePress 是 Vue 驱动的静态网站生成器.VuePress 简单易上手,同时也有足够强大的定制能力,尤其对熟悉 Vue 的前端开发人员而言.相比于知名的博客生成器 ...
我的这套VuePress主题你熟悉吧
最近熬了很多个夜晚, 踩坑无数, 终于写出了用VuePress驱动的主题. 只需体验三分钟,你就会跟我一样,爱上这款主题. vuepress-theme-indigo-material, 已经发布到n ...
建议收藏，最全ChatGPT 中文调教指南：提供各个领域的角色提示词（prompts）及使用技巧，当然也有不正经指南
ChatGPT是一种基于GPT(Generative Pre-trained Transformer)模型的聊天机器人,能够回答用户提出的问题和进行对话.它是由OpenAI开发的人工智能产品,具有自然 ...
VuePress + GitHub Pages 生成静态网站
文章目录一.环境二.配置三.部署 (使用 Github Pages) VuePress官网 VuePress指南 VuePress :Vue 驱动的静态网站生成器一.环境 Node.js 版本 ...
搭建 VuePress 站点必做的 10 个优化
前言在 <一篇带你用 VuePress + Github Pages 搭建博客>中,我们使用 VuePress 搭建了一个博客,最终的效果查看:TypeScript 中文文档. 在搭建这 ...
[树莓派1] 硬件选购指南
树莓派是一款基于 ARM 架构的微型电脑主板,你可以把它理解成一台微型服务器.目前最新版是树莓派 4b,最大支持 8G 内存. 以前树莓派内存太小了,就没怎么折腾:现在树莓派 CPU 和内存都提高了, ...
一文搭建Vuepress博客/文档系统：搭建，导出，SEO，自动编译和部署，域名，HTTPS，备案等
本文纯原创,搭建后的博客/文档网站可以参考: Java 全栈知识体系.如需转载请说明原处. 文章内容目录文章内容目录第一部分 - 博客/文档系统的搭建博客/文档搭建前言有哪些选择我做了哪些尝 ...

Vuepress使用指南(reco)

环境搭建

安装node

安装npm

创建博客工程

博客配置

工程结构

配置启动页

配置首页

配置底部

配置导航栏

logo

搜索

导航

文档写作

Front Matter

摘要

Vuepress使用指南(reco)相关推荐

最新文章

热门文章