Sakurairo页尾美化方法

最后更新于 2024-12-30 nicocat 3616 次阅读

排面（服务提供商logo阵列）

经典的页尾供应商logo阵列，
可以移除原有theme_info并替换为典中典的云服务供应商Logo。
直接全量引入该javascript即可，
如果开启了Pjax移除代码需要添加保活

以下Javascript代码是我目前在使用的，
使用它们可以移除原有的Theme Sakurairo | Created by Fuukei
并替换为 Cloudflare Sakurairo 阿里云 并列

document.querySelectorAll('.theme-info a').forEach(el => el.remove()); // 移除theme-info
let position = '.site-footer > .site-info';
let ProviderList = `
  <style>
    .provider {
        display: flex;
        align-items: center;
        height: 1em; 
        gap: 5px; 
        text-decoration: none; 
        font-size: 1em; 
        color: inherit; 
    }
    .provider_list {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 10px; 
        text-align: center;
    }
    .logo-icon {
        height: 1em; 
        width: auto;
        vertical-align: middle;
    }
  </style>
  <div class="provider_list">
      <a class="provider" href="http://cloudflare.com" target="_blank" rel="nofollow">
          <img class="logo-icon" src="https://files.nicocat.cc/wp-content/uploads/2024/10/cf.svg" alt="">
      </a>
      <a class="provider" href="https://docs.fuukei.org/" target="_blank" data-v-d5925166="" rel="nofollow">
          <img class="logo-icon" src="https://files.nicocat.cc/wp-content/uploads/2024/10/theme.webp" alt="">
          <span style="font-family: Segoe UI Symbol;color:grey">Sakurairo</span>
      </a>
      <a class="provider" href="http://aliyun.com" target="_blank" rel="nofollow">
          <img class="logo-icon" src="https://files.nicocat.cc/wp-content/uploads/2024/10/aliyun.png" alt="">
      </a>
  </div>
`;
var SiteFooter = document.querySelector(position);
if (SiteFooter) {
    SiteFooter.insertAdjacentHTML('afterend', ProviderList);
}

你可以将以下内容添加进设置项的页尾——附加代码中

<script>
document.addEventListener('DOMContentLoaded',function(){
    document.querySelectorAll('.theme-info a').forEach(el => el.remove()); // 移除theme-info
    
    let position = '.site-footer > .site-info';
    
    let ProviderList = `
      <style>
        .provider {
            display: flex;
            align-items: center;
            height: 1em; 
            gap: 5px; 
            text-decoration: none; 
            font-size: 1em; 
            color: inherit; 
        }
        .provider_list {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 10px; 
            text-align: center;
        }
        .logo-icon {
            height: 1em; 
            width: auto;
            vertical-align: middle;
        }
      </style>
      <div class="provider_list">
          <a class="provider" href="http://cloudflare.com" target="_blank" rel="nofollow">
              <img class="logo-icon" src="https://files.nicocat.cc/wp-content/uploads/2024/10/cf.svg" alt="">
          </a>
          <a class="provider" href="https://docs.fuukei.org/" target="_blank" data-v-d5925166="" rel="nofollow">
              <img class="logo-icon" src="https://files.nicocat.cc/wp-content/uploads/2024/10/theme.webp" alt="">
              <span style="font-family: Segoe UI Symbol;color:grey">Sakurairo</span>
          </a>
          <a class="provider" href="http://aliyun.com" target="_blank" rel="nofollow">
              <img class="logo-icon" src="https://files.nicocat.cc/wp-content/uploads/2024/10/aliyun.png" alt="">
          </a>
      </div>
    `;
    
    var SiteFooter = document.querySelector(position);
    if (SiteFooter) {
        SiteFooter.insertAdjacentHTML('afterend', ProviderList);
    }
})
</script>

WP小工具区

Sakurairo的WP小工具区仅在视窗宽度>860px的情况下显示，用户可以通过点击页尾的圆规图标呼出

WP小工具区就是呼出的按钮面板顶部那一块，你可以在Wordpress外观设置——小工具那边自定义它

旧版Sakurairo页尾

使用以下CSS样式可以将3.0页尾改回Sakurairo页尾样式

.site-footer {
    position: relative;
    max-width: unset;
    width: unset;
    margin: unset;
    border-radius: 0;
    z-index: 1;
    box-shadow: unset;
}

body.dark .site-footer {
    background: var(--dark-bg-primary) !important;
}

#page.wrapper {
    padding-bottom: unset!important;
}