⌘K

简体中文

主题配置

主题配置位于根配置中的 themeConfig 下。例如：

import { defineConfig } from 'islandjs';

export default defineConfig({
  themeConfig: {
    // ...
  }
});

nav

Type: Array
Default: []

网站的导航栏。 nav 配置是 NavItem 的数组，具有以下类型：

interface NavItem {
  // 导航栏文本
  text: string;
  // 导航栏链接
  link: '/';
  // 导航栏链接的激活规则
  activeMatch: '^/$|^/';
}

activeMatch 用于匹配当前路由，当路由匹配 activeMatch 规则时，nav 项会高亮显示。默认情况下，activeMatch 是 nav 项的 link。

比如:

import { defineConfig } from 'islandjs';

export default defineConfig({
  themeConfig: {
    nav: [
      {
        text: 'Home',
        link: '/',
        activeMatch: '^/$|^/'
      }
    ]
  }
});

当然 nav 数组中也可以配置多级菜单，类型如下:

interface NavGroup {
  // 导航栏文本
  text: string;
  // 子菜单
  items: NavItem[];
}

例如下面的配置:

import { defineConfig } from 'islandjs';

export default defineConfig({
  themeConfig: {
    nav: [
      {
        text: 'Home',
        items: [
          {
            text: 'Menu 1',
            link: '/menu1'
          },
          {
            text: 'Menu 2',
            link: '/menu2'
          }
        ]
      }
    ]
  }
});

Type: Object

网站的侧边栏。配置为一个对象，类型如下：

// key 为 SidebarGroup 的路径
// value 为 SidebarGroup 的数组
type Sidebar = Record<string, SidebarGroup[]>;

interface SidebarGroup {
  text: string;
  items: SidebarItem[];
  // 是否可折叠
  collapsable?: boolean;
  // 是否默认折叠
  collapsed?: boolean;
}

type SidebarItem = {
  text: string;
  link: string;
};

比如:

import { defineConfig } from 'islandjs';

export default defineConfig({
  themeConfig: {
    sidebar: {
      '/guide/': [
        {
          text: 'Guide',
          items: [
            {
              text: 'Getting Started',
              link: '/guide/getting-started'
            }
          ]
        }
      ]
    }
  }
});

editLink

Type: Object | undefined
Default: undefined

站点的编辑链接。如果未定义，编辑链接功能将被禁用。

editLink 配置是 EditLink 的一个对象，它具有以下类型：

export interface EditLink {
  pattern: string;
  text?: string;
}

比如：

import { defineConfig } from 'islandjs';

export default defineConfig({
  themeConfig: {
    editLink: {
      pattern:
        'https://github.com/sanyuan0704/island.js/tree/master/docs/:path',
      text: '📝 Edit this page on GitHub'
    }
  }
});

:path 将被当前页面路径替换。

lastUpdatedText

Type: string
Default: "Last Updated"

上次更新时间的文本。比如：

import { defineConfig } from 'islandjs';

export default defineConfig({
  themeConfig: {
    lastUpdatedText: 'Last Updated'
  }
});

Type: Object
Default: {}

主页的页脚。

footer 配置是 Footer 的一个对象，它具有以下类型：

export interface Footer {
  message?: string;
  copyright?: string;
}

比如：

import { defineConfig } from 'islandjs';

export default defineConfig({
  themeConfig: {
    footer: {
      message: 'Powered by Island.js',
      copyright: `© ${new Date().getFullYear()} Island.js`
    }
  }
});

socialLinks

Type: Array
Default: []

网站的社交链接。

socialLinks 配置是 SocialLink 的数组，具有以下类型：

export interface SocialLink {
  icon: SocialLinkIcon;
  link: string;
}

比如：

import { defineConfig } from 'islandjs';

export default defineConfig({
  themeConfig: {
    socialLinks: [
      {
        icon: 'github',
        link: 'https://github.com/sanyuan0704/island'
      }
    ]
  }
});

在当前版本中，icon 只支持 github

outlineTitle

Type: string
Default: 'ON THIS PAGE'

在右侧边栏中配置大纲的标题。

比如:

import { defineConfig } from 'islandjs';

export default defineConfig({
  themeConfig: {
    outlineTitle: 'ON THIS PAGE'
  }
});

prevPageText

Type: string
Default: Previous Page

上一页的文本。比如:

import { defineConfig } from 'islandjs';

export default defineConfig({
  themeConfig: {
    prevPageText: 'Previous Page'
  }
});

nextPageText

Type: string
Default: Next Page

下一页的文本。比如:

import { defineConfig } from 'islandjs';

export default defineConfig({
  themeConfig: {
    nextPageText: 'Next Page'
  }
});

locales

Type: Object
Default: undefined

国际化配置。此配置为一个对象，key 为对应语言的路由前缀(如/en)，value 为LocaleConfig，类型如下:

export interface LocaleConfig {
  // 语言名称
  lang?: string;
  // HTML 标题，优先于 `themeConfig.title`
  title?: string;
  // HTML 描述，优先于 `themeConfig.description`
  description?: string;
  // 对应语言的显示文本
  label: string;
  // 导航栏配置
  nav?: NavItem[];
  // 侧边栏配置
  sidebar?: Sidebar;
  // 右侧大纲标题
  outlineTitle?: string;
  // 展示上次更新时间的文本
  lastUpdatedText?: string;
  // 编辑链接
  editLink?: EditLink;
  // 上一页文本
  prevPageText?: string;
  // 下一页文本
  nextPageText?: string;
}

因此你能看到，LocaleConfig 中包含许多与 ThemeConfig 中相同的配置项，包括:

但是 LocaleConfig 的优先级更高。所以它会覆盖 themeConfig 中的相应字段。

search

Type: boolean
Default: true

是否开启全文搜索功能。默认情况下开启，你也通过如下的配置禁用:

import { defineConfig } from 'islandjs';

export default defineConfig({
  themeConfig: {
    search: false
  }
});

backTop

Type: object | boolean
Default: true

是否开启返回顶部功能。默认情况下开启，你也通过如下的配置禁用:

import { defineConfig } from 'islandjs';

export default defineConfig({
  themeConfig: {
    backTop: false
  }
});

可以通过传入一个对象来进行更个性化的功能定制，比如：

import { defineConfig } from 'islandjs';

export default defineConfig({
  themeConfig: {
    visibleHeight: 200, // number类型，控制功能按钮显示的下划距离
    duration: 500, // number类型, 控制返回顶部的时间
    animation: 'quadIn' // string类型，控制返回顶部的动画
  }
});

其中，动画有如下几个选项：

type BackTopAnimation =
  | 'linear'
  | 'quadIn'
  | 'quadOut'
  | 'quadInOut'
  | 'cubicIn'
  | 'cubicOut'
  | 'cubicInOut'
  | 'quartIn'
  | 'quartOut'
  | 'quartInOut'
  | 'quintIn'
  | 'quintOut'
  | 'quintInOut'
  | 'sineIn'
  | 'sineOut'
  | 'sineInOut'
  | 'bounceIn'
  | 'bounceOut'
  | 'bounceInOut';

可以通过以下组件来查看各个动画效果：

duration:

animation:

#主题配置

#nav

#sidebar

#editLink

#lastUpdatedText

#footer

#socialLinks

#outlineTitle

#prevPageText

#nextPageText

#locales

#search

#backTop