首页
   /       /   
VuePress项目搭建
5月
26
VuePress项目搭建
作者:大彭Sir    分类: 教学教程

VuePress项目搭建

VuePress
AirHua-byte 6/2/2021 other

10分钟搭建个人博客,属于自己的小屋

这是一个纷繁的时代,信息渠道已经多到快让人喘不过气来。

而个人博客这种来自互联网初的载体,似乎与这个环境显得格格不入。

就像大海中的小岛,在海浪中显得那么不起眼,但它的存在本身就彰显了一种意义。

无论是波涛汹涌,还是风平浪静,它都在那里,而你的心也就找到了一处可以停靠的港湾。

关于VuePress

VuePress(opens new window)

主题:一款简洁而优雅的 vuepress 博客 & 文档 主题。

vuepress-theme-reco(opens new window)

环境搭建

安装node8.0+

node官网(opens new window)

# 设置淘宝镜像源  
npm config set registry https://registry.npm.taobao.org

# 查看使用的镜像源
npm config get registry

# 安装淘宝镜像源    
npm install -g cnpm --registry=https://registry.npm.taobao.org

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

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

创建博客工程

# 安装vuepress

npm install vuepress -g

# 安装脚手架工具

npm install @vuepress-reco/theme-cli -g

# 创建项目

theme-cli init my-blog  #my-blog可替换成自己需要的项目名称AIA

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

? 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  # 此处通过方向键选择您首页风格,这里我们选择blog

  doc

  afternoon-grocery

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

# 接入项目目录

cd my-blog  #my-blog替换为之前您填入的项目名称

# 安装npm

npm install

# 运行测试环境

npm run dev

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

img

博客配置

工程结构

├─ 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: Yesterday

  details: 开发一款看着开心、写着顺手的 vuepress 博客主题

- title: Today

  details: 希望帮助更多的人花更多的时间在内容创作上,而不是博客搭建上

- title: Tomorrow

  details: 希望更多的爱好者能够参与进来,帮助这个主题更好的成长

---

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

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

  • 文章列表是根据您的文章自动生成的,一旦您发布的文章中的含有Front Matter,系统会自动将其收集至首页,默认按时间顺序展示

  • 个人资料卡的头像和昵称由.vuepress/config.js进行配置,您可以找到如下内容,并进行修改配置。CategoryTag项则跟您的文章中标注的分类和标签自动生成

      "author": "AirHua-byte", //昵称
    
      "authorAvatar": "/avatar.png", //头像
  • Friend Link 则是您可以自由更改的,它的配置在.vuepress/config.js中,您可以找到如下内容,并对应进行修改配置,如果可以的话,您可以尝试将本站点添加为友链~

      "friendLink": [
    
        {
    
          "title": "AirHua-byte", //友联标题
    
          "desc": "敲键盘、按快门与拨琴弦",  //友链描述
    
          "email": "3301833942@qq.com",  //友链邮箱
    
          "link": "http://huabyte.com" //友链地址
    
        },
    
        {
    
          "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图标库 (opens new window)中寻找您需要的图标,也可以不要图标
      "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-082019-08-08 08:08:08

    sidebar:是否开启侧边栏。

    categories :所属分类。

    tags :所属标签。

    keys: 所属标签。

    publish :文章是否发布。

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

摘要

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

---

title: Vuepress使用指南(reco)

date: 2020-08-16

sidebar: 'auto'

categories:

- 工具

tags:

- vue

publish: true

---

::: tip

Vuepress是Vue作者尤雨溪开发的文档工具,本文采用Vuepress的reco主题进行相关配置说明

:::

<!-- more -->

### markdown正文

deploy.sh

#!/usr/bin/env sh

# 确保脚本抛出遇到的错误
set -e

# 生成静态文件
npm run build

# 进入生成的文件夹
cd public

# 如果是发布到自定义域名
# echo 'www.yourwebsite.com' > CNAME

git init
git add -A
git commit -m 'deploy'

# 如果你想要部署到 https://USERNAME.github.io
git push -f git@github.com:AirHua-byte/AirHua-byte.github.io.git master

# 如果发布到 https://USERNAME.github.io/<REPO>  REPO=github上的项目
# git push -f git@github.com:USERNAME/<REPO>.git master:gh-pages

cd -
本文标签:标签: VUE VuePress
责任声明:本页信息由网友自行发布或来源于网络,真实性、合法性由发布人负责,请仔细甄别!本站只为传递信息,我们不做任何双方证明,也不承担任何法律责任。文章内容若侵犯你的权益,请联系本站删除!
转载声明:本文作者大彭Sir,如需转载请保留文章出处!原文链接请自行复制!

Theme By Brief 鄂ICP备19010459号

站长统计 sitemap

首页

分类

友链

登录