Athen
⌘K
Guide
API

Runtime API

During theme development, we generally need the following key APIs to get the data or state of the page:

usePageData

TIP

usePageData is a Hook used to get the data of the current page.

Hook for the user to get all the data of the page, such as:

ts
import { usePageData } from 'athen/runtime';

function Layout() {
  const pageData = usePageData();
  return <div>{pageData.title}div>;
}

The type of usePageData is as follows:

ts
const usePageData: () => PageData;

The type of PageData is as follows:

ts
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.

Content

TIP

Content is a Hook used to get the content of the current page.

Get the body MDX component content, that is, the doc content:

ts
import { Content } from 'athen/runtime';

function Layout() {
  return (
    <div>
      <Content />
    div>
  );
}

Route Hook

TIP

RouteHook is a Hook used to get the routing information of the current page.

Athen uses essor-router internally to implement routing, so you can use essor-ruter Hook directly, for example:

ts
import { useLocation } from 'athen/runtime';

function Layout() {
  const location = useLocation();
  return <div>Current location: {location.pathname}div>;
}

Example

TIP

App is an Essor component used to demonstrate the usage of key APIs during theme development.

value:example custom essor component

ON THIS PAGE