网站主页右上角如何添加快捷访问菜单与最近访问图标?提升用户体验教程

教程相关3周前更新 kevin
12 0 0

在后台主题设置–全局功能–添加代码–顶部(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>

 

© 版权声明

相关文章