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
---
复制代码
以上配置即为本博客的首页效果
首页配置说明
在首页的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/' }
]
}
}
复制代码
基本导航栏配置结果
导航栏下拉列表
下拉列表需要配置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/' },
]
}
}
复制代码
导航栏下拉列表配置结果
禁用导航栏
禁用导航栏分为两种情况,第一种禁用所有的导航栏,第二种在某个页面禁用导航栏,针对这两种不同的情况,相关的配置是不同的,具体如下所示
第一种: 禁用所有导航栏,通过配置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
复制代码
侧边栏分组的结果
自动生成侧边栏
如果我们仅仅只是希望能根据.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的内容部分
复制代码
上一篇/下一篇的配置结果如下图所示
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/' },
]
}
}
复制代码
配置了编辑链接后结果可能如下图所示
你也可以通过设置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 类型:它表示代码块是html格式的
css 类型:它表示代码块是css格式的
js 类型:它表示代码块是javascript格式的
stylus 类型:它表示代码块是stylus格式的,类似的类型还有less和scss
md 类型:它表示代码块是markdown格式的
json 类型:它表示代码块是json格式的
他们的对应的配置如下所示
HTML格式的代码块(观测代码块右上角小角标)
html 标题设置链接 博客,从今天开始,拿起VuePress打造属于自己的专属博客相关推荐
- python爬虫入门实战!爬取博客文章标题和链接!
最近有小伙伴和我留言想学python爬虫,那么就搞起来吧. 准备阶段 爬虫有什么用呢?举个最简单的小例子,你需要<战狼2>的所有豆瓣影评.最先想的做法可能是打开浏览器,进入该网站,找到评论 ...
- 让博客文章赏心悦目:字体颜色和标题设置
文章目录 前言 1 分级标题 1.1 标题=逻辑 2 图片和图床 2.1 什么时候需要插入图片? 2.2 图片处理 3 目录生成 4 代码块公式块 5 字体颜色和高亮 5.1 颜色 5.1.1 快捷键 ...
- vuepress侧边栏配置_VuePress搭建静态博客网站
VuePress是什么 仅从单词上来看就是vue和press,press除了按压的意思外,还有报刊杂志和出版社等意思,所以可以理解为由vue驱动的出版工具.换个说法就是静态博客编写工具.后六字应该都不 ...
- 博客小白如何快捷而又优雅的写好一篇博客
人是注定要受自由之苦的. 有目录,不迷路 前言 Typora Markdown语法详解 标题 摘要 目录 文字 加粗 斜体 引用 删除线 文字标记 居中 颜色 组合 代码 多行代码 单行代码 列表 有 ...
- 李学江:B2B行业门户网站最终页标题设置方法
B2B行业门户网站不同于小网站,页面的优化价值是逆向顺序,即最终页 > 专题页 > 栏目页 > 首页.因为B2B行业门户网站的大部分内容都在最终页,比如:一个网站被BAIDU收录了5 ...
- 博客园美化教程大集合----极致个性化你的专属博客(超详细,看这篇就够了)...
阅读目录: 1. 前言 2. 定制自己的博客 00. 美化整体效果 01. 准备工作 02. 自定义个性化导航栏 03. 添加顶部博主信息 04. 添加顶部滚动公告 05. 为博客文章添加目录导航 0 ...
- GitHub Pages + Hexo + NexT + Typora + WhatsNote打造完美个人知识共享博客
GitHub Pages + Hexo + NexT + Typora + WhatsNote打造完美个人知识共享博客 一.目标 二.理念 三.准备工作 1. 工具 2. 过程 四.实现过程 1. 搭 ...
- 使用 GitHub, Jekyll 打造自己的免费独立博客
使用 GitHub, Jekyll 打造自己的免费独立博客 GitHub是一个代码托管网站,现在很多开源项目都放在GitHub上. 利用GitHub,可以让全球各地的程序员们一起协作开发.GitHub ...
- 个人博客管理系统_教程 | 一文搭建你的第一个免费专属博客
点击蓝字关注我 本文将详细介绍利用Github+hexo搭建一个免费.简洁的个人博客,从获取域名到菜单栏.搜索框.评论分享这些必要功能的配置,给自己一个个性化的内容分享平台. -▼- 我建了一个QQ学 ...
最新文章
- jvm七种垃圾收集器
- 30道linux面试题与答案(21-30)
- Android性能优化常见问题,附架构师必备技术详解
- 用substr()函数高效的输出一个字符串的所用子串
- vuepress侧边栏配置_VuePress搭建静态博客网站
- [NOI2016]循环之美(杜教筛)
- 【转】chrome浏览器的跨域设置——包括版本49前后两种设置
- VMware14.1 Ubuntu16.04设置xshell连接虚拟机
- 【Elasticsearch】ES Elasticsearch查询优化
- leetcode -- Clone Graph
- python中darks_在Python 3中使用YOLOv2
- fa萤火虫算法c语言,优化算法笔记(十)萤火虫算法
- python源码剖析类机制_python源码剖析
- malloc函数C语言实现
- 算法(字符串)——重复的子字符串
- CTF之misc-图片隐写
- 修改计算机用户名bat,修改计算机名.bat
- Landesk桌面管理之服务器管理篇
- Spring懒加载机制原理和配置讲解
- 大型客服外包公司和小型客服外包公司的不同
热门文章
- contos7 配置 python3环境 支持微信公众号开发
- 怎样屏蔽浏览器关闭按钮及ALT+F4 快捷键
- 2018高中计算机学考,关于2018—2019学年普通高中学业水平考试科目考试时间安排的通知...
- 使用 Visual Studio 2005中的ASP.NET 移动控件创建电子书浏览器应用程序
- mysql utc_MySQL的时区是否应该设置为UTC?
- linux双显卡配置_linux双显卡配置 linux网络配置
- python numpy 图片 pad 参数详解
- 聊天类APP功能测试总结
- bootstrap表格标题Caption位于表格下方的原因
- 【工具篇】maven指令大全