Панель навигации
Панель навигации может содержать название вашего сайта, окно поиска, ссылки панели навигации, I18n, Ссылка на репозиторий и Outlook Popup. Все они зависят от вашей конфигурации.
Ссылки на панели навигации
Вы можете добавить ссылки на панель навигации с помощью параметров navbar
, она принимает массив.
Строковый формат
Самый простой способ настроить навигационную панель — заполнить пути файлов страниц, которые будут отображаться по очереди, чтобы текст, иконки и ссылки элемента автоматически генерировались из соответствующих файлов.
// .vuepress/config.ts
import { defineUserConfig } from "vuepress";
import { hopeTheme } from "vuepress-theme-hope";
export default defineUserConfig({
theme: hopeTheme({
navbar: ["/guide/README.md", "/config/README.md", "/faq.md"],
}),
});
// .vuepress/config.js
import { hopeTheme } from "vuepress-theme-hope";
export default {
theme: hopeTheme({
navbar: ["/guide/README.md", "/config/README.md", "/faq.md"],
}),
};
Совет
Вы можете опустить расширение .md
а пути, оканчивающиеся на /
, подразумеваются как /README.md
.
Формат объекта
Если вас не устраивает значок страницы или вы считаете, что заголовок страницы слишком длинный, вы можете вместо этого настроить объект. Доступные элементы конфигурации:
text:
: элемент тестаlink
: элемент ссылкаicon
: элемент иконка (опционально)activeMatch
: элемент активного совпадения(опционально), поддержка строк регулярных выражений
// .vuepress/config.ts
import { defineUserConfig } from "vuepress";
import { hopeTheme } from "vuepress-theme-hope";
export default defineUserConfig({
theme: hopeTheme({
navbar: [
{
text: "Guide",
link: "/guide/README.md",
icon: "creative",
// only active in `/guide/`
activeMatch: "^/guide/$",
},
{ text: "Config", link: "/config/README.md", icon: "config" },
{
text: "FAQ",
link: "/faq.md",
icon: "question",
// active in path starting with `/faq`
// so it will active in path like `/faq/xxx.html`
activeMatch: "^/zh/faq/",
},
],
}),
});
// .vuepress/config.js
import { hopeTheme } from "vuepress-theme-hope";
export default {
theme: hopeTheme({
navbar: [
{
text: "Guide",
link: "/guide/README.md",
icon: "creative",
// only active in `/guide/`
activeMatch: "^/guide/$",
},
{ text: "Config", link: "/config/README.md", icon: "config" },
{
text: "FAQ",
link: "/faq.md",
icon: "question",
// active in path starting with `/faq`
// so it will active in path like `/faq/xxx.html`
activeMatch: "^/zh/faq/",
},
],
}),
};
Расширенное использование activeMatch
activeMatch
дает вам возможность контролировать, активен ли путь, например, у вас может быть следующее раскрывающееся меню:
/path/
/path/a/
/path/b/
Но у вас может быть несколько папок с файлами в папке /path/
. Чтобы избежать активации нескольких выпадающих элементов в маршруте, начинающемся с /path/a/
или /path/b/
, вы можете установить опцию activeMatch
для первого элемента с ^/path/(?:(?!a/|b/).*)?$
.
Выпадающий список
Чтобы отобразить больше ссылок, вы можете сгруппировать похожие ссылки в раскрывающийся список.
Вам нужно использовать формат объекта и предоставить дополнительную опцию children
для вложения ссылок:
// .vuepress/config.ts
import { defineUserConfig } from "vuepress";
import { hopeTheme } from "vuepress-theme-hope";
export default defineUserConfig({
theme: hopeTheme({
navbar: [
{
text: "Basic",
icon: "info",
children: ["/basic/markdown.md", "/basic/vuepress.md"],
},
],
}),
});
// .vuepress/config.js
import { hopeTheme } from "vuepress-theme-hope";
export default {
theme: hopeTheme({
navbar: [
{
text: "Basic",
icon: "info",
children: ["/basic/markdown.md", "/basic/vuepress.md"],
},
],
}),
};
В большинстве случаев сгруппированные элементы на панели навигации относятся к одной категории и будут помещены в один и тот же подкаталог, а также имеют одинаковый префикс пути.
Чтобы упростить настройку, вы можете добавить поле prefix
, чтобы добавить префикс к каждой подссылке в группе:
// .vuepress/config.ts
import { defineUserConfig } from "vuepress";
import { hopeTheme } from "vuepress-theme-hope";
export default defineUserConfig({
theme: hopeTheme({
navbar: [
{
text: "Basic",
icon: "info",
prefix: "/basic/",
children: ["markdown.md", "vuepress.md"],
},
],
}),
});
// .vuepress/config.js
import { hopeTheme } from "vuepress-theme-hope";
export default {
theme: hopeTheme({
navbar: [
{
text: "Basic",
icon: "info",
prefix: "/basic/",
children: ["markdown.md", "vuepress.md"],
},
],
}),
};
Вы также можете иметь подгруппы внутри выпадающего списка, вложив children
:
// .vuepress/config.ts
import { defineUserConfig } from "vuepress";
import { hopeTheme } from "vuepress-theme-hope";
export default defineUserConfig({
theme: hopeTheme({
navbar: [
{
text: "Project",
icon: "info",
children: [
{
text: "Built in Plugins",
icon: "plugin",
children: [
/* Some items */
],
},
{
text: "Third party Plugins",
icon: "plugin",
children: [
/* Some items */
],
},
],
},
],
}),
});
// .vuepress/config.js
import { hopeTheme } from "vuepress-theme-hope";
export default {
theme: hopeTheme({
navbar: [
{
text: "Project",
icon: "info",
children: [
{
text: "Built in Plugins",
icon: "plugin",
children: [
/* Some items */
],
},
{
text: "Third party Plugins",
icon: "plugin",
children: [
/* Some items */
],
},
],
},
],
}),
};
Отключить панель навигации
Чтобы отключить панель навигации глобально, установите navbar: false
в параметрах темы:
// .vuepress/config.ts
import { defineUserConfig } from "vuepress";
import { hopeTheme } from "vuepress-theme-hope";
export default defineUserConfig({
theme: hopeTheme({
navbar: false,
}),
});
// .vuepress/config.js
import { hopeTheme } from "vuepress-theme-hope";
export default {
theme: hopeTheme({
navbar: false,
}),
};
Вы можете отключить панель навигации для определенной страницы с помощью YAML front matter
:
---
navbar: false
---
Логотип сайта
Вы можете использовать опции logo
, чтобы установить логотип сайта, отображаемый на панели навигации.
Логотип отображается на панели навигации вместо предыдущего названия сайта на мобильном устройстве.
Заметка
Укажите абсолютный путь и поместите логотип в папку .vuepress/public
.
// .vuepress/config.ts
import { defineUserConfig } from "vuepress";
import { hopeTheme } from "vuepress-theme-hope";
export default defineUserConfig({
theme: hopeTheme({
logo: "/logo.png",
}),
});
// .vuepress/config.js
import { hopeTheme } from "vuepress-theme-hope";
export default {
theme: hopeTheme({
logo: "/logo.png",
}),
};
Совет
Вы можете установить logoDark
для отображения другого логотипа в темном режиме.
Поддержка I18n
Навигационная панель темы поддерживает I18n, поэтому вы можете установить упомянутые выше параметры навигационной панели индивидуально для каждого языка:
// .vuepress/config.ts
import { defineUserConfig } from "vuepress";
import { hopeTheme } from "vuepress-theme-hope";
export default defineUserConfig({
theme: hopeTheme({
locales: {
"/": {
logo: "/logo.svg",
navbar: [
/* English config under root */
],
},
"/zh/": {
logo: "/zh-logo.svg",
navbar: [
/* Chinese config under zh folder */
],
},
},
}),
});
// .vuepress/config.js
import { hopeTheme } from "vuepress-theme-hope";
export default {
theme: hopeTheme({
locales: {
"/": {
logo: "/logo.svg",
navbar: [
/* English config under root */
],
},
"/zh/": {
logo: "/zh-logo.svg",
navbar: [
/* Chinese config under zh folder */
],
},
},
}),
};
Окно поиска
Как и тема по умолчанию, vuepress-theme-hope
имеет встроенную поддержку поисковых плагинов. Вы можете включить следующие плагины в соответствии с вашими потребностями. Соответствующее окно поиска автоматически появится на панели навигации.
Подробнее смотрите Функция → Поиск.
Репозиторий Git и ссылки для редактирования
Кнопка репозитория появится на панели навигации, если вы установите repo
в настройках темы.
Вы можете управлять отображением кнопки репозитория с помощью repoDisplay
в настройках темы.
// .vuepress/config.ts
import { defineUserConfig } from "vuepress";
import { hopeTheme } from "vuepress-theme-hope";
export default defineUserConfig({
theme: hopeTheme({
// Assumes GitHub. Can also be a full GitLab url.
repo: "vuepress-theme-hope/vuepress-theme-hope",
// Customising the header label
// Defaults to "GitHub" / "GitLab" / "Gitee" / "Bitbucket" or "Source" depending on `repo`
repoLabel: "GitHub",
// Whether to display repo link, default is `true`
repoDisplay: true,
}),
});
// .vuepress/config.js
import { hopeTheme } from "vuepress-theme-hope";
export default {
theme: hopeTheme({
// Assumes GitHub. Can also be a full GitLab url.
repo: "vuepress-theme-hope/vuepress-theme-hope",
// Customising the header label
// Defaults to "GitHub" / "GitLab" / "Gitee" / "Bitbucket" or "Source" depending on `repo`
repoLabel: "GitHub",
// Whether to display repo link, default is `true`
repoDisplay: true,
}),
};
Всплывающее окно Outlook
Предусмотрены следующие три функции:
Конфигурация макета
vuepress-theme-hope
позволяет настроить макет панели навигации. Вы можете добавлять компоненты в left
, center
и right
клавиши в параметрах navbarLayout
.
Доступные компоненты:
- Бренд: Бренд сайта
- Ссылки: Ссылки на панель навигации
- Язык: Переключатель языка
- Поиск: Окно поиска
- Outlook: Всплывающее окно Outlook
- Репозиторий: Репозиторий проекта
По умолчанию мы используем следующие параметры:
// .vuepress/config.ts
import { defineUserConfig } from "vuepress";
import { hopeTheme } from "vuepress-theme-hope";
export default defineUserConfig({
theme: hopeTheme({
navbarLayout: {
left: ["Brand"],
center: ["Links"],
right: ["Language", "Repo", "Outlook", "Search"],
},
}),
});
// .vuepress/config.js
import { hopeTheme } from "vuepress-theme-hope";
export default {
theme: hopeTheme({
navbarLayout: {
left: ["Brand"],
center: ["Links"],
right: ["Language", "Repo", "Outlook", "Search"],
},
}),
};
Типы и Помощники
vuepress-theme-hope
экспортирует тип навигационной панели как NavbarConfig
и предоставляет вспомогательную функцию navbar
. Они могут обеспечивать проверку и автозаполнение конфигурации панели навигации в TS и JS.
Совет
В основном они имеют дело со сценариями, когда вы разбиваете конфигурацию VuePress на несколько частей.
// .vuepress/navbar.ts
import { navbar } from "vuepress-theme-hope";
export default navbar([
/* Your navbar configuration */
]);
// .vuepress/navbar.ts
import type { NavbarConfig } from "vuepress-theme-hope";
const navbarConfig: NavbarConfig = [
/* Your navbar configuration */
];
export default navbarConfig;
// .vuepress/navbar.js
import { navbar } from "vuepress-theme-hope";
export default navbar([
/* Your navbar configuration */
]);
Демо
Конфигурация этой документации
import { navbar } from "vuepress-theme-hope";
const linkHelper = getLinkHelper();
export const ruNavbarConfig = navbar([
"/ru/guide/",
"/ru/config/",
"/ru/faq/",
{
text: "Учебник с примерами",
icon: "guide",
prefix: "/ru/cookbook/",
children: ["tutorial/", "markdown/", "vuepress/", "advanced/"],
},
"/ru/migration/",
{
text: "Проект",
icon: "info",
prefix: "/ru/",
children: [
"changelog",
"demo",
"contribution",
{
text: "Плагины",
icon: "plugin",
children: [
{
text: "Auto catalog Plugin",
icon: "tree",
link: linkHelper("auto-catalog"),
},
{
text: "Плагин блога",
icon: "blog",
link: linkHelper("blog2"),
},
{
text: "Плагин комментариев",
icon: "comment",
link: linkHelper("comment2"),
},
{
text: "Плагин компонентов",
icon: "plugin",
link: linkHelper("components"),
},
{
text: "Плагин копирования кода",
icon: "copy",
link: linkHelper("copy-code2"),
},
{
text: "Плагин авторских прав",
icon: "copyright",
link: linkHelper("copyright"),
},
{
text: "Плагин фида",
icon: "rss",
link: linkHelper("feed2"),
},
{
text: "Плагин галереи",
icon: "pic",
link: linkHelper("lightgallery"),
},
{
text: "Плагин улучшения разметки",
icon: "markdown",
link: linkHelper("md-enhance"),
},
{
text: "Плагин свайпа фото",
icon: "pic",
link: linkHelper("photo-swipe"),
},
{
text: "Плагин PWA",
icon: "app",
link: linkHelper("pwa2"),
},
{
text: "Плагин время чтения",
icon: "read",
link: linkHelper("reading-time2"),
},
{
text: "Remove PWA Plugin",
icon: "app",
link: linkHelper("remove-pwa"),
},
{
text: "Плагин редиректа",
icon: "navigation",
link: linkHelper("redirect"),
},
{
text: "Плагин палитры Sass",
icon: "palette",
link: linkHelper("sass-palette"),
},
{
text: "Client Search Plugin",
icon: "search",
link: linkHelper("search-pro"),
},
{
text: "Плагин СЕО",
icon: "strong",
link: linkHelper("seo2"),
},
{
text: "VuePress shared",
icon: "app",
link: linkHelper("shared"),
},
{
text: "Плагин карты сайта",
icon: "sitemap",
link: linkHelper("sitemap2"),
},
],
},
],
},
]);
import { navbar } from "vuepress-theme-hope";
const linkHelper = getLinkHelper();
export const ruNavbarConfig = navbar([
"/ru/guide/",
"/ru/config/",
"/ru/faq/",
{
text: "Учебник с примерами",
icon: "guide",
prefix: "/ru/cookbook/",
children: ["tutorial/", "markdown/", "vuepress/", "advanced/"],
},
"/ru/migration/",
{
text: "Проект",
icon: "info",
prefix: "/ru/",
children: [
"changelog",
"demo",
"contribution",
{
text: "Плагины",
icon: "plugin",
children: [
{
text: "Auto catalog Plugin",
icon: "tree",
link: linkHelper("auto-catalog"),
},
{
text: "Плагин блога",
icon: "blog",
link: linkHelper("blog2"),
},
{
text: "Плагин комментариев",
icon: "comment",
link: linkHelper("comment2"),
},
{
text: "Плагин компонентов",
icon: "plugin",
link: linkHelper("components"),
},
{
text: "Плагин копирования кода",
icon: "copy",
link: linkHelper("copy-code2"),
},
{
text: "Плагин авторских прав",
icon: "copyright",
link: linkHelper("copyright"),
},
{
text: "Плагин фида",
icon: "rss",
link: linkHelper("feed2"),
},
{
text: "Плагин галереи",
icon: "pic",
link: linkHelper("lightgallery"),
},
{
text: "Плагин улучшения разметки",
icon: "markdown",
link: linkHelper("md-enhance"),
},
{
text: "Плагин свайпа фото",
icon: "pic",
link: linkHelper("photo-swipe"),
},
{
text: "Плагин PWA",
icon: "app",
link: linkHelper("pwa2"),
},
{
text: "Плагин время чтения",
icon: "read",
link: linkHelper("reading-time2"),
},
{
text: "Remove PWA Plugin",
icon: "app",
link: linkHelper("remove-pwa"),
},
{
text: "Плагин редиректа",
icon: "navigation",
link: linkHelper("redirect"),
},
{
text: "Плагин палитры Sass",
icon: "palette",
link: linkHelper("sass-palette"),
},
{
text: "Client Search Plugin",
icon: "search",
link: linkHelper("search-pro"),
},
{
text: "Плагин СЕО",
icon: "strong",
link: linkHelper("seo2"),
},
{
text: "VuePress shared",
icon: "app",
link: linkHelper("shared"),
},
{
text: "Плагин карты сайта",
icon: "sitemap",
link: linkHelper("sitemap2"),
},
],
},
],
},
]);