现在是大四学年的寒假，刚刚结束毕设开题答辩。

大三结束的暑假，在家里找出了尘封十多年的老单反，带到了北京。半年以来，通过各种途径重新学习了很多摄影的基础知识、当前影像行业的发展现状、最新相机的参数性能和价格。这半年也带着相机出去走了走，拍出过那么几张满意的照片。

由于原相机搭配的狗头经过岁月风霜，内部镜片已经有发霉的表现，拍出的照片总像是蒙着一层雾般不真切。所以这半年来也化身咸鱼小能手，在咸鱼上达成了好几笔交易。截至目前，已经凑齐了 15-85mm、50mm 定焦和 55-250mm 三颗镜头，组成了相对完整的焦段范围。

手头上比较满意的照片积累的多了，但又找不到地方来存放和展示。前段时间灵机一动，想到可以放在同样沉寂已久的个人博客上，找一个 hexo 模板套一套，搭建一个个人摄影作品的展示页。于是就有了这篇文章。调研、实验和代码编写，总共用时大约一天半完成。

技术路线调研与选择

最初希望能够直接找到一个合适的 hexo 主题，直接套用即可。但经过搜索和浏览，发现 hexo 主题仍然是以用于图文博客记录为主，没有找到合适的主题。由于想要同时继承博客原有的功能和内容，故也不考虑更改博客框架了。

通过进一步调研和实验，借助一些开源小代码，能够通过 css+js 实现本地 html 文件的瀑布流的效果，并且也有合适美观的设计样式参考。由于 hexo 博客是静态网页托管，故这一条路线必然是可以走得通的。于是决定手动改写博客的主题文件，自己造轮子。

Hexo 框架

hexo 博客本身的项目结构是相当一目了然的，尤其是在拥有了软工使用 Vue 搭建前端的基础之后。主目录下没有太多东西，主要就是一个 _config.yml 配置文件和文章的 markdown 文件。

主题文件夹中是自定义的核心部件，但其实结构也非常清晰。layout 文件夹由 ejs 文件组成，负责定义页面的 html 结构，_partial 用于构造模块式的 html 组件。ejs 文件结构也很简单，使用特定的模板语法在 html 网页中使用 js 嵌入内容，和 Vue 的语法颇有几分相像，基本就是一个照猫画虎的过程。

source 文件夹存放网页上需要使用的静态文件，如 css、js、fonts、images等，网页渲染所需要用到的 css 和 js 直接放在这里即可。

sass 和 gulp

我所继承的这个主题的作者使用 sass 编写样式，这个东西也非常直观，它和 css 的关系大概就是 cmake 和 makefile 的关系。theme 目录下有一个 gulpfile.js 文件。gulp 是一个自动化构建工具，那么很明显从 sass 到 css 的转换就是通过它实现的了。

我本机上所下载的 node.js 版本过高，导致 gulp 的版本也需要升级。从 gulp3 到 gulp4 的转换还使得我必须手动修改 gulpfile.js 的部分代码，不过幸好都解决了。

原主题精简

大概摸清了 hexo 的工作原理和项目结构之后，就可以对原来的 fexo 主题做大刀阔斧的精简了，直接删去用不到的 project、link 等页面以及相关的 sass 与 js，精简了主题内容。

瀑布流实现

照片展示当然是瀑布流布局最为科学。学习了 Unsplash 等网站的页面设计后，决定采用宽度一致的纵向瀑布流。实现上使用的是 Waterfall.js 这个库搭配 imgStatus 用于在新图片加载完成后更新布局。

不得不说这个原生 js 实现的仅 1KB 的库相当地优秀，开箱即用，简单高效。

页面排版样式

在逛 hexo 主题的时候看到了 hexo-theme-standrews，可以说这个极简的排版审美绝对在线。可惜没有 github 的仓库链接。但没有关系，手动审查元素，参考 css 样式自己摸出了一个类似的效果。这个网站的自适应内容使用的是 bootstrap 库实现。简单起见，我直接借鉴了里面的 @media 等几条 css 样式，手动实现了一个简单的自适应布局，在移动端上也能表现良好。

图片弹出框

接下来需要实现点击图片弹出大图和详细信息的效果。我希望实现的效果是类似 Unsplash 或者是 ins 中的白色内容框，但是更加极简。然而找遍全网现有库的效果基本都是全屏深色遮罩+图片居中放大，而且普遍没有给大段文字摆放的位置。

考虑到放大缩小的动效以及模态框还是不那么容易手工实现，所以最终还是在 Lightbox2 基础上进行了自定义的魔改，对其中的 css 样式和 js 代码均有改动。

图床和添加图片逻辑

图床在调研后选用了SM.MS。

发现了一个非常棒的在线图像压缩网站，可以预览前后对比以选取合适的输出品质，而且压缩效果相当好。

我们新增的照片墙页面实际上是一个 hexo page。为了和主题解耦，我们希望把照片相关的信息写到主文件夹的 markdown 文件而不是 theme 文件夹的配置里。但可惜 hexo 似乎没有区分不同 page 的文章内容的这个功能，所有的文章都在统一的 _post 文件夹里。于是只好放到照片这个页的 index.md 里面。由于在渲染时没有对 markdown 内容的解析功能，所以手动编写了 js 代码对 raw 内容进行解析，得到照片及相关信息的列表，并同步在 Lightbox2 的 js 代码以及 layout 中做了相应的改动与适配。

小结

魔改后的主题 simfexo 已经挂在了 github 仓库中。

这一天半的敏捷开发过程实际上在很短的时间内学习了很多东西，比如 hexo 目录结构和原理、ejs、sass、gulp 等等，这些都是首次接触的内容。但无需非常丰富的使用经验，简单看一看目前已有的代码，结合几次搜索，我就能够很快达到自己的更改目的。

严格来说这可以看作是我至少第三次对博客做搭建或者改动了。但即使是两年前重新搭建起这个新网站时，我仍然需要借助视频教程来使用 hexo 框架，自定义的部分也只能够改一改原主题中的配置文件，和高中时其实并没有太大区别。但现在我在很短的时间内就可以借助搜索甚至大部分时候无需检索直接领会框架的结构或者是工具的作用，完成主题的个性化定制。不禁感叹这两年的科班学习还是有在身上打下深厚的计算机基础的。