Skip to content

cadecode/vuepress-theme-2zh

Repository files navigation

vuepress-theme-2zh

介绍

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

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

安装

  1. 掌握 vuepress 基本使用方法

    https://www.vuepress.cn

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

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

  3. 使用 npm

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

配置

主题配置

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

  1. logo

    顶部导航图片标志

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

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

  2. author

    页面底部的署名信息

    // 类型 String
    // 默认
    author: '2zh'
  3. 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/'
                }
    		]
  4. 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'},
            ]
  5. pagination

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

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

    // 类型 Number
    // 默认
    pagination: 12
  6. domain

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

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

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

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

md 配置

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

  1. title

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

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

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

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

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

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

    文章标签,类型为 String 或 Array

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

    // 示例
    tag: Java
    // 或
    tag: [Java, Java web]
  5. cover

    文章列表中显示的封面

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

    // 示例
    cover: /cover/picture.png
  6. 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 // 友链页面
    
  2. 静态资源

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

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

最后

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