惯性聚合 高效追踪和阅读你感兴趣的博客、新闻、科技资讯
阅读原文 在惯性聚合中打开

推荐订阅源

T
Troy Hunt's Blog
Last Week in AI
Last Week in AI
D
DataBreaches.Net
大猫的无限游戏
大猫的无限游戏
Hugging Face - Blog
Hugging Face - Blog
让小产品的独立变现更简单 - ezindie.com
让小产品的独立变现更简单 - ezindie.com
freeCodeCamp Programming Tutorials: Python, JavaScript, Git & More
Cyberwarzone
Cyberwarzone
Cyber Security Advisories - MS-ISAC
Cyber Security Advisories - MS-ISAC
WordPress大学
WordPress大学
Cisco Talos Blog
Cisco Talos Blog
Latest news
Latest news
月光博客
月光博客
博客园 - 司徒正美
C
CERT Recently Published Vulnerability Notes
L
LangChain Blog
Simon Willison's Weblog
Simon Willison's Weblog
The Register - Security
The Register - Security
T
The Blog of Author Tim Ferriss
V
V2EX
F
Fortinet All Blogs
AWS News Blog
AWS News Blog
T
Tor Project blog
V
Vulnerabilities – Threatpost
C
CXSECURITY Database RSS Feed - CXSecurity.com
cs.CL updates on arXiv.org
cs.CL updates on arXiv.org
小众软件
小众软件
L
Lohrmann on Cybersecurity
量子位
F
Full Disclosure
H
Hackread – Cybersecurity News, Data Breaches, AI and More
I
Intezer
NISL@THU
NISL@THU
奇客Solidot–传递最新科技情报
奇客Solidot–传递最新科技情报
Jina AI
Jina AI
Scott Helme
Scott Helme
D
Darknet – Hacking Tools, Hacker News & Cyber Security
C
Cybersecurity and Infrastructure Security Agency CISA
C
Cyber Attacks, Cyber Crime and Cyber Security
博客园 - 三生石上(FineUI控件)
Threat Intelligence Blog | Flashpoint
Threat Intelligence Blog | Flashpoint
Spread Privacy
Spread Privacy
N
Netflix TechBlog - Medium
P
Proofpoint News Feed
钛媒体:引领未来商业与生活新知
钛媒体:引领未来商业与生活新知
博客园_首页
P
Privacy & Cybersecurity Law Blog
T
Threat Research - Cisco Blogs
J
Java Code Geeks
S
Schneier on Security

LiuShen's Blog - 清羽飞扬

Cloudflare/Vercel项目推荐(6) | LiuShen vibe-coding个人实践 | LiuShen 建站四年,从Hexo换到Astro | LiuShen's Blog - 清羽飞扬 黔山赴夏,清风入怀 | LiuShen's Blog - 清羽飞扬 ChronoFrame - 一款优雅的瀑布流相册系统 | LiuShen's Blog - 清羽飞扬 年味 | LiuShen's Blog - 清羽飞扬 2025,清风已至,正帆向星海 | LiuShen's Blog - 清羽飞扬 部署一只麦麦QQ机器人 | LiuShen's Blog - 清羽飞扬 魔改笔记八:外挂标签及侧边栏美化 | LiuShen's Blog - 清羽飞扬 从Moments迁移到Ech0 | LiuShen's Blog - 清羽飞扬 Butterfly主题实现赞赏页面及侧边卡片 | LiuShen's Blog - 清羽飞扬 使用TinyAuth实现任意应用登录认证 | LiuShen's Blog - 清羽飞扬 不同姿势部署Anheyu-App应用 | LiuShen's Blog - 清羽飞扬 Casdoor强行兼容Artalk社交登录 | LiuShen's Blog - 清羽飞扬 血证未泯,山河已立 | LiuShen's Blog - 清羽飞扬 第三方1Panel应用商店不完全指北 | LiuShen's Blog - 清羽飞扬 循一缕风,入山偷得夏日凉 | LiuShen's Blog - 清羽飞扬 Forgejo及其Action自部署简明教程 | LiuShen's Blog - 清羽飞扬 西安·十几年后的初识 | LiuShen's Blog - 清羽飞扬 企业微信实用操作指南 | LiuShen's Blog - 清羽飞扬 浅谈AIGC论文检测 | LiuShen's Blog - 清羽飞扬
兰空图床深度美化 | LiuShen's Blog - 清羽飞扬
LiuShen · 2026-03-01 · via LiuShen's Blog - 清羽飞扬

