Кастомизация макетов

В этом руководстве вы узнаете, как настроить макет темы.

Настройка параметров темы

Тема предоставляет множество параметров, связанных с макетом, чтобы вы могли настроить макет темы. Подробнее об этих параметрах смотрите в разделе Конфигурация темы → Макет.

Изменение переменных SCSS

Контрольные точки темы

Тема будет автоматически применять адаптивные макеты под разную ширину экрана. Если вам нужно изменить эти контрольные точки, вы можете изменить их в файле конфигурации.

// .vuepress/styles/config.scss

// Modify the breakpoint of the desktop layout
$pc = 1280px;

Для получения подробной информации о файле конфигурации .vuepress/styles/config.scss и переменных точки останова $pc, $laptop, $pad, $tablet, $mobile, смотрите Конфигурация темы → Стили.

Размер макета темы

Тема предоставляет общие переменные размера в файле палитры, и вы можете изменить эти переменные в файле палитры, чтобы достичь цели изменения размера макета.

// .vuepress/styles/palette.scss

// Modify the height of the navigation bar
$navbar-height = 80px;

Файл палитры .vuepress/styles/palette.scss и введение переменных макета можно найти в Конфигурация темы → Стили.

Изменить другие макеты

Если вы хотите изменить макет темы, но тема не предоставляет соответствующих параметров, вы можете рассмотреть следующие способы:

Через CSS

• Если вас не устраивает стиль темы, вы можете настроить стиль компонентов темы через файл стилей.

  Заметка

  Чтобы переопределить исходный стиль, вам нужно использовать тот же или более высокий селектор приоритета или использовать !important напрямую.

• Если вы хотите удалить некоторые функции, вы можете скрыть связанные элементы dom с помощью display: none в файле стиля.

Заметка

Файл стиля .vuepress/styles/index.scss находится в каталоге проекта, подробности смотрите в Конфигурация темы → Стили

Переопределение компонентов

Все компоненты темы регистрируются и вызываются через псевдонимы, что означает, что вы можете заменить любой компонент темы своими собственными компонентами, переопределив псевдонимы компонентов.

Если вы просто хотите добавить новый контент в определенное место на странице, вы можете заменить компонент и сослаться на исходный компонент через слот исходного компонента.

Смотрите Дополнительно → Замена компонентов темы для псевдонимов компонентов, слотов компонентов и методов замены.