Posts 博客 2.0 版开发成功
Post
Cancel

博客 2.0 版开发成功

许久没写新文章了,趁今天完成博客 v2.0 开发,怒写一篇水文庆祝留念一下。

在本站 v1.x 时代,沿用居中紧凑式布局,在宽屏看文章体验的确是不错,减少视线左右横扫的幅度。

下图为 v1.x 的桌面版布局:

blog-layout-v1.x

它有两个问题:

  1. 导航占据顶栏,和底部的 Footer 一起夹着文章展示区,像个夹层汉堡一样,有点压抑。
  2. 主体内容左右两侧空出来的面积太多,页面空间利用度低。

所以,在今年七月底就规划,将改变博客主框架重新设计。新设计是把框架变成左右两侧 3 : 7 的形式,即 3 成展示导航栏面板,7 成展示主题内容。构想中架构大概是这样:

blog-v2-design

一如既往的,上 Jekyll 主题库找一下此类设计的博客样品。借鉴一下其中的框架配色、布局及字体等设计。OK,找到了主题 Prologue,简约大气,符合要求。

接着是 v2.0 的实际开发阶段,此次开发的模式和上一版不同,不再是 clone 项目再重写,这样修改的东西太多了,各种插件、资源等,而且每个人都有自己的项目架构习惯,直接伸手日后难保没有隐患。从 2018-08-02 开始动笔,历时 8 天左右完成。新版本的博客,保留了上一版的所有功能,包括搜索功能、目录动态 TOC 等。

底层的 Bootstrap 版本从 3.7 升级到了 4.0,Bootstrap-Toc 插件也相应升级了。因为 BS4 的 CSS 改变很大,为此改写了大量的文本布局样式。此外 BS4 也多了很多 class 去替代繁琐的手工 CSS 定义,如背景色.bg-*,字体的.font-weight-*等,文章底部翻页按钮也使用了新版本的.btn-outline。开发者从 HTML 层就直接知道了样式的效果,不用翻 CSS 文件,多爽。

居功甚伟的莫过于主体框架使用的.justify-content-center。它解决了内容展示区.row内部的.col-*动态居中问题:带目录的文章用两列.col,当文章不带目录,单列的.col内容会自动居中。这种效果在 v1.x 时期,是用了一种拙劣的实现方式:main内容区域一律采用三列布局,左侧第一列永远是占位置,没有任何内容的存在。过去在实现响应式布局时,写了不少 CSS 定义,耗时耗力。这种颓势在博客 v2.0 起不复存在了,HTML 架构简约,CSS 定义也精简清晰。

此外,本版在侧栏动态响应中也首次使用了 CSS 的transform动画效果。体验动态响应最直接的方式就是,在一个宽度大于 1200 px 的显示屏上打开浏览器进入本站,全屏显示后鼠标拖动浏览器右侧,逐渐往左边收缩窗口,在 1200 px 以上,全状态三列展示(左侧导航栏 - 文章正文 - 目录):

desktop-layout

宽度等于小于 1200 px 时,目录隐藏,主要架构剩两列(左侧导航栏 - 文章正文):

tablet-layout

再往下缩小至 831 px 或以下,窗口只剩下文章正文单独一列了。侧边栏默认收起,左上角显示一个开关按钮,负责开合侧边栏。

mobile-layout

全站搜索结果的展示,上一版的处理是在顶栏 navbar 和主区域之间插入搜索结果,略显突兀。在 2.0 版中做了改进,搜索结果直接覆盖主内容区,更加体面,布局简约漂亮。

Footer 也做了修改,将此前四大金刚社交图标移动到了侧栏底部,充分利用侧栏剩余空间,footer 只留下一行文字,简约低调。

对了,得益于侧边栏设计,导航栏拥有了富裕的空间去容纳一个大 Logo。每次打开站点,看到有个头像才有点个人博客的味道嘛。纵览全站布局,3 : 7 设计简约清晰,确保文章内容不过度拉宽的前提下,还去掉了碍眼顶栏,整体比上代更恢弘大气,首页顶部这一块,以后还有作其他修饰的巨大潜力。

最后,生日快到了,此版谨当作送给自己的生日礼物,peace。

OLDER POST NEWER POST

Comments powered by Disqus.

Search Results