前言

记录一下使用vuepress搭建个人博客的流程。最好先简单看一下官方文档。

官方文档:
VuePress 中文网

创建项目

初始化

npm init

安装

yarn add -D vuepress
或
npm install -D vuepress

目录结构

官方推荐的目录结构:

.
├── docs
│   ├── .vuepress (可选的)
│   │   ├── components (可选的)
│   │   ├── theme (可选的)
│   │   │   └── Layout.vue
│   │   ├── public (可选的)
│   │   ├── styles (可选的)
│   │   │   ├── index.styl
│   │   │   └── palette.styl
│   │   ├── templates (可选的, 谨慎配置)
│   │   │   ├── dev.html
│   │   │   └── ssr.html
│   │   ├── config.js (可选的)
│   │   └── enhanceApp.js (可选的)
│   │
│   ├── README.md
│   ├── guide
│   │   └── README.md
│   └── config.md
│
└── package.json

注意大小写,不要忘记点

目录说明

  • docs/.vuepress: 用于存放全局的配置、组件、静态资源等。
  • docs/.vuepress/components: 该目录中的 Vue 组件将会被自动注册为全局组件。
  • docs/.vuepress/theme: 用于存放本地主题。
  • docs/.vuepress/styles: 用于存放样式相关的文件。
  • docs/.vuepress/styles/index.styl: 将会被自动应用的全局样式文件,会生成在最终的 CSS 文件结尾,具有比默认样式更高的优先级。
  • docs/.vuepress/styles/palette.styl: 用于重写默认颜色常量,或者设置新的 stylus 颜色常量。
  • docs/.vuepress/public: 静态资源目录。
  • docs/.vuepress/templates: 存储 HTML 模板文件。
  • docs/.vuepress/templates/dev.html: 用于开发环境的 HTML 模板文件。
  • docs/.vuepress/templates/ssr.html: 构建时基于 Vue SSR 的 HTML 模板文件。
  • docs/.vuepress/config.js: 配置文件的入口文件,也可以是 YML 或 toml。
    -docs/.vuepress/enhanceApp.js: 客户端应用的增强。

创建目录和相应文件
大体需要以下内容:

默认的页面路由

把 docs 目录作为 targetDir ,下面所有的“文件的相对路径”都是相对于 docs 目录的。在项目根目录下的 package.json 中修改 scripts

"dev": "vuepress dev docs",
"build": "vuepress build docs"

对于上述的目录结构,默认页面路由地址如下:

文件的相对路径 页面的路由地址
/README.md /
/guide/README.md /guide/
/config.md /config.html

问题

  • / 默认会显示默认布局和/README.md里的内容,但是如果你创建了theme/Layout.vue时,会默认显示Layout.vue文件的内容

启动项目

npm run dev

配置

配置的修改在.vuepress/config.js 中设置

基本配置

一个 VuePress 网站必要的配置文件是 .vuepress/config.js,它应该导出一个 JavaScript 对象
可以在config.js里添加以下内容

module.exports = {title: 'Hello VuePress',description: 'Just playing around'
}

重新启动一下,可以看到页面标题已经被修改

常用配置项

base
部署站点的基础路径,默认/

title
网站的标题,它将会被用作所有页面标题的前缀,同时,默认主题下,它将显示在导航栏(navbar)上。

description
网站的描述,它将会以 标签渲染到当前页面的 HTML 中。

head
额外的需要被注入到当前页面的 HTML 中的标签,每个标签都可以以 [tagName, { attrName: attrValue }, innerHTML?] 的格式指定,举个例子,增加一个自定义的 favicon:

module.exports = {head: [['link', { rel: 'icon', href: '/logo.png' }]]
}

palette.styl
如果要对默认预设 (opens new window)的样式进行简单的替换,或者定义一些变量供以后使用,你可以创建一个 .vuepress/styles/palette.styl 文件。

