📺 引言：为什么我选择自建个人导航主页？

平时遇到好玩有趣的网站，都会想着收藏下来。试过多种收藏网址的方式，包括浏览器书签、文档记录等，但跨设备同步和操作繁琐始终是痛点。经过一番探索，我选择了基于 AList 生态的 OpenList 作为我的个人导航主页。它不仅能整合我所有的网盘资源，还可以作为一个轻量化的浏览器主页。

然而，在实际部署过程中，尤其是使用子目录反代（如 /openlist）后，原本简洁的界面在手机端出现了一些让我这个“强迫症”无法忍受的瑕疵。

🔍 痛点发现：消失的“优雅感”

在默认情况下，OpenList 的底部会显示 Powered by OpenList | Login。为了方便管理，我希望加入“管理”和“我的博客”跳转链接。

但在调优过程中，我遇到了三个麻烦：

视觉冗余：原生底部与自定义内容垂直堆叠，导致手机端显示为两行。

重复注入：不当的 Nginx sub_filter 替换经常导致页面出现两个重复的链接。

环境兼容性：移动端 Safari 对部分样式的渲染差异，使得底部显得非常拥挤。

🛠️ 深度折腾：从 Nginx 到前端“暴力”覆盖

起初，我尝试在反向代理层（Nginx）进行字符串替换，但由于 Gzip 压缩等原因，注入往往失效。于是，我决定回归 OpenList 本身，利用其强大的 “自定义内容” 功能，通过 CSS 优先级机制进行“暴力”调优。

1. 物理消失：隐藏原生组件

要解决“两行显示”的问题，最快的方法不是修改它，而是隐藏它。利用 CSS 的 display: none !important;，我可以让原生底部彻底不占空间。

2. 重新定义：纯手工打造单行底部

隐藏原生组件后，我在自定义区域重新手写了一行 HTML。为了保证在窄屏手机上也不换行，我严格控制了文字间距和分隔符。

🚀 最终方案：一行代码实现极致简洁

如果您也遇到了类似的问题，可以直接在 OpenList 管理后台 -> 设置 -> 全局 -> 自定义内容 中填入以下代码：

<style>
  /* 强制隐藏原生底部，为自定义内容腾出空间 */
  .footer { display: none !important; }
</style>

<div style="text-align:center; padding:15px 0; font-size:13px; color:#888; line-height:1.5;">
  <span>Powered by OpenList</span>
  <span style="margin: 0 8px; color: #ddd;">|</span>
  <a href="/openlist/@manage" style="color:#ff9800; text-decoration:none;">管理</a>
  <span style="margin: 0 8px; color: #ddd;">|</span>
</div>

💡 运维复盘笔记

清理 CDN 缓存：如果您使用了 Cloudflare，修改后一定要点击 Purge Everything，否则手机端看到的永远是缓存的旧样式。

路径细节：在子目录环境下，链接一定要写相对路径（如 /openlist/@manage）或完整的绝对路径，避免 404。

✍️ 写在最后

折腾个人主页的乐趣，往往不在于它功能有多强大，而是在于通过一点一滴的调优，让它完全符合自己的使用直觉。希望这个简单的底部调优方案，能帮到追求极致简洁的你。