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