个人博客搭建过程(2)

个人博客搭建过程(2)

概述

本文主要简单记录一下本人使用vuepress搭建个人博客的过程
一个 VuePress 网站是一个由VueVue 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 中不生效
:::


效果:
个人博客搭建过程(2)_第1张图片

5.内容摘抄

如果一个markdown 文件中有一个 注释,则该注释之前的内容会被抓取并暴露在$page.excerpt属性中。如果你在开发一个博客主题,你可以用这个属性来渲染一个带摘抄的文章列表

效果:
个人博客搭建过程(2)_第2张图片

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 -->

无论是否使用了permalinkclean-urls 插件,你的相对路径都应该依赖于当前的文件结构来定义。在上面的例子中,即使你将/foo/one.md 的路径设为了/foo/one/,你依然应该通过./two.md 来访问/foo/two.md

外部链接

外部的链接将会被自动地设置为 target="_blank" rel="noopener noreferrer"

你可能感兴趣的:(前端,vue,博客,vue)