【hugo】- hugo 监听浏览器切换title

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-->

原文地址:https://www.cnblogs.com/somliy/p/12242505.html

时间: 2024-08-29 20:56:39

【hugo】- hugo 监听浏览器切换title的相关文章

JS 监听浏览器标签页显示隐藏

JS 监听浏览器标签页显示隐藏 API document.hidden 判断页面是否隐藏的布尔值.页面隐藏包括 页面在后台标签页中 或者 浏览器最小化 document.visibilityState (只读属性), 返回document的可见性,4个值: hidden:文档处于背景标签页或者窗口处于最小化状态,或者操作系统正处于 '锁屏状态' visible:此页面在前景标签页中,并且窗口没有最小化 prerender:页面在屏幕外执行预渲染处理 document.hidden 的值为 tru

监听浏览器后退事件,使其转向指定URL

$(function(){ //清空浏览器历史记录 pushHistory(); //监听浏览器后退事件 window.addEventListener("popstate", function(e) { //转向指定的URL location.href=url; }, false); //清空浏览器历史记录 function pushHistory() { var url = "#"; var state = { title: "title",

js 监听浏览器刷新还是关闭事件

原作者的文章地址:http://udn.yyuap.com/forum.php?mod=viewthread&tid=96309 页面加载时只执行onload 页面关闭时只执行onunload 页面刷新时先执行onbeforeunload,然后onunload,最后onload. 经过验证我得出的结论是: //对于ie,谷歌,360: //页面加载时只执行onload //页面刷新时,刷新之前执行onbeforeunload事件,在新页面即将替换旧页面时onunload事件,最后onload事件

监听浏览器窗口大小的改变

<script type="text/javascript"> <!-- var winWidth = 0; var winHeight = 0; function findDimensions() //函数:获取尺寸 { //获取窗口宽度 if (window.innerWidth) { winWidth = window.innerWidth; } else if ((document.body) && (document.body.clientW

解决怎样监听Activity切换

本篇博文在我之前的博文中已经提到了,可是监听Activity切换又能够作为一个单独的内容来叙述,因此这里又单独拿了出来进行赘述. Activity的切换无非有两种.第一种:启动或者创建一个新的Activity:另外一种:唤醒后台执行的Activity. 因此假设我们可以成功监听到启动或者创建一个Activity,或者唤醒Activity我们就基本完毕了Activity的切换的监听. 在源代码/frameworks/base/core/java/android/app文件夹下ActivityThr

解决如何监听Activity切换

本篇博文在我之前的博文中已经提到了,但是监听Activity切换又可以作为一个单独的内容来叙述,因此这里又单独拿了出来进行赘述. Activity的切换无非有两种,第一种:启动或者创建一个新的Activity:第二种:唤醒后台运行的Activity.因此如果我们能够成功监听到启动或者创建一个Activity,或者唤醒Activity我们就基本完成了Activity的切换的监听. 在源码/frameworks/base/core/java/android/app目录下ActivityThread.

JS 监听浏览器各个标签间的切换

以前看到过一些网页,在标签切换到其它地址时,网页上的标题上会发生变化,一直不知道这个是怎么做的,最近查了一些资料才发现有一个 visibilitychange 事件就可以搞定,这里将介绍一下页面可见性(Page Visibility)API的简单应用. visibilitychange事件介绍 简单的说,当用户最小化网页或移动到另一个标签时,API会发送 visibilitychange 有关该网页的可见性的事件.你可以检测到该事件并执行一些操作或行为.例如:标签页隐藏的时候停止播放音乐视频.停

document.visibilityState 监听浏览器最小化

document.hidden:表示页面是否隐藏的布尔值.页面隐藏包括 页面在后台标签页中 或者 浏览器最小化 (注意,页面被其他软件遮盖并不算隐藏,比如打开的 sublime 遮住了浏览器). document.visibilityState:表示下面 4 个可能状态的值 hidden:页面在后台标签页中或者浏览器最小化 visible:页面在前台标签页中 prerender:页面在屏幕外执行预渲染处理 document.hidden 的值为 true unloaded:页面正在从内存中卸载

监听浏览器返回键、后退、上一页事件(popstate)操作返回键

在WebApp或浏览器中,会有点击返回.后退.上一页等按钮实现自己的关闭页面.调整到指定页面.确认离开页面或执行一些其它操作的需求.可以使用 popstate 事件进行监听返回.后退.上一页操作. 一.简单介绍 history 中的操作 1.window.history.back(),后退 2.window.history.forward(),前进 3.window.history.go(num),前进或后退指定数量历史记录 4.window.history.pushState(state, t