页面标题切换
创建组件
文件路径：src/components/features/TitleChange.astro
astro
<!-- 页面标题切换组件 -->
---
const hiddenTitle = 'w(ﾟДﾟ)w 不要走！再看看嘛！';
const returnTitle = '♪(^∇^*)欢迎回来！';
---
<script is:inline define:vars={{ hiddenTitle, returnTitle }}>
(function () {
const originTitle = document.title;
let titleTimer = null;
let stopListener = null;
function handleVisibilityChange() {
if (document.hidden) {
document.title = hiddenTitle;
clearTimeout(titleTimer);
} else {
document.title = returnTitle;
titleTimer = setTimeout(function () {
document.title = originTitle;
}, 2000);
}
}
// Use visibilitychange event
document.addEventListener('visibilitychange', handleVisibilityChange);
})();
</script>注册组件
文件路径：src/layouts/Layout.astro
astro
---
import ScrollProgressBar from "@components/features/ScrollProgressBar.astro";
---
<body
<div id="progress-bar"></div>
<TitleChange />
</body>