> For AI agents: the complete documentation index is available at https://docs.halo.run/llms.txt, the full documentation bundle is available at https://docs.halo.run/llms-full.txt.

# 页面数据列表显示字段

此扩展点用于扩展页面数据列表的显示字段。

![页面数据列表显示字段](/img/developer-guide/plugin/extension-points/ui/single-page-list-item-field-create.png)

## 定义方式

```ts
export default definePlugin({
  extensionPoints: {
    "single-page:list-item:field:create": (
      singlePage: Ref<ListedSinglePage>,
    ): EntityFieldItem[] => {
      return [
        {
          priority: 0,
          position: "start",
          component: markRaw(FooComponent),
          props: {},
          permissions: [],
          hidden: false,
        },
      ];
    },
  },
});
```

```ts title="EntityFieldItem"
export interface EntityFieldItem {
  priority: number;
  position: "start" | "end";
  component: Raw<Component>;
  props?: Record\<string, unknown\>;
  permissions?: string[];
  hidden?: boolean;
}
```

## 示例

此示例将添加一个显示页面 slug（别名）的字段。

```ts
import { definePlugin } from "@halo-dev/ui-shared";
import { markRaw, type Ref } from "vue";
import type { ListedSinglePage } from "@halo-dev/api-client";
import { VEntityField } from "@halo-dev/components";

export default definePlugin({
  extensionPoints: {
    "single-page:list-item:field:create": (
      singlePage: Ref<ListedSinglePage>,
    ) => {
      return [
        {
          priority: 0,
          position: "end",
          component: markRaw(VEntityField),
          props: {
            description: singlePage.value.page.spec.slug,
          },
          permissions: [],
          hidden: false,
        },
      ];
    },
  },
});
```

## 类型定义

### ListedSinglePage

`ListedSinglePage` 由 `@halo-dev/api-client` 提供，请直接使用当前依赖中的生成类型。它包含：

- `page`：独立页面资源。
- `owner` 和 `contributors`：页面所有者与贡献者。
- `stats`：访问、评论等统计数据。