【VuePress03】来个自定义主题

以下来自官网

默认主题提供了一个主页布局（用于该网站的主页）。要使用它，需要在你的根目录 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)是从文件名推断出的）：

---

引入公共文件

来自官网的原话

大意就是，创建一个 .vuepress/enhanceApp.js，vuepress会自己将这个文件导入，然后在这个文件，引入公共的文件。比如说：

// .vuepress/enhanceApp.js
import './public/scss/common.scss';

然后在common.scss里放入公共的scss文件，比如说：

我的common.scss

这里特别说明一下:

• normalize-scss 是因为我引入了这个模块。要配合下面的@include一起使用，不然会报错。
• 第二个是我定义的一些变量，例如主题色、标题色等等

• 第三个是我的一些布局，因为首页我打算自定义，然后要做一些响应式布局，所以就把布局抽出来。

  
  
  

  已经在浏览器中加载了

【PS：关于定义的变量_variable.scss，就算在这里全局引用，但是在组件内使用还是会报错，是因为解析的先后原因。所以有些地方如果要用到自己定义的变量，还是要在组件内再引入一下，至少我尝试的是这样的，如果有误欢迎指正】

组件内引入