从零开始，简单模仿写出社交账户导航页的历程
真的，是从零开始吗
一年前，我偶然看到我喜欢的一些日本艺人的 instagram 账户页面上面的推广链接用了 Linktree 的服务，觉得这种把自己的账户用这样的方式集中到一起的方式比较便于他人访问。然而 Linktree 的一些高级功能需要付费，并且似乎看上去最基本的功能也能自己实现，于是就想自己手动写一个类似功能的导航页面出来，顺便学习一下 HTML。
而这样的导航页的功能非常简单：一个头像，一个账号，几个导航用的按钮就组成了这个网页的最初雏形。（如下图所示）
然而作为完全没学过前端（其实后端也没学过）的我，独立完成一个其他人已经做过的商业化程序实在是有点艰难。因为，首先用什么开发就成了一个问题。
对于最近比较新的框架我只知道两个，一个 Bootstrap，一个 Vue。前者常见于互联网，而后者常见于互联网网课广告。
然后我又翻了翻各自的开发文档，发现 Vue 似乎比 Bootstrap 难了不知道多少，遂直接选择了 Bootstrap。
最后，经过不断翻各种文档的努力，我终于用三十三行代码完成了网页的第一个雏形（如上图所示）。把这个网页做出来后，手动填上我要放的链接，再把网页挂到服务器上就完成了我的第一个纯手写的个人主页。
虽然只是实现了最简单的功能并满足了我的最基本需要，我还是希望在此之上能看起来更舒服一点。于是，在经历过今年的高考之后我便开始尝试实现下一个版本的导航页面了。
而这个页面我有以下几点需求：
* 更紧凑一点的按钮
* 暗黑模式和更好看点的配色
* 升级到 Bootstrap 4
首先是这条“更紧凑的按钮”。在 Bootstrap 中，块级按钮直接会杵到页面的两端，不是特别美观。而得益于 Bootstrap 比较强大的响应式网格系统，解决方法也十分简单：在这12列的网格系统中（如下图 1），只需要把块级按钮所在的容器（container）分为三块，仅中间块放置块级按钮并占据10列，左右两块空白块分别占据剩下的两列，我们就得到了一个更为紧凑的按钮布局。
其次是暗黑模式，现代人的用眼压力越来越大，在夜间看东西的时候也要少一份光明，多一分黑暗。而在这方面 W3C 2也非常贴心，在 2020 年 7 月 31 日发布的 Media Queries Level 5 标准草案 中就提及了一个新的属性：prefers-color-scheme，其浏览器兼容情况如下图所示3。
有了这个属性，我们就可以让浏览器获取用户系统的情况（即是否打开暗黑模式），并对此作出反应。例如在<body>元素里设置一个“bgc”的类（随便取的名字，意为 background-color 的简称），在 CSS 里“bgc”这个类设定的是background-color="black"。当浏览器检测到用户系统没有打开暗黑模式时就不使用“bgc”这个类，页面背景颜色就是白色；而当用户系统打开暗黑模式时就使用“bgc”这个类，页面背景颜色就变成了黑色。配置好了，就是以下的样子。
而最后一个目标，就是将一开始用的 Bootstrap 3 更新到 Bootstrap 4。
将旧版本语言写成的东西迁移到新版本语言一般都会非常令人难受，不过在我这个页面里也没有遇到什么特别多的障碍——主要是我这个页面也比较简单。也因此我只有一个地方需要做出改动：头像图片。
Bootstrap 4 对于图片的插入似乎和旧版相比有着全新的方式，响应式图片布局的类从过去的img-responsive变为了img-fluid，图片居中的类也从原来的只用 center-block变成了 mx-auto 和 d-block4，一改就完事了。
综上，最后我终于就写出来一个尚且能看还能用的导航页面，虽然每次添加链接都比较麻烦（因为不会后端），但似乎还能继续扩展功能（例如统计功能）。目前的想法是用服务器搭建一个短链接的程序（例如现成的 yourls），然后在这个页面的链接里使用短链接跳转，并在短链接的后台里查看点击的统计，不过那可能就是后话了。
如果你对我做的这个小页面感兴趣的话，这个页面目前已经在 GitHub 上开源了，欢迎提出建议，也欢迎访问我的网站看我实际的应用。
注释：
1 网格系统图片截图于 W3CSchool。https://www.w3schools.com/bootstrap4/bootstrap_grid_basic.asp ↩
2 全称“World Wide Web Consortium”，中文名为“万维网联盟”，是万维网的主要国际标准组织。https://www.w3.org ↩
3 兼容情况截图于 MDN。https://developer.mozilla.org/zh-CN/docs/Web/CSS/@media/prefers-color-scheme ↩
4 参考自 Stack Overflow。http://stackoverflow.com/questions/53115746/how-can-i-overwrite-the-style-of-primary-button-in-bootstrap ↩