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'
在每个 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
comment
为文章页面、关于页面、友链页面开启评论支持
// 示例comment: 'Your own appId' 'Your own appKey'
cover
文章列表中显示的封面
不指定该项会默认使用 cover 文件夹下的图片,以文章在列表排序中的索引为名称,png 为后缀,如 0.jpg 为列表中的最后一篇文章的封面
// 示例cover: /cover/picturepng
pined
置顶文章,设定一个数值,从 1 开始,由小到大的排列置顶文章
// 示例pined: 1
需要注意的是,docs 文件夹下 about.md 和 links.md 分别对应导航栏中的关于和友链
需要在 md 文件头部标注要使用的布局,如下
layout: Infopermalink: /:slugtitle: Aboutdescription: '...'
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 // 其他图片
不足之处,敬请见谅,拥抱变化,拥抱开源