vuepress-theme-2zh

介绍

vuepress 是由 vue 驱动的静态网站生成器，而 vuepress-theme-2zh 是一款基于 vuepress 的静态博客主题

1. 优雅的响应式设计
2. 简洁的文章列表
3. 直观的标题目录
4. mermaid 语法支持
5. latex 公式支持

安装

1. 掌握 vuepress 基本使用方法

https://www.vuepress.cn

1. 下载 vuepress-theme-2zh 源码

https://github.com/cadecode/vuepress-theme-2zh

1. 使用 npm

   npm i -S @cadecode/vuepress-theme-2zh

配置

主题配置

在 .vuepress/config.js 中的 themeConfig 属性下进行配置

1. logo

顶部导航图片标志

   // 类型 Array
   // 默认
   logo: ['text','2zh']

logo[0] 可选 'text' 和 'image'，logo[1] 分别对应文字和图片链接

1. author

页面底部的署名信息

   // 类型 String
   // 默认
   author: '2zh'

1. 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/'
               }
        ]

1. 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'},
           ]

1. pagination

首页文章列表分页，指定每页文章个数

该参数不影响标签分类下的文章列表，标签下默认显示该标签的全部文章

   // 类型 Number
   // 默认
   pagination: 12

1. domain

配置域名将启用 rss.xml、sitemap.xml，有利于收索引擎抓取

   // 类型 String
   // 默认
   domain: ''
   // 示例
   domain: 'https://cadecode.github.io'

1. comment

为文章页面、关于页面、友链页面开启评论支持

   // 示例
   comment: ['Your own appId', 'Your own appKey']

md 配置

在每个 markdown 文件的头部进行配置，使用 YAML 语法

1. title

文章名称，影响浏览器标题

   // 示例
   title: vuepress 介绍
   // 不配置默认为 No title

1. date

写作日期，在文章列表上显示，影响文章排序

   // 示例
   date: 2020/7/26
   // 不配置默认为 1970/1/1

1. description

文章描述，在文章列表上显示

   // 示例
   description: 关于 vuepress 的介绍
   // 不配置默认为 No description

1. tag

文章标签，类型为 String 或 Array

用以标签分类以及在文章列表上显示（为数组则显示第一个元素）

   // 示例
   tag: Java
   // 或
   tag: [Java, Java web]

1. cover

文章列表中显示的封面

不指定该项会默认使用 cover 文件夹下的图片，以文章在列表排序中的索引为名称，png 为后缀，如 0.jpg 为列表中的最后一篇文章的封面

   // 示例
   cover: /cover/picture.png

1. pined

置顶文章，设定一个数值，从 1 开始，由小到大的排列置顶文章

   // 示例
   pined: 1

需要注意的是，docs 文件夹下 about.md 和 links.md 分别对应导航栏中的关于和友链

需要在 md 文件头部标注要使用的布局，如下

layout: Info 
permalink: /:slug
title: About
description: '...'

目录配置

1. docs 结构

   |- docs
    |- .vuepress 
        |- config.js // 配置文件
    |- post // markdown 文章
        |- post1.md
        |- post2.md
        |- ...
    |- about.md // 关于页面
    |- links.md // 友链页面

1. 静态资源

图片等静态资源放在 .vuepress/public 下，vuepress build 时自动拷贝到 index.html 所在目录

   |- docs
    |- .vuepress
        |- public
            |- cover // 封面
            |- meta // favicon.ico, logo.png...
            |- image // 其他图片

最后

不足之处，敬请见谅，拥抱变化，拥抱开源