【vuepress基础】使用vuepress-theme-reco主题配置

wenking 7/13/2023 vuepress

一个 VuePress 网站必要的配置文件是 .vuepress/config.js，它应该导出一个 JavaScript 对象

# 主题引入

module.exports = {
    theme: 'reco',
    themeConfig: {
        // 文章作者信息配置
        author: 'wenking',
        // 主题类型
        type: 'blog',
        // 显示文章最后更新时间
        lastUpdated: '更新时间', // string | boolean
        // 其他: navConf,
        nav: navbarConf,
        // 只有文章标题
        sidebar: sidebarConf,
        // 文章开启子菜单配置
        subSidebar: 'auto',
    }
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

在docs目录下新建一个README.md文件

---
home: true
title: 我的博客
description: 这是一个blog测试网站
---

1
2
3
4
5

效果：

映入vuepress-theme-reco主题页

# Front Matter

完整的样式如下：

---
title: 第一篇文章
date: '2023-07-13 08:00:00'
categories:
 - 烹饪
 - 爱好
tags:
 - 烤
 - 鸭子
keys:
 - '32位的 md5 加密密文'
publish: false
---

1
2
3
4
5
6
7
8
9
10
11
12
13

# 博客文章摘要

一个 VuePress 网站必要的配置文件是 .vuepress/config.js，它应该导出一个 JavaScript 对象

\<!-- more --\>

1
2
3

效果：

vuepress-theme-reco博客文章项

# 导航栏

module.exports = {
    nav: [{
        text: 'Linux',
        link: "http://www.baidu.com"
    }],
}

1
2
3
4
5
6

# 侧边栏

当前项目中包含的md文件目录结构如下：

项目目录结构

全局侧边栏配置：

module.exports = {
    theme: 'reco',
    themeConfig: {
        // 博客配置
        type: 'blog',
        sidebar: [
            {
                title: '前端',   // 必要的
                path: '/blog/vue/父子组件传参',      // 可选的, 标题的跳转链接，应为绝对路径且必须存在
                // collapsable: false, // 可选的, 默认值是 true,
                sidebarDepth: 2,    // 可选的, 默认值是 1
                children: [
                    '/',
                    '/blog/vue/前端跨域问题'
                ]
            },
            {
                title: '后端',   // 必要的
                // path: '/blog/dubbo/dubbo基础',      // 可选的, 标题的跳转链接，应为绝对路径且必须存在
                // collapsable: false, // 可选的, 默认值是 true,
                sidebarDepth: 1,    // 可选的, 默认值是 1
                children: [
                    {
                        title: "dubbo",
                        children: [
                            '/blog/dubbo/dubbo基础'
                        ]
                    }
                ]
            }
        ],
    }
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33

全局侧边栏效果如下：

vuepress侧边栏全局目录

分组侧边栏配置

module.exports = {
    theme: 'reco',
    themeConfig: {
        // 博客配置
        type: 'blog',
        sidebar: {
            "/blog/dubbo/": [
                "dubbo基础"
            ],
            "/blog/vue/": [
                {
                    title: "vue",
                    children: [
                        "前端跨域问题",
                        "父子组件传参",
                        "定制样式",
                    ]
                }
            ]
        },
    }
}