// 颜色
$accentColor = #3eaf7c
$textColor = #2c3e50
$borderColor = #eaecef
$codeBgColor = #282c34
$arrowBgColor = #ccc
$badgeTipColor = #42b983
$badgeWarningColor = darken(#ffe564, 35%)
$badgeErrorColor = #DA5961// 布局
$navbarHeight = 3.6rem
$sidebarWidth = 20rem
$contentWidth = 740px
$homePageWidth = 960px// 响应式变化点
$MQNarrow = 959px
$MQMobile = 719px
$MQMobileNarrow = 419px

你应该只在这个文件中定义变量。因为 palette.styl 将在根的 stylus 配置文件的末尾引入,作为配置,它将被多个文件使用,所以一旦你在这里写了样式,你的样式就会被多次复制。

index.styl
VuePress 提供了一种添加额外样式的简便方法。你可以创建一个 .vuepress/styles/index.styl 文件。这是一个 Stylus (opens new window)文件,但你也可以使用正常的 CSS 语法。

由于背后的行为,不论是在 palette.styl 或是 index.styl ,都不能通过 @import / @require 相对路径引用一般的 .css 样式表。

应用级别的配置

由于 VuePress 是一个标准的 Vue 应用,你可以通过创建一个 .vuepress/enhanceApp.js 文件来做一些应用级别的配置,当该文件存在的时候,会被导入到应用内部。enhanceApp.js 应该 export default 一个钩子函数,并接受一个包含了一些应用级别属性的对象作为参数。你可以使用这个钩子来安装一些附加的 Vue 插件、注册全局组件,或者增加额外的路由钩子等:

// 使用异步函数也是可以的
export default ({Vue, // VuePress 正在使用的 Vue 构造函数options, // 附加到根实例的一些选项router, // 当前应用的路由实例siteData, // 站点元数据isServer // 当前应用配置是处于 服务端渲染 或 客户端
}) => {// ...做一些其他的应用级别的优化
}

其他配置及描述见官方文档: vuepress配置

静态资源

相对路径

所有的 Markdown 文件都会被 webpack 编译成 Vue 组件,因此应该更倾向于使用相对路径来引用静态资源

公共文件

对应图片,字体等静态资源,把他们放到.vuepress/public下,它们最终会被复制到生成的静态文件夹中。

基础路径
如果你的网站会被部署到一个非根路径,你将需要在 .vuepress/config.js 中设置 base,举例来说,如果你打算将你的网站部署到 https://foo.github.io/bar/,那么 base 的值就应该被设置为 “/bar/” (应当总是以斜杠开始,并以斜杠结束)。

主题

官方虽然提供了一个主题,但是功能比较少,这里我们使用 vuepress-theme-reco

vuepress-theme-reco 官网

这里我们使用1.x版本

使用

安装

npm install vuepress-theme-reco --save-dev

引用

// .vuepress/config.jsmodule.exports = {theme: 'reco'
}

重新启动一下,效果如下图:

分类和标签

添加博客配置

// .vuepress/config.jsmodule.exports = {theme: 'reco',themeConfig: {//导航nav: [{ text: "首页", link: "/" }],// 博客配置blogConfig: {category: {location: 2, // 在导航栏菜单中所占的位置,默认2text: "博客", // 默认文案 “分类”},tag: {location: 4, // 在导航栏菜单中所占的位置,默认3text: "Tag", // 默认文案 “标签”},},},

添加文章
docs目录下创建一个blogs目录,用来存放文章

文章内容示例
后面具体说明

---
title: 【vue】跨域解决方案之proxyTable
date: 2017-12-28
categories:- 前端
tags:- vue
---哈哈哈哈

Front Matter

编写规则,必须严格遵守。vuepress会按照规则生成目录、标签等内容。

案例

---
title: 烤鸭的做法
date: '2019-08-08 08:00:00'
sidebar: 'auto'
categories:- 烹饪- 爱好
tags:- 烤- 鸭子
keys:- '123456'
publish: false
---使用Markdown语法编写的博客内容

常用变量

变量后面要加冒号,冒号后面要有空格;每一个变量占一行,不要加逗号

title 文章标题

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

sidebar 是否开启侧边栏,值用字符串auto就好,后边会说怎么配置

categories 所属分类,非常重要,如果你在config.js里配置了分类,比如

category: {location: 2, // 在导航栏菜单中所占的位置,默认2text: "博客", // 默认文案 “分类”},

但是你在文章中没有添加分类,那么会报错;当你填写了分类后,会生成相应的分类

分类是一个数组,使用时必须如下:
这说明该文章同时属于前端和css两个分类

categories:- 前端- css

tags 文章的标签,使用同categories

keys 文章加密密码

会出现如下图标,后面介绍如何配置

sticky 文章置顶

用数字来表示顺序,1表示最上面。

sticky: 1


publish 是否发布

默认值true。填true或者不用这个变量,文章会正常显示;如果填false,文章会隐藏。

prev 和 next 配置上一篇和下一篇文章的地址
字符串类型,使用相对路径来表示。例如:

prev: "2.html"
next: "2.html"


摘要

文档中 以上部分会被当作摘要。

---
title: 摘要
date: 2019-11-01
---这里的内容会被显示成摘要。1. 可以放置文案;
2. 可以放置图片作为文章封面。<!-- more -->这里是文章的正文。

添加时间轴

添加导航按钮

// .vuepress/config.jsmodule.exports = {theme: 'reco',themeConfig: {nav: [{ text: 'TimeLine', link: '/timeline/', icon: 'reco-date' }]}
}

