hexo+yilia添加标签页标题切换功能

2020-06-04

字数统计: 204字 | 阅读时长≈ 1分

从网站页面切换到另一个页面时：

返回网站页面时：

原理

使用JS修改标题内容，几秒后恢复。

详见：https://github.com/yansheng836/yansheng836.github.io/commit/a6bc543a3ede337e091423eb9e8931f92485034e

步骤

1.添加配置

themes/yilia/_config.yml

# Tab Title Change | 标签页标题切换
tab_title_change: 
  enable: true
  left_tab_title: '(つェ⊂) 我藏好了哦~ '
  return_tab_title: '(*´∇｀*) 被你发现啦~ '

2.新建脚本文件

themes/yilia/layout/_partial/tab-title-change.ejs

/* 标签页标题切换 */
<% if (theme.tab_title_change && theme.tab_title_change.enable) { %>
<script>
  var originTitle = document.title;
  var titleTime;
  document.addEventListener("visibilitychange", function () {
    if (document.hidden) {
      document.title = "<%- theme.tab_title_change.left_tab_title %>" + originTitle;
      clearTimeout(titleTime);
    } else {
      document.title = "<%- theme.tab_title_change.return_tab_title %>" + originTitle;
      titleTime = setTimeout(function () {
        document.title = originTitle;
      }, 2000);
    }
  });
</script>
<% } %>

3.引入脚本文件

themes/yilia/layout/_partial/after-footer.ejs

1 2	/* 标签页标题切换 */ <%- partial('tab-title-change') %>

本文作者： 荷塘月色
发布时间： 2020-06-04
最后更新： 2023-06-05
本文标题： hexo+yilia添加标签页标题切换功能
本文链接： https://www.yansheng.fun/article/1e69113d.html
版权声明： 本作品采用 CC BY-NC-SA 4.0 许可协议进行许可。转载请注明出处！