以下来自官网
默认主题提供了一个主页布局（用于该网站的主页）。要使用它，需要在你的根目录 README.md 的 YAML front matter 中指定 home：true，并加上一些其他的元数据。这是本网站使用的实际数据：
---
home: true
heroImage: /hero.png
actionText: 起步 →
actionLink: /guide/
features:
- title: 简明优先
details: 对以 markdown 为中心的项目结构，做最简化的配置，帮助你专注于创作。
- title: Vue 驱动
details: 享用 Vue + webpack 开发环境，在 markdown 中使用 Vue 组件，并通过 Vue 开发自定义主题。
- title: 性能高效
details: VuePress 将每个页面生成为预渲染的静态 HTML，每个页面加载之后，然后作为单页面应用程序(SPA)运行。
footer: MIT Licensed | Copyright © 2018-present Evan You
---
YAML front matter 的内容之后的其他任意内容，将被解析为正常 markdown，并在 features 部分之后渲染。
如果你想彻底自定义主页的布局，你还可以使用自定义布局
vuepress提供了一个默认主题，有默认布局，所以我们在主页的front matter那里对应的字段添加内容，就能渲染这个.md，但是有的时候我们不喜欢这个默认的主题，想要自定义一个主题，自己给套UI，这个也是可以的。我现在公司用的hugo就是这样，只用技术，外表一点都看不出和hugo有半毛钱关系。。
下面开始：
开始之前看一下这里：
来自官网
So，这里我们想自定义一下主页，那么在.vuepress/components/下新建一个HomeLayout.vue，同时根目录下的.md文件要加上下面的代码：
---
layout: HomeLayout
---
引入SASS
这个找了我好久。。。最后在文档中找到了。
来自官网
对于Stylus
引入组件
vue的特点就是组件组件，这里怎么能不引入一发组件呢？
.vuepress/components 中的所有 *.vue 文件都会自动注册为 全局(global)异步(async) 组件。例如:
.
└─ .vuepress
└─ components
├─ demo-1.vue
├─ OtherComponent.vue
└─ Foo
└─ Bar.vue
在所有 markdown 文件中，你都可以直接使用这些组件（其名称(name)是从文件名推断出的）：
<demo-1/>
<OtherComponent/>
<Foo-Bar/>
引入公共文件
来自官网的原话
大意就是，创建一个
.vuepress/enhanceApp.js，vuepress会自己将这个文件导入，然后在这个文件，引入公共的文件。比如说：
// .vuepress/enhanceApp.js
import './public/scss/common.scss';
然后在common.scss里放入公共的scss文件，比如说：
我的common.scss
这里特别说明一下:
- normalize-scss 是因为我引入了这个模块。要配合下面的@include一起使用，不然会报错。
- 第二个是我定义的一些变量，例如主题色、标题色等等
-
第三个是我的一些布局，因为首页我打算自定义，然后要做一些响应式布局，所以就把布局抽出来。
已经在浏览器中加载了
【PS：关于定义的变量_variable.scss，就算在这里全局引用，但是在组件内使用还是会报错，是因为解析的先后原因。所以有些地方如果要用到自己定义的变量，还是要在组件内再引入一下，至少我尝试的是这样的，如果有误欢迎指正】
组件内引入
网友评论