优维低代码技术专栏，是一个全新的、技术为主的专栏，由优维技术委员会成员执笔，基于优维7年低代码技术研发及运维成果，主要介绍低代码相关的技术原理及架构逻辑，目的是给广大运维人提供一个技术交流与学习的平台。
连载第二十九期
《高级指引：页面标题》
▽
这里的页面标题有两个含义，一个是页面内容中显示的标题，另一个是浏览器标签页的标题。
# 示例一
如果想要在页面中加入标题，可以配置 basic-bricks.micro-view 的 pageTitle 属性。
bricks:
- brick: "basic-bricks.micro-view"
properties:
pageTitle: "主机管理"
如果期望使用更复杂的标题 UI，可以使用自定义标题构件，并放置在 basic-bricks.micro-view 的 titleBar 插槽中。
bricks:
- brick: "basic-bricks.micro-view"
slots:
titleBar:
type: "bricks"
bricks:
- brick: "your-page-title-brick"
properties:
pageTitle: "Your Page Title"
这样就可以在页面主体内容左上角显示标题，并同步更新浏览器标签页的标题。
# 示例二
部分页面不会在页面中显示标题，但仍应设置浏览器标题，此时可以使用基础构件 basic-bricks.page-title 并设置属性 hidden: true。
- 提示
hidden 是 HTMLElement 的原生属性，参见 MDN - HTMLElement.hidden。
brick: "basic-bricks.page-title"
properties:
pageTitle: "搜索"
hidden: true
另可使用原 menu.pageTitle 获得相同效果（页面顶栏将不再显示标题）。
path: "/ci/history/:id"
menu:
pageTitle: "构建详情"
# 示例三
在 storyboard.json 中只能配置静态的标题，如果想配置来自动态数据的标题，需要编写构件或使用 useResolves。可参考 basic-bricks.page-title 实现动态标题构件。
有疑问加站长微信联系（非本文作者）
