VuePress 更多配置

Data: 2017-01-29 22:24:12Form: JournalClick: 12

# 更多配置

.
├── docs
│   ├── .vuepress (可选的)
│   │   ├── components (可选的)
│   │   ├── theme (可选的)
│   │   │   └── Layout.vue
│   │   ├── public (可选的)
│   │   ├── styles (可选的)
│   │   │   ├── index.styl
│   │   │   └── palette.styl
│   │   ├── templates (可选的, 谨慎配置)
│   │   │   ├── dev.html
│   │   │   └── ssr.html
│   │   ├── config.js (可选的)
│   │   └── enhanceApp.js (可选的)
│   │
│   ├── vuepress
│   │   └── README.md
│   ├── html
│   │   └── README.md
│   ├── css
│   │   └── README.md
│   ├── php
│   │   └── README.md
│   ├── phplib
│   │   └── README.md
│   ├── thinkphp
│   │   └── README.md
│   ├── laravel
│   │   └── README.md
│   ├── centos
│   │   └── README.md
│   ├── README.md
│   └── config.md
│
└── package.json

# 一、侧边栏

# 1、自动生成侧栏

themeConfig: {
    sidebar: 'auto'
}

# 2、多配置文件

.vuepress 目录下，新建 sidebar.js 文件

module.exports = [
    ["/", "首页"],
    {
        title: "前端相关",
        children: [
            ["/vuepress/", "VuePress"],
            ["/html/", "HTML"],
            ["/css/", "CSS"]
        ]
    },
    {
        title: "后端相关",
        children: [
            ["/php/", "PHP"],
            "/phplib/",
            "/thinkphp/",
            "/laravel/",
            "/centos/"
        ]
    }
];

config.js 引入 sidebar.js

themeConfig: {
    sidebar: require("./sidebar.js"),
},

# 二、单独侧边栏

# 1、目录中创建多文件

课件下载open in new window

.
├── docs
│   ├── vuepress
│   │   ├── 1vuepress.md
│   │   ├── 2目录配置.md
│   │   ├── 3主题配置.md
│   │   ├── 4markdown.md
│   │   ├── 5markdown扩展.md
│   │   └── README.md
│   │
│   ├── php
│   │   ├── 1认识php.md
│   │   ├── 2安装PHP8.md
│   │   ├── 3基础语法.md
│   │   └── README.md
│   │
│   ├── README.md
│   └── config.md
│
└── package.json

# 2、独立目录侧边栏

配置 sidebar.js

module.exports = {
    "/vuepress/": [
        {
            title: null,
            collapsable: false,
            sidebarDepth: 1,
            children: [{ title: "VuePress", path: "/vuepress/1VuePress" }],
        }
    ],
    "/php/": [
        {
            title: null,
            collapsable: false,
            sidebarDepth: 1,
            children: [{ title: "认识PHP", path: "/php/1认识php" }],
        }
    ]
};

# 3、多级侧边栏

"/vuepress/": [
    {
        title: null,
        collapsable: false,
        sidebarDepth: 1,
        children: [{ title: "介绍", path: "/vuepress/" }],
    },
    {
        title: null,
        collapsable: false,
        sidebarDepth: 1,
        children: [{ title: "VuePress", path: "/vuepress/1VuePress" }],
    },
    {
        title: null,
        collapsable: false,
        sidebarDepth: 1,
        children: [{ title: "目录配置", path: "/vuepress/2目录配置" }],
    },
    {
        title: null,
        collapsable: false,
        sidebarDepth: 1,
        children: [{ title: "主题配置", path: "/vuepress/3主题配置" }],
    },
    {
        title: null,
        collapsable: false,
        sidebarDepth: 1,
        children: [{ title: "markdown", path: "/vuepress/4markdown" }],
    },
    {
        title: null,
        collapsable: false,
        sidebarDepth: 1,
        children: [{ title: "markdown扩展", path: "/vuepress/5markdown扩展" }],
    }
],

/vuepress/README.md 文件里的内容修改

# 欧阳克个人博客

- 本人是 php 讲师，欧阳克非本名。QQ：428188207。
- 因长年累月积攒了不少自己写的教案，想自己学习的同时，能让大家作为参考。
- 很多理论知识，官网都有，最重要的是我的案例都是自己写的。
- 教案的作用是，让大家学习知识能有个顺序。
- 希望大家一起学习进步。

# 4、合并多级侧边栏

"/php/": [
    {
        title: null,
        collapsable: false,
        sidebarDepth: 2,
        children: [
            { title: "介绍", path: "/php/" },
            { title: "认识PHP", path: "/php/1认识php" },
            { title: "安装PHP8", path: "/php/2安装PHP8" },
            { title: "基础语法", path: "/php/3基础语法" }
        ]
    }
]

# 三、构建静态文件

yarn docs:build
# vuepress build .

我是 PHP 程序员

VuePress 更多配置

# 更多配置

# 一、侧边栏

# 1、自动生成侧栏

# 2、多配置文件

# 二、单独侧边栏

# 1、目录中创建多文件

# 2、独立目录侧边栏

# 3、多级侧边栏

# 4、合并多级侧边栏

# 三、构建静态文件