新版个人主页开发日志

花了整整一个月的时间，重新做了个人主页。

可以说过程极为不顺利了。我也是没有意料到会面临这么多问题。

使用到的组件和库

• Smarty
• jQuery
• Materialize
• CryptoJS
• jQuery Scrollify
• Textillate.js
• Lettering.js
• Animate.css
• qrcode.js

设计过程

定义

如果是商业项目的话，反而会很好解决：用户希望实现什么产品，根据产品定义拆分成产品需求，再分解成功能定义，再设计功能实现和数据流程，最后代码实现。

这个个人项目要面临的第一个巨大难题就是定义了。简单来讲就是要做一个用于展示个人信息的网站，而实际上，该做成啥样完全没有头绪。

我专门到网上寻找一些参考，得到的结果相当不尽人意。单考虑国内软件开发者的话，超过99%的开发者是没有自己的网站的，剩下那1%中，有博客的都是用自己的博客顶着二级域名，剩下的如果是有个人主页的，也都是随便搞个框架往那一怼就拉倒了。

于是放开眼光，把范围由软件开发者扩大。

整个过程最有参考意义的是 Phyrnna 的主页。 Phyrnna 并不是软件开发者，而是 Professional Composition & Audio Production 。她的网站很简单，映入眼帘的，中间是一些简单的介绍，左上是 Logo ， 右上则是外链导航。继续往下滚动查看的话，是用 Parallax 对板块做的分隔，其中有一个板块是她的作品介绍，最后一个板块则是联系方式。

其他的个人网站比如 画师 SquChan 和 作曲家 LukHash 也很有价值。

数据源

有一个良好的参考，但是接下来还有问题。首先就是作品展示这里。上面列举的几位，作品展示都很简单，画师和作曲只要将自己的作品展示出来就好了，都是一目了然简单明白。

而作为软件开发者，就没有这么一目了然的便利了。前端我这几年做的项目都是绝大多数都是商业项目不说，一方面保密协议在那扣着不能开源，另一方面这些玩意都是用于管理后台系统和功能模块而存在的，在没有其他模块同时运行的大环境下，这些玩意就连展示都做不到。我总不能撇个截图扔那吧。而且就算是撇截图，顶多也只能展示出“美工”的存在，我这几年做项目就没碰上过一个靠谱的，全部都是我自己拿前端组件应付，公司顶多也就能协助切个公司Logo罢了。

而后端像 PHP 、 Node 、 Docker 这些，也想不出什么实际的法子。

当然，能力不行也是一方面。像国内大神们自己做个Bootstrap出来到处吹牛逼，我只想放到个人主页上却没那个能力。

切图

代码半小时，切图花一天。

这种时候就非常羡慕 Phyrnna 他们了，从游戏到动画到美术到音乐，亲朋好友兄弟姐妹的力量。

而当我在朋友堆里提出什么想法概念的时候，就会变成一把年纪老大不小了瞎整什么。结果还是只能自己动手。

框架

考虑了具体放什么内容之后，接下来就是代码设计了。

原本计划是做一个通用模板型的框架。也就是说，日常只维护一个配置文件，由框架自己生成页面。

这里就必须舍弃 vue 和 webpack 一等了。我还没见到过有人用这些玩意做出后期免编译维护的网站出来。当然舍弃 vue 和 webpack 并不只有这一点理由。用 VUE 的话，的确能做出很好的 SPA 出来，但是搜索引擎的收入如何，完全没有明确地信息，而后端渲染就更离不开性能差爆的 Node 环境。

效果

滚动

原本是想把所有页面都做成 https://www.catscarlet.com/tools/ 一样的效果，一次滚动一整页，背景图片跟随滚动瞬间切换。最初的确是这么做的，而且配合 CSS transition 做的话，视觉效果非常好。奈何 jQuery Scrollify 经常抽风，页面经常会出现莫名其妙卡住不能翻动的问题。我甚至连背景图片预缓存的功能都实现了。

功能 VS 视觉效果，果断且只能舍弃视觉效果。

当然，我还是把他保留在了一个低优先级页面。

背景图片

背景图片没打算用 Parallax ，而是一个版块一张背景图片，用模糊和透明度做出虚化效果，这样就可以用低分辨率图片做到减少带宽消耗的同时保证美观。

然而舍弃 jQuery Scrollify 之后，面临的第二大问题就是如何实现背景图片了。

原本使用 jQuery Scrollify 时，是依靠 jQuery Scrollify 的 trigger 来渲染一个 z-index: -1 的 <div>。没有了这个 trigger 之后，想要动态更换背景图片，就需要 Scrollfire 来实现。很可惜，没找到靠谱的 Scrollfire 插件。Materialize 在新版中移除了这个组件，网上也没找到好用的。尝试用 Materialize 的 Scrollspy 来实现，结果发现 getActiveElement 不好使。

于是放弃 更换背景图片效果 。改成每个板块使用的背景图片随板块一起随页面滚动。

需求变得简单了，但是并没有变得容易实现。

想要实现模糊效果，需要对 <div> 设置样式 filter: blur。一般有两种实现方式：

• 专门渲染一个 z-index: -1 的 <div> 用于设置背景图片。其他内容的 z-index 都设置得比这个高，就可以显示在这个的上层。
• 给 <div> 专门设置一个 :before 并设置背景图片，这样背景图片就会有独立的一套样式，而标准内容不会受影响。

难点就在于，每个版块是根据配置文件生成的，所以没法通过 class 来控制了。

平台

我就觉得，在你就坐在电脑旁边，却拿手机刷网页看视频甚至办公，是件很傻逼的事情。

另外微软和一大堆国产浏览器这些玩意真是烦人，还得专门针对这些破玩意做适配。还好我就干脆没做！爱崩不崩！

加密

邮箱

把邮箱明文放在网页上是一件有风险的事情，毕竟垃圾邮件仍然很流行。所以我用了 CryptoJS 进行加密。本来是打算使用 固定秘钥+随机iv 来做的，下次吧。

解密效果使用的是 Textillate.js ，Lettering.js 和 Animate.css 是其依赖。

微信

并没有把微信二维码图片保存到服务器上，而是像邮箱一样是一段文本。

没找到任何一个靠谱的二维码生成库。我的期望是在二维码生成后进行回调来在页面上渲染。

二维码这事，我还专门到网上查了，结果呢，全球除了一个特殊国家之外，没有哪个国家对这玩意有重视。本来就是嘛，这种短文本标识也只能被某特殊国家使用出这么多花样。那么问题来了，这个特殊国家是有多少开源只为了贡献而存在的开源项目呢？各种乱七八糟的二维码我倒是都见识到了，一个有靠谱 callback 的二维码生成库都没见到。

另外微信这破玩意，不把 canvas 当图片，所以用微信打开时，没法按住二维码来直接识别。

开源

这个项目没有开源的计划。
理由：原本架构设计的很好，但是由于需求在这一个月内被我变动来变动去，原本是设计成通用模板型的框架，结果已经被我在一个页面之内就碎片化了。当然，这事情不是不能解决，但是这个项目耗时已经超出预期了，没什么继续开发的心情了。而所有预期功能现在都能正常工作，只要改配置文件就能满足使用（但是配置文件格式就有4种！）。

最后

“都是经历都是锻炼都是经验”这样的，或者“重在坚持”这样的的破评论，就不要留了，我会统一标记为 akismet 垃圾评论的。