vuepress 是由 vue 驱动的静态网站生成器,而 vuepress-theme-2zh 是一款基于 vuepress 的静态博客主题
掌握 vuepress 基本使用方法
下载 vuepress-theme-2zh 源码
使用 npm
npm i -S @cadecode/vuepress-theme-2zh
在 .vuepress/config.js 中的 themeConfig 属性下进行配置
logo
顶部导航图片标志
// 类型 Array
// 默认
logo: ['text','2zh']
logo[0] 可选 'text' 和 'image',logo[1] 分别对应文字和图片链接
author
页面底部的署名信息
// 类型 String
// 默认
author: '2zh'
notice
首页滚动通知
// 类型 Array
// 默认
notice: []
// 示例
notice: [
{
text: 'vuepress 博客主题 2zh 开源地址',
url: 'https://github.com/cadecode/vuepress-theme-2zh'
},
{
text: 'vuepress 官方文档',
url: 'https://www.vuepress.cn/'
},
{
text: 'vue 官方文档',
url: 'https://cn.vuejs.org/v2/guide/'
}
]
links
页面底部导航链接
// 类型 Array
// 默认
links: []
// 示例
links: [
{text: 'Github', url: 'https://github.com'},
{text: 'Email', url: 'https://mail.foxmail.com'},
{text: 'Weibo', url: 'https://weibo.com/'},
{text: 'Facebook', url: 'https://www.facebook.com'},
]
pagination
首页文章列表分页,指定每页文章个数
该参数不影响标签分类下的文章列表,标签下默认显示该标签的全部文章
// 类型 Number
// 默认
pagination: 12
domain
配置域名将启用 rss.xml、sitemap.xml,有利于收索引擎抓取
// 类型 String
// 默认
domain: ''
// 示例
domain: 'https://cadecode.github.io'
comment
为文章页面、关于页面、友链页面开启评论支持
// 示例
comment: ['Your own appId', 'Your own appKey']
在每个 markdown 文件的头部进行配置,使用 YAML 语法
title
文章名称,影响浏览器标题
// 示例
title: vuepress 介绍
// 不配置默认为 No title
date
写作日期,在文章列表上显示,影响文章排序
// 示例
date: 2020/7/26
// 不配置默认为 1970/1/1
description
文章描述,在文章列表上显示
// 示例
description: 关于 vuepress 的介绍
// 不配置默认为 No description
tag
文章标签,类型为 String 或 Array
用以标签分类以及在文章列表上显示(为数组则显示第一个元素)
// 示例
tag: Java
// 或
tag: [Java, Java web]
cover
文章列表中显示的封面
不指定该项会默认使用 cover 文件夹下的图片,以文章在列表排序中的索引为名称,png 为后缀,如 0.jpg 为列表中的最后一篇文章的封面
// 示例
cover: /cover/picture.png
pined
置顶文章,设定一个数值,从 1 开始,由小到大的排列置顶文章
// 示例
pined: 1
需要注意的是,docs 文件夹下 about.md 和 links.md 分别对应导航栏中的关于和友链
需要在 md 文件头部标注要使用的布局,如下
layout: Info permalink: /:slug title: About description: '...'
docs 结构
|- docs
|- .vuepress
|- config.js // 配置文件
|- post // markdown 文章
|- post1.md
|- post2.md
|- ...
|- about.md // 关于页面
|- links.md // 友链页面
静态资源
图片等静态资源放在 .vuepress/public 下,vuepress build 时自动拷贝到 index.html 所在目录
|- docs
|- .vuepress
|- public
|- cover // 封面
|- meta // favicon.ico, logo.png...
|- image // 其他图片
不足之处,敬请见谅,拥抱变化,拥抱开源