Need help with vuepress-theme-2zh?
Click the “chat” button below for chat support from the developer who created it, or find similar developers for support.

About the developer

cadecode
138 Stars 10 Forks 58 Commits 0 Opened issues

Description

基于 VuePress 的静态博客主题

Services available

!
?

Need anything else?

Contributors list

No Data

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

最后

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

We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.