• 搜索
  • 夜间模式
    ©2026  Lin's Blog Theme by OneBlog

    Lin's Blog博客

    搜索
    标签
    # 日常生活 # typecho # 插件 # 技术笔记 # hadsky # 朋友圈 # 主题
  • 首页>
  • 技术笔记>
  • 正文
  • 动态网站标题 + 图标切换(Typecho 适配版)

    2025年12月02日 231 阅读 2 评论 1099 字

    一、预加载图标(放入header.php中)

    为避免图标切换时的闪烁或延迟,建议在页面头部预加载两个图标:

    <!-- 预加载动态 Favicon -->
    <link rel="preload" href="/usr/themes/OneBlog/static/img/cat.png" as="image">
    <link rel="preload" href="/usr/themes/OneBlog/static/img/welcome.png" as="image">
    
    

    将代码插入主题的  header.php  文件中,位于    标签内。

    二、JavaScript 动态标题代码

    /* 动态网站标题与 Favicon 切换 */
    var OriginTitle = document.title;  // 保存原始标题
    var titleTime;
    
    // 查找现有的 Favicon link 元素(兼容 rel="icon" 或 "shortcut icon")
    var favicon = document.querySelector('link[rel="icon"]') || 
                  document.querySelector('link[rel="shortcut icon"]');
    
    // 若未找到,则动态创建一个
    if (!favicon) {
        favicon = document.createElement('link');
        favicon.rel = 'icon';
        favicon.type = 'image/png';
        document.head.appendChild(favicon);
    }
    
    // 图标路径(根据你的主题路径配置)
    var leaveIcon = "/usr/themes/OneBlog/static/img/cat.png";     // 离开时图标
    var returnIcon = "/usr/themes/OneBlog/static/img/welcome.png"; // 返回时图标
    
    // 监听页面可见性变化
    document.addEventListener('visibilitychange', function () {
        if (document.hidden) {
    本文著作权归作者 [ Lin. ] 享有,未经作者书面授权,禁止转载,封面图片来源于 [ 互联网 ] ,本文仅供个人学习、研究和欣赏使用。如有异议,请联系博主及时处理。
    技术笔记
    取消回复

    发表留言
    回复

    读者留言2

    1. 程序员老王 Lv.1
      2026-04-25 17:06 回复

      预加载方案很实用,收藏了!之前做的时候没考虑favicon切换会闪的问题

    2. 林雨 博主
      2025-12-02 06:06 回复

      js代码我是直接放在/storage/emulated/0/Android/data/bin.mt.plus/temp/CleanOnExit/9952237_net/850b5c8/main.js这里面的

    加载更多评论
    加载中...
    — 已加载全部评论 —
    Copyright©2026  All Rights Reserved.  Load:0.017 s
    Theme by OneBlog V3.6.5
    夜间模式

    开源不易,请尊重作者版权,保留基本的版权信息。