小景哥哥博客

VuePress搭建博客教程(三)、vuepress首页面设置

一、vuepress目录结构

先来连接一下vuepress的目录结构，当然可以先不管继续看下面内容。VuePress 遵循 “约定优于配置” 的原则，推荐的目录结构如下：

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

注意：请留意目录名的大写。

• docs/.vuepress: 用于存放全局的配置、组件、静态资源等。
• docs/.vuepress/components: 该目录中的 Vue 组件将会被自动注册为全局组件。
• docs/.vuepress/theme: 用于存放本地主题。
• docs/.vuepress/styles: 用于存放样式相关的文件。
• docs/.vuepress/styles/index.styl: 将会被自动应用的全局样式文件，会生成在最终的 CSS 文件结尾，具有比默认样式更高的优先级。
• docs/.vuepress/styles/palette.styl: 用于重写默认颜色常量，或者设置新的 stylus 颜色常量。
• docs/.vuepress/public: 静态资源目录。
• docs/.vuepress/templates: 存储 HTML 模板文件。
• docs/.vuepress/templates/dev.html: 用于开发环境的 HTML 模板文件。
• docs/.vuepress/templates/ssr.html: 构建时基于 Vue SSR 的 HTML 模板文件。
• docs/.vuepress/config.js: 配置文件的入口文件，也可以是 YML 或 toml。
• docs/.vuepress/enhanceApp.js: 客户端应用的增强。

二、README.md配置

其实README.md就是首页面的内容，我们把它设置成如下内容：

---
home: true
heroImage: /logo.png
heroText: Welcome to hep.
tagline: Born to win.
actionText: 开始探索之旅 →
actionLink: /zh/guide/
features:
- title: 关于我
  details: 小景哥哥是一个爱好英语的程序员，有点小文艺，有点小年轻，希望和大家称为好朋友。
- title: 算法
  details: 一天一道算法题，准备逆天。
- title: 生活点点滴滴
  details: 记录生活中美好的时刻，把生命中的点点滴滴都堆积成无法比拟的幸福。
footer: Hep Licensed | Copyright © 2021-present JasonJing
---

三、在docs目录下创建.vuepress文件夹

.vuepress文件夹用于存放全局的配置、组件、静态资源等，我们在它下面创建config.js文件，config文件内容如下：

module.exports = {
    title: '小景哥哥',
    description: '小景哥哥带你上王者',
    dest: './dist',
    port: '80',
    head: [
        ['link', {rel: 'icon', href: '/logo.jpg'}]
    ],
    markdown: {
        lineNumbers: true
    },
    themeConfig: {
        nav: [{
            text: '关于我', link: '/aboutme/'
        }],
        sidebar: {'/guide/':[
            {
                  title:'新手指南',
                  collapsable: true,
                  children:[
                    '/guide/notes/one',
                  ]
                },
                {
                  title:'小景哥哥',
                  collapsable: true,
                  children:[
                    '/guide/notes/two',
                  ]
                }
            ]
        },
        sidebarDepth: 2,
        lastUpdated: 'Last Updated',
        searchMaxSuggestoins: 10,
        serviceWorker: {
            updatePopup: {
                message: "有新的内容.",
                buttonText: '更新'
            }
        },
        editLinks: true,
        editLinkText: '在 GitHub 上编辑此页 ！'
    }
}

四、重新启动项目，查看效果

在vuepress-blog目录下，使用命令npm run docs:dev启动，效果如图所示：

当然首页的图标还没显示出来，我们后续会调整好。