Hexo动态修改网站的标题

前言

可以在切换至其他网页时动态修改网站的标题，引起访问者的注意，当再次回来时修改网站标题表示欢迎：）

操作方法

新建脚本文件

ROOT\source\js\title.js，写入以下内容：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
//动态标题
var OriginTitile = document.title;
var titleTime;
document.addEventListener('visibilitychange', function () {
  if (document.hidden) {
    //离开当前页面时标签显示内容
    document.title = '👀不要走嘛~';
    clearTimeout(titleTime);
  } else {
    //返回当前页面时标签显示内容
    document.title = '🐖欢迎你回来～';
    //两秒后变回正常标题
    titleTime = setTimeout(function () {
      document.title = OriginTitile;
    }, 2000);
  }
});

引用脚本文件

在主题配置文件_config.butterfly.yml 引入该文件：

1
2
3
inject: 
  bottom: 
+    - <script async src="/js/title.js"></script>

查看和验证效果

1
2
3
hexo cl
hexo g
hexo s