站点开发手记（3）

前段时间给文章一口气添加了五个功能支持之后，我本以为我的想法到瓶颈了，没想到今天凌晨2点醒来，睡不着打开浏览器浏览自己的网页的时候，能想到新增一个有趣的功能。

昨天在浏览“兴趣”和“图片”分类时，总觉得它们的内容太少，没有阅读价值。

兴趣往往展示的是我喜欢的东西，可能会很冷门，不吸引大家观看，如音乐、影视剧；图片展示的则是我觉得很震撼的东西，可能是个大场面【如毕业季时组团门口的行李寄运】，可能是风景，也可能是个小物品【如小积木拼成的钢铁侠】。

如何将它们做得吸引人呢。昨天脑子灵光一闪，想到了将它们和轮播图结合起来。

在看到【风记星辰】博客中【钢铁洪流 - 中国工业博物馆】文章展示了强大的图片排版，我就在想怎么给我的网站加个轮播图功能呢。我立了几个方案，有在文章列表中以轮播图展示的、有在文章正文内展示的、有丰富文章图片布局的（如一行两列、一行三列等表格布局，或类似【关于】界面的错乱排布）。最后从实现难度、实用性、简洁美观等多方面考虑，最后觉得从封面下手，丰富一下封面的功能。

借助于 swiperjs 的强大功能，我将它和 RemixIcon 结合起来，做了个简单的封面轮播图效果。

可前往 Minecraft建筑1 查看效果，可能需要强制刷新浏览器缓存。

这里不得不提一下，在实现这部分功能的时候，需要同时改动 FancyBox（图片幻灯片）、LazyLoad（图片懒加载）两个插件，然后再加上 SwiperJS，可累死了。

有些朋友说评论区需要改改，我也给评论区简单修了下样式。

最开始杜老师说评论没有嵌套，看起来很别扭。但是评论每多一层回复，按照递归，就要逐层向内缩进，若页面过窄且回复层级过深，就会造成显示宽度的问题。所以我最开始没有采用嵌套的方式突出评论回复的关系，而是采用了 Saammaa 使用的“串串”方式，后来又改成了现在的样式。

“串串”就是穿成串，因为看起来很像串。

我妈也说现在的样式最简洁。

随着使用的插件多了起来，网页刚开始要加载一堆 JS。我现在用到的插件暨加载的 JS/CSS 有：用于播放音乐的 Howler、Aplayer、Meting；用于播放视频的 DPlayer、用于解析代码块的 Prism，等等。且JS还经过混淆，多达十几个JS和CSS，严重拖慢了站点的运行速度。于是我将它们处理成异步的。

这里可以简单介绍一下如何异步加载 JS 和 CSS，以 JS 为例，定义一个 loadJavaScript 函数。

function loadJavaScript(href, callback) {
  let scriptElement = document.createElement("script");
  scriptElement.src = href;
  c.onload = callback;
  document.head.appendChild(c);
}

在存在对应的元素时加载 JavaScript 并设定一个已加载的标志。调用时，第一个参数为 JavaScript 的路径，第二个参数为加载完 JavaScript 后应执行的函数。

if (document.querySelector(".example-element") && "undefined" == typeof scriptLoaded){
  loadJavaScript("https://example.com/example.js", function() {
    init();
    window.scriptLoaded = 1;
  })
} else init()

这里需要注意一下，此方法加载的JavaScript和回调函数均为异步。若动态导入JavaScript后依赖这些JavaScript的代码有先后顺序，则不能采用此方法。因为异步执行的代码无法保证执行顺序，只有同步执行可以。

异步加载的JavaScript.webp

从上图可以看到，在页面加载初只加载3个CSS和6个JS（我还是觉得很多，但不能再少了），其他的JS都在页面有对应元素时再导入，减少了页面初期加载需要等待的时间，配合Pjax的无刷新，让浏览体验更上一层楼。