# Vuepress theme tabsp

NPM npm

Vuepress 博客主题,预览地址 https://tabsp.com

# 使用教程

Vuepress 文档参考 https://vuepress.vuejs.org/zh/guide/

# 创建项目

# 创建博客文件夹
mkdir my-blog && cd my-blog

# 安装依赖
yarn add -D vuepress # 或者:npm install -D vuepress
yarn add vuepress-theme-tabsp # 或者:npm install -S vuepress-theme-tabsp

# 创建 README.md
echo '# Hello VuePress!' > README.md

# 配置项目

# 创建项目配置文件
mkdir .vuepress && touch .vuepress/config.js

.vuepress/config.js 配置文件参考:

module.exports = {
  title: 'The Tabsp Blog',
  description: 'Just playing around',
  theme: 'vuepress-theme-tabsp',
  themeConfig: {
    nav: 
    [
      { text: 'Blog', link: '/' },
      { text: 'Tags', link: '/tags/' },
    ],
    // 文章目录 默认 '/posts'
    postDir: '/posts',
    permalink: '/posts/:slug',
    footer: {
      gitHub: 'https://github.com/tabsp',
      // 响应国家政策
      beian: {
        show: true,
        number: '粤ICP备xxxx号'
      },
    },
    post: {
      // 链接到文章源码
      srcDir: 'https://github.com/tabsp/tabsp.github.io/blob/src/posts/',
      // 提交 ISSUE
      newIssue: 'https://github.com/tabsp/tabsp.github.io/issues/new'
    },
  },
}

# 创建文章

# 创建文章目录
mkdir posts && touch posts/我的第一篇博客.md

posts/我的第一篇博客.md 文件内容

---
title: 我的第一篇博客
date: 2019-12-27 16:58
tags:
  - hello
  - vuepress
---
# 我的第一篇博客

这是我的第一篇博客

# 预览

npx vuepress dev .

# TODO

  • 分页功能
  • 标签功能
  • TOC
  • ...

Made with ❤️ by Ahmad Mostafa - @z3by