🎀博客园-awescnb插件-geek皮肤优化-logo添加

合集 - ⭐博客园-awescnb插件(11)

1.博客园自定义皮肤工具推荐:awescnb2024-08-082.博客园-awescnb插件-geek皮肤优化2024-08-163.博客园-awescnb插件-geek皮肤优化--公众号卡片2024-08-224.🎀博客园-awescnb插件-geek皮肤优化--浏览器ico图标修改2024-08-285.🎀博客园-awescnb插件-geek皮肤优化-目录优化2024-09-016.🎀博客园-awescnb插件-geek皮肤优化-表情配置2024-09-02

7.🎀博客园-awescnb插件-geek皮肤优化-logo添加2024-11-19

8.🎀博客园-awescnb插件-geek皮肤优化-样式优化2024-11-199.🎀博客园-awescnb插件-geek皮肤优化-links优化2024-11-2010.🎀博客园-添加统计图2024-12-0211.🎀博客园-awescnb插件-geek皮肤优化-Markdown样式支持02-06

收起

💖简介

博客园-awescnb插件-geek皮肤下，左上角新增logo头像及博客名称

🌟实现

已存在元素<div class="logo"></div>;
可以直接在该元素中添加logo信息

• 定义自定义HTML：
  博客园->管理->设置->页脚 HTML 代码
  添加相关代码

 
  //添加logo
  function addLogo(){
    setTimeout(function() {
      // 1366px分辨率
      var style = document.createElement('style');
      style.innerHTML = '@media screen and (max-width: 1366px) {.logo{display: block;position: fixed;}.logo-msg{display:none;}.logo-avatar{left:14px;}}';
      document.head.appendChild(style);
      // logo内容
      let blogUrl = "https://www.cnblogs.com/zktww";
      let blogName = "丿似锦";
      let logoDiv = '<div class="logo-avatar"><a href="' + blogUrl + '"><div class="avatar" style="height: 40px;background:url(&quot;' + config.theme.avatar + '&quot;) center center / cover no-repeat;width: 40px;"></div></a></div><div class="logo-msg"><p><a href="' + blogUrl + '">' + blogName + '</a></p></div>';
      let logoElement = document.getElementsByClassName("logo")[0];
      logoElement.innerHTML = logoDiv;
    }, 100);
  }
  addLogo();

blogUrl修改为对应博客地址
blogName修改为对应博客名称

@media screen and (max-width: 1366px)适配分辨率
具体头像有皮肤配置项获取config.theme.avatar

• 定义自定义CSS
博客园->管理->设置->页面定制 CSS 代码
  添加代码

 
/* logo */
.logo-avatar{position: absolute;align-items: center;display: flex;z-index: 1;bottom: 8px;left: 24px;}
.logo-avatar .avatar{border-radius: 50%;border: 4px solid var(--geek-color-1);}
.logo-msg{position: absolute;z-index: 1;bottom: 8px;left: 68px;height: 40px;}
.logo-msg p{font-size: 16px;line-height: 40px;}
.logo-msg a{height: 40px;letter-spacing: normal;color: #fff;font-weight: 700;text-shadow: 0 0 3px #33354b;}

---

结束