美化head下载链接：wwbpx.lanzoum.com/iZ9ex3lydpy…
使用 Edge 浏览器久了，相信很多人的收藏夹都非常丰富，甚至藏了不少宝藏链接！🤭但如果想在其他设备查看，或是分享给别人，通常都是：
- 登录账号同步
- 导出后导入新浏览器
其实直接打开导出的 HTML 是最轻便的方案，已经可以看到收藏的网址了，但也有几个问题：
- 界面简朴、纯白背景、毫无样式
- 层级结构混乱，文件夹缩进消失，全是顶格
- 只留图标、没写标题的网址，在 HTML 里直接不显示
- 手机直接打开更是没法看😵
简单说：不导入浏览器的原生 HTML ，能用，但用着很难受。
为解决这个问题，我让豆包老师捣鼓了一个美化头，只需要给收藏夹 HTML 加一段 head，就能瞬间大变样：
使用方法：
- 用记事本 / 文本编辑器打开你从 Edge 导出的收藏夹 HTML
- 在第二行插入准备好的美化 head
- 保存后重新打开
亲测可用：
- PC：Edge、Chrome
- 手机：Edge 手机版、夸克等
注意：手机自带浏览器， QQ 浏览器等对本地文件限制严格，可能无法正常解析。
这个美化工具真正的用处是什么？
✅ 跨设备查看收藏夹，不需要登录、同步、导入，不污染浏览器收藏夹
✅ 树形结构清晰好查看，直接打开就能浏览
🔗 美化 head 下载：wwbpx.lanzoum.com/iZ9ex3lydpy…
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<style>
* {
margin:0; padding:0; box-sizing:border-box;
font-family: 'Segoe UI', Roboto, sans-serif;
}
/* 滚动条美化 */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #444; border-radius: 4px; }
body.light ::-webkit-scrollbar-thumb { background: #ccc; }
/* 顶部固定工具栏 */
#topBar {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 50px;
background: #1e1e1e;
border-bottom: 1px solid #333;
display: flex;
align-items: center;
padding: 0 12px;
gap: 8px;
z-index: 1001;
}
body.light #topBar {
background: #ffffff;
border-color: #e0e0e0;
}
/* 顶部按钮 */
.topBtn {
width: 36px;
height: 36px;
border-radius: 6px;
border: none;
background: #3676e6;
color: #fff;
font-size: 18px;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
}
body.light .topBtn {
background: #f1f1f1;
color: #333;
}
.topBtn:hover {
background: #2559c7 !important;
color: #fff !important;
}
body.light .topBtn:hover {
background: #e0e0e0 !important;
color: #000 !important;
}
/* 左侧面板 */
#leftPanel {
position: fixed;
left: 0;
top: 50px;
width: 260px;
height: calc(100vh - 50px);
background: #1a1a1a;
border-right: 1px solid #333;
padding: 15px;
z-index: 999;
overflow-y: auto;
transition: transform 0.25s ease;
transform: translateX(-100%);
}
body.light #leftPanel {
background: #ffffff;
border-color: #e0e0e0;
color: #333;
}
#leftPanel.expanded {
transform: translateX(0);
}
/* 主体内容 */
body {
background: #121212;
color: #e0e0e0;
padding: 70px 15px 30px 15px;
transition: all 0.25s ease;
min-height: 100vh;
}
body.light {
background: #f7f7f7;
color: #222;
}
body.sidebar-open {
padding-left: 275px;
}
/* 隐藏原始内容 */
h1, dl, h3, a { display: none !important; }
/* 右侧内容 */
#rightContent {
display: block !important;
width: 100%;
max-width: 800px;
margin: 0 auto;
}
/* 标题栏：点击返回上级 */
#rightTitle {
font-size: 18px;
color: #fff;
background: #1e1e1e;
padding: 12px 16px;
border-radius: 8px;
margin-bottom: 16px;
display: flex;
align-items: center;
cursor: pointer;
transition: background 0.2s;
}
#rightTitle:hover {
background: #2d2d2d;
}
body.light #rightTitle {
background: #fff;
color: #222;
}
#rightTitle::before { content: "📂"; margin-right: 10px; }
.subFolderBtn {
display: block;
padding: 12px 16px;
background: #1e1e1e;
color: #8ab4f8;
border-radius: 8px;
margin: 6px 0;
cursor: pointer;
font-weight: 500;
}
body.light .subFolderBtn {
background: #fff;
color: #1a73e8;
}
.subFolderBtn:hover { background: #2d2d2d; }
body.light .subFolderBtn:hover { background: #e8f0fe; }
.subFolderBtn::before { content: "📁"; margin-right: 8px; }
.rightLink {
display: block !important;
padding: 12px 16px;
background: #1e1e1e;
color: #e0e0e0;
border-radius: 8px;
margin: 6px 0;
text-decoration: none;
word-break: break-all;
}
body.light .rightLink {
background: #fff;
color: #222;
}
.rightLink:hover {
background: #2d2d2d;
color: #fff;
}
body.light .rightLink:hover {
background: #e8f0fe;
color: #111;
}
/* 左侧菜单按钮 */
.navBtn {
width: 100%;
padding: 8px 12px;
margin: 4px 0;
border-radius: 6px;
border: none;
background: transparent;
color: #ddd;
cursor: pointer;
text-align: left;
display: flex;
align-items: center;
gap: 6px;
}
body.light .navBtn {
color: #333;
}
.navBtn:hover { background: #2a2a2a; }
body.light .navBtn:hover { background: #e8f0fe; }
.navBtn.active {
background: #3676e6 !important;
color: #fff !important;
}
/* 强制缩进 100% 生效 */
.L1 { margin-left: 0px !important; }
.L2 { margin-left: 24px !important; }
.L3 { margin-left: 48px !important; }
.L4 { margin-left: 72px !important; }
/* 👇 基础箭头：白色 + 黑色轮廓（深蓝/浅蓝底都清晰）*/
.arrow {
color: #ffffff !important;
font-size: 12px;
transition: transform 0.2s;
user-select: none;
width: 14px;
text-align: center;
/* ✅ 关键：黑色阴影勾勒白色箭头，蓝底上“浮起来” */
text-shadow: 0 0 3px rgba(0, 0, 0, 0.8), 0 0 1px rgba(0, 0, 0, 0.5);
}
/* 浅色模式下的黑色箭头：需要白色轮廓，避免在浅蓝底上消失 */
body.light .arrow {
color: #000000 !important;
text-shadow: 0 0 2px rgba(255, 255, 255, 0.8), 0 0 1px rgba(255, 255, 255, 0.5);
}
/* 展开状态：蓝色箭头 + 白色光晕，蓝底上靠白色阴影突出 */
.arrow.open {
transform: rotate(90deg);
color: #3676e6 !important;
/* 白色外发光，保证蓝底 + 蓝箭头时依然清晰可见 */
text-shadow: 0 0 3px rgba(255, 255, 255, 0.9), 0 0 2px rgba(255, 255, 255, 0.6);
}
.subContainer { display: none; }
/* 响应式 */
@media (min-width: 768px) {
#leftPanel { transform: translateX(0); }
body { padding-left: 290px; }
}
@media (max-width: 767px) {
.navBtn { padding: 10px 12px !important; font-size: 16px !important; }
.subFolderBtn, .rightLink { padding: 14px 16px !important; font-size: 16px !important; }
#rightTitle { font-size: 20px !important; }
}
</style>
<script>
document.addEventListener('DOMContentLoaded', function(){
const topBar = document.createElement('div');
topBar.id = 'topBar';
const toggleBtn = document.createElement('button');
toggleBtn.className = 'topBtn';
toggleBtn.innerHTML = '☰';
const themeBtn = document.createElement('button');
themeBtn.className = 'topBtn';
themeBtn.innerHTML = '💡';
topBar.append(toggleBtn, themeBtn);
document.body.prepend(topBar);
const left = document.createElement('div');
left.id = 'leftPanel';
document.body.append(left);
const right = document.createElement('div');
right.id = 'rightContent';
document.body.append(right);
function checkScreen() {
const isPc = window.innerWidth >= 768;
left.classList.toggle('expanded', isPc);
document.body.classList.toggle('sidebar-open', isPc);
}
checkScreen();
window.addEventListener('resize', checkScreen);
toggleBtn.onclick = () => {
const show = left.classList.toggle('expanded');
document.body.classList.toggle('sidebar-open', show);
};
themeBtn.onclick = () => {
document.body.classList.toggle('light');
localStorage.setItem('lightMode', document.body.classList.contains('light'));
};
if (localStorage.getItem('lightMode') === 'true') {
document.body.classList.add('light');
}
const allFolders = document.querySelectorAll('h3');
const folderMap = new Map();
let lastActive = null;
let currentFolder = null;
let lastEnteredFolder = null;
allFolders.forEach(f => {
const dl = f.nextElementSibling;
const kids = dl ? Array.from(dl.querySelectorAll(':scope > DT > *')) : [];
const parentDL = f.closest('DL');
const parentH3 = parentDL ? parentDL.previousElementSibling : null;
folderMap.set(f, {
title: f.textContent.trim() || '文件夹',
dl: dl,
kids: kids,
parent: parentH3
});
});
// 强制修复缩进渲染
function build(parentList, container, depth = 1) {
parentList.forEach(f => {
const data = folderMap.get(f);
if (!data) return;
const wrap = document.createElement('div');
const arrow = document.createElement('span');
arrow.className = 'arrow';
arrow.textContent = '▶';
// 强制绑定层级缩进
const level = Math.min(depth, 4);
const btn = document.createElement('button');
btn.className = `navBtn L${level}`;
const icon = document.createElement('span');
icon.textContent = '📂';
btn.append(arrow, icon, document.createTextNode(data.title));
btn.folder = f;
const subWrap = document.createElement('div');
subWrap.className = 'subContainer';
const hasSub = data.kids.some(x => x.tagName === 'H3');
if (!hasSub) arrow.style.display = 'none';
arrow.onclick = e => {
e.stopPropagation();
const show = subWrap.style.display !== 'block';
subWrap.style.display = show ? 'block' : 'none';
arrow.classList.toggle('open', show);
};
btn.onclick = () => {
if (lastActive) lastActive.classList.remove('active');
btn.classList.add('active');
lastActive = btn;
showRight(f);
};
wrap.append(btn, subWrap);
container.append(wrap);
const subs = data.kids.filter(x => x.tagName === 'H3');
build(subs, subWrap, depth + 1);
});
}
function showRight(folder) {
currentFolder = folder;
const data = folderMap.get(folder);
let html = `<div id="rightTitle" onclick="goUpLevel()">${data.title}</div>`;
data.kids.forEach(el => {
if (el.tagName === 'H3') {
const sub = folderMap.get(el);
html += `<div class="subFolderBtn" onclick="goFolder(this)" data-folder-title="${sub.title}">${sub.title}</div>`;
} else if (el.tagName === 'A') {
const txt = el.textContent.trim() || el.href.replace(/^https?:\/\//, '').replace(/^www\./, '');
html += `<a class="rightLink" href="${el.href}" target="_blank">${txt}</a>`;
}
});
right.innerHTML = html;
// ✅ 修复：每次打开文件夹，右侧自动滚动到最顶部
window.scrollTo({ top: 0, behavior: 'smooth' });
}
window.goUpLevel = function() {
if (!currentFolder) return;
const data = folderMap.get(currentFolder);
if (!data.parent) return;
lastEnteredFolder = data.title;
const parentBtn = [...left.querySelectorAll('.navBtn')].find(b => b.folder === data.parent);
if (parentBtn) {
parentBtn.click();
setTimeout(() => {
const items = document.querySelectorAll('.subFolderBtn');
for (const item of items) {
if (item.textContent.trim() === lastEnteredFolder) {
item.scrollIntoView({
behavior: 'smooth',
block: 'center'
});
break;
}
}
}, 100);
}
};
window.goFolder = function(btn) {
const title = btn.textContent.trim();
const target = [...allFolders].find(f => f.textContent.trim() === title);
if (!target) return;
lastEnteredFolder = title;
const targetBtn = [...left.querySelectorAll('.navBtn')].find(b => b.folder === target);
if (targetBtn) {
let p = target.parentElement;
while (p && p.tagName === 'DL') {
const parentH3 = p.previousElementSibling;
if (parentH3 && parentH3.tagName === 'H3') {
const parentBtn = [...left.querySelectorAll('.navBtn')].find(b => b.folder === parentH3);
if (parentBtn) {
const parentSubWrap = parentBtn.nextElementSibling;
if (parentSubWrap) parentSubWrap.style.display = 'block';
const parentArrow = parentBtn.querySelector('.arrow');
if (parentArrow) parentArrow.classList.add('open');
}
}
p = p.parentElement;
}
targetBtn.click();
if (window.innerWidth < 768) {
left.classList.remove('expanded');
document.body.classList.remove('sidebar-open');
}
}
};
const roots = [...document.querySelectorAll('body > dl > dt > h3')];
build(roots, left, 1);
const first = left.querySelector('.navBtn');
if (first) first.click();
});
</script>
</head>
