5
优维低代码：页面标题 - Go语言中文网 - Golang中文社区
source link: https://studygolang.com/articles/35974
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
优维低代码：页面标题
EASYOPS_youwei · 5分钟之前 · 69 次点击 · 预计阅读时间 1 分钟 · 大约8小时之前 开始浏览
优维低代码技术专栏，是一个全新的、技术为主的专栏，由优维技术委员会成员执笔，基于优维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 实现动态标题构件。
有疑问加站长微信联系（非本文作者）
Recommend
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK