跳到主要内容

自定义个人中心页面

随着 Blocklet 自身的推进，极大可能会诞生一个个人中心页的需求，得益于 Blocklet 平台的可组合性，我们在设计之初已经为应用提供了多 Blocklet 个人中心页的能力。下文将详细介绍如何通过 Blocklet 组件来为整个应用注入一个定制化的个人中心页面。

随着 Blocklet 自身的推进，极大可能会诞生一个个人中心页的需求，得益于 Blocklet 平台的可组合性，我们在设计之初已经为应用提供了多 Blocklet 个人中心页的能力。下文将详细介绍如何通过 Blocklet 组件来为整个应用注入一个定制化的个人中心页面。

个人中心页是什么？

简单来说，这个按钮就是到个人中心页的入口

image.png

点击它实际上会跳转到这里 https://www.arcblock.io/.well-known/service/user

这个地址是一个中转站，它会找到应用真正的个人中心页面的地址，并进行跳转（这也就为 Blocklet 组件注入自定义的个人中心页提供了基础）

个人中心页打开后是这样的，主体内容分为左右布局，左边红色的区域是菜单，每个 Blocklet 应用会被默认注入 Notifications , Profile , Settings , DID Spaces 几个菜单

而第一个菜单 Discussions 则是由 Discuss Kit 注入并驱动的

右边蓝色的区域就是内容区域，该区域内的呈现就由具体的应用来提供服务

Discuss Kit

image.png

如何将 Blocklet 组件的个人中心页集成到整个应用中

简单来说，只需要做到以下几步就能方便的开发自定义的个人中心页面

在自定义个人中心页面中使用 UserCenter 组件

javascript
import { UserCenter } from '@blocklet/ui-react';

export default function CustomProfile() {
  return (
    <UserCenter currentTab={window.blocklet.prefix}>

  {customContent}

</UserCenter>
  );
}

其中 customContent 就是你需要自定义的内容，也就是会出现在上图中蓝色区域的部分

在 blocklet.yml 中声明菜单

需要在 blocklet.yml 中增加下面的内容，来在个人中心的区域声明一个菜单

javascript
navigation:
  - id: profile
    title:
      en: Profile
      zh: Profile
    link: /
    section:
      - userCenter

在 blocklet 设置页面配置菜单顺序

打开当前应用的 /.well-known/service/admin/navigation 页面

image.png

选择 User Center 标签页，在上一步骤中声明的菜单会自动出现在这里

拖动每一项前面的小点图标，就能够拖拽菜单项的顺序，确保你想通过点击个人中心按钮，直接看到的页面对应的选项排列在第一即可

点击 Save 按钮

此时就完成了所有的设置