Athen
⌘K
指南
API

主题配置

主题配置位于根配置中的 themeConfig 下。例如：

js
import { defineConfig } from "athen";

export default defineConfig({
  themeConfig: {
    // ...
  },
});
  • Type: Array
  • Default: []

网站的导航栏。 nav 配置是 NavItem 的数组，具有以下类型：

ts
interface NavItem {
  // 导航栏文本
  text: string;
  // 导航栏链接
  link: "/";
  // 导航栏链接的激活规则
  activeMatch: "^/$|^/";
}

activeMatch 用于匹配当前路由，当路由匹配 activeMatch 规则时，nav 项会高亮显示。默认情况下，activeMatch 是 nav 项的 link。

比如:

js
import { defineConfig } from "athen";

export default defineConfig({
  themeConfig: {
    nav: [
      {
        text: "Home",
        link: "/",
        activeMatch: "^/$|^/",
      },
    ],
  },
});

当然 nav 数组中也可以配置多级菜单，类型如下:

ts
interface NavGroup {
  // 导航栏文本
  text: string;
  // 子菜单
  items: NavItem[];
}

例如下面的配置:

js
import { defineConfig } from "athen";

export default defineConfig({
  themeConfig: {
    nav: [
      {
        text: "Home",
        items: [
          {
            text: "Menu 1",
            link: "/menu1",
          },
          {
            text: "Menu 2",
            link: "/menu2",
          },
        ],
      },
    ],
  },
});
  • Type: Object

网站的侧边栏。配置为一个对象，类型如下：

ts
// key 为 SidebarGroup 的路径
// value 为 SidebarGroup 的数组
type Sidebar = Record<string, SidebarGroup[]>;

interface SidebarGroup {
  text: string;
  items: SidebarItem[];
  // 是否可折叠
  collapsable?: boolean;
  // 是否默认折叠
  collapsed?: boolean;
}

type SidebarItem = {
  text: string;
  link: string;
};

比如:

js
import { defineConfig } from "athen";

export default defineConfig({
  themeConfig: {
    sidebar: {
      "/guide/": [
        {
          text: "Guide",
          items: [
            {
              text: "Getting Started",
              link: "/guide/getting-started",
            },
          ],
        },
      ],
    },
  },
});
  • Type: Object | undefined
  • Default: undefined

站点的编辑链接。如果未定义，编辑链接功能将被禁用。

editLink 配置是 EditLink 的一个对象，它具有以下类型：

ts
export interface EditLink {
  pattern: string;
  text?: string;
}

比如：

js
import { defineConfig } from "athen";

export default defineConfig({
  themeConfig: {
    editLink: {
      pattern: "https://github.com/estjs/athen/tree/master/docs/:path",
      text: "📝 Edit this page on GitHub",
    },
  },
});

:path 将被当前页面路径替换。

lastUpdatedText

  • Type: string
  • Default: "Last Updated"

上次更新时间的文本。比如：

js
import { defineConfig } from "athen";

export default defineConfig({
  themeConfig: {
    lastUpdatedText: "Last Updated",
  },
});
  • Type: Object
  • Default: {}

主页的页脚。

footer 配置是 Footer 的一个对象，它具有以下类型：

ts
export interface Footer {
  message?: string;
  copyright?: string;
}

比如：

js
import { defineConfig } from "athen";

export default defineConfig({
  themeConfig: {
    footer: {
      message: "Powered by Athen",
      copyright: `© ${new Date().getFullYear()} Athen`,
    },
  },
});
  • Type: Array
  • Default: []

显示在导航栏末尾的链接，通常用于 GitHub、Discord、Twitter 等外部入口。

links 配置是 IconLink 的数组，具有以下类型：

ts
export interface IconLink {
  icon: IconLinkIcon;
  link: string;
  ariaLabel?: string;
}

比如：

js
import { defineConfig } from "athen";

export default defineConfig({
  themeConfig: {
    links: [
      {
        icon: "github",
        link: "https://github.com/estjs/athen",
        ariaLabel: "GitHub",
      },
    ],
  },
});

内置 icon 支持 github、discord、twitter、youtube、linkedin 等常见社交服务，也支持自定义 SVG 图标。

outlineTitle

  • Type: string
  • Default: 'ON THIS PAGE'

在右侧边栏中配置大纲的标题。

比如:

js
import { defineConfig } from "athen";

export default defineConfig({
  themeConfig: {
    outlineTitle: "ON THIS PAGE",
  },
});

prevPageText

  • Type: string
  • Default: Previous Page

上一页的文本。比如:

js
import { defineConfig } from "athen";

export default defineConfig({
  themeConfig: {
    prevPageText: "Previous Page",
  },
});

nextPageText

  • Type: string
  • Default: Next Page

下一页的文本。比如:

js
import { defineConfig } from "athen";

export default defineConfig({
  themeConfig: {
    nextPageText: "Next Page",
  },
});

locales

  • Type: Object
  • Default: undefined

国际化配置。此配置为一个对象，key 为对应语言的路由前缀(如 / 或 /zh)，value 为LocaleConfig，类型如下:

ts
export interface LocaleConfig {
  // 语言名称
  lang?: string;
  // HTML 标题，优先于 `themeConfig.title`
  title?: string;
  // HTML 描述，优先于 `themeConfig.description`
  description?: string;
  // 对应语言的显示文本
  label: string;
  // 导航栏配置
  nav?: NavItem[];
  // 侧边栏配置
  sidebar?: Sidebar;
  // 右侧大纲标题
  outlineTitle?: string;
  // 展示上次更新时间的文本
  lastUpdatedText?: string;
  // 编辑链接
  editLink?: EditLink;
  // 上一页文本
  prevPageText?: string;
  // 下一页文本
  nextPageText?: string;
}

因此你能看到，LocaleConfig 中包含许多与 ThemeConfig 中相同的配置项，包括:

但是 LocaleConfig 的优先级更高。所以它会覆盖 themeConfig 中的相应字段。

backTop

  • Type: object | boolean
  • Default: true

是否开启返回顶部功能。默认情况下开启，你也通过如下的配置禁用:

js
import { defineConfig } from "athen";

export default defineConfig({
  themeConfig: {
    backTop: false,
  },
});

slots

  • 类型: object
  • 默认: undefined

无需完全替换主题，即可在指定位置插入自定义组件。可用插槽键：

键渲染位置
banner顶部导航栏下方
sidebarExtra侧边栏底部
footerExtra页面底部（主内容之后）

示例：

js
import { defineConfig } from "athen";
import Banner from "./components/Banner";

export default defineConfig({
  themeConfig: {
    slots: {
      banner: Banner,
      sidebarExtra: () => <AdWidget />, // 行内组件
      footerExtra: () => <p style={{ textAlign: "center" }}>© 2024 我的项目</p>,
    },
  },
});

如果未设置 slots，则渲染默认占位区域。

ON THIS PAGE