 |
简介 | 切换网站修改标签页标 |
|---|---|---|
 |
预览 | 查看组件预览 |
 |
代码库 | 帖子下面 |
 |
安装指南 | 如何安装主题或主题组件 |
 |
对 Discourse 主题不熟悉？ | Discourse 主题使用初学者指南 |
Install this theme component
标签页标题变化组件。此组件能够在用户切换到其他标签页时，自动改变网页的标题，从而提醒用户他们正在离开当前页面。
功能亮点：
- 实时标题变化：当用户离开页面时，标签页的标题会更改为“你离开了页面！”，当用户返回时，标题会恢复为原始标题。
- 提升用户体验：通过这种方式，我们希望能更好地提醒用户关注未保存的内容，减少误操作的风险。
如何使用：
代码 ：
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
/* 这里可以添加你的CSS样式 */
</style>
<script>
document.addEventListener('DOMContentLoaded', (event) => {
// 保存原始标题
const originalTitle = document.title;
// 监听页面可见性变化
document.addEventListener('visibilitychange', () => {
if (document.hidden) {
// 当页面隐藏时，修改标题
document.title = '别嘛~再看看我~';
} else {
// 当页面重新可见时，恢复原始标题
document.title = originalTitle;
}
});
});
</script>
</head>