兰空图床深度美化 封面图

碎碎念

好不容易放个假,一回到岗位还是觉得累。这个星期刚开始那几天还算轻松,可能大家都还没完全进入状态;到了后面两天,强度一下子就上来了。节前遗留的问题陆续暴露,屎山代码的各种“特性”也开始显现。大家只能靠熬夜硬撑着修,结果人越来越疲惫,写出来的新问题反而更多,直接陷入恶性循环。唉,只希望这种没日没夜的“会战”能早点结束。

上个月为了提高写代码的效率,我入手了一个 GitHub Copilot 套餐,一个月 10 美元。虽然不算便宜,但实际用下来确实挺顺手。趁着这段时间,也拿它去优化和美化一些零零碎碎的小项目,效果还不错。于是我就想到了兰空图床。现在的兰空图床界面确实有些朴素,加上官方已经停止维护,更让我萌生了自己动手美化的想法。

目前市面上还没有兰空图床开源版的现成美化方案,于是我决定自己尝试一把。借助 AI,其实很多想要的功能都能相对轻松地实现。最终也算是成功完成了这次美化改造,就整理出来和大家分享一下。

展示效果

分享之前,先简单展示一下优化后的效果。首先是登录页面。原先的登录页确实有些缺乏辨识度,我也吐槽过很久,这次算是彻底重做了一版,现在看起来顺眼多了。

登录页面
登录页面

在登录页左侧,我新增了一些信息模块,比如图床名称以及一段简洁的说明文字,让页面不再单调。整体风格偏简洁、细腻,也更符合我个人偏好的设计取向。

登录之后,原本是一个较为朴素的上传主页。这次我把上传组件整体重写了一遍,做了圆角化、扁平化和现代化处理,视觉上更轻盈,也更统一。

登录后的主页
登录后的主页

整体依旧延续绿色主题。相比登录页,这里的色彩更清淡一些,层次也更自然。对比原先版本,会明显感觉更有设计感,但又不会显得过度张扬。

进入控制台后,原来的黑色顶部栏我个人一直不太喜欢,这次也一并替换掉了。现在整体以浅色 UI 为主。由于原项目本身没有暗色模式的切换逻辑,这次就没有额外实现深色模式,目前的效果已经足够日常使用。

仪表盘
仪表盘

仪表盘部分也做了统一优化,卡片样式、间距、圆角和阴影都重新调整,整体更加协调。其他页面基本沿用了同样的设计语言,这里就不一一展开了,最后再简单展示一下优化后的控制台界面。

控制台
控制台

整体来说,这次改造更像是一次“自用向”的精修版本,但做完之后的观感和体验,确实提升不少,如果对UI有较高要求的,强烈建议尝试一波!

教程

首先放上仓库地址!

站外引用 · 引用站外地址,不保证站点的可用性和安全性LSKY-Pro-LiuShengithub.com@willow-god

原始仓库已经不再更新,但是仍然要确认一下版本是否是v2,如果是古早的v1版本请离开该教程~

备份

该教程涉及强制覆盖,请提前备份好!备份并不意味着难度高,甚至我认为本次魔改风险可控,但是仍然建议备份,这是魔改前的基本素养,如果出现部分兼容性问题,请用原始备份文件重新覆盖文件以恢复到原有的模样。

如果你是docker用户,应该将整个源码都映射到了本地文件,打开您的docker-compose或当时安装的docker命令,找到挂载路径,找到如下目录:

1Panel兰空图床路径
1Panel兰空图床路径

如果你也是1Panel,那么可以直接按照煮啵的文件路径找过来。

然后压缩整个文件夹,保证在覆盖后,如果出现不可解决的问题,可以用原先的备份恢复,比如煮啵,在上一层路径,直接选中data文件夹,打包一份留作备用。

打包备份
打包备份

留作备用,下面正式开始教程。

源码部署美化

如果你使用的是源码方式部署的兰空图床,并且 PHP 环境运行在本地服务器上,可以通过直接覆盖文件的方式完成美化。

⚠️ 注意:不要先删除原项目目录再整体替换。 兰空图床在运行过程中会生成部分运行文件(如缓存、配置、上传目录等)。如果你直接删除原目录再覆盖,可能会导致这些文件丢失,从而出现无法启动或异常报错的情况。

正确的做法是:在服务器的其他位置克隆本仓库,然后将文件覆盖到现有项目目录中。

首先,在服务器任意目录克隆仓库:

git clone https://github.com/willow-god/LSKY-Pro-LiuShen
cd ./LSKY-Pro-LiuShen

