Nosferatu's Pace Maker

    @cadecode/vuepress-theme-2zh

    1.1.2 • Public • Published

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

    最后

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

    Install

    npm i @cadecode/vuepress-theme-2zh

    DownloadsWeekly Downloads

    13

    Version

    1.1.2

    License

    ISC

    Unpacked Size

    57.5 kB

    Total Files

    31

    Last publish

    Collaborators

    • cadecode