VitePress Simple Theme

Appearance

Return to top
On this page

Getting Started

🐧 Create Folder

cmd
mkdir vitepress-theme

🐦 Move Folder

cmd
cd ./vitepress-theme

🦉 Create Package.json

cmd
npm init -y

🦚 NPM Install

cmd
npm install vitepress vitepress-simple-theme

🦩 Set Package.json

json
{
    "name": "vitepress-theme",
    "version": "1.0.0",
    "description": "",
    "main": "index.js",
    "scripts": {
        "dev": "vitepress dev",
        "build": "vitepress build"
    },
    "keywords": [],
    "author": "",
    "license": "ISC",
    "dependencies": {
        "vitepress": "^1.0.0-alpha.4",
        "vitepress-simeple-theme": "^0.3.2"
    }
}

🦜 Directory Structure

Directory Structure

  • 📁 node_modules/
  • 📁 .vitepress/
    • 📁 theme/
      • 📒 index.js
    • 📒 config.js
  • 📁docs/
    • 📁 guide/
      • 📗 Hello.md
    • 📗 index.md
  • 📙 packge-lock.json
  • 📙 packge.json

🦢 Set Config.js

js
// .vitepress/config.js
const path = require("path");

const rootDir = path.resolve(__dirname, "../");
const mdDir = path.resolve(rootDir, "docs");

export default {
    title: "Hello Friend",
    description:
        "Theme for sharing created using vitepress. Please use it a lot 😊",
    srcDir: mdDir,
    themeConfig: {
        nav: [
            {
                text: "guide",
                link: "/guide/hello",
                activeMatch: "/guide/",
            },
        ],
        sidebar: {
            "/guide/": [
                {
                    text: " WELCOME ",
                    items: [
                        {
                            text: "· Hello Friend",
                            link: "/guide/hello",
                        },
                    ],
                },
            ],
            "/": [
                {
                    text: "GUIDE",
                    items: [
                        {
                            text: " · Hello",
                            link: "/guide/hello",
                        },
                    ],
                },
            ],
        },
    },
    vite: {
        ssr: { format: "cjs" },
    },
};

🦅 Set Index.js

js
// // .vitepress/theme/index.js
import Theme from "vitepress-simple-theme";
export default Theme;

🦃 Set Home Markdown

md
---
title: "WELCOME FRIEND"
image: https://images.unsplash.com/photo-1526716173434-a1b560f2065d?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=687&q=80
---

🐓 Set Hello Markdown