背景
7b2算是个老主题了，很多功能都是没有的，就比如文章页的目功能，少了这个还是蛮不方便的只能自己添加了
一、添加文章的目录功能
1、先下载安装插件Muki Floating TOC
这个就不详细说了直接在后台搜索、下载、安装、启用即可
2、这些还是不够的，这个插件和7b2兼容还算好但是还是有点小问题
我试了很多只有这个兼容是最好的了
二、优化并美化插件
1、Muki TOC 交互js文件
将这段代码放在WPCode的Site Wide Footer位置文件为js
/**
* Muki Floating TOC 移动端交互增强（稳定版）
* 功能：吸附式毛玻璃按钮，触摸滑出，点击展开/关闭目录。
* 保留点击外部和滚动关闭的手势。
*/
(function() {
function init() {
var toc = document.getElementById('muki-floating-toc');
if (!toc) return;
if (document.querySelector('.muki-mobile-toc-toggle')) return;
// --- 1. 创建触发按钮 ---
var btn = document.createElement('div');
btn.className = 'muki-mobile-toc-toggle';
btn.innerHTML = '<span class="toggle-icon">☰</span>';
document.body.appendChild(btn);
var icon = btn.querySelector('.toggle-icon');
var isOpen = false;
var hideTimer = null;
// --- 2. 按钮滑出 ---
function showBtn() {
btn.classList.add('show');
clearTimeout(hideTimer);
hideTimer = setTimeout(function() {
if (!isOpen) btn.classList.remove('show');
}, 3000);
}
// --- 3. 打开目录 ---
function openToc() {
toc.classList.add('visible');
btn.classList.add('opened', 'show');
icon.textContent = '✕';
isOpen = true;
clearTimeout(hideTimer);
}
// --- 4. 关闭目录 ---
function closeToc() {
toc.classList.remove('visible');
btn.classList.remove('opened');
icon.textContent = '☰';
isOpen = false;
hideTimer = setTimeout(function() {
btn.classList.remove('show');
}, 000);
}
// --- 5. 事件绑定 ---
btn.addEventListener('click', function(e) {
e.stopPropagation();
if (isOpen) closeToc();
else openToc();
});
btn.addEventListener('touchstart', function(e) {
showBtn();
}, { passive: true });
btn.addEventListener('mouseenter', function() { showBtn(); });
btn.addEventListener('mouseleave', function() {
if (!isOpen) {
hideTimer = setTimeout(function() { btn.classList.remove('show'); }, 000);
}
});
// 点击外部关闭
document.addEventListener('click', function(e) {
if (!toc.contains(e.target) && e.target !== btn && !btn.contains(e.target)) {
if (isOpen) closeToc();
}
});
// 滚动关闭
window.addEventListener('scroll', function() {
if (isOpen) closeToc();
}, { passive: true });
// --- 6. 初始状态修正 ---
if (toc.classList.contains('active')) {
toc.classList.remove('active');
}
toc.style.display = 'none';
}
if (document.readyState === 'loading') {
document.addEventListener('DOMContentLoaded', init);
} else {
init();
}
})();
Muki TOC 移动端css样式
将这段代码放在WPCode的Site Wide Footer位置文件为css
/* ============================================
PC 端：将 Muki 浮动目录固定在右侧
============================================ */
/* 注意：此规则没有 @media 包裹，对所有设备生效，但手机端会被后面的移动端样式覆盖 */
#muki-floating-toc {
right: 20px !important; /* 【微调】距离屏幕右边缘的距离，增大则更靠左 */
top: 200px !important; /* 【微调】距离屏幕上边缘的距离，增大则更靠下 */
left: auto !important; /* 取消左侧定位，防止干扰 */
}
/* ============================================
移动端：毛玻璃边缘吸附按钮 & 目录样式（稳定版）
仅在屏幕宽度 ≤ 768px 时生效
============================================ */
@media (max-width: 768px) {
/* ---------- 目录本体 ---------- */
#muki-floating-toc {
display: none !important; /* 默认隐藏，由 JS 控制显示 */
position: fixed !important; /* 固定定位，不随页面滚动 */
bottom: 90px !important; /* 【微调】目录距离屏幕底部的距离，增大则上移 */
right: 20px !important; /* 【微调】目录距离屏幕右侧的距离 */
top: auto !important; /* 取消顶部定位，以 bottom 为准 */
left: auto !important; /* 取消左侧定位 */
width: auto !important; /* 宽度自适应内容 */
max-width: 85% !important; /* 最大宽度限制，防止占满整个屏幕 */
background: rgba(255, 255, 255, 0.6) !important; /* 【微调】背景色和透明度，数值越小越透明，毛玻璃感越强 */
backdrop-filter: blur(12px) !important;/* 【微调】背景模糊程度，数值越大毛玻璃效果越明显 */
-webkit-backdrop-filter: blur(12px) !important; /* Safari 兼容 */
border-radius: 12px !important; /* 圆角，让弹窗更柔和 */
box-shadow: 0 10px 30px rgba(0,0,0,0.15) !important; /* 阴影，增加立体感 */
z-index: 9998 !important; /* 层级，确保在按钮下方、但在大多数内容上方 */
max-height: 60vh !important; /* 最大高度，防止目录过长超出屏幕 */
overflow-y: auto !important; /* 内容超出时允许垂直滚动 */
overflow-x: hidden !important; /* 禁止水平滚动，防止出现底部滚动条 */
padding: 18px 20px !important; /* 内边距，让内容不贴边 */
font-size: 14px !important; /* 基础字体大小 */
line-height: 1.6 !important; /* 行高，提升可读性 */
border: 1px solid rgba(0,0,0,0.05) !important; /* 极淡的边框，增加层次 */
}
/* 目录显示状态（由 JS 添加 visible 类） */
#muki-floating-toc.visible {
display: block !important;
}
/* 强制换行，防止长标题或链接撑破容器宽度 */
#muki-floating-toc a,
#muki-floating-toc .muki-toc-text {
word-break: break-word !important;
overflow-wrap: break-word !important;
}
/* ---------- 触发按钮 ---------- */
.muki-mobile-toc-toggle {
position: fixed;
right: -14px; /* 【微调】按钮隐藏的宽度：负值越小露出的部分越少，如 -18px */
bottom: 100px; /* 【微调】按钮距离屏幕底部的距离，增大则上移 */
width: 44px; /* 【微调】按钮宽度 */
height: 44px; /* 【微调】按钮高度 */
background: rgba(255, 255, 255, 0.25); /* 【微调】按钮背景色和透明度，数值越大越不透明 */
backdrop-filter: blur(12px); /* 按钮背景模糊（毛玻璃） */
-webkit-backdrop-filter: blur(12px); /* Safari 兼容 */
border: 1px solid rgba(255, 255, 255, 0.5);
border-right: none; /* 右侧无边，自然吸附边缘 */
border-radius: 22px 0 0 22px; /* 左侧圆角，右侧平直 */
box-shadow: -2px 2px 12px rgba(0,0,0,0.15);
color: #555; /* 图标颜色 */
z-index: 10000; /* 确保按钮在所有内容之上 */
cursor: pointer;
display: flex;
align-items: center;
justify-content: flex-start;
padding-left: 10px; /* 图标向左偏移，使其在可见部分居中 */
font-size: 18px; /* 图标大小 */
transition: right 0.3s cubic-bezier(0.25, 0.8, 0.25, 1.2),
background 0.2s ease,
box-shadow 0.2s ease; /* 滑出和颜色过渡动画 */
user-select: none; /* 禁止选中文字 */
-webkit-tap-highlight-color: transparent; /* 去除移动端点击高亮 */
}
/* 按钮滑出状态（触摸或悬停时） */
.muki-mobile-toc-toggle.show,
.muki-mobile-toc-toggle:active {
right: 0; /* 完全滑出 */
background: rgba(255, 255, 255, 0.5); /* 背景更亮 */
box-shadow: -2px 2px 20px rgba(0,0,0,0.25); /* 阴影更明显 */
color: #333;
}
/* 目录打开时按钮状态 */
.muki-mobile-toc-toggle.opened {
background: rgba(255, 255, 255, 0.6); /* 背景进一步变亮 */
color: #d32f2f; /* 图标变红，表示关闭操作 */
}
/* 图标容器 */
.muki-mobile-toc-toggle .toggle-icon {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
transition: transform 0.2s ease; /* 旋转动画 */
}
/* 打开时图标旋转 90 度 */
.muki-mobile-toc-toggle.opened .toggle-icon {
transform: rotate(90deg);
}
}Muki TOC PC端css样式
将这段代码放在WPCode的Site Wide Footer位置文件为css
/* === PC 端：右侧隐藏按钮 & 目录弹出样式（底部定位版，内含微调指南） === */
@media (min-width: 769px) {
/* 1. 隐藏 Muki 插件原本的悬浮目录，改为按钮控制 */
#muki-floating-toc {
display: none !important; /* 初始隐藏 */
position: fixed !important;
/* 【微调】弹窗距离屏幕底部：默认 160px，增大则弹窗上移 */
bottom: 160px !important;
top: auto !important; /* 取消顶部定位 */
/* 【微调】弹窗距离右边缘：默认 60px，增大会离按钮更远 */
right: 60px !important;
left: auto !important;
/* 【微调】弹窗宽度：默认 280px，可按喜好调整 */
width: 280px !important;
max-width: 80vw !important;
max-height: 70vh !important;
overflow-y: auto !important;
overflow-x: hidden !important;
background: rgba(255, 255, 255, 0.6) !important; /* 透明度 0.5，半透 */
backdrop-filter: blur(12px) !important; /* 模糊 12px，明显的毛玻璃 */
-webkit-backdrop-filter: blur(12px) !important; /* Safari 兼容，必须加上 */
border-radius: 12px !important;
box-shadow: 0 10px 30px rgba(0,0,0,0.2) !important;
z-index: 9998 !important;
padding: 20px 24px !important;
font-size: 14px !important;
line-height: 1.6 !important;
border: 1px solid rgba(0,0,0,0.05) !important;
/* 不再需要垂直居中的 transform，已移除 */
}
/* 显示状态（由 JS 添加 visible 类） */
#muki-floating-toc.visible {
display: block !important;
}
/* 强制换行，防止长标题撑破容器 */
#muki-floating-toc a,
#muki-floating-toc .muki-toc-text {
word-break: break-word !important;
overflow-wrap: break-word !important;
}
/* 2. PC 端按钮样式 */
.muki-mobile-toc-toggle {
display: flex !important;
align-items: center;
justify-content: flex-start;
position: fixed;
/* 【微调】按钮隐藏的宽度：默认 -14px（露出一半），负值越小露得越少，如 -18px */
right: -14px;
/* 【微调】按钮距离屏幕底部：默认 100px，越小越靠下，如 60px */
bottom: 100px !important;
top: auto !important; /* 取消顶部定位 */
/* 【微调】按钮尺寸：默认 44px，可改为 40px 或 36px */
width: 44px;
height: 44px;
/* 【微调】按钮背景透明度：0.3 是半透明毛玻璃，越大越不透明，如 0.6 */
background: rgba(255, 255, 255, 0.3);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
border: 1px solid rgba(255, 255, 255, 0.5);
border-right: none;
border-radius: 22px 0 0 22px;
box-shadow: -2px 2px 12px rgba(0,0,0,0.15);
color: #555;
z-index: 10000;
cursor: pointer;
font-size: 18px;
transition: right 0.3s cubic-bezier(0.25, 0.8, 0.25, 1.2),
background 0.2s ease;
user-select: none;
/* 不再需要垂直居中的 transform，已移除 */
}
/* 鼠标悬停时滑出 */
.muki-mobile-toc-toggle.show,
.muki-mobile-toc-toggle:hover {
right: 0;
background: rgba(255, 255, 255, 0.6);
box-shadow: -2px 2px 20px rgba(0,0,0,0.25);
}
/* 目录打开时按钮状态 */
.muki-mobile-toc-toggle.opened {
background: rgba(255, 255, 255, 0.7);
color: #d32f2f;
}
/* 图标容器 */
.muki-mobile-toc-toggle .toggle-icon {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
transition: transform 0.2s ease;
}
.muki-mobile-toc-toggle.opened .toggle-icon {
transform: rotate(90deg);
}
}
这样就能获得一个漂亮的文章目录功能了