注: 官方文档里除了添加导航按钮这个操作外还有另外两个操作,试了一下。时间轴的内容会被
/docs/timeLine/README.md里面的内容所替换,所以添加完添加导航按钮后就不用进行其他操作。

添加评论

这个看了一下需要用到第三方的一些东西,这里暂时不考虑评论功能。如果需要添加评论功能自行查看官方文档。

加密功能

加密功能分为:项目加密和文章加密两种,这里只介绍文章加密,项目加密自行查看官方文档。

文章加密
如果项目是公开的,而某些文章可能需要加密,需要在 frontmatter 以数组的格式设置 keys,可以设置多个密码,数组的值必须是字符串。

---
title: vuepress-theme-reco
date: 2019-04-09
author: reco_luan
keys:- '32位的 md5 加密密文'
---

加密页的遗留问题: 从某篇单独加密的文章直接进入另一篇文章时(比如导航栏)加密无法隐藏



好像有个问题,输入密码之后,下次再进来时就没用了。

config.js配置

移动端优化

这个自行查看官方文档。在手机上看了一下别人写好的博客,发现页面会变形。

图标

自行查看,官方提供了一些可以使用的内置图标

{ text: "首页", link: "/", icon: "reco-home" },

备案信息和项目开始时间
自行查看官方文档

全局设置作者姓名

// .vuepress/config.js
module.exports = {themeConfig: {// authorauthor: 'reco_luan'}
}

Logo
导航栏左侧可以显示logo, 需要以下配置。

// .vuepress/config.js
module.exports = {themeConfig: {logo: '/head.png'}
}


注:你的,vuepress/public目录下必须有这个图片

头像

// .vuepress/config.jsmodule.exports = {theme: 'reco',themeConfig: {authorAvatar: '/avatar.png'}
}

头像这个设置完,暂时没用找到在哪里

首页配置

这里要修改docs/README.md文件,不要搞错

基本配置

---
home: true
heroImage: /logo.png
heroText: 优秀的判断力来自经验,但经验来自于错误的判断
---

改变主要图片风格

heroImageStyle: {maxHeight: '200px',display: block,margin: '6rem auto 1.5rem',borderRadius: '50%',boxShadow: '0 5px 18px rgba(0,0,0,0.2)'
}

Home-Blog

1. 指定 type: 'blog’

// .vuepress/config.jsmodule.exports = {theme: 'reco',themeConfig: {type: 'blog'}
}

有点丑了,可以把README.md中的heroImage和heroText设置为null。
这时也能看到logo图标了

2. 设置首页的背景图片,如果你想改变 bgImage 的风格,你可以设置值 bgImageStyle 来实现你想要的效果

# 这是你的主页---
home: true
bgImage: '/bg.png'
bgImageStyle: {height: '350px'
}
---

3、添加友链

// .vuepress/config.jsfriendLink: [{title: "vuepress-theme-reco",desc: "A simple and beautiful vuepress Blog & Doc theme.",logo: "https://vuepress-theme-reco.recoluan.com/icon_vuepress_reco.png",link: "https://vuepress-theme-reco.recoluan.com",},// ...],

404 腾讯公益

默认找不到路由时,会跳转到如下页面


如果你真的想关闭,可以这样来处理:

module.exports = {theme: 'reco',themeConfig: {noFoundPageByTencent: false}
}

暗色模式适配

自行查看官方文档。

主题模式设置:

多语言配置

自行查看官方文档

侧边栏

