html 标题设置链接 博客,从今天开始,拿起VuePress打造属于自己的专属博客

VuePress(0.x版本)

本blog配套了一个基于 VuePress 的一个简单的配置案例,此配置案例包含了本blog绝大部分配置案例,更多详情请移步这里VuePress配置案例

前言

问:这篇文章是干什么的?

答:列举博客站点常见的配置并提供详细配置步骤和配置截图

问:这篇文章适合哪些人?

答:想写博客,但并不知道如何写以及知道VuePress但并不知道怎么配置

问:这篇文章目录怎么理解?

答:看完基础配置能上手配置,看完进阶配置能熟悉了解VuePress

安装

本博客VuePress主版本为0.x,相关配置最新的1.x也兼容,请放心使用。另请确认你的Node.js >= 8

全局安装(推荐)

通常而言,全局安装 VuePress 会非常省心,可以通过如下命令进行全局安装

$ npm install -g vuepress

复制代码

本地安装

区别于全局安装,本地安装会把npm包安装在本项目上,生成一个叫node_modules目录,可以通过如下命令进行本地安装(需同时安装vuepress和webpack-dev-middleware)

$ npm install vuepress webpack-dev-middleware --save-dev

复制代码

基本配置

基本配置下的内容适用于 VuePress 的默认主题,对于自定义主题配置可能会不太一样

脚本命令

我们需要至少两个脚本命令,分别用于本地开发和打包上线,脚本命令需要配置在docs/package.json文件中,它的配置如下

{

"scripts": {

// 本地开发

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

// 打包上线

"docs:build": "vuepress build docs"

}

}

复制代码

本地开发请使用如下命令,它在本地启用了一个小型的服务器,你可以在浏览器中使用localhost:8080(默认情况下)进行访问

$ npm run docs:dev

复制代码

打包命令请使用如下命令,它在.vuepress目录下生成一个dist文件夹

$ npm run docs:build

复制代码

项目目录

VuePress 作为一个静态网站生成器,它对于项目的目录是有一定的限制的,一个基本的项目结构如下所示

|-- docs // 特定的目录

|-- README.md // 首页

|-- .vuepress // 特定的目录

|-- config.js // 特定的配置文件

|-- package.json // 脚本命令

复制代码

首页

默认主题提供了一个首页(HomePage),即上面目录结构中的README.md文件中的内容,首页是可选的,对于 VuePress 中默认主题的首页,我们可以进行如下配置

---

home: true

lang: zh-CN

heroText: A Personal Blog

heroImage: /logo.jpg

actionText: 开始 →

actionLink: /interview/

features:

- title: A Blog

details: 专注写作前端博客,记录日常所得。

- title: For Me

details: 故九万里,则风斯在下矣,而后乃今培风;背负青天,而莫之夭阏者,而后乃今将图南。

- title: For Interview

