diff --git a/docs/.island/config.ts b/docs/.island/config.ts index ab4202f1..5dd6e0e0 100644 --- a/docs/.island/config.ts +++ b/docs/.island/config.ts @@ -27,8 +27,6 @@ export default defineConfig({ '/zh/': { lang: 'zh', label: '简体中文', - selectText: '语言', - ariaLabel: '语言', lastUpdatedText: '上次更新', nav: getNavbar('zh'), sidebar: getSidebar('zh'), @@ -46,13 +44,17 @@ export default defineConfig({ '/en/': { lang: 'en', label: 'English', - selectText: 'Languages', - ariaLabel: 'Languages', lastUpdated: 'Last Updated', nav: getNavbar('en'), sidebar: getSidebar('en'), title: 'Island.js', - description: 'SSG Framework based on island architecture' + description: 'SSG Framework based on island architecture', + lastUpdatedText: 'Last Updated', + editLink: { + pattern: + 'https://github.com/sanyuan0704/island.js/tree/master/docs/:path', + text: '📝 Edit this page on GitHub' + } } }, outlineTitle: 'ON THIS PAGE', @@ -62,12 +64,6 @@ export default defineConfig({ link: 'https://github.com/sanyuan0704/island' } ], - lastUpdatedText: 'Last Updated', - editLink: { - pattern: - 'https://github.com/sanyuan0704/island.js/tree/master/docs/:path', - text: '📝 Edit this page on GitHub' - }, footer: { message: 'Released under the MIT License.', @@ -108,7 +104,7 @@ function getSidebar(lang: 'zh' | 'en') { ] }, { - text: getText('核心功能', 'Features'), + text: getText('基础功能', 'Features'), items: [ { text: getText('约定式路由', 'Conventional Routing'), @@ -135,6 +131,35 @@ function getSidebar(lang: 'zh' | 'en') { link: getLink('/guide/extension') } ] + }, + { + text: getText('默认主题功能', 'Default Theme'), + items: [ + { + text: getText('导航栏模块', 'Nav Bar'), + link: getLink('/guide/navbar') + }, + { + text: getText('Home 页面', 'Home Page'), + link: getLink('/guide/home-page') + }, + { + text: getText('API 页面', 'API Page'), + link: getLink('/guide/api-page') + }, + { + text: getText('正文页面', 'Doc Page'), + link: getLink('/guide/doc-page') + }, + { + text: getText('国际化', 'I18n'), + link: getLink('/guide/i18n') + }, + { + text: getText('全文搜索', 'Search'), + link: getLink('/guide/search') + } + ] } ], [getLink('/api/')]: [ diff --git a/docs/en/api/config-theme.md b/docs/en/api/config-theme.md index 9bf0d0b9..30cb5353 100644 --- a/docs/en/api/config-theme.md +++ b/docs/en/api/config-theme.md @@ -58,7 +58,7 @@ The sidebar of the site.The config is a object, which ```ts // The key is the path of the sidebar group -// The value is the sidebar group +// The value is sidebar group array type Sidebar = Record; interface SidebarGroup { diff --git a/docs/en/guide/api-page.md b/docs/en/guide/api-page.md new file mode 100644 index 00000000..0d333a16 --- /dev/null +++ b/docs/en/guide/api-page.md @@ -0,0 +1 @@ +# API Page diff --git a/docs/en/guide/doc-page.md b/docs/en/guide/doc-page.md new file mode 100644 index 00000000..e52e5c6e --- /dev/null +++ b/docs/en/guide/doc-page.md @@ -0,0 +1 @@ +# Doc Page diff --git a/docs/en/guide/home-page.md b/docs/en/guide/home-page.md new file mode 100644 index 00000000..7de91efc --- /dev/null +++ b/docs/en/guide/home-page.md @@ -0,0 +1 @@ +# Home Page diff --git a/docs/en/guide/i18n.md b/docs/en/guide/i18n.md new file mode 100644 index 00000000..05b5b619 --- /dev/null +++ b/docs/en/guide/i18n.md @@ -0,0 +1 @@ +# I18n diff --git a/docs/en/guide/navbar.md b/docs/en/guide/navbar.md new file mode 100644 index 00000000..fcd034e8 --- /dev/null +++ b/docs/en/guide/navbar.md @@ -0,0 +1,77 @@ +# NavBar + +The nav bar is very important for a website. It allows users to quickly jump between different pages of the website, and also allows users to quickly find some important information on the website. + +Island.js default theme has built-in navbar module, you can configure it in `themeConfig.navbar`. + +The nav bar is configured as an array, each item in the array is a `NavItem` object, which has the following types: + +```ts +export type NavItem = NavItemWithLink | NavItemWithChildren; +``` + +That is, each navbar element ( `NavItem` ) can be either a link ( `NavItemWithLink` ) or a navbar group with child elements ( `NavItemWithChildren` ). + +## NavItemWithLink + +```ts +export interface NavItemWithLink { + text: string; + link: string; + activeMatch?: string; +} +``` + +The meaning of each attribute is as follows: + +- `text` - nav item text +- `link` - nav item link +- `activeMatch` - activation rules for navbar links + +`activeMatch` is used to match the current route. When the route matches the `activeMatch` rule, the nav item will be highlighted. + +> By default, `activeMatch` is the NavItem's `link` property. + +## NavItemWithChildren + +```ts +export interface NavItemWithChildren { + text: string; + children: NavItem[]; +} +``` + +The meaning of each attribute is as follows: + +- `text` - navbar item text +- `children` - child nav items + +## Example + +```js +import { defineConfig } from 'islandjs'; + +export default defineConfig({ + themeConfig: { + navbar: [ + { + text: 'Home', + link: '/', + activeMatch: '^/$|^/' + }, + { + text: 'More Pages', + children: [ + { + text: 'Github', + link: 'http://github.com/sanyuan0704/island.js', + }, + { + text: 'Twitter', + link: 'http://twitter.com/sanyuan0704', + }, + } + ] + } +}); +``` diff --git a/docs/en/guide/search.md b/docs/en/guide/search.md new file mode 100644 index 00000000..da070d7f --- /dev/null +++ b/docs/en/guide/search.md @@ -0,0 +1 @@ +# Search diff --git a/docs/zh/api/config-theme.md b/docs/zh/api/config-theme.md index 8b35286d..e6ab39ec 100644 --- a/docs/zh/api/config-theme.md +++ b/docs/zh/api/config-theme.md @@ -58,7 +58,7 @@ export default defineConfig({ ```ts // key 为 SidebarGroup 的路径 -// value 为 SidebarGroup +// value 为 SidebarGroup 的数组 type Sidebar = Record; interface SidebarGroup { diff --git a/docs/zh/guide/api-page.md b/docs/zh/guide/api-page.md new file mode 100644 index 00000000..2c98d21e --- /dev/null +++ b/docs/zh/guide/api-page.md @@ -0,0 +1 @@ +# API 页面 diff --git a/docs/zh/guide/doc-page.md b/docs/zh/guide/doc-page.md new file mode 100644 index 00000000..7e349782 --- /dev/null +++ b/docs/zh/guide/doc-page.md @@ -0,0 +1 @@ +# 正文页面 diff --git a/docs/zh/guide/home-page.md b/docs/zh/guide/home-page.md new file mode 100644 index 00000000..6bd7c778 --- /dev/null +++ b/docs/zh/guide/home-page.md @@ -0,0 +1 @@ +# Home 页面 diff --git a/docs/zh/guide/i18n.md b/docs/zh/guide/i18n.md new file mode 100644 index 00000000..d111827c --- /dev/null +++ b/docs/zh/guide/i18n.md @@ -0,0 +1,3 @@ +# 国际化 + +Island diff --git a/docs/zh/guide/navbar.md b/docs/zh/guide/navbar.md new file mode 100644 index 00000000..cb9725fa --- /dev/null +++ b/docs/zh/guide/navbar.md @@ -0,0 +1,77 @@ +# 导航栏模块 + +导航栏对一个网站来说非常重要，它可以让用户快速的在网站的不同页面之间进行跳转，也可以让用户快速的找到网站的一些重要信息。 + +Island.js 默认主题内置了导航栏模块，你可以在 `themeConfig.navbar` 中进行配置。 + +导航栏配置为一个数组，数组中的每一项都是一个 `NavItem` 对象，它具有以下类型： + +```ts +export type NavItem = NavItemWithLink | NavItemWithChildren; +``` + +也就是说，每个导航栏元素( `NavItem` )可以是一个链接( `NavItemWithLink` )，也可以是一个包含子元素的导航栏组( `NavItemWithChildren` )。 + +## NavItemWithLink + +```ts +export interface NavItemWithLink { + text: string; + link: string; + activeMatch?: string; +} +``` + +其中各项属性的含义如下: + +- `text` - 导航栏文本 +- `link` - 导航栏链接 +- `activeMatch` - 导航栏链接的激活规则 + +`activeMatch` 用于匹配当前路由，当路由匹配 `activeMatch` 规则时，nav 项会高亮显示。 + +> 默认情况下，`activeMatch` 是 NavItem 的 `link` 属性。 + +## NavItemWithChildren + +```ts +export interface NavItemWithChildren { + text: string; + children: NavItem[]; +} +``` + +其中各项属性的含义如下: + +- `text` - 导航栏文本 +- `children` - 子导航栏元素 + +## 示例 + +```js +import { defineConfig } from 'islandjs'; + +export default defineConfig({ + themeConfig: { + navbar: [ + { + text: 'Home', + link: '/', + activeMatch: '^/$|^/' + }, + { + text: '更多链接', + children: [ + { + text: 'Github', + link: 'http://github.com/sanyuan0704/island.js', + }, + { + text: 'Twitter', + link: 'http://twitter.com/sanyuan0704', + }, + } + ] + } +}); +``` diff --git a/docs/zh/guide/search.md b/docs/zh/guide/search.md new file mode 100644 index 00000000..294ac796 --- /dev/null +++ b/docs/zh/guide/search.md @@ -0,0 +1 @@ +# 搜索 diff --git a/src/shared/types/default-theme.ts b/src/shared/types/default-theme.ts index a74d97b1..cf33eb39 100644 --- a/src/shared/types/default-theme.ts +++ b/src/shared/types/default-theme.ts @@ -128,12 +128,6 @@ export namespace DefaultTheme { export interface NavItemWithChildren { text?: string; items: NavItemWithLink[]; - - /** - * `activeMatch` is expected to be a regex string. We can't use actual - * RegExp object here because it isn't serializable - */ - activeMatch?: string; } // image ----------------------------------------------------------------------- diff --git a/src/theme-default/components/Nav/index.module.scss b/src/theme-default/components/Nav/index.module.scss index 3f2e8fbf..192f3934 100644 --- a/src/theme-default/components/Nav/index.module.scss +++ b/src/theme-default/components/Nav/index.module.scss @@ -25,7 +25,7 @@ } @media (min-width: 960px) { - .has-sidebar .content { + .content { margin-right: -32px; padding-right: 32px; -webkit-backdrop-filter: saturate(50%) blur(8px);