自定义布局

大约 2 分钟

此教程指导你如何修改主题布局。

修改主题配置

主题提供了很多布局有关的选项，供你自定义主题的布局，关于这些选项详见主题配置 → 布局。

响应式断点

主题在不同屏幕宽度下会自动响应式应用不同布局，如果你需要修改这些断点，可以在样式配置文件中修改，

// 修改桌面布局的断点
$pc = 1280px;

断点变量 $pc、$laptop、$pad、$tablet、$mobile 的具体介绍详见主题配置 → 样式。

布局尺寸

主题在调色板文件中提供了常见尺寸的变量，你可以在调色版文件中修改这些变量，以达到修改布局尺寸的目的。

// 修改导航栏高度
$navbar-height = 80px;

布局变量的介绍详见主题配置 → 样式。

通过样式文件

样式文件为项目目录下的 .vuepress/styles/index.scss，你可以通过它自行添加样式。

如果你对主题的样式不满意，你可以通过样式文件对主题组件的样式进行调节。
注
为了覆盖原有样式，你需要使用相同或更高优先级的选择器或者直接使用 !important。
如果你希望去掉一些功能，你可以在样式文件中通过 display: none 隐藏相关元素。

通过添加/覆盖布局

您可以通过客户端配置文件中的“layouts”选项添加新布局或覆盖现有布局。

import { defineClientConfig } from "vuepress/client";
import Changelog from "./layouts/Changelog.vue";
import Layout from "./layouts/Layout.vue";

export default defineClientConfig({
  // 你可以在这里添加或覆盖布局
  layouts: {
    // 例如，在这里我们将 vuepress-theme-hope 的默认布局更改为 layouts/Layout.vue
    Layout,
    // 我们还添加了一个 Changelog 布局
    Changelog,
  },
});

import { defineClientConfig } from "vuepress/client";
import Changelog from "./layouts/Changelog.vue";
import Layout from "./layouts/Layout.vue";

export default defineClientConfig({
  // 你可以在这里添加或覆盖布局
  layouts: {
    // 例如，在这里我们将 vuepress-theme-hope 的默认布局更改为 layouts/Layout.vue
    Layout,
    // 我们还添加了一个 Changelog 布局
    Changelog,
  },
});

主题提供了如下布局:

Layout
基础布局，具有以下插槽：
- default: 页面内容插槽
- top: 页面顶部插槽
- bottom: 页面底部插槽
- contentBefore: 页面内容前插槽
- contentAfter: 页面内容后插槽
- tocBefore: 页面 TOC 前插槽
- tocAfter: 页面 TOC 后插槽
NotFound
404 页面布局，具有以下插槽：
- default: 404 内容插槽
Slide: 仅当幻灯片启用时有效
BlogCategory: 仅当博客启用时有效
BlogHome: 仅当博客启用时有效
BlogTyp: 仅当博客启用时有效
Timeline: 仅当博客启用时有效

通过覆盖组件

请参见替换主题组件。