details: 广州,已入坑ღ( ´・ᴗ・` )比心

footer: Copyright © 2019-present Wangtunan

---

复制代码

以上配置即为本博客的首页效果html 标题设置链接 博客,从今天开始,拿起VuePress打造属于自己的专属博客_第1张图片

首页配置说明

在首页的YAML格式配置中,我们填写了一些配置,下面我们将详细描述每一个配置的具体含义

home:true:标记此页面是否为首页

lang:zh-CN:表示本页面的语言为zh-CN(简体中文)

heroText: 首页的标题内容

heroImage: 首页的标题图片,其中全路径为docs/.vuepress/public/logo.jpg,默认去public目录下找静态资源

actionText: 首页跳转按钮的内容

actionLink: 首页跳转按钮挑战的路径,其中全路径为docs/interview/readme.md,默认readme命名的文件可以省略不写链接的后面内容,省略后的链接如上

features: 表明首页的特征,固定的格式为title + details,以三栏流式布局的方式展示

footer: 为底部内容,与普通的网页一样,我们可以在footer里面写版权信息

导航栏

配置导航栏需要在.vuepress/config.js文件中进行配置

在默认主题下,导航栏需要在themeConfig属性上进行配置nav,导航栏的两个重要属性为text和link,其中text指明了导航的文字内容,link指明了导航的链接。

基本导航栏

一个基本的导航栏链接可以配置成如下所示

module.exports = {

// 其它配置

themeConfig: {

nav: [

{ text: '首页', link: '/' },

{ text: 'HTML', link: '/html/' },

{ text: 'CSS', link: '/CSS/' },

{ text: 'JavaScript', link: '/JavaScript/' }

]

}

}

复制代码

基本导航栏配置结果html 标题设置链接 博客,从今天开始,拿起VuePress打造属于自己的专属博客_第2张图片

导航栏下拉列表

下拉列表需要配置items属性,它是一个数组,数组里的对象依然是一个普通导航对象,即拥有text和link属性,一个导航栏下拉列表可以配置成如下所示

module.exports = {

// 其它配置

themeConfig: {

nav: [

{ text: '首页', link: '/' },

{ text: '前端三剑客', items: [

{ text: 'HTML', link: '/html/' },

{ text: 'CSS', link: '/CSS/' },

{ text: 'JavaScript', link: '/JavaScript/' }

]},

{ text: 'Vue.jss', link: '/vue/' },

]

}

}

复制代码

导航栏下拉列表配置结果html 标题设置链接 博客,从今天开始,拿起VuePress打造属于自己的专属博客_第3张图片

禁用导航栏

禁用导航栏分为两种情况,第一种禁用所有的导航栏,第二种在某个页面禁用导航栏,针对这两种不同的情况,相关的配置是不同的,具体如下所示

第一种: 禁用所有导航栏,通过配置navbar属性为false,此种方式禁用后,将不会存在任何导航栏

module.exports = {

// 其它配置

themeConfig: {

navbar: false

}

}

复制代码

第二种: 单个禁用导航栏,在每一个页面(.md文件)最顶部,配置navbar属性为false,此种方式禁用后,对应的导航栏依然存在,只是不能点击跳转。

---

navbar: false

---

复制代码

内置搜索

我们在以上配置导航栏的过程中,除了我们配置的导航,还会出现一个搜索框,这就是 VuePress 内置的搜索,内置的搜索只能搜索页面的h2和h3标题构成的索引,我们依然可以对内置的搜索进行以下配置:

search: 通过配置此属性为false,来禁用内置搜索

searchMaxSuggestions: 通过配置此属性为一个数字,对内置的搜索进行最多结果数量的限制

module.exports = {

// 其它配置

themeConfig: {

search: false,

searchMaxSuggestions: 10

}

}

复制代码

侧边栏

侧边栏分组

侧边栏分组即意味着把链接进行分组,每一个链接对应一个页面

侧边栏分组可以如下进行配置,其中collapsable属性设置为false,意味着展开这个分组,属性设置为true,意味着折叠这个分组。

module.exports = {

themeConfig: {

// 其它配置

sidebar: [

{

title: '前端三剑客',

collapsable: false,

children: [

'/CSS/',

'/HTML/',

'/JavaScript/'

]

},

{

title: 'Vue.js',

collapsable: false,

children: [

'/Vue/',

'/Vue/Vuex.md',

'/Vue/Vue-Router.md',

]

}

]

}

}

复制代码

要实现以上分组结果,目录结构可以如下所示

|-- docs

| |-- CSS

| | |-- README.md

| |-- HTML

| | |-- README.md

| |-- JavaScript

| | |-- README.md

| |-- Vue

| |-- README.md

| |-- Vue-Router.md

| |-- Vuex.md

| |-- README.md

复制代码

侧边栏分组的结果

html 标题设置链接 博客,从今天开始,拿起VuePress打造属于自己的专属博客_第4张图片

自动生成侧边栏

如果我们仅仅只是希望能根据.md中的标题自动生成侧边栏的话,可以设置sidebar: auto属性即可

如果我们要为所有.md都开启自动生成侧边栏的话,需要进行如下配置

module.exports = {

themeConfig: {

// 所有页面全部开启自动生成侧边栏

sidebar: 'auto',

}

}

复制代码

如果我们只是针对某一个.md文件开启自动生成侧边栏的话,需要在.md文件的最上方,通过设置YAML属性,相关配置如下

---

sidebar: auto

---

# Vue.js

这里是Vue.js文件的内容部分

复制代码

禁用侧边栏

正如上面所提到的单独配置文件的侧边栏,同样的道理,我们也能单独禁用侧边栏。

---

sidebar: false

---

# Vue.js

这里是Vue.js文件的内容部分

复制代码

最后更新时间

最后更新时间默认不开启,它是基于git提交的时间戳,所以我们的静态站点是需要通过git init的仓库进行管理的,并且它是按git commit的时间来计算的。

最后更新时间可以通过配置lastUpdated,它的默认值为false,接受字符串(String)和布尔值(boolean)

module.exports = {

themeConfig: {

// 1.接受字符串,它设置了最后更新时间的label,例如:最后更新时间:2019年5月3日 21:51:53

lastUpdated: '最后更新时间',

// 2.设置true,开启最后更新时间

lastUpdated: true,

// 3.设置false,不开启最后更新时间(默认)

lastUpdated: false

}

复制代码

上一篇/下一篇

如果我们没有上一篇或者下一篇,只需要把其对应的YAML属性设置为false即可

上一篇/下一篇可以通过配置YAML的prev和next来显示的配置,链接地址同导航的地址一样的书写规则,一个配置了上一篇/下一篇的.md文件可以如下所示

---

prev: /HTML/

next: /JavaScript/

---

# HTML5

这里是HTML5的内容部分

复制代码

上一篇/下一篇的配置结果如下图所示

html 标题设置链接 博客,从今天开始,拿起VuePress打造属于自己的专属博客_第5张图片

Git仓库和编辑链接

在输出我们的静态网站的时候,我们可能需要有一个导航链接到我们的GitHub仓库,对于这个需求我们可以通过如下配置来解决

repo代表我们的链接地址,repoLabel代表链接的名称,配置后它会自动出现在我们nav导航的最后一个位置module.exports = {

themeConfig: {

// 其它配置

repo: 'https://github.com/wangtunan/blog',

repoLabel: 'Github',

nav: [

{ text: '首页', link: '/' },

{ text: '前端三剑客', items: [

{ text: 'HTML', link: '/html/' },

{ text: 'CSS', link: '/CSS/' },

{ text: 'JavaScript', link: '/JavaScript/' }

]},

{ text: 'Vue.js', link: '/vue/' },

]

}

}

复制代码编辑功能默认是没有开启的,我们可以通过配置editLinks来设置是否出现编辑链接,editLinkText指明编辑功能的文字内容

一个启用了编辑链接的配置可以如下所示

module.exports = {

themeConfig: {

// 其它配置

repo: 'https://github.com/wangtunan/blog',

repoLabel: 'Github',

editLinks: true,

editLinkText: '编辑此页',

nav: [

{ text: '首页', link: '/' },

{ text: '前端三剑客', items: [

{ text: 'HTML', link: '/html/' },

{ text: 'CSS', link: '/CSS/' },

{ text: 'JavaScript', link: '/JavaScript/' }

]},

{ text: 'Vue.jss', link: '/vue/' },

]

}

}

复制代码

配置了编辑链接后结果可能如下图所示

html 标题设置链接 博客,从今天开始,拿起VuePress打造属于自己的专属博客_第6张图片

你也可以通过设置YAML来单独禁止某个.md文件启用编辑链接功能

---

editLink: false

---

复制代码

Markdown扩展

链接

锚链接

在VuePress 中所有.md文件中的标题(默认h2和h3)都会自动添加锚点链接(anchor),所以如果我们需要跳转至固定的锚点,可以如下进行设置

[锚点链接](/vuepress/#pwa配置)

复制代码

内部链接

在 VuePress 内部,以.md或者.html结尾的文件,会被转换成用于SPA导航,它是大小写敏感的。

如果文件名为README.md,它会被编译成index.html,所以当我们访问/vuepress/时,其实就是在访问/vuepress/README.md或者/vuepress/index.html

自定义容器

VuePress 内置了三种不同状态的自定义容器,分别有tip、warning和danger三种类型,在紧挨着类型的旁边,可以设置自定义容器标题,不写的话默认为TIP,它们的书写规则如下所示

::: tip 提醒

这里是tip容器

:::

::: warning 警告

这里是警告容器

:::

::: danger 危险

这里是危险容器

:::

复制代码

三种自定义容器的结果如下图所示html 标题设置链接 博客,从今天开始,拿起VuePress打造属于自己的专属博客_第7张图片

代码块类别

对于不同的代码块,需要设置不同的类型进行展示,常见的代码块类型有如下所示

html 类型:它表示代码块是html格式的

css 类型:它表示代码块是css格式的

js 类型:它表示代码块是javascript格式的

stylus 类型:它表示代码块是stylus格式的,类似的类型还有less和scss

md 类型:它表示代码块是markdown格式的

json 类型:它表示代码块是json格式的

他们的对应的配置如下所示

HTML格式的代码块(观测代码块右上角小角标)

html类型的代码块

你可能感兴趣的:(html,标题设置链接,博客)