Athen
⌘K
指南
API

Runtime API

在主题开发的过程中，我们一般需要如下的一些关键 API 来获取页面的数据或者状态:

usePageData

TIP

usePageData 是一个Hook，用于获取当前页面的数据。

用户获取页面所有数据的 Hook，比如:

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

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

usePageData 类型如下:

ts
const usePageData: () => PageData;

PageData 的类型如下:

ts
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，你基本可以获取到需要的所有数据。

Content

TIP

Content 是一个Hook，用于获取当前页面的内容。

获取正文 MDX 组件内容，即正文内容：

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

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

路由 Hook

TIP

RouteHook 是一个Hook，用于获取当前页面的路由信息。

Athen 内部用 essor-router 来实现路由，所以你可以直接使用 essor-router 的 Hook，比如:

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

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

使用Essor组件

TIP

App 是一个 Essor 组件，用于展示主题开发过程中的关键 API 的使用示例。

支持直接使用unocss（兼容taildwindcss、windcss）

value: example custom essor component

ON THIS PAGE