Vitepress Theme Linear

Introduction

A dream theme for vitepress blogs.

Usage

Preparation

Follow guide on the official site to build up your site with default theme first.

Install Theme

• Install the NPM package.

pnpm i -D vitepress-theme-linear

• Modify scripts config in your package.json.

{
  "scripts": {
    "theme": "cd docs/.vitepress/ && rm -rf theme && ln -s ../../node_modules/vitepress-theme-linear/src theme && cd ../../",
    "dev": "npm run theme && vitepress dev docs",
    "build": "npm run theme && vitepress build docs"
  }
}

Config Theme

Preparation

Refer to official guide to create the config.ts file.

Theme Config

• links:
  • type: Array;
  • item:
    • name: String - name of the link item;
    • link: String - url of the link item;
    • icon: String - path to the icon (public assets should be placed at public folder in docs folder);
• posts: Use getPosts function to generate.

Sample Configuration

Don't worry if module ./theme/config is not found.

import { defineConfigWithTheme } from 'vitepress'
import { ThemeLinearConfig, getPosts } from './theme/config'

const locale = 'en-US'
const timezone = 'Asia/Shanghai'

async function load() {
  return defineConfigWithTheme<ThemeLinearConfig>({
    themeConfig: {
      posts: await getPosts(locale, timezone),
      links: [
        { name: 'GitHub', link: 'https://github.com/syy11cn', icon: '/assets/images/github.svg' },
      ]
    }
  })
}

export default load()

Write Posts

Create posts folder in docs and add markdown files to it.

For Individual pages, create markdown files directly in docs folder.

For static assets, take github.svg as example, place it in docs/public/assets/images/ folder, and then config the icon property in docs/.vitepress/config.ts to '/assets/images/github.svg'.

Development

npm run dev

Acknowledgement

Design inspired by Evan You's Blog and Anthony Fu's Blog.

License

MIT © 2022 - PRESENT Yiyang Sun