hugo- hugo 监听浏览器切换title

Posted 2020-11-25 somliy

hugo 博客 监听浏览器title 动态改变浏览器title标题

找到head.html

themes/maupassant/layouts/partials/head.html

添加监听js

可以从html中发现，分为home页面和其他页面，两种展示的不同，所以需要改这两部分

  {{ if .IsHome -}}
    <title>{{ .Site.Title }} | {{ .Site.Params.subtitle}}</title>
    <meta property="og:title" content="{{ .Site.Title }} | {{ .Site.Params.subtitle}}">
    <meta property="og:type" content="website">
    <meta name="Keywords" content="{{.Site.Params.keywords}}">
    <meta name="description" content="{{ .Site.Params.description }}">

<!--添加部分-start-->

    <script>
    document.addEventListener('visibilitychange',function(){
        if( document.visibilityState == 'hidden' ){
        normal_title = document.title;
        document.title = 'ヽ(●-`Д′-)ノ你丑你就走！';
        }else{
        document.title = 'ヾ(???3)ノ你帅就回来！';
        setTimeout(function(){
            document.title = normal_title;
        }, 1200)
        }
    });
    </script>
<!--添加部分-end-->

    {{- else -}}
    <title>{{ .Title }} | {{ .Site.Title }}</title>

<!--添加部分-start-->
    <script>
    document.addEventListener('visibilitychange',function(){
        if( document.visibilityState == 'hidden' ){
        normal_title = document.title;
        document.title = 'ヽ(●-`Д′-)ノ你丑你就走！';
        }else{
        document.title = 'ヾ(???3)ノ你帅就回来！';
        setTimeout(function(){
            document.title = normal_title;
        }, 1200)
        }
    });
    </script>
    <!--添加部分-end-->