createdAt Dec 31,2019
updatedAt 32 minutes ago
prev: Usage guide for theme
20 min read 3933 words

vuepress-theme-yuchanns主题使用指南

Netlify Status CircleCI Actions Status License: MIT

TIP

vuepress-theme-yuchanns是一个模仿github风格的主题皮肤，刚刚诞生不久，采用MIT许可证模式发布。

欢迎发表issue提出feature需求，或者创建pr推送自己的想法参与到代码贡献中！

使用本主题的博客

快速使用

全新使用

第一次使用Vuepress？关于Vuepress的使用方法，请参考官方文档

假设你的项目结构如下：

.
├─ docs            # 博客目录
│  ├─ _posts       # 博文目录
│  └─ .vuepress    # 主题配置目录
│     └─ config.js # 主题配置文件
└─ package.json

获取主题

在一个Vuepress项目中执行安装本主题：

yarn add vuepress-theme-yuchanns # 或者 npm install vuepress-theme-yuchanns

然后到.vuepress/config.js中将theme一项配置改成本主题名称缩写yuchanns

// .vuepress/config.js

module.exports = {
  theme: 'yuchanns'
}

接着在package.json中加入以下脚本：

{
  "scripts": {
    "dev": "vuepress dev docs --no-cache --temp .temp",
    "build": "vuepress build docs --dest docs-dist"
  }
}

然后在项目根目录下执行yarn dev(或者npm run dev)，访问localhost:8080即可查看本主题效果。

执行yarn build(或者npm run build)，即可产出静态页面用于部署。

配置概览

基本特性

本主题目前只具备博客的最基本功能，除此之外，也具有一些特色特性——

基本功能：

  • 首页
  • 文章
  • 分类
  • 标签
  • 归档
  • 国际化
  • 评论

主题特性：

  • 归档热图(github贡献度风格)
  • 首页分类标志颜色定制
  • 分类图标和分类说明定制
  • 社交服务导航
  • 文章置顶

主题通用配置

点此展开 
module.exports = {
  title: 'vuepress-theme-yuchanns',

  description: 'a Vuepress theme presented by yuchanns',

  theme: 'yuchanns',

  locales: {
    '/': {
      lang: 'en-US'
    }
  },

  themeConfig: {
    lang: 'en-US',

    author: {
      name: 'yuchanns',
      avatar: '/yuchanns.jpg',
      desc: '面向Github编程',
      job: '后端工程师',
      location: '深圳',
      email: 'airamusume@gmail.com',
      link: 'yuchanns.org'
    },

    vssue: {
      platform: 'github',
      owner: 'your github username',
      repo: 'your github repository',
      clientId: 'your oAuth App clientId',
      clientSecret: 'your oAuth App clientSecret'
    },

    pagination: {
      lengthPerPage: 5
    },

    sns: {
      github: {
        account: 'yuchanns',
        link: 'https://github.com/yuchanns'
      },
      twitter: {
        account: 'airamusume',
        link: 'https://twitter.com/airamusume'
      },
      facebook: {
        account: 'airamusume',
        link: 'https://www.facebook.com/airamusume'
      },
      youtube: {
        account: 'Github',
        link: 'https://www.youtube.com/github'
      },
      linkedin: {
        account: 'Github',
        link: 'https://www.linkedin.com/company/github'
      }
    },

    categories: {
      docs: { color: '#e34c26', desc: 'Showing the usage of vuepress-theme-yuchanns.展示本主题的使用方法' }
    }
  }
}

配置详解

语言支持

本主题目前支持中文和英文，只需在locales中配置lang为zh-CN或en-US即可切换到对应语言。

如果你有其他的语言需求，欢迎到issue中提出，我会将其加入支持。

语言局部定制

如果你对局部语言有特殊需要(例如本主题，整体语言为en-US，但是局部进行了中文化处理)，可以分别对一些部分的名词进行自定义：

只需在themeConfig.lang中引入主题的语言包，并覆盖相应字段即可。

themeConfig: {
  lang: Object.assign(require('vuepress-theme-yuchanns/lib/langs/en-US'), {
      navigation: '首页',
      categories: '分类',
      tags: '标签'
    })
}

分页数设置

使用themeConfig.pagination.lengthPerPage进行设置。

社交服务导航

在themeConfig.sns中设置社交服务。目前支持：github、twitter、facebook、youtube、linkedin。欢迎在issue中提出扩展需求。

分类个性定制

分类不再仅仅是一段简单的名称，你可以让首页的分类变得五颜六色，可以在分类列表页展示极具分类特征的个性化logo，也可以用简练的文字说明介绍分类的内容，一切尽在themeConfig.categories配置项中。

本配置项为一个对象，其中属性名为分类名，属性值为分类配置。

在分类配置中，使用color设定首页分类颜色，使用desc对分类做出说明，通过logo给出个性化logo的图片地址——还有什么更好的想法？提出来一起分享吧！

文章置顶

在文章的frontmatter中添加pinned: 数字可以置顶文章。其中数字以升序方式排列置顶顺序。

评论

在themeConfig.vssue中进行配置，详细参考Vssue文档。

鸣谢

prev: Usage guide for theme