个人博客搭建过程(2)

个人博客搭建过程(2)

概述

本文主要简单记录一下本人使用vuepress搭建个人博客的过程
一个 VuePress 网站是一个由Vue、Vue Router和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	当前页面的描述
	内容摘抄

4.自定义容器

::: tip
这是一个提示
:::

::: warning
这是一个警告
:::

::: danger
这是一个危险警告
:::

::: details
这是一个详情块，在 IE / Edge 中不生效
:::

效果:

5.内容摘抄

如果一个markdown 文件中有一个 注释，则该注释之前的内容会被抓取并暴露在$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 拓展

内部链接

官方是这样说的:
网站内部的链接，将会被转换成 用于 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"