Vuepress-theme-tassel NPM

Vuepress-theme-tassel

a good theme for vuepress, you can design your theme by this theme.

Usage

在首页面README.md设置如下：

---
home: true
---

yarn add vuepress-theme-tassel

在config.js中的配置`theme: 'tassel'`

Configuration

在config.js中的themeConfig配置如下参数

    nav: {
      {
        text: 'Posts',
        link: '/posts/'
      },
      {
        text: 'Archives',
        link: '/archives/'
      },
      {
        text: 'Tags',
        link: '/tags/'
      }
    },
    homePage: 'Post', // Post or HomeLayout
    valineConfig: {
      appId: '',
      appKey: '',
      notify: false,
      verify: false,
      avatar: 'mm',
      placeholder: 'just go go...',
      pageSize: 15,
      visitor: true,
      highlight: true,
      recordIP: true
    },
    homeConfig: {
      homeSrc: '',
      nickname: 'finen',
      signature: '你好',
      urllink1: '',
      urllink1_text: '',
      urllink2: '',
      urllink2_text: '',
      copyright: '',
      beian: '',
      github_url: '', // https
      github: ''
    },
    author: 'finen',

All Configurations

const { fs, path } = require('@vuepress/shared-utils')

module.exports = ctx => ({
  dest: '../../vuepress',
  locales: {
    '/': {
      lang: 'en-US',
      title: 'VuePress 1.x',
      description: 'Vue-powered Static Site Generator'
    },
    '/zh/': {
      lang: 'zh-CN',
      title: 'VuePress 1.x',
      description: 'Vue 驱动的静态网站生成器'
    }
  },
  head: [
    ['link', { rel: 'icon', href: `/logo.png` }],
    ['link', { rel: 'manifest', href: '/manifest.json' }],
    ['meta', { name: 'theme-color', content: '#3eaf7c' }],
    ['meta', { name: 'apple-mobile-web-app-capable', content: 'yes' }],
    ['meta', { name: 'apple-mobile-web-app-status-bar-style', content: 'black' }],
    ['link', { rel: 'apple-touch-icon', href: `/icons/apple-touch-icon-152x152.png` }],
    ['link', { rel: 'mask-icon', href: '/icons/safari-pinned-tab.svg', color: '#3eaf7c' }],
    ['meta', { name: 'msapplication-TileImage', content: '/icons/msapplication-icon-144x144.png' }],
    ['meta', { name: 'msapplication-TileColor', content: '#000000' }]
  ],
  theme: 'tassel',
  themeConfig: {
    repo: 'vuejs/vuepress',
    editLinks: true,
    docsDir: 'docs',
    homePage: 'HomeLayout', // Post or HomeLayout
    valineConfig: {
      appId: '',
      appKey: '',
      notify: false,
      verify: false,
      avatar: 'mm',
      placeholder: 'just go go...',
      pageSize: 15,
      visitor: true,
      highlight: true,
      recordIP: true
    },
    homeConfig: {
      homeSrc: '',
      nickname: 'finen',
      signature: '',
      urllink1: '',
      urllink1_text: '',
      urllink2: '',
      urllink2_text: '',
      copyright: '',
      beian: '',
      github_url: '',
      github: ''
    },
    author: 'finen',
    nav: require('./nav/index'),
    locales: {
      '/': {
        // label: 'English',
        // selectText: 'Languages',
        // editLinkText: 'Edit this page on GitHub',
        // lastUpdated: 'Last Updated',
        
        sidebar: {
          '/blog/git/': genGitSidebarConfig('git学习')
        }
      }
    }
  },
  plugins: [
    ['@vuepress/back-to-top', true],
    ['@vuepress/pwa', {
      serviceWorker: true,
      updatePopup: true
    }],
    ['@vuepress/medium-zoom', true],
    ['@vuepress/blog'],
    ['@vuepress/google-analytics', {
      ga: 'UA-128189152-1'
    }],
    ['container', {
      type: 'vue',
      before: '<pre class="vue-container"><code>',
      after: '</code></pre>',
    }],
    ['container', {
      type: 'upgrade',
      before: info => `<UpgradePath title="${info}">`,
      after: '</UpgradePath>',
    }],
  ]
})

function genGitSidebarConfig (title) {
  return [
    {
      title,
      collapsable: false,
      children: [
        '',
        'git-advanced-command',
        'git-remote-command',
        'git-branch-command',
        'git-cooperate-develop-command'
      ]
    }
  ]
}