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

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"
  }
}

{
  "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 type { ThemeLinearConfig } from './theme/config'
import { 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()

import { defineConfigWithTheme } from 'vitepress'
import type { ThemeLinearConfig } from './theme/config'
import { 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

npm run dev

Acknowledgement ​

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

License ​

MIT © 2022 - PRESENT Yiyang Sun