在主题开发的过程中，我们一般需要如下的一些关键 API 来获取页面的数据或者状态:
用户获取页面所有数据的 Hook，比如:
import { usePageData } from 'islandjs/runtime';
function Layout() {
const pageData = usePageData();
return <div>{pageData.title}</div>;
}
usePageData 类型如下:
const usePageData: () => PageData;
PageData 的类型如下:
export interface PageData {
// 站点通用信息，包含主题配置 themeConfig 信息
siteData: SiteData;
// 上次更新时间
lastUpdatedTime?: string;
// 页面标题
title?: string;
// 页面描述
description?: string;
// Front Matter 元数据
frontmatter?: FrontMatterMeta;
// 页面类型
pageType: PageType;
// TOC 数据，包含标题和对应的锚点
toc?: Header[];
// 当前路由路径
routePath: string;
// 页面的路径，去掉 query 和 hash
pagePath: string;
// 页面的正文内容
content?: string;
}
基于此 API，你基本可以获取到需要的所有数据。
获取正文 MDX 组件内容，即正文内容：
import { Content } from 'islandjs/runtime';
function Layout() {
return (
<div>
<Content />
</div>
);
}
Island.js 内部用 react-router-dom 来实现路由，所以你可以直接使用 react-router-dom 的 Hook，比如:
import { useLocation } from 'islandjs/runtime';
function Layout() {
const location = useLocation();
return <div>Current location: {location.pathname}</div>;
}