• Welcome to Journal web site.

我是 PHP 程序员

- 开发无止境 -

Next
Prev

VuePress 主题配置

Data: 2016-04-08 12:10:12Form: JournalClick: 9

# 主题配置

配置项数据类型默认值作用
themestringundefined当你使用自定义主题的时候,需要指定它。
themeConfigObject{}为当前的主题提供一些配置,这些选项依赖于你正在使用的主题。

# 一、首页

  • 想要使用首页,需要在你的根级 README.md 设置 home:true
  • VuePress 提供了对 YAML front matteropen in new window 开箱即用的支持
---
home: true
heroImage: /logo.jpg
heroText: 欧阳克的个人博客
tagline: 学习并分享PHP、Linux、MySQL和前端技术等WEB知识。
actionText: 梦想启航 →
actionLink: https://www.php.cn
features:
- title: 简洁至上
  details: 以 Markdown 为中心的项目结构,以最少的配置帮助你专注于写作。
- title: Vue驱动
  details: 享受 Vue + webpack 的开发体验,在 Markdown 中使用 Vue 组件,同时可以使用 Vue 来开发自定义主题。
- title: 高性能
  details: VuePress 为每个页面预渲染生成静态的 HTML,同时在页面被加载的时候,将作为 SPA 运行。
footer: MIT Licensed | Copyright © 2021 Ou Yang Ke
---

# 二、导航栏

  • 导航栏可能包含你的页面标题、搜索框、 导航栏链接、多语言切换、仓库链接,它们均取决于你的配置。
  • 通过 themeConfig.logo 增加导航栏 Logo
themeConfig: {
    logo: '/logo.png',
}

# 2、链接

  • 通过 themeConfig.nav 增加一些导航栏链接
  • 新建 frontafter 目录,包含 README.md 文件
themeConfig: {
    nav: [
        { text: '首页', link: '/' },
        { text: '前端相关', link: '/front/' },
        { text: '后端相关', link: '/after/' },
        { text: 'PHP中文网', link: 'https://www.php.cn' }
    ]
}

# 3、下拉链接

  • 增加属性:targetrel
  • 新建 vuepresshtmlcss 目录,包含 README.md 文件
themeConfig: {
    nav: [
        { text: "首页", link: "/" },
        {
            text: "前端相关",
            link: "/front/",
            items: [
                { text: "VuePress", link: "/vuepress/", target:'_blank', rel='next' },
                { text: "HTML", link: "/html/" },
                { text: "CSS", link: "/css/" }
            ]
        },
        { text: '后端相关', link: '/after/'},
        { text: 'PHP中文网', link: 'https://www.php.cn' }
    ]
}

# 4、下拉分组链接

  • 新建 phpphplibthinkphplaravelcentos 目录,包含 README.md 文件
themeConfig: {
    nav: [
        { text: "首页", link: "/" },
        {
            text: "前端相关",
            link: "/front/",
            items: [
                {
                    text: "VuePress",
                    link: "/vuepress/",
                    target: "_blank",
                    rel: "next"
                },
                { text: "HTML", link: "/html/" },
                { text: "CSS", link: "/css/" }
            ]
        },
        {
            text: "后端相关",
            items: [
                {
                    text: "理论知识",
                    items: [
                        {
                            text: "PHP",
                            link: "/php/"
                        },
                        {
                            text: "PHP插件",
                            link: "/phplib/"
                        }
                    ]
                },
                {
                    text: "框架",
                    items: [
                        {
                            text: "ThinkPHP",
                            link: "/thinkphp/"
                        },
                        {
                            text: "Laravel",
                            link: "/laravel/"
                        }
                    ]
                },
                {
                    text: "服务器",
                    items: [
                        {
                            text: "Linux Centos",
                            link: "/centos/"
                        }
                    ]
                }
            ]
        },
        { text: "PHP中文网", link: "https://www.php.cn" },
    ]
}

# 5、禁用导航栏

themeConfig: {
    navbar: false;
}

# 三、侧边栏

  • 想要使 侧边栏(Sidebar)生效,需要配置 themeConfig.sidebar

# 1、创建侧边栏

themeConfig: {
    sidebar: [
        '/',
        '/vuepress/',
        '/html/',
        '/css/',
        '/php/',
        '/phplib/',
        '/thinkphp/',
        '/laravel/',
        '/centos/'
    ]
}

# 2、侧边栏命名

themeConfig: {
    sidebar: [
        ['/','首页'],
        ['/vuepress/','VuePress'],
        ['/html/','HTML'],
        ['/css/','CSS'],
        ['/php/','PHP'],
        '/phplib/',
        '/thinkphp/',
        '/laravel/',
        '/centos/'
    ]
}

# 3、分组

sidebar: [
    ['/','首页'],
    {
        title: '前端相关',
        path: '/front/',
        children: [
            ['/vuepress/','VuePress'],
            ['/html/','HTML'],
            ['/css/','CSS']
        ]
    },
    {
        title: '后端相关',
        path: '/after/',
        children: [
            ['/php/','PHP'],
            '/phplib/',
            '/thinkphp/',
            '/laravel/',
            '/centos/'
        ]
    }
]
Name:
<提交>