夜雨聆风D 盘有什么、E 盘有什么，以前想不起来，现在打开浏览器就全看见了。点一下标题，文件直接打开——比 Windows 自带的文件管理器好用十倍。关键是：零基础、不用装软件、不用写一行代码。
你是不是也有这种感觉——
电脑用了几年，文件越攒越多。D 盘、E 盘、桌面、下载文件夹……到处都是资料。想找个东西，要么靠"搜索"碰运气，要么打开一个一个文件夹翻。
你试过整理。建了一堆文件夹，分类命名，告诉自己"这次一定要保持整洁"。结果两周后又乱了。
我也一样。直到我花了一个下午，做了一件事：把我的文件变成了一张网页。
不是开玩笑。就是那种你每天在浏览器里打开的网页——有标题栏、有分类标签、有搜索框、有好看的卡片。每个卡片对应一个文件或文件夹，点一下标题就直接打开。
效果是这样的：
打开浏览器 → 看到 "系统备份 / 软件工具 / 学习资料 / 个人文件" 几个分类点一个分类 → 只看那一类搜索关键词 → 实时过滤看到想找的东西 → 点一下 → 文件直接打开
整个过程不需要服务器、不需要数据库、不需要会写代码。一个 HTML 文件就够了。
效果直接看图：
而且可以搜索，效果图是：
这篇文章适合谁
• 电脑上文件越来越多，找起来头疼的人 • 想把自己的资料整理成"个人门户"但不会写代码的人 • 试过各种文件管理软件，觉得太复杂的人
如果你符合上面任意一条，那花 15 分钟跟着做一遍，收获会很大。
原理一句话
一个 HTML 文件 + Windows 的 file:// 协议 = 你的个人文件门户。
HTML 文件里的每一个卡片链接，指向的是你电脑本地的文件路径。
点击标题 → 浏览器自动调用系统打开文件/文件夹 → 跟双击打开一模一样。
全部零依赖，不安装任何软件。
准备工作
你需要：
• Windows 电脑一台（Win10 或 Win11 都可以） • 一个记事本（系统自带的"记事本"就行，也可以用 VS Code） • 想整理的文件夹（比如 D 盘的"软件备份"，E 盘的各种资料）
💡 这个教程用的是 WSL（Windows Subsystem for Linux）环境来做，但如果你只在 Windows 下操作，完全不影响——所有原理和步骤一模一样。
第一步：想清楚你要整理什么
打开"此电脑"，先看看你的盘里有什么。
比如我的电脑：
你也可以列个表，不需要多精确，心里有个大概分类就行。
分类建议：系统备份 / 软件工具 / 学习资料 / 工作文件 / 个人笔记 / 创作产出 / 其他
第二步：新建一个文件夹，放你的门户网页
在任意位置新建一个文件夹，名字取好记的，比如：
E:\个人门户\这个文件夹专门放你的门户网页文件。
第三步：写你的门户 HTML 文件
打开记事本，复制下面这段代码进去。
如果感觉代码是天书，或者一点代码也不懂，没有关系，跳过去，结尾有彩蛋，告诉你不用写代码，也不用复制代码，直接提出要求就可以完成任务。
此处不懂的可以跳过去。
⚠️ 重要：这段代码你需要根据自己的文件路径来修改。教程里会用我的文件做示例，你用的时候要把路径换成你自己的。
<!DOCTYPE html><html lang="zh-CN"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>我的个人门户</title><style>/* ===== 基础样式 ===== */*{margin:0;padding:0;box-sizing:border-box}body{ font-family:-apple-system,"PingFang SC","Microsoft YaHei",sans-serif; background:#f5f6fa;color:#2d3436;height:100vh;overflow:hidden; display:flex;flex-direction:column;}/* ===== 顶部标题 ===== */.header{ background:linear-gradient(135deg,#2d3436,#636e72); padding:18px 32px 12px;text-align:center;color:#fff;}.header h1{font-size:22px;font-weight:600}.header h1 span{color:#fdcb6e}.header .sub{font-size:13px;opacity:.55;margin-top:2px}/* ===== 搜索栏 ===== */.controls-bar{ display:flex;align-items:center;gap:12px; padding:8px 32px 0;}.search-box{ flex:1;max-width:320px;padding:7px 14px; border:1.5px solid #dfe6e9;border-radius:8px;font-size:13px; outline:none;}.search-box:focus{border-color:#636e72}.stats{font-size:12px;color:#636e72}/* ===== 分类标签 ===== */.tabs-bar{ display:flex;flex-wrap:wrap;gap:5px;padding:6px 32px 0;}.tab{ padding:4px 16px;border-radius:14px;font-size:12px;cursor:pointer; border:1.5px solid #dfe6e9;background:#fff;color:#636e72; user-select:none;}.tab:hover{border-color:#636e72;color:#2d3436}.tab.active{background:#2d3436;color:#fff;border-color:#2d3436}/* ===== 卡片区域 ===== */.container{flex:1;overflow-y:auto;padding:10px 32px 8px}.grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(380px,1fr)); gap:10px;}/* ===== 每个卡片 ===== */.card{ background:#fff;border-radius:10px;padding:16px 18px; box-shadow:0 2px 8px rgba(0,0,0,.04);border:1px solid #f0f0f0; display:flex;gap:14px;}.card:hover{box-shadow:0 4px 16px rgba(0,0,0,.07)}.card-icon{ width:40px;height:40px;border-radius:9px; display:flex;align-items:center;justify-content:center; font-size:20px;background:#dfe6e9;}.card-body{flex:1}.card-top{display:flex;align-items:center;gap:8px}.card-title{ font-size:14px;font-weight:600;color:#2d3436; text-decoration:none;max-width:140px; white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}.card-title:hover{color:#636e72;text-decoration:underline}.card-bottom{ display:flex;align-items:center;justify-content:space-between;margin-top:5px;}.card-desc{font-size:13px;color:#b2bec3}.tag{ font-size:10px;padding:2px 10px;border-radius:10px; background:#dfe6e9;color:#636e72;}.btn-open{ padding:4px 14px;font-size:12px;border-radius:6px; border:1px solid #dfe6e9;background:#f8f9fa;color:#636e72; text-decoration:none;}.btn-open:hover{background:#2d3436;color:#fff}</style></head><body><div class="header"> <h1>📁 <span>我的</span>文件门户</h1> <div class="sub">所有文件 · 一目了然 · 点击即达</div></div><div class="controls-bar"> <input class="search-box" id="searchInput" type="text" placeholder="🔍 搜索..." oninput="filterCards()"> <span class="stats" id="stats">共 0 项</span></div><div class="tabs-bar" id="tabsBar"></div><div class="container"> <div class="grid" id="cardGrid"></div></div><script>// ★★★ 从这里开始，把你的文件信息填进去 ★★★const data = [ // 格式说明： // {id:序号, cat:'分类key', icon:'图标', title:'名称', desc:'描述', path:'文件路径', tag:'分类名'}, // // 分类key（cat）只能填以下之一： // system(系统备份) / tools(软件工具) / study(学习资料) / work(工作文件) / notes(个人笔记) / create(创作产出) / other(其他) // // path 填写 Windows 文件路径，格式是 file:///盘符:/路径 // 例如：file:///D:/软件备份/Everything-1.4.1.1032.x64/ // 例如：file:///E:/学习资料/Python教程.pdf // ===== 在这里替换成你自己的文件 ===== {id:1, cat:'tools', icon:'🛠️', title:'示例：我的常用软件', desc:'放一些安装包和工具', path:'file:///D:/软件备份/', tag:'软件工具'}, {id:2, cat:'study', icon:'📚', title:'示例：学习资料', desc:'课程视频、电子书等', path:'file:///E:/学习资料/', tag:'学习资料'}, // ↑ 删掉上面的示例，换成你自己的 ↓];// ===== 分类定义（可以按需增删） =====const categories = [ {key:'all', label:'🏠 全部'}, {key:'system', label:'🖥️ 系统备份'}, {key:'tools', label:'🛠️ 软件工具'}, {key:'study', label:'📚 学习资料'}, {key:'work', label:'👤 工作文件'}, {key:'notes', label:'📓 个人笔记'}, {key:'create', label:'✍️ 创作产出'}, {key:'other', label:'📦 其他'},];// ===== 以下代码不用动 =====let currentCat='all';function renderTabs(){ document.getElementById('tabsBar').innerHTML=categories.map(c=> `<div class="tab${c.key===currentCat?' active':''}" onclick="switchTab('${c.key}')">${c.label}</div>` ).join('');}function switchTab(k){currentCat=k;renderTabs();filterCards()}function filterCards(){ const q=document.getElementById('searchInput').value.trim().toLowerCase(); const f=data.filter(d=>{ if(currentCat!=='all'&&d.cat!==currentCat)return false; if(q&&!d.title.toLowerCase().includes(q)&&!d.desc.toLowerCase().includes(q)&&!d.tag.includes(q))return false; return true; }); const g=document.getElementById('cardGrid'); if(f.length===0){g.className='grid empty-state';g.innerHTML='🔍 没有匹配的内容';return} g.className='grid'; g.innerHTML=f.map(d=>`<div class="card"> <div class="card-icon">${d.icon}</div> <div class="card-body"> <div class="card-top"> <a class="card-title" href="${d.path}" target="_blank" title="${d.title}">${d.title}</a> <span class="tag">${d.tag}</span> </div> <div class="card-bottom"> <span class="card-desc">${d.desc}</span> <a class="btn-open" href="${d.path}" target="_blank">📂 打开</a> </div> </div> </div>`).join(''); document.getElementById('stats').textContent=`共 ${f.length} 项`;}renderTabs();filterCards();</script></body></html>⚠️ 替换路径时要注意：Windows 路径用
file:///开头，然后跟盘符大写+冒号。
• 正确： file:///D:/软件备份/• 正确： file:///E:/学习资料/报告.pdf• 文件夹路径末尾要加 /，文件路径不加
复制完代码后，粘贴到记事本，然后点击 文件 → 另存为。
在弹出窗口里：
1. 位置选择 E:\个人门户\2. 文件名填 index.html3. 编码选择 UTF-8（非常重要，不然中文会乱码） 4. 点击保存
第四步：添加桌面快捷方式（方便以后打开）
在桌面空白处 右键 → 新建 → 文本文档，然后把文件名改成：
个人门户.url⚠️ 如果看不到文件扩展名（.txt），先打开文件夹窗口，点击顶部的"查看"，勾选"文件扩展名"。
然后 右键点击这个文件 → 打开方式 → 记事本，粘贴以下内容：
[InternetShortcut]URL=file:///E:/个人门户/index.htmlIconIndex=0保存后，双击这个文件就会用浏览器打开你的个人门户了。
第五步：双指点击，享受成果
双击桌面的"个人门户"图标（或者 E:\个人门户\index.html），浏览器打开后，你会看到：
• 顶部的漂亮标题栏 • 搜索框（输入关键词实时过滤） • 分类标签（点击切换分类） • 所有文件的卡片一目了然 • 点击任意卡片的标题或"打开"按钮 → 直接打开对应的文件或文件夹
进阶技巧
1. 把门户设为浏览器主页
打开浏览器设置 → 启动时 → 添加新页面 → 输入 file:///E:/个人门户/index.html
每次打开浏览器，第一眼就是你的文件总览。
2. 在手机上查看（局域网内）
这需要一点点额外设置，适合想进一步探索的朋友。
安装一个简单的 HTTP 服务器工具（比如 HFS - HTTP File Server），把你的 E:\个人门户\ 文件夹共享出来，手机在同个 Wi-Fi 下就能访问。
3. 定期更新内容
每当你在电脑里加了新文件、新项目，顺手打开 index.html 在 data 数组里加一条记录就行。养成习惯后，你的门户会越来越丰富。
可能遇到的问题
Q：点卡片没反应，或者打不开文件？A：检查路径格式。file:/// 后面必须是 盘符:/，比如 file:///D:/。路径里有中文和空格都没关系，浏览器会自动处理。
Q：浏览器提示"不允许访问本地文件"？A：Chrome 有时会限制 file:// 协议。解决办法：
• 用 Edge 浏览器 打开（微软 Edge 没有这个限制） • 或者把文件拖到 Chrome 窗口里打开
Q：添加很多文件后页面很长？A：页面会自动根据屏幕宽度调整列数。宽屏出 4-5 列，窄屏出 2-3 列。
写在最后
这个方法的本质特别简单：把文件路径做成一张网页导航。
不需要服务器、不需要数据库、不需要会写代码。一个 HTML 文件，一个记事本，15 分钟。
说实话，我见过很多人花大量时间去研究各种文件管理软件——Total Commander、Everything、XYplorer、……这些工具本身都很好，但对于"我想一眼看到我电脑里所有东西"这个需求来说，它们都太重了。
一张网页就够了。
当你打开浏览器就能看到自己所有文件的"全景图"，那种感觉很像把乱七八糟的书桌收拾干净——东西没少，但心里敞亮多了。
你可以把这篇文章转发给那个"电脑跟垃圾场一样"的朋友 🌟
最后的最后：彩蛋来了
如果真的是感觉前面的还是太复杂，用hermes agent或者WorkBuddy，只需要告诉它：
大约不到15分钟，就可以看到自己的成果了。
现在就去试试，15 分钟后你会回来感谢自己的。
有用的话一键三连，关注收藏转发，让更多人告别文件焦虑 👇
