排面(服务提供商logo阵列)
经典的页尾供应商logo阵列,
首先引入第一份Javascript移除页底内容,
然后引入第二份Javascript在原位置置换为服务提供商的logo即可,
如果开启了Pjax移除代码需要添加保活
以下Javascript代码是我目前在使用的,
使用它们可以移除原有的Theme Sakurairo | Created by Fuukei
并替换为 Cloudflare Sakurairo 阿里云
并列
var footers = document.querySelectorAll('footer');
for (var i = 0; i < footers.length; i++) {
var siteInfoElements = footers[i].querySelectorAll('#site-info');
for (var j = 0; j < siteInfoElements.length; j++) {
siteInfoElements[j].remove();
}
}
var selector = '.site-footer > .site-info';
var htmlContent = `
<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/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/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/2024/10/aliyun.png" alt="">
</a>
</div>
`;
var targetElement = document.querySelector(selector);
if (targetElement) {
targetElement.insertAdjacentHTML('afterend', htmlContent);
}
WP小工具区
Sakurairo的WP小工具区仅在视窗宽度>860px的情况下显示,用户可以通过点击页尾的圆规图标呼出
WP小工具区就是呼出的按钮面板顶部那一块,你可以在Wordpress外观设置——小工具那边自定义它