默认主题包含一系列的组件,你可以通过覆盖或者扩展这些组件来实现自定义主题。
Layout
组件是主题的入口组件,它会被 Island.js 用来渲染整个文档站点的布局。
// theme/index.tsx
import { Layout } from 'islandjs';
它通过 Props 提供了一系列的插槽来实现拓展,类型定义如下:
interface LayoutProps {
/* Home 页 Hero 部分之前 */
beforeHero?: React.ReactNode;
/* Home 页 Hero 部分之后 */
afterHero?: React.ReactNode;
/* Home 页 Features 部分之前 */
beforeFeatures?: React.ReactNode;
/* Home 页 Features 部分之后 */
afterFeatures?: React.ReactNode;
/* 正文页 Footer 部分之前 */
beforeDocFooter?: React.ReactNode;
/* 正文页最前面 */
beforeDoc?: React.ReactNode;
/* 正文页最后面 */
afterDoc?: React.ReactNode;
/* 左上角导航栏标题之前 */
beforeNavTitle?: React.ReactNode;
/* 左上角导航栏标题之后 */
afterNavTitle?: React.ReactNode;
/* 右侧大纲栏上面 */
beforeOutline?: React.ReactNode;
/* 右侧大纲栏下面 */
afterOutline?: React.ReactNode;
/* 整个页面最顶部 */
top?: React.ReactNode;
/* 整个页面最底部 */
bottom?: React.ReactNode;
}
HomeLayout
组件是主题的 Home 页布局组件,它会被 Island.js 用来渲染 Home 页的布局。
// theme/index.tsx
import { HomeLayout } from 'islandjs';
NotFoundLayout
组件是主题的 404 页面布局组件,它会被 Island.js 用来渲染 404 页面的布局。
setup
用来添加一个初始化的逻辑,比如全局事件绑定。
// theme/index.tsx
import { setup } from 'islandjs';