自定义个人中心页面

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

点击它实际上会跳转到这里 https://www.arcblock.io/.well-known/service/user
这个地址是一个中转站，它会找到应用真正的个人中心页面的地址，并进行跳转（这也就为 Blocklet 组件注入自定义的个人中心页提供了基础）

个人中心页打开后是这样的，主体内容分为左右布局，左边红色的区域是菜单，每个 Blocklet 应用会被默认注入 Notifications , Profile , Settings , DID Spaces  几个菜单
而第一个菜单 Discussions 则是由 Discuss Kit 注入并驱动的
右边蓝色的区域就是内容区域，该区域内的呈现就由具体的应用来提供服务
Discuss Kit
Discuss Kit offers highly customizable and combinable components for everything you need to decentralize communication.
https://store.blocklet.dev/blocklets/z8ia1WEiBZ7hxURf6LwH21Wpg99vophFwSJdu


如何将 Blocklet 组件的个人中心页集成到整个应用中#简单来说，只需要做到以下几步就能方便的开发自定义的个人中心页面
在自定义个人中心页面中使用 UserCenter 组件#import { UserCenter } from '@blocklet/ui-react';

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


其中 customContent 就是你需要自定义的内容，也就是会出现在上图中蓝色区域的部分
在 blocklet.yml 中声明菜单#需要在 blocklet.yml 中增加下面的内容，来在个人中心的区域声明一个菜单
navigation:
  - id: profile
    title:
      en: Profile
      zh: Profile
    link: /
    section:
      - userCenter在 blocklet 设置页面配置菜单顺序#打开当前应用的 /.well-known/service/admin/navigation 页面

选择 User Center 标签页，在上一步骤中声明的菜单会自动出现在这里
拖动每一项前面的小点图标，就能够拖拽菜单项的顺序，确保你想通过点击个人中心按钮，直接看到的页面对应的选项排列在第一即可
点击 Save 按钮
此时就完成了所有的设置