1.x version self layout no use，but the 0.x normal

[leach-chen]

Bug report

Version

1.x-alpha

Steps to reproduce

What is expected?

Custom Layout for Specific Pages
By default the content of each *.md file is rendered in a

container, along with the sidebar, auto-generated edit links and prev/next links. If you wish to use a completely custom component in place of the page (while only keeping the navbar), you can again specify the component to use using YAML front matter:

---

layout: SpecialLayout

---

This will render .vuepress/components/SpecialLayout.vue for the given page.

Follow the official tutorial to use a custom layout in the md file

What is actually happening?

1.x version self layout no use，but the 0.x normal

Other relevant information

• Your OS: windows
• Node.js version: v10.15.1
• Browser version: chrome72
• Is this a global or local install? local install
• Which package manager did you use for the install?yarn

[shigma]

你的 SpecialLayout.vue 文件应该放入 .vuepress/theme/layouts 目录。

[leach-chen]

我找到原因了，跟1.x版本对比，是1.x版本移除了该功能

[ulivz]

是个 issue，要优化

[shigma]

@leach-chen @ulivz 我这里 SpecialLayout.vue 貌似用的好好的啊（躺

[ulivz]

另外，请把这个 issue 翻译成英文，谢谢。

[destinytaoer]

In 0.x ，the default layout is undefined，but in 1.x，it changed to 'Layout'。if you haven't defined layout，it will be 'Layout'。we can change the Layout.vue like 0.x

<div
      class="custom-layout"
      v-if="$page.frontmatter.layout !== 'Layout'"
    >
    <component :is="$page.frontmatter.layout"></component>
</div>

但是，每次路由被改变，layout 都会被重新赋值，即使是默认值，如果把 $page.frontmatter.layout 弄成计算属性，会造成堆栈溢出

[destinytaoer]

如果像 @shigma 一样，放置在 layouts 目录，那么会替换掉整个页面，而不只是内容区域。

[destinytaoer]

查看源码的逻辑是，如果定义的 layout 存在，那么就使用这个 [layout].vue 作为整个页面的布局。如果不存在，那么仍然会使用默认的 Layout.vue。

那么仍然可以像我前面所用的使用 $page.frontmatter.layout 在 Layout.vue 中进行判断。

也可以自定义一个 frontmatter，来进行判断使用哪个组件

[leach-chen]

另外，请把这个 issue 翻译成英文，谢谢。

已修改

[leach-chen]

查看源码的逻辑是，如果定义的 layout 存在，那么就使用这个 [layout].vue 作为整个页面的布局。如果不存在，那么仍然会使用默认的 Layout.vue。

那么仍然可以像我前面所用的使用 $page.frontmatter.layout 在 Layout.vue 中进行判断。

也可以自定义一个 frontmatter，来进行判断使用哪个组件

不用

查看源码的逻辑是，如果定义的 layout 存在，那么就使用这个 [layout].vue 作为整个页面的布局。如果不存在，那么仍然会使用默认的 Layout.vue。

那么仍然可以像我前面所用的使用 $page.frontmatter.layout 在 Layout.vue 中进行判断。

也可以自定义一个 frontmatter，来进行判断使用哪个组件

1.x可以在nodel_module下把主题拷出来重命名为themem放到.vuepress目录下，然后加回那段代码，官方既然说了是个issue，那就会改过来吧

[destinytaoer]

@leach-chen 使用 vuepress eject ./docs 可以直接抛出主题文件。希望官方可以快一些呗，整个页面和局部的都应该支持。刚刚尝试了一下，其他插件也会有依赖到这个自定义组件，比如标签页等，确实很难修改。还有很多待优化的，期待 VuePress 1.x 的正式发布。

[xxholly32]

现在只能用<special-layout/>写法写

[ulivz]

Fixed at 0306574 and available at 1.0.0-alpha.43.

BTW, using components under components (i.e., global components) as layouts is really convenient, but in 1.x we still suggest you to place layout components at layout directory, which has better-defined duties.

[xxholly32]

1.0.0-alpha.43 👍

it seems use YAML front matter and user <special-layout/> is different; Using YAML front matter , the navbar is disappear;

@ulivz

[ulivz]

@xxholly32

In 0.x, the layout system was implemented by the default theme, which would cause problems in global content replacement, and other themes could not enjoy the feature of custom layout.

In 1.x, the layout system was implemented by the core, so if you use a custom layout, all the page's content will be replaced.

If you want to set global header, footer or sidebar, you should custom your globalLayout.

---

BTW, you can create a feature request for default theme to open a new option of YAML front matter to support content-only layout.

[xxholly32]

@ulivz ok