每次在浏览自己的网站时,都会感觉异常的卡顿,甚至第一次打开网站都需要加载好久好久,滑动鼠标也感觉没有那么的流畅,而且装饰的CSS着实有些太过于华丽,所以我准备从主题原版开始重新修改。我所使用的主题是Sakura3.4.0
三创作者樱花庄的白猫,但是这个版本有好多东西我都不喜欢,比如说暗夜模式切换,还有一些小细节的地方,都不是特别到位,所以我便在sakura-app.js options.php funtions.php
里面,把我所有用不到的功能都删掉了,顺便移除了一些上古沉积 (Akina主题就开始遗留下来的无用代码,白猫三创时留下的无用代码移除之后,真的好多了呐!
整顿完过于华丽的特效CSS后,我便开始思考主页的文章布局,一直感觉首页文章列表的利用空间不是很大,特别是在大屏幕上感觉更加的奇怪,我的电脑屏幕是27寸+34寸的,所以800px的width实在是太窄了,但我也没有用百分率来设置width,不然后期会出现各种意想不到的CSS错版。最后选择了将文章列表页改成1000px。可是利用率还是很小,比如说小伙伴 雾时之森 的博客大概就是这样的,宽宽的,不适合写文章
在我冥思苦想不知如何是好时,有一位幸运的小伙伴加入了生物圈的QQ群,我打开他的博客一看,也是Sakura主题,然而它左下角的音乐组件出现了问题,于是我便中途打岔,转到了MetingJS
的Github项目开始研究起MetingJS的正则表达式。在搜索一些表达式的途中,我无意间在搜索引擎看到了非常好的一个自适应瀑布流项目,叫做 Masonry 。我一想,用瀑布流来进行文章排版,岂不妙哉!然后我便开始研究Masonry,却惊奇的发现,我跟不需要懂它的排布原理,只需要用简单的五行JS和四行DIV标签就可以实现自动排版,说干就干。当我以为我已经成功的时候,我开始尝试发布了几篇帖子来进行测试,却发现根本不是想象的那样,见下图
发生了严重的错版,上下盒子没有对齐,空格很大,我改来改去,都无法达到上贴下的效果,后来开F12找了又找,终于发现了一个大问题,那就是Masonry根本没有发挥它的重排功能。
一直提示TypeError: $(...).masonry is not a function
,我便去StackOverFlow找了找相关问题,果然站中有大神,指出是因为这个JS插件依赖于jQuery运行,而在插件被引入运行的时候,jQuery还没有被引入,于是我尝试了N种办法让jQuery优先于Masonry引入,却一点作用都没有,直到我看到官网说有两种引入方法,一个是Vanilla-js引入,另一个是jQuery引入,我就寻思,既然后者不通,那我就尝试前者。
搜索过程中发现 Vanilla-js
是当今最轻量的js框架,没有之一
当时我就在想,这么好的东西,为啥不用!!!直到我进入了 Vanilla
的官网才发现,我被骗了。
怎么无论我下载core还是别的什么文件都是0kb呢?打开下载的文件怎么什么内容都没有???当时我还半信半疑,重新下载了一边,但还是刚刚的结果,后来看到了底下的一个提示 “Final size: 0 bytes uncompressed, 25 bytes gzipped” “Show human-readable sizes”
我意识到事情不对了起来,后来发现Vanilla-js就是前端界的一个冷门笑话,其实Vanilla-js就是原生的js,根本不是什么新型框架。
好在最终通过原生的js引入,终于成功的将Masonry跑了起来,也成功地对我的首页进行了排版,但由于有时候文章加载很慢,所以文章还没出来,插件就停止工作了,于是我写了个settimeout来暂缓300ms让插件工作,效果很不错,在300ms文章框架加载完之后,Masonry就开始重排,于是就得到了当今博客首页的样子。为了突出瀑布流的特点,我还故意将文章摘要的字数限制从55个字改成了100字,这样就能使不通文章块的height不相同,更加随意。
Comments | 1 条评论
肾兄的博客越来越好看了呢😁