Skip to content

cadecode/vuepress-theme-2zh

main
Switch branches/tags

Name already in use

A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

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 // 其他图片
    

最后

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