In the process of theme development, we generally need the following key APIs to obtain page data or status:
Hook for the user to get all the data of the page, such as:
import { usePageData } from 'islandjs/runtime';
function Layout() {
const pageData = usePageData();
return <div>{pageData.title}</div>;
}
The type of usePageData is as follows:
const usePageData: () => PageData;
The type of PageData is as follows:
export interface PageData {
// Site general information, including theme configuration themeConfig information
siteData: SiteData;
// Last update time
lastUpdatedTime?: string;
// Page title
title?: string;
// Page description
description?: string;
// Front Matter of the page
frontmatter?: FrontMatterMeta;
// Page type
pageType: PageType;
// TOC data
toc?: Header[];
// Current route path
routePath: string;
// The path of the page, remove query and hash
pagePath: string;
// Doc content of the page
content?: string;
}
Based on this API, you can almost get all the data you need.
Get the body MDX component content, that is, the doc content:
import { Content } from 'islandjs/runtime';
function Layout() {
return (
<div>
<Content />
</div>
);
}
Island.js uses react-router-dom internally to implement routing, so you can use react-router-dom Hook directly, for example:
import { useLocation } from 'islandjs/runtime';
function Layout() {
const location = useLocation();
return <div>Current location: {location.pathname}</div>;
}