老文物修复计划：《鞠骑入坑指南》
前言
偶然在热搜上看到总选的消息，勾起了我饭塞纳河的遥远记忆。一晃这么多年都过去了，从当年百分百认清入圈选手到现在榜单上出现了很多我没见过的新面孔。虽然舞台上的小偶像来来往往，老王依旧成功割着新一茬的韭菜，这变与不变的对比颇让人有几分感慨。很久没有关注小鞠的消息，搜了新cut她的歌声还是很好听，本音饭一本满足。
想来作为小粉丝，我其实不太“合格”。安利打投刷榜撕对家约等于没有我这号粉丝，除去升堂前总选投过的票钱，或许可以归入彻彻底底的白x怪。曾经说要“向全世界安利小鞠”的豪言壮语终究随着年龄的增长变成青春期的中二发言。要说到用心做过什么，可能就是大一写的一份以小偶像为主题的 Web 前端开发结课作业了。说来惭愧，当时初学网页设计的我写代码的时间还没有用 Photoshop 的时间长，这份网页现在看来是相当简陋，至于代码本身或许可以称之为丑陋（页面全靠PS上分）。但它与众不同的纪念意义促使我想要修复它并时不时能打开看看，在尽可能保留原样的条件下获得一份更灵活的：鞠骑入坑指南。关于饭小偶像更多的自言自语已经写在网页本身“作者的话”里了，以下就开始文物的修复过程吧！
简单修复过程
微调代码结构
原本的网页不仅是本地开发，指没有用到服务器的纯文本开发。而且每个页面都有自己的文件夹，文件夹下对应着各自的图片、音视频、css 资源。仔细查看之后发现资源之间重合度很高，因为每个页面的格式都基本类似。真不知道当时我是如何在 n 个页面之间保持样式一致的😓本着不大改的前提（表面是说尊重原版实则是不想太费事hhh），还是沿用之前的结构。但把资源都整合在一起，最重要的是统一了大家的css！简单修缮了一下代码里写得奇奇怪怪的地方，尤其是一些 h5 已经不支持的过期语法。顺带新增一个“作者的话”，代码结构基本就修改完成了。
调整布局样式
原本的标签长宽都是直接写死像素值，换个分辨率基本不能正常浏览。甚至在提交作业的说明里，我还特别备注了PC端缩放 75% 再观看🤣既然是要修复，那肯定得处理一下这个问题。通过把一堆堆绝对像素改成相对比例，以及调整了某些标签的布局，基本可以在 PC 端和移动端进行正常浏览。
分离静态资源
原本准备的图片和音视频都太大了，整个文件夹大小直逼 50MB。于是先压缩了一些音视频；然后将这些多媒体资源传到 OSS 上，只在网页中保存资源链接。文件夹大小一下子就只剩 80KB 了，NICE！本来想进一步做一个 CDN 加速，但是我的域名取消备案之后新备案还没做好只能作罢……备案这档子事真的好麻烦。
部署到Github Page
自己的服务器隔几年就要换一个窝，不是很稳定。静态网站还是直接放在 Github Page 上最舒心，顺便也把代码存了。新添加一个二级域名，做一下 CNAME 解析就搞定了。
页面说明
虽说这个网页作为我写过的第一个网页，已经简单得不能再简单了……但还是简要说明一下，以免遗漏任何一个功能！👀
- 首页：emmm 确实没什么太多好说的，就是可能要自己按喇叭播一下背景音。Chrome 改版之后无法自动播放
- 简介：让我想想有什么可说的🤔众所周知唐朝建立于公元618年，所以小鞠的生日是？
- 歌姬：这页可能是整个网页唯一有点技术含量的地方了：第一排白色按钮控制下方的歌曲框，点击按钮切换不同风格的歌曲；然后在对应的歌曲框中点击想要试听的歌曲片段。《缘尽世间》谁的入坑曲！以及我图片真的有很用心在挑，毕竟用 Photoshop 的时间比写代码还长。
- 舞者：原有的视频资源改换成b站的视频嵌入。点击视频下方的🤍可以打开原视频链接，🤍也会变成❤️
- 其它：里面都是一些非常平常的小事。我当时做这个板块其实是想表达小偶像也是和我们一样会开心会难过的普通人，在我们想要批判别人，尤其是那些我们没有实际接触过的人的时候，告诉自己要宽容。最后点击感谢信会跳出一封致谢，这就是原本的全部内容。
- 作者的话：这个页面是新加的，作为对整个网页的简单总结。内容的最后一行记录了我的入坑时长，希望它可以一直增加下去。