createdAt Jan 1
updatedAt Feb 12
24 min read 4693 words

A usage guide for vuepress-theme-yuchanns

Netlify Status CircleCI Actions Status License: MIT

TIP

vuepress-theme-yuchanns is a github style theme with little age, which is licensed under the MIT Licence.

Feel free to open an request issue or create a pr to contribute to this theme.

Blog Using This Theme

Quick Start

Newbee

First time with Vuepress? Learn how to use it referring by Official Docs

Assume with a project structure below:

.
├─ docs            # blogs dir
│  ├─ _posts       # pages dir
│  └─ .vuepress    # theme config dir
│     └─ config.js # theme config file
└─ package.json

Fetch Theme

Installing this theme with one Vuepress project:

yarn add vuepress-theme-yuchanns # or npm install vuepress-theme-yuchanns

Then change theme value as yuchanns in .vuepress/config.js.

// .vuepress/config.js

module.exports = {
  theme: 'yuchanns'
}

Next add scripts into package.json:

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

So you can run yarn dev(or npm run dev) and visit localhost:8080 to view theme.

Otherwise deploy by running yarn build(or npm run build) to produce static files.

Configuration Overview

Basic Features

This theme implemented only basic features for now. Still you can find something special.

Basics

  • Home
  • Post
  • Categories
  • Tags
  • Archive
  • Internationalization
  • Comments

Special

  • Archive Heatmap (contribution of github style)
  • Custom icons color in home page
  • Logo and description in categories page
  • Sns
  • Pinned Posts

General Configration

Click to expand
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.展示本主题的使用方法' }
    }
  }
}

Explicition

Languages Support

Supporting for English and Chinese from now on, with simply changes of the lang between zh-CN and en-US.

Require other languages in an issue, so theme will add to support it.

Parts of Language Customizing

If you need to customize parts of language, just do it:

Import theme's language package in themeConfig.lang and then cover values to corresponding properties.

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

Lengthe Per Page

Configuring by themeConfig.pagination.lengthPerPage.

Social Network Services

Placing sns with themeConfig.sns. Now supporting github, twitter, facebook, youtube, linedin. Expanding issues are welcome.

Custom Categories

The categories is more than just one short name, can be further colorful and displaying individual logo with briefly description, all be in themeConfig.categories.

It is an object with properties named by categories, which values containing configration.

Coloring in color, describing in desc and providing logo in logo. Now sharing your better ideas!

Pinned Posts

You can pinned posts by adding pinned: number in the frontmatter of posts. Numbers are used for sorting pinned posts ascending order.

Comments

Configuring with themeConfig.vssue. More info visit Vssue.

Thanks