SABER--05 Layouts

Layouts

Layouts是围绕着你页面的Vue组件。 它们允许您将模板的源代码放在一个地方，这样您就不必在每个页面上重复（设置）导航和页脚之类的内容。
你可以为一个特制的页面使用 layout 属性调整一个layout组件。
Saber从你项目中根目录的 ./layouts 路径下加载 *.{vue, js} 文件和主题文件夹作为layout组件。如果所需的layout组件不存在，将返回 default layout 组件到你的layouts文件夹中。
布局组件有一个名为 page 的支持，它实现了页面接口，并允许您访问页面数据。
页面内容将作为布局组件中的默认插槽可用，例如：
一个页面 pages/about.md ：

---
title: Hello World
layout: page
---

Saber is fantastic!

与其layout组件 layouts/page.vue：

<template>
  <div>
    <h2 class="page-title">{{ page.title }}</h2>
    <div class="page-content"><slot name="default" /></div>
  </div>
</template>

<script>
export default {
  props: ['page']
}
</script>

此页面将被转换为以下HTML格式：

<div>
  <h2 class="page-title">Hello World</h2>
  <div class="page-content">
    <p>Saber is fantastic!</p>
  </div>
</div>

404 page

你可以使用 404 layout布局去自定义404页面。
在生产场景中，Saber也将生成 /404.html 。它将被GitHub页面和netflix等托管平台自动用作404错误页面。