// .vuepress/config.js
module.exports = {themeConfig: {subSidebar: 'auto'//在所有页面中启用自动生成子侧边栏,原 sidebar 仍然兼容}
}

注:官方文档说了,一级标题不会生成侧边栏,正文默认从二级标题开始

Markdown常用配置

vuepress Markdown配置

这里只列举几个常用的,其他自行查看官方文档。

注意:不要写到主题配置里面去了,这是单独的配置

代码显示行号

module.exports = {markdown: {lineNumbers: true}
}


自定义容器
这个用在.md文件内

::: tip
这是一个提示
:::::: warning
这是一个警告
:::::: danger
这是一个危险警告
:::::: details
这是一个详情块,在 IE / Edge 中不生效
:::

项目地址

项目demo,会在下一篇博客 vuepress:插件 里给出

vuepress(一):搭建个人博客相关推荐

  1. netlify支持php吗,vuepress netlify 搭建简易博客

    安装 # install globally npm install -g vuepress # create a markdown file echo "# Hello VuePress!& ...

  2. vuepress侧边栏配置_VuePress搭建静态博客网站

    VuePress是什么 仅从单词上来看就是vue和press,press除了按压的意思外,还有报刊杂志和出版社等意思,所以可以理解为由vue驱动的出版工具.换个说法就是静态博客编写工具.后六字应该都不 ...

  3. 手把手教你使用 VuePress 搭建个人博客

    手把手教你使用 VuePress 搭建个人博客 有阅读障碍的同学,可以跳过第一至四节,下载我写好的工具包: git clone https://github.com/zhangyunchencc/vu ...

  4. 使用vuepress搭建静态博客

    什么是vuePress vuePress是以vue驱动的主题系统的简约静态网站生成工具(拥有自己的默认主题). veuPress由vue,vue-router,webpack驱动的单页面应用,每个ma ...

  5. vuepress搭建个人博客并部署

    想要快速搭建自己的个人博客,记录自己的工作学习心得,争取当一条有梦想的咸鱼 相信大家都了解过vue这个框架.而今天,我们的主角vuepress 就是vue的作者尤大大的一个作品.开源于大概2年前,其本 ...

  6. Hugo + Github Pages 搭建个人博客

    尝试过 Hexo .GatsbyJs. Vuepress 搭建博客后,对这些工具最大的不满,就是运行速度以及打包速度. 后来看到 Hugo ,号称最快的静态站点生成器后. 尝试搭建博客,发现不管是运行 ...

  7. 一文搭建自己博客/文档系统:搭建,自动编译和部署,域名,HTTPS,备案等

    本文纯原创,搭建后的博客/文档网站可以参考: Java 全栈知识体系.如需转载请说明原处. 文章内容目录 第一部分 - 博客/文档系统的搭建 博客/文档搭建前言 有哪些选择 我做了哪些尝试 自己写:我 ...

  8. 一看就会的保姆级教程,10分钟搭建个人博客

    前言 相信很多人都想拥有一个自己的个人博客,现有的个人博客搭建框架已经有很多了,例如 hexo .vuepress .jekyll 等等,这里我选用 vuepress 来快速搭建个人博客 网上教程千千 ...

  9. 搭建WordPress博客平台,云计算技术与应用实验报告

    实验环境:阿里云云产品资源ECS服务器 题目:基于ECS部署LAMP环境 实验内容和要求: LAMP 是 Linux.Apache.MySQL和PHP的缩写,是搭建网站系统依赖的基础运行环境.本实验使 ...

  10. python个人博客搭建说明书_技术分享|利用Python Django一步步搭建个人博客(二)...

    原标题:技术分享|利用Python Django一步步搭建个人博客(二) Hello,欢迎来到我们的"利用Python Django一步步搭建个人博客"系列的第二部分.在第一部分中 ...

最新文章

  1. java struts2 框架 入门简介
  2. 搬家Testing.
  3. 【LUA table 移除操作非常慢】
  4. 北京科技大学研究生考试 《工程热力学》(2003年-2011年)
  5. OAuth2解决什么问题
  6. Java注解解析-搭建自己的注解处理器(CLASS注解使用篇)
  7. 图灵测试是不是已经Out了
  8. window系统对应默认IE浏览器版本
  9. java.lang.UnsupportedOperationException
  10. 4月23日 MySQL学习-DDL
  11. Mysql中autocommit的用法
  12. KVM命令行使用工具(virsh)详解。
  13. myeclipse中hibernate出错
  14. Java 语言结构【转】
  15. ad域 禁用账号_大量AD域帐号自动被锁定
  16. vc707 MicroBlaze LCD 试验
  17. 施一公:如何成为一名优秀的博士生?
  18. 禁止QQ迷你首页运行【转】
  19. Hive性能调优之推测执行
  20. Hark的数据结构与算法练习之归并排序

热门文章

  1. 基于 mlr 包的逻辑回归算法介绍与实践
  2. 人工智能真NB?何不去炒股?
  3. PyTorch教程(5)激活函数
  4. IntelliJ IDEA 2018.3 破解教程
  5. 建立安全连接失败(解决浏览器提示建立安全连接失败问题)
  6. Python全局变量:global+变量名
  7. Python游戏开发实战教程
  8. [UML工具]分享一个WEB在线画时序图的工具 StarUml 添加时序等图 Jude
  9. 《人工智能算法图解》书籍分享(包邮送书)
  10. mysql中的锁浅析