确认当前目录是美化版本的项目根目录后,使用 cp 命令将文件覆盖到你现有的兰空图床项目路径下:

cp -rf ./* /home/to/your/lsky/project/root/

说明一下这条命令的逻辑:

  • 如果目标目录中存在同名文件,则会直接覆盖
  • 如果不存在,则自动复制新增文件
  • 原有运行生成的文件不会被删除

这样既能完成界面美化替换,又不会影响原有运行数据。

覆盖完成后,如果看不到美化后的效果,建议:

  1. 清理一下缓存(如果使用了缓存机制)
  2. 检查目录权限是否正常(尤其是 storage 和 uploads 目录)
  3. 重启 PHP-FPM 或 Web 服务(如 Nginx / Apache)

最后刷新浏览器(必要时强制刷新缓存),如果不出意外,即可看到新的美化,如果出了意外,请用原先的备份回退。

Docker部署美化

实际上,目前市面上大多数兰空图床Docker部署方式(包括在 1Panel 应用商店中安装的版本)都会将项目源码目录挂载到宿主机,会把项目根目录映射到本地某个文件夹。

这意味着——本质上和源码部署没有区别

只要你找到当前容器挂载到宿主机的项目目录,就可以按照前面“源码部署”的方式进行覆盖替换:

  1. 在服务器其他位置克隆本仓库
  2. 使用 cp -rf 覆盖到兰空图床挂载的项目目录
  3. 不要删除原目录,只做覆盖操作

替换完成后,甚至不需要重启,应该就可以看到效果,如果效果不符合预期,建议:

  • 重启对应的容器(docker restart 容器名docker compose restart
  • 如果有缓存机制,清理缓存
  • 强制刷新浏览器缓存

全新部署

作为基于兰空图床的魔改版本,本项目同样支持直接通过 Docker 进行全新部署。

前面提到的迁移或升级场景,是因为源码已经挂载到宿主机外侧,单纯替换镜像意义不大;但如果是全新安装,那就简单很多——可以直接使用本镜像启动容器。

由于本美化版本并未修改任何核心业务逻辑,只是对界面层进行优化,因此部署方式与原版完全一致。你只需要将原先使用的镜像替换为:

willowgod/lsky-liushen:latest

其他 docker rundocker compose 配置基本无需改动,按照原版兰空图床的部署流程执行即可。

关于具体部署步骤,市面上的教程已经非常丰富,而且比我单独写一份更详细、更全面。这里整理几篇常见教程供参考,建议优先选择Docker方式部署,结构清晰、迁移方便、后期维护也更省心。当然,如果你习惯源码部署或宝塔面板等方式,也完全可以自行选择。

站外引用 · 引用站外地址,不保证站点的可用性和安全性Lsky-pro:官方源码部署兰空图床 站外引用 · 引用站外地址,不保证站点的可用性和安全性【Docker】配置lsky pro兰空图床暮雪年华 站外引用 · 引用站外地址,不保证站点的可用性和安全性使用Docker Compose搭建Lsky Pro图床zhihu.com@Appleex

以上教程仅供参考。如果在部署或替换过程中遇到问题,欢迎在评论区联系煮啵!不过,如果能自己动手部署成功一次是最好的哦!

总结

AI 时代确实让很多想法的落地成本大幅降低。过去需要反复查资料、啃文档、调半天Bug才能实现的功能,现在借助模型辅助,往往可以更快搭出雏形。某种程度上说,我们每个人都像是带着一支“数字团队”在做事——只要思路清晰,就能迅速推进项目。这是一个变化极快的时代,几乎每天都有新的工具和能力出现。

一些国产大模型的进步也很明显,比如GLM-5.0的发布,让编程这件事不再显得那么遥不可及。技术门槛并没有消失,但表达想法和实现想法之间的距离,确实被缩短了。

不过话说回来,代码能力依然重要。真正关键的,是理解问题、拆解需求、判断方案优劣,以及知道AI给出的结果是否靠谱。与其说程序员不需要写代码了,不如说未来更重要的是——学会高效利用AI、驾驭工具、提升判断力。谁能把工具用好,谁就能走得更远。

后面我还要继续美化其他程序啦!我们下期见!

每日一图

图片来自哲风壁纸

愤怒的小猫
愤怒的小猫

我的博客即将同步至腾讯云开发者社区,邀请大家一同入驻:https://cloud.tencent.com/developer/support-plan?invite_code=2mnsl5fvem68o