个人博客搭建过程(2)
概述
本文主要简单记录一下本人使用vuepress搭建个人博客的过程
一个 VuePress 网站是一个由Vue
、Vue Route
r和webpack
驱动的单页应用。
Front Matter(前言)
1.简介
什么是Front Matter
- 就是.md文件最上面的这部分内容
- 中文翻译: 前言; 前辅文; 前文; 前页; 前面部分;
- 官方地址
2.用法
- 任何
YAML front matter
之后额外的内容将会以普通的markdown
被渲染,并插入到features
的后面。 - 任何包含
YAML front matter
的Markdown 文件都将由gray-matter (opens new window)
处理。 front matter
必须是 markdown 文件中的第一部分,并且必须采用在三点划线之间书写的有效的YAML
。 这是一个基本的例子:
---
title: 标题
date: 2000-10-01
tags:
- 标签1
- 标签2
categories:
- 分类1
- 分类2
---
::: tip 介绍
这里写介绍的文字<br>
:::
<!-- more -->
- 在这些三条虚线之间,你可以设置预定义变量
- 在 VuePress 中,Front matter 是 可选的。
3.预定义变量
预定义变量 | 描述 |
---|---|
title | 当前页面的标题 |
date | 时间 |
tags | 标签 |
categories | 分类 |
lang | 当前页面的语言 |
description | 当前页面的描述 |
<!-- more --> | 内容摘抄 |
4.自定义容器
::: tip
这是一个提示
:::
::: warning
这是一个警告
:::
::: danger
这是一个危险警告
:::
::: details
这是一个详情块,在 IE / Edge 中不生效
:::
效果:
5.内容摘抄
如果一个markdown 文件
中有一个<!-- more -->
注释,则该注释之前的内容会被抓取并暴露在$page.excerpt
属性中。如果你在开发一个博客主题,你可以用这个属性来渲染一个带摘抄的文章列表
效果:
6.Front Matter的其他格式
除了 YAML 之外,VuePress 也支持JSON
或者TOML (opens new window)
格式的 front matter。
JSON front matter 需要以花括号开头和结尾:
---
{
"title": "Blogging Like a Hacker",
"lang": "en-US"
}
---
TOML front matter 需要显式地标注为 TOML:
---toml
title = "Blogging Like a Hacker"
lang = "en-US"
---
Markdown 拓展
内部链接
官方是这样说的:
网站内部的链接,将会被转换成 <router-link>
用于 SPA 导航。同时,站内的每一个文件夹下的 README.md
或者 index.md
文件都会被自动编译为 index.html
,对应的链接将被视为/
。
例子:
.
├─ README.md
├─ foo
│ ├─ README.md
│ ├─ one.md
│ └─ two.md
└─ bar
├─ README.md
├─ three.md
└─ four.md
假设你现在在 foo/one.md 中:
[Home](/) <!-- 跳转到根部的 README.md -->
[foo](/foo/) <!-- 跳转到 foo 文件夹的 index.html -->
[foo heading](./#heading) <!-- 跳转到 foo/index.html 的特定标题位置 -->
[bar - three](../bar/three.md) <!-- 具体文件可以使用 .md 结尾(推荐) -->
[bar - four](../bar/four.html) <!-- 也可以用 .html -->
无论是否使用了permalink
和clean-urls
插件,你的相对路径都应该依赖于当前的文件结构来定义。在上面的例子中,即使你将/foo/one.md
的路径设为了/foo/one/
,你依然应该通过./two.md
来访问/foo/two.md
。
外部链接
外部的链接将会被自动地设置为 target="_blank" rel="noopener noreferrer"