This topic is based on the latest vitepress release 0.15.6

Add a sidebar

live demo

github repo

Functions already implemented:

  • Filing function by year
  • tags
  • Not very elegant pagination
  • Very inelegant but impossible comment functionality (based on utteranc. Es)
  • If nothing goes wrong, it should always be followedvitepressThe version of the

Motivation:

Want to find a straight architecture clean enough (small, lightweight) SSG procedures, hexo, Hugo, vuepress, docsify etc are tried, there are always unsatisfactory, including the theme of the programs and no direct satisfaction (not familiar with programming language, function too much, the generated HTML file and many plug-in residue).

Vitepress is light enough, the system is clean, and the startup is fast. The blog theme is not mature yet, so make a satisfactory blog theme by yourself. The appeal is that the function can be few, but it should be light enough.

Core Implementation Idea

Do not move the official default theme, can inherit the best, easy to follow the vitePress rapid upgrade, but also directly have the official skin function say three times!! In addition to learning for the purpose of other times, in fact, toss is far less important than precipitation, adhere to see adhere to write, than what system is more important

Method of use

It seems that the theme mechanism of VitePress is not mature yetcopyIn the manner of

1. Copy the file to your project root directory for download

├ ─ ─. Vitepress ├ ─ ─ pages │ ├ ─ ─ the about the md │ ├ ─ ─ archives. The md │ └ ─ ─ tags. The md ├ ─ ─ posts/store/blog posts ├ ─ ─ public / / [optional] └ ─ ─ favicon.icoCopy the code

2. Create a package.json file and run NPM I

{
    "name": "vitepress-blog-pure"."version": "1.0.0"."description": ""."main": "index.js"."scripts": {
        "dev": "Vitepress dev - host 0.0.0.0." "."build": "vitepress build"."serve": "vitepress serve"
    },
    "keywords": []."author": ""."license": "ISC"."devDependencies": {
        "vitepress": "^ 0.15.6"."globby": "^ 11.0.4"."gray-matter": "^ 4.0.3"."fs-extra": "^ 10.0.0"}}Copy the code

3. Run NPM run dev to view the result. Other tools PNPM and YARN are optional

The format and location of the posts are recommended to be placed in the posts directory.

---
date: 2021-06-30
title: .zshDescription: there are too many duplicate commands in the history. Grep is not easy to find tags: -macos -- # title textCopy the code

Thank you

See the inspiration for this article – VitePress Minimalist blog building

Moking1997 was developed relatively early, vitePress version is still 0.7.x, now it is 0.15.x, the change is still quite big, it is not possible to maintain by raising PR. The main change is to adapt to the new version of VitePress. The theme section adopts a different implementation idea and does not change the official default theme, which can achieve a minimal amount of code and prepare for the future release of NPM theme package.

Sidebar, for example, uses hackCSS to achieve the desired effect