2018年9月3日星期一

把我的个人网站推倒重来（Part 2 - 用 Bootstrap 做移动网页）

配置好 Harp 做静态网站构建后，就可以开始做网页了。上一个版本的个人网站样式是我自己设计的，当年用的还是 Macromedia/Adobe Fireworks，做出来一个 PNG 文件然后导出为不同的小图片。这次我也有考虑过要不要自己重新设计一个新的样式，但考虑到新设计不如解决其他几大问题重要，于是决定推迟样式设计。现在的计划是，先用 Bootstrap 解决绝大部分的问题，将来有时间重新设计样式了再做成 Bootstrap 主题。

导航栏

我的个人网站对组件的需求很简单：

  1. 要有一个导航栏，显示「首页」、「简历」、「项目」、「文章」。过去后面两项是「作品」和「更多」，我觉得改成新的名字会更贴近我现在能展示的内容。
  2. 要有一个语言切换菜单，能在英文和中文之间切换。过去我还区分繁体中文和简体中文，现在决定框架上要做到支持任意多的语言，但首要目标是支持英文和中文。

这两项需求对 Bootstrap 来说不是什么难事，直接扔一个 navbar 上去就解决问题了。首先把 4 大页面放在 navbar 上，然后再加一个选择语言的下拉菜单显示 2 种语言。因为 Bootstrap 内置了移动网页的适配，navbar 移动浏览器上会自动变成一个可缩放的菜单，完全不需要我做任何优化。

内容分栏

不同的页面有不同的分栏需求，首页左侧只显示大头照，简历页的每一项左侧时间右侧详情。Bootstrap 的 grid system 能够很好地解决我的问题。为了进一步优化不同尺寸屏幕上的体验，我又针对不同屏幕尺寸做了不同的布局，借助 Bootstrap 的 responsive breakpoint 这超级容易实现。

首先，分栏仅对宽度至少有 768px 的屏幕生效，这对应 Bootstrap 中 md (medium) 的定义。然后所有分栏的 CSS 类都会加上 md 限定条件，例如 col-md-4、col-md-8。尺寸小于 md 定义的屏幕，统统只会看到一栏布局，首页就会把我的头像放上面，简历页也会把时间放在详情上面。

首页里面的「联系方式」用到了分栏内嵌分栏，这个分栏无论屏幕大小都会存在。我想要尽力保证美观的前提下不产生换行，然而每一栏都很窄，为此我要针对多种不同的屏幕尺寸按不同的比例来分栏了：col-lg-3 col-sm-4 col-5。这一行代码的意思是：这一栏在大屏幕时宽度为 3/12、中屏幕时为 4/12、默认（小屏幕）时为 5/12。（Bootstrap grid system 把屏幕分成 12 栏，所以分母永远是 12。）

字体大小

Bootstrap 默认的 h1 到 h6 字体都挺大的。因为我用 h2 和 h3 做小节标题，但又不希望出现巨型的文字，所以选择了把 h2 和 h3 的尺寸调小。在 md 或以上屏幕上，因为存在分栏布局，内容条例已经很清晰，h2 和 h3 大小可以很接近正文大小。在更小的屏幕上，我还是需要依赖它们来划分小节的，大小跟正文太过接近反而会把人弄晕。为此我特意写了个很小的 CSS 文件来调整字体大小：

h2 {
  font-size: 2em;
}
h3 {
  font-size: 1.5em;
}

@media (min-width: 768px) {
  h2 {
    font-size: 1.5em;
  }
  h3 {
    font-size: 1em;
  }
}

理想的做法是写 Sass 而非 CSS，然后用 @include media-breakpoint-up(md) 而非 @media (min-width: 768px)，这样可以保证我的代码跟 Bootstrap 的代码同步。Harp 是支持编译 Sass 文件的，但它不支持 Bootstrap 所依赖的 Autoprefixer，不做这一步就意味着 -webkit- 这类 prefix 不会被自动加上，影响浏览器兼容性。我现在的选择是，用编译好的 Bootstrap CSS，然后我自己额外写的也是 CSS，只要我不手动更新 Bootstrap 版本就没有不同步的风险。

CSS/JS 文件来源

Bootstrap 所依赖于的 CSS/JS 文件可以不下载直接使用，这是 Bootstrap 官网提供的 CDN 地址：

https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css
https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js
https://code.jquery.com/jquery-3.3.1.slim.min.js
https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js

观察一下这有什么问题？它们分别指向 3 个不同的域名啊，如果解释出来的 IP 不一样这可是 3 个独立的 HTTPS 连接啊，多浪费时间！我用 dig 命令查了一下，发现这 3 个域名确实指向不同的 IP，尽管非 Cloudflare 的那两个都指向了 hwcdn.net，但是是不同 IP。（我还特意查了一下这 hwcdn.net 是哪家 CDN 的，原来是一家叫做 Highwinds 的公司，现在已经被整合到 StackPath。这两个名字我之前都没听说过。）

为了解决这个问题，我把 Bootstrap 4.1.3 和 jQuery 3.3.1 下载下来了，然后放到我的本地目录中来使用。这样子所有 CSS/JS 文件都能够在同一个域名中获取，无需建立多个 HTTPS 连接浪费多重 RTT。

CSS/JS 文件体积

使用 Bootstrap 的话，默认需要下载的 CSS/JS 体积太大了，有些功能完全用不到但也需要下载。

最容易去掉的是 Popper.js，它存在于一个独立的 JS 文件中，直接不引用就行。根据 Bootstrap 的官方文档，只要用了 dropdown 就需要使用 Popper.js。但仔细看 Boostrap 源代码就会发现，在 navbar 中使用 dropdown 是不需要依赖于 Popper.js 的。（可能因为 navbar 的 dropdown 永远只能朝下展开，没有任何选项可言。）干掉 Popper.js 能省 6.9kb （Brotli 压缩后体积）。

最应该去掉的是 Bootstrap CSS 内众多我没用到的模块，但这又回到了我们之前的那个问题——如果我让 Harp 来编译 Bootstrap，我就失去了 Autoprefixer。我需要解决对 Autoprefixer 的依赖，然后才能让 Harp 编译 Bootstrap，接着我就可以把我没有用到的 Bootstrap 模块全部干掉了。这项优化留待我将来做吧。

折腾完 Bootstrap，我的网站模板也就没问题了，内容可以慢慢填充。接下来我需要解决静态网站发布的问题了，因为网站做好了总需要找个地方放啊。如果你想要继续跟着我一起折腾的话，欢迎通过邮件或 RSS/Atom 订阅我的博客。

于

没有评论:

发表评论