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

💖简介

博客园-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;}

---

结束