zkpeace.com
内容提要
作者魔改Butterfly主题搭建个人博客2.0，记录施工方案：设计上加入3D模型、Echarts数据可视化、毛玻璃卡片，精简页面突出内容；性能上适配Pjax加速访问，用Gulp压缩代码，引入PWA优化体验；首页改为轮播图，重新设计博客、简历、项目、相册、频道等页面，嵌入B站视频、GitHub日历、访客地图和背景音乐；后续计划优化动效、代码及国际化。
延伸解读
Pjax 与动态脚本的兼容处理
文章提到，启用 Pjax 后，页面局部刷新可能导致内联脚本无法重新执行，例如 Revolvermaps 访客地图的 WebGL 版本。作者通过 jQuery 的 append 方法动态插入脚本，确保每次页面切换时脚本都能重新加载。这提醒我们，在 Pjax 环境下，依赖 DOM 加载的第三方组件需要特殊处理，不能直接使用 document.write 或内联脚本。
数据可视化在个人主页的应用
作者在简历页面使用 ECharts 制作了甘特图、旭日图和雷达图，分别展示履历、技能和性格。这种可视化方式比纯文本更直观，尤其适合展示时间线和多维数据。但需注意，ECharts 配置项较多，且数据需要动态生成，对于不熟悉 JavaScript 的博主可能存在一定门槛。
PWA 与 Gulp 的优化实践
文章介绍了使用 PWA 提升博客体验，包括离线访问和类似 App 的交互。同时，作者用 Gulp 压缩代码，但遇到了 gulp-imagemin 报错，通过强制安装 jpegtran-bin 解决。这些优化能提升加载速度，但 PWA 需要 HTTPS 和 Service Worker 配置，Gulp 插件也可能因环境差异出现兼容性问题，需耐心调试。
Q&A
这个博客2.0版本在性能优化上做了哪些工作？
适配了Pjax，进入网站后一次性加载大部分js文件，访问其他页面无需重新加载，提高访问速度；使用Gulp压缩代码；引入PWA优化使用体验。
博客中使用了哪些数据可视化工具？具体展示了什么信息？
使用了Echarts数据可视化，在关于我页面用甘特图展示履历，旭日图展示技能，雷达图展示性格。
博客的首页设计有什么特点？
首页改成了轮播图模式，只留下一个幻灯片，突出主要内容。
博客中如何展示GitHub贡献日历？
使用了hexo-githubcalendar插件抓取并展示GitHub calendar数据，主要用canvas绘图。
博客的频道页面有什么功能？
频道页面改成视频播客形式，嵌入B站视频，可以随机播放视频。
博客中如何解决Pjax导致Revolvermaps访客地图无法加载的问题？
用jQuery重新写了一个载入函数，用$('#id').append()直接把js添加页面，每次出现都重新加载一次。
