荷塘月色

每天进步一点点

  • 主页
  • 分类
  • 归档
  • 相册
  • 留言墙
总文章数 445
所有文章 友链 关于我
荷塘月色

每天进步一点点

  • 主页
  • 分类
  • 归档
  • 相册
  • 留言墙
🍻 正在加载今日诗词.... 🔍

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

阅读数:次 2020-06-04
字数统计: 204字   |   阅读时长≈ 1分

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

返回网站页面时:

原理

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

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

步骤

1.添加配置

themes/yilia/_config.yml

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

2.新建脚本文件

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
/* 标签页标题切换 */
<% 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 许可协议进行许可。转载请注明出处!
知识共享许可协议
赏

谢谢你请我吃糖果

支付宝
微信
  • hexo
  • yilia

扫一扫,分享到微信

微信分享二维码
王者荣耀每日壁纸
Notepad++统计文本字数
  1. 1. 原理
  2. 2. 步骤
    1. 2.1. 1.添加配置
    2. 2.2. 2.新建脚本文件
    3. 2.3. 3.引入脚本文件
© 2019-2023 荷塘月色
Hexo Theme Yilia by Litten
备案管理系统图标 粤ICP备19131798号
本站总访问量次 | 本站访客数人