🎀博客园-awescnb插件-geek皮肤优化-links优化

💖简介

博客园-awescnb插件-geek皮肤下，对自定义链接(links)优化

将自定义链接添加至原主链接下，同时适配移动端场景

👉效果

  • PC端
  • 移动端

📖实现

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

添加相关代码


  //生成链接
  function createLinks(){
    for(let item of config.links){
      const link = document.createElement('a');
      link.href = item.link;
      link.target = "_blank";
      link.innerHTML = '<li><span class="fas fa-fw">' + item.icon + '</span><span class="nav-item-text">' + item.name + '</span></li>';
      document.getElementById("cnblog-nav").getElementsByTagName("ul")[0].appendChild(link);
      // 移动端
      if(document.getElementsByClassName("mobile-menu").length > 0){
        document.getElementsByClassName("mobile-menu")[0].getElementsByTagName("ul")[0].appendChild(link);
      }
    }
  }

  //删除原links
  function deleteOldLink(){
    document.getElementsByClassName("links")[0].remove();
  }


  setTimeout(function() {
    createLinks();
    deleteOldLink();
  }, 300);

手动创建元素写入非移动端和移动端场景下原主链接下

原皮肤下自定义链接配置config.links需增加icon字段
可svg图标或Emoji等


    links: [
        {
          icon: '<svg t="1732791306075" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4318" width="15" height="15"><path d="M512 512m-512 0a512 512 0 1 0 1024 0 512 512 0 1 0-1024 0Z" fill="#333333" p-id="4319"></path><path d="M759.296 448.512c-48.896 0-96.256-15.872-135.424-45.056v204.8c0 104.448-80.64 189.184-179.968 189.184s-179.968-84.736-179.968-189.184 80.64-189.184 179.968-189.184c9.984 0 19.712 0.768 28.928 2.56V529.92c-8.96-3.584-18.688-5.376-28.16-5.376-44.288 0-80.384 37.632-80.384 84.48s36.096 84.48 80.384 84.48 80.128-37.632 80.128-84.48V202.24h100.352c0 78.336 60.416 141.568 134.656 141.568v104.704h-0.512" fill="#FFFFFF" p-id="4320"></path></svg>',
          name: '抖音',
          link: 'https://www.douyin.com/user/MS4wLjABAAAAYctE7sRPYcp2o7iQ4Coj5qBo1Oe0PDVZE_d1lLDrKfw?from_tab_name=main'
        },
        {
          icon: '<svg t="1732796681191" class="icon" viewBox="0 0 1129 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5121" width="15" height="15"><path d="M234.909 9.656a80.468 80.468 0 0 1 68.398 0 167.374 167.374 0 0 1 41.843 30.578l160.937 140.82h115.07l160.936-140.82a168.983 168.983 0 0 1 41.843-30.578A80.468 80.468 0 0 1 930.96 76.445a80.468 80.468 0 0 1-17.703 53.914 449.818 449.818 0 0 1-35.406 32.187 232.553 232.553 0 0 1-22.531 18.508h100.585a170.593 170.593 0 0 1 118.289 53.109 171.397 171.397 0 0 1 53.914 118.288v462.693a325.897 325.897 0 0 1-4.024 70.007 178.64 178.64 0 0 1-80.468 112.656 173.007 173.007 0 0 1-92.539 25.75h-738.7a341.186 341.186 0 0 1-72.421-4.024A177.835 177.835 0 0 1 28.91 939.065a172.202 172.202 0 0 1-27.36-92.539V388.662a360.498 360.498 0 0 1 0-66.789A177.03 177.03 0 0 1 162.487 178.64h105.414c-16.899-12.07-31.383-26.555-46.672-39.43a80.468 80.468 0 0 1-25.75-65.984 80.468 80.468 0 0 1 39.43-63.57M216.4 321.873a80.468 80.468 0 0 0-63.57 57.937 108.632 108.632 0 0 0 0 30.578v380.615a80.468 80.468 0 0 0 55.523 80.469 106.218 106.218 0 0 0 34.601 5.632h654.208a80.468 80.468 0 0 0 76.444-47.476 112.656 112.656 0 0 0 8.047-53.109v-354.06a135.187 135.187 0 0 0 0-38.625 80.468 80.468 0 0 0-52.304-54.719 129.554 129.554 0 0 0-49.89-7.242H254.22a268.764 268.764 0 0 0-37.82 0z m0 0" fill="#20B0E3" p-id="5122"></path><path d="M348.369 447.404a80.468 80.468 0 0 1 55.523 18.507 80.468 80.468 0 0 1 28.164 59.547v80.468a80.468 80.468 0 0 1-16.094 51.5 80.468 80.468 0 0 1-131.968-9.656 104.609 104.609 0 0 1-10.46-54.719v-80.468a80.468 80.468 0 0 1 70.007-67.593z m416.02 0a80.468 80.468 0 0 1 86.102 75.64v80.468a94.148 94.148 0 0 1-12.07 53.11 80.468 80.468 0 0 1-132.773 0 95.757 95.757 0 0 1-12.875-57.133V519.02a80.468 80.468 0 0 1 70.007-70.812z m0 0" fill="#20B0E3" p-id="5123"></path></svg>',
          name: 'B站',
          link: 'https://space.bilibili.com/276295390'
        },
        {
          icon: '<svg t="1732796978559" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4514" width="15" height="15"><path d="M0 0m256 0l512 0q256 0 256 256l0 512q0 256-256 256l-512 0q-256 0-256-256l0-512q0-256 256-256Z" fill="#FA2C19" p-id="4515"></path><path d="M445.824 766.293333c4.181333-9.130667 7.68-17.066667 11.477333-24.789333a512 512 0 0 0 23.253334-49.237333 29.141333 29.141333 0 0 1 34.773333-21.717334c21.973333 1.578667 44.032 0.426667 66.986667 0.426667V384.853333c-15.445333 0-30.677333-0.554667-45.781334 0-10.538667 0.554667-14.250667-2.901333-13.909333-14.165333 0.725333-27.093333 0-54.272 0-82.602667h214.229333v65.706667c0 30.890667 0 30.890667-29.952 30.890667h-30.122666v285.952h65.024c26.197333 0 26.197333 0 26.197333 27.52v57.642666c0 7.978667-1.962667 12.032-10.624 12.032-101.674667-0.170667-203.392-0.298667-305.066667-0.213333a37.717333 37.717333 0 0 1-6.485333-1.365333" fill="#FFFFFF" p-id="4516"></path><path d="M486.357333 559.146667c-13.397333 27.605333-25.173333 52.266667-37.546666 76.501333a11.605333 11.605333 0 0 1-8.96 4.522667c-29.781333 0-59.733333 1.152-89.429334-1.066667-29.738667-2.218667-41.642667-21.333333-29.781333-50.517333 13.482667-33.664 29.738667-66.218667 44.8-99.2l3.413333-8.832c-12.032 0-22.570667 0.298667-33.109333 0-8.576 0.128-17.152-0.682667-25.514667-2.346667a30.037333 30.037333 0 0 1-25.728-33.536 30.72 30.72 0 0 1 2.901334-10.112c18.048-43.349333 38.272-85.845333 57.770666-128.554667 6.357333-13.994667 13.013333-27.776 20.181334-41.386666 1.834667-3.541333 6.101333-8.064 9.386666-8.192 27.861333-0.682667 55.808-0.341333 86.186667-0.341334-2.645333 6.784-4.138667 11.392-6.144 15.701334-17.066667 35.712-34.176 71.381333-51.370667 106.965333-3.456 7.210667-7.68 14.72 5.290667 20.224 3.413333-18.56 17.408-15.189333 29.610667-15.189333h70.4c-2.944 7.04-4.864 11.946667-6.997334 16.597333-21.76 45.44-43.861333 90.538667-65.28 135.936-8.789333 18.474667-5.845333 22.997333 14.634667 23.168 10.538667-0.298667 21.205333-0.341333 35.285333-0.341333m-38.314666 111.872c-16.512 33.109333-31.274667 62.890667-46.378667 92.501333a10.24 10.24 0 0 1-7.68 4.266667c-40.490667-0.426667-81.066667-1.194667-121.685333-2.261334a79.317333 79.317333 0 0 1-16.298667-4.266666l22.698667-45.909334c7.381333-15.189333 14.592-30.293333 22.570666-44.714666a13.653333 13.653333 0 0 1 9.728-6.4c37.205333 1.834667 74.410667 4.437333 111.658667 6.698666 7.424 0.384 14.506667 0.085333 25.386667 0.085334" fill="#FFFFFF" p-id="4517"></path></svg>',
          name: '小红书',
          link: 'https://www.xiaohongshu.com/user/profile/6667cf5c00000000030310e0'
        },
        {
          icon: '<svg t="1732791511060" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5374" width="15" height="15"><path d="M512 0c282.784 0 512 229.216 512 512s-229.216 512-512 512S0 794.784 0 512 229.216 0 512 0z m189.952 752l11.2-108.224c-31.904 9.536-100.928 16.128-147.712 16.128-134.464 0-205.728-47.296-195.328-146.304 11.584-110.688 113.152-145.696 232.64-145.696 54.784 0 122.432 8.8 151.296 18.336L768 272.704C724.544 262.24 678.272 256 599.584 256c-203.2 0-388.704 94.88-406.4 263.488C178.336 660.96 303.584 768 535.616 768c80.672 0 138.464-6.432 166.336-16z" fill="#CE000D" p-id="5375"></path></svg>',
          name: 'CSDN',
          link: 'https://blog.csdn.net/zk_tww',
        },
        {
          icon: '<svg t="1732797049512" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="13518" width="15" height="15"><path d="M487.2192 746.5728a212.55168 212.55168 0 1 1-212.49536-212.49536H487.2192v212.49536z" fill="#6CADFF" p-id="13519"></path><path d="M534.47168 746.5728a212.55168 212.55168 0 1 0 212.49536-212.49536H534.528v212.49536h-0.05632z" fill="#20D14F" p-id="13520"></path><path d="M487.2192 274.3296a212.55168 212.55168 0 1 0-212.49536 212.49536H487.2192V274.27328v0.05632z" fill="#FF7077" p-id="13521"></path><path d="M534.47168 274.3296a212.55168 212.55168 0 1 1 212.49536 212.49536H534.528V274.27328l-0.05632 0.05632z" fill="#FFCC1E" p-id="13522"></path></svg>',
          name: '皮肤',
          link: 'https://www.yuque.com/awescnb',
        },
        // ....
    ],
  • 定义自定义CSS
    博客园->管理->设置->页面定制 CSS 代码
    添加代码
/* 旧links */
@media screen and (max-width: 768px) {#left-side .links {display: none !important;}}

/* 移动端links */
@media screen and (max-width: 768px) {#left-side #cnblog-nav ul {flex-direction: row;flex-wrap: wrap;justify-content: center;} #left-side #cnblog-nav ul a {width: 15% !important;}}

/* 移动端侧边栏 */
.mobile-menu #sideBar{box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.5);}

原皮肤中自定义链接进行隐藏display: none
移动端调整布局及大小

结束

posted @ 2024-11-20 13:57  丿似锦  阅读(61)  评论(0)    收藏  举报