在后台主题设置–全局功能–添加代码–顶部(header)自定义 js 代码 显示在网站 </head> 前 框框内添加以下代码
<style>
/* 右上角快捷工具条样式 - 完美适配一为主题 */
.topgj_r{display:flex;align-items:center;height:100%;margin-right:15px}
.topgj_r .menu-item{position:relative;display:flex;align-items:center;height:100%}
.topgj_r .menu-item>a{display:flex;align-items:center;padding:8px;font-size:13px;font-weight:500;color:var(--body-color);text-decoration:none;transition:all .3s ease}
.topgj_r .menu-item>a::after{display:none}
.topgj_r .menu-item:hover>a{color:var(--theme-color)}
.sub-menu-z{position:absolute;top:100%;right:50%;z-index:1000;min-width:90px;padding:8px 0;margin:0;background:var(--main-bg-color);border-radius:8px;box-shadow:0 3px 12px rgba(0,0,0,.12);list-style-type:none;opacity:0;visibility:hidden;transform:translateX(50%);transform-origin:top center;transition:all .25s cubic-bezier(.3,0,.3,1)}
.topgj_r .menu-item:hover .sub-menu-z{opacity:1;visibility:visible;transform:translateX(50%) translateY(0)}
.sub-menu-z .menu-item-z{margin:0;padding:0;list-style:none;white-space:nowrap;text-align:center}
.sub-menu-z .menu-item-z a{display:flex;align-items:center;justify-content:center;width:100%;min-height:36px;padding:6px 12px;margin:0;font-size:13px;color:#666;text-decoration:none;text-align:center;transition:all .2s ease}
.sub-menu-z .menu-item-z span{display:block;width:100%;text-align:center;line-height:1.4}
.sub-menu-z .menu-item-z a:hover{background:rgba(230,232,234,.8);color:#f1404b;border-radius:8px}
/* 深色模式适配 */
.io-black-mode .sub-menu-z{background:#2c2e2f}
.io-black-mode .sub-menu-z .menu-item-z a{min-height:36px;color:#c6c9cf}
.io-black-mode .sub-menu-z .menu-item-z a:hover{background:rgba(255,255,255,.08);color:var(--theme-color)}
/* 布局适配 */
.header-nav .nav-container{margin-left:0}
.nav-container{display:flex;align-items:center;justify-content:flex-end;flex-shrink:0}
.nav-container .topgj_r{display:flex;align-items:center;margin-right:0;flex-shrink:0}
/* 响应式:PC显示,平板手机隐藏 */
@media (max-width:1200px){.topgj_r{display:none!important}}
</style>
<script>
document.addEventListener('DOMContentLoaded', function() {
// 菜单配置(邮箱大量新增国内+国外常用邮箱)
const menuData = [
{ title: "传文件", items: [
{ name: "文叔叔", url: "https://www.wenshushu.cn/" },
{ name: "轻松传", url: "https://easychuan.cn/" },
{ name: "PP直连", url: "https://www.ppzhilian.com/" },
{ name: "奶牛快传", url: "https://cowtransfer.com/" },
{ name: "微信助手", url: "https://filehelper.weixin.qq.com/" }
]},
{ title: "工具", items: [
{ name: "抠图", url: "https://www.remove.bg/zh" },
{ name: "PDF工具", url: "https://www.ilovepdf.com/zh-cn" },
{ name: "图片工具", url: "https://www.iloveimg.com/zh-cn" },
{ name: "格式转换", url: "https://www.aconvert.com/cn/" }
]},
{ title: "网盘", items: [
{ name: "百度网盘", url: "https://pan.baidu.com/" },
{ name: "阿里云盘", url: "https://www.aliyundrive.com/" },
{ name: "腾讯微云", url: "https://www.weiyun.com/" },
{ name: "蓝奏云", url: "https://www.lanzou.com/" }
]},
{ title: "快递查询", items: [
{ name: "快递100", url: "https://www.kuaidi100.com" },
{ name: "菜鸟裹裹", url: "https://www.cainiao.com" },
{ name: "17TRACK国际", url: "https://www.17track.net/zh-cn" },
{ name: "顺丰官网", url: "https://www.sf-express.com" },
{ name: "中通快递", url: "https://www.zto.com" },
{ name: "圆通速递", url: "https://www.yto.net.cn" },
{ name: "申通快递", url: "https://www.sto.cn" },
{ name: "韵达快递", url: "https://www.yundaex.com" },
{ name: "EMS邮政", url: "https://www.ems.com.cn" },
{ name: "京东物流", url: "https://www.jdl.com" },
{ name: "德邦快递", url: "https://www.deppon.com" },
{ name: "邮政普包", url: "https://yjcx.11185.cn" }
]},
{ title: "翻译", items: [
{ name: "百度翻译", url: "https://fanyi.baidu.com/" },
{ name: "谷歌翻译", url: "https://translate.google.com/" },
{ name: "有道翻译", url: "https://fanyi.youdao.com/" },
{ name: "DeepL翻译", url: "https://www.deepl.com/translator" }
]},
{ title: "地图", items: [
{ name: "百度地图", url: "https://map.baidu.com/" },
{ name: "高德地图", url: "https://ditu.amap.com/" },
{ name: "腾讯地图", url: "https://map.qq.com/" }
]},
{ title: "识图", items: [
{ name: "百度识图", url: "https://graph.baidu.com/pcpage/index" },
{ name: "谷歌识图", url: "https://images.google.com/" },
{ name: "360识图", url: "https://image.so.com/" }
]},
{ title: "邮箱", items: [
// 国内常用邮箱
{ name: "QQ邮箱", url: "https://mail.qq.com/" },
{ name: "163邮箱", url: "https://mail.163.com/" },
{ name: "126邮箱", url: "https://mail.126.com/" },
{ name: "Yeah邮箱", url: "https://mail.yeah.net/" },
{ name: "139移动邮箱", url: "https://mail.10086.cn/" },
{ name: "189电信邮箱", url: "https://webmail30.189.cn/" },
{ name: "21CN邮箱", url: "https://mail.21cn.com/" },
{ name: "新浪邮箱", url: "https://mail.sina.com.cn/" },
{ name: "搜狐邮箱", url: "https://mail.sohu.com/" },
{ name: "阿里云企业邮", url: "https://mail.aliyun.com/" },
// 国外主流邮箱
{ name: "Gmail谷歌邮箱", url: "https://mail.google.com/" },
{ name: "Outlook微软邮箱", url: "https://outlook.live.com/" },
{ name: "Yahoo雅虎邮箱", url: "https://mail.yahoo.com/" },
{ name: "ProtonMail", url: "https://proton.me/mail" },
{ name: "iCloud邮箱", url: "https://mail.icloud.com/" }
]}
];
// 插入到一为主题右上角
function insertMenu() {
const header = document.querySelector('.header-nav .flex-fill');
if (!header) return;
const navContainer = document.createElement('div');
navContainer.className = 'nav-container';
let menuHtml = '<ul class="nav navbar-menu text-xs position-relative topgj_r">';
menuData.forEach((item, idx) => {
menuHtml += `<li class="menu-item">
<a href="javascript:;"><span>${item.title}</span></a>
<ul class="sub-menu-z">`;
item.items.forEach(link => {
menuHtml += `<li class="menu-item-z"><a target="_blank" href="${link.url}"><span>${link.name}</span></a></li>`;
});
menuHtml += `</ul></li>`;
});
menuHtml += '</ul>';
navContainer.innerHTML = menuHtml;
header.after(navContainer);
}
// 等待头部加载完成
const headerObserver = new IntersectionObserver((entries) => {
if (entries[0].isIntersecting) {
insertMenu();
headerObserver.disconnect();
}
}, { threshold: 0.1 });
const headerNav = document.querySelector('.header-nav');
if (headerNav) {
headerObserver.observe(headerNav);
} else {
setTimeout(insertMenu, 300);
}
});
</script>
<?php
// 以下是最近访问代码
// 以下是最近访问代码
?>
<style>
.recent-visit-btn {
position: relative;
cursor: pointer;
}
.recent-dropdown {
position: absolute;
top: 100%;
right: 0;
background: var(--main-bg-color, #fff);
width: 280px;
max-height: 400px;
overflow-y: auto;
border-radius: 12px;
box-shadow: 0 8px 20px rgba(0,0,0,0.12);
padding: 8px 0;
z-index: 1000;
display: none;
border: 1px solid rgba(0,0,0,0.08);
}
.recent-dropdown.show {
display: block;
}
.recent-item {
display: flex;
align-items: center;
justify-content: space-between;
padding: 8px 12px;
font-size: 13px;
border-bottom: 1px solid var(--border-color, #f0f0f0);
}
.recent-item:last-child {
border-bottom: none;
}
.recent-item:hover {
background: var(--muted-bg-color, #f5f5f5);
}
.recent-title-link {
flex: 1;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
margin-right: 8px;
text-decoration: none;
color: var(--body-color, #333);
}
.recent-title-link:hover {
color: var(--theme-color, #d34c41);
}
.recent-count {
font-size: 12px;
color: #fff;
background: #4CAF50;
padding: 2px 8px;
border-radius: 20px;
white-space: nowrap;
margin-right: 8px;
}
.recent-delete {
cursor: pointer;
font-size: 18px;
font-weight: bold;
color: #f33;
padding: 0 4px;
transition: color 0.2s;
}
.recent-delete:hover {
color: #c00;
}
.clear-history-btn {
display: block;
text-align: center;
padding: 10px;
font-size: 12px;
color: var(--theme-color, #d34c41);
background: var(--main-bg-color, #fff);
border-top: 1px solid var(--border-color, #eee);
cursor: pointer;
transition: background 0.2s;
text-decoration: none;
}
.clear-history-btn:hover {
background: #f9f9f9;
}
.recent-empty {
padding: 12px 16px;
text-align: center;
color: #999;
font-size: 12px;
}
.io-black-mode .recent-dropdown {
background: #2c2e2f;
border-color: #3a3c3d;
}
.io-black-mode .recent-item {
border-bottom-color: #3a3c3d;
}
.io-black-mode .recent-title-link {
color: #f0f0f0 !important;
}
.io-black-mode .recent-count {
background: #4CAF50;
color: #fff;
}
.io-black-mode .recent-delete {
color: #ff8888;
}
.io-black-mode .recent-delete:hover {
color: #ff5555;
}
.io-black-mode .clear-history-btn {
background: #2c2e2f;
border-top-color: #3a3c3d;
color: #f0f0f0;
}
.io-black-mode .clear-history-btn:hover {
background: #3a3c3d;
}
.io-black-mode .recent-empty {
color: #b0b0b0;
}
.recent-btn-icon {
font-size: 1.3rem;
color: var(--theme-color, #d34c41);
vertical-align: middle;
display: inline-block;
line-height: 1;
margin-right: 0px;
}
.recent-btn-text {
color: var(--body-color, #333);
font-size: 13px;
vertical-align: middle;
}
.io-black-mode .recent-btn-text {
color: #f0f0f0;
}
.mobile-recent-btn {
position: absolute !important;
right: 55px !important;
top: 50% !important;
transform: translateY(-50%) !important;
margin-left: 0 !important;
padding: 0 !important;
z-index: 999 !important;
background: transparent !important;
}
.mobile-recent-btn .recent-btn-icon {
font-size: 1.2rem;
margin-right: 0px !important;
}
.mobile-recent-btn .recent-btn-text {
font-size: 12px;
}
@media (max-width: 768px) {
.recent-dropdown {
width: 260px;
right: -10px;
}
}
</style>
<script>
(function(){
const STORAGE_KEY = 'recent_visited_with_count';
const MAX_ITEMS = 10;
function getRecentList() {
const stored = localStorage.getItem(STORAGE_KEY);
if (!stored) return [];
try {
return JSON.parse(stored);
} catch(e) {
return [];
}
}
function saveRecentList(list) {
localStorage.setItem(STORAGE_KEY, JSON.stringify(list.slice(0, MAX_ITEMS)));
}
function recordCurrentPage() {
const url = window.location.href;
let title = document.title;
if (url.includes('/wp-admin') || url.includes('/wp-login') || url === window.location.origin + '/' || url === window.location.origin) {
return;
}
if (title.length > 40) title = title.slice(0, 37) + '...';
let list = getRecentList();
const existing = list.find(item => item.url === url);
if (existing) {
existing.count = (existing.count || 1) + 1;
existing.lastVisit = Date.now();
list = list.filter(item => item.url !== url);
list.unshift(existing);
} else {
list.unshift({
url: url,
title: title,
count: 1,
lastVisit: Date.now()
});
}
saveRecentList(list);
}
function deleteSingleItem(urlToDelete) {
let list = getRecentList().filter(item => item.url !== urlToDelete);
saveRecentList(list);
renderRecentDropdown();
document.querySelectorAll('.mobile-recent-btn .recent-dropdown').forEach(drop => {
if (drop) renderRecentDropdownInto(drop);
});
}
function clearAllHistory() {
localStorage.removeItem(STORAGE_KEY);
renderRecentDropdown();
document.querySelectorAll('.mobile-recent-btn .recent-dropdown').forEach(drop => {
if (drop) renderRecentDropdownInto(drop);
});
}
function renderRecentDropdownInto(container) {
if (!container) return;
const list = getRecentList();
if (list.length === 0) {
container.innerHTML = '<div class="recent-empty">暂无最近访问</div>';
return;
}
let itemsHtml = '<div style="padding:8px 12px; font-weight:600; border-bottom:1px solid #eee;">最近访问</div>';
list.forEach(item => {
const safeUrl = escapeHtml(item.url);
itemsHtml += `
<div class="recent-item" data-url="${safeUrl}">
<a href="${safeUrl}" target="_blank" rel="noopener noreferrer" class="recent-title-link">${escapeHtml(item.title)}</a>
<span class="recent-count">${item.count}次</span>
<span class="recent-delete" data-url="${safeUrl}">×</span>
</div>
`;
});
itemsHtml += '<div class="clear-history-btn">清空全部历史</div>';
container.innerHTML = itemsHtml;
container.querySelectorAll('.recent-delete').forEach(btn => {
btn.addEventListener('click', (e) => {
e.preventDefault();
e.stopPropagation();
const url = btn.getAttribute('data-url');
if (url) deleteSingleItem(url);
});
});
container.querySelector('.clear-history-btn')?.addEventListener('click', (e) => {
e.preventDefault();
clearAllHistory();
});
}
function renderRecentDropdown() {
const container = document.querySelector('.recent-visit-btn .recent-dropdown');
if (container) renderRecentDropdownInto(container);
}
function escapeHtml(str) {
if (!str) return '';
return str.replace(/[&<>]/g, m => m === '&' ? '&' : (m === '<' ? '<' : '>'));
}
function addPCButton() {
let topMenu = document.querySelector('.topgj_r');
if (topMenu && !document.querySelector('.recent-visit-btn')) {
const li = document.createElement('li');
li.className = 'menu-item recent-visit-btn';
li.innerHTML = `<a href="javascript:void(0)">
<span class="recent-btn-icon">🕒</span>
<span class="recent-btn-text">最近</span>
</a><div class="recent-dropdown"></div>`;
topMenu.appendChild(li);
const btn = li.querySelector('a');
const dropdown = li.querySelector('.recent-dropdown');
let timeoutId;
const showDropdown = () => {
clearTimeout(timeoutId);
renderRecentDropdownInto(dropdown);
dropdown.classList.add('show');
};
const hideDropdown = () => {
timeoutId = setTimeout(() => {
if (!dropdown.matches(':hover') && !btn.matches(':hover')) {
dropdown.classList.remove('show');
}
}, 100);
};
btn.addEventListener('mouseenter', showDropdown);
btn.addEventListener('mouseleave', hideDropdown);
dropdown.addEventListener('mouseenter', () => {
clearTimeout(timeoutId);
dropdown.classList.add('show');
});
dropdown.addEventListener('mouseleave', hideDropdown);
renderRecentDropdownInto(dropdown);
}
}
function addMobileStandaloneButton() {
if (window.innerWidth > 768) return false;
let mobileNav = document.querySelector('header, .header, .site-header, .top-header');
if (!mobileNav) {
const logo = document.querySelector('.logo, .site-logo');
if (logo) mobileNav = logo.closest('header, .header, .site-header');
}
if (mobileNav && !document.querySelector('.mobile-recent-btn')) {
const btnHtml = `
<div class="mobile-recent-btn">
<span class="recent-btn-icon">🕒</span>
<span class="recent-btn-text">最近</span>
<div class="recent-dropdown"></div>
</div>
`;
const temp = document.createElement('div');
temp.innerHTML = btnHtml;
const btnElement = temp.firstElementChild;
mobileNav.appendChild(btnElement);
const dropdown = btnElement.querySelector('.recent-dropdown');
btnElement.addEventListener('click', (e) => {
e.preventDefault();
e.stopPropagation();
if (!dropdown.classList.contains('show')) {
renderRecentDropdownInto(dropdown);
}
dropdown.classList.toggle('show');
});
document.addEventListener('click', (e) => {
if (!btnElement.contains(e.target)) dropdown.classList.remove('show');
});
dropdown.addEventListener('click', (e) => e.stopPropagation());
renderRecentDropdownInto(dropdown);
return true;
}
return false;
}
function init() {
addPCButton();
if (window.innerWidth <= 768) {
addMobileStandaloneButton();
}
recordCurrentPage();
}
if (document.readyState === 'loading') {
document.addEventListener('DOMContentLoaded', () => setTimeout(init, 300));
} else {
setTimeout(init, 300);
}
})();
</script>
