在最近的一次项目中，我负责搭建一个插画设计师的展示网站。由于设计师本身对网站搭建并不熟悉，我希望通过记录一些实际操作过程中的经验和问题，帮助她快速上手。
环境配置反复调整
项目初期，我们遇到了环境配置的问题。设计师希望网站能够在不同的设备上都能良好显示，包括移动端和桌面端。最初，我们选择了最流行的响应式框架Bootstrap来构建页面布局。但在实际操作过程中，我们发现Bootstrap的兼容性问题让移动端的显示效果并不理想。
为了解决这个问题，我们尝试了其他响应式框架，如Foundation和Tailwind CSS。经过对比测试后，我们决定采用Tailwind CSS。它提供了更加简洁的类名和强大的实用功能，使得我们在处理不同设备布局时更加得心应手。
模块兼容问题
在开发过程中，我们还遇到了模块兼容性问题。由于插画设计作品通常需要插入大量的图片和视频素材，我们使用了Vue.js框架来处理这些动态元素。然而，Vue.js与某些图片加载库存在兼容性问题。
为了解决这个问题，我们查阅了大量资料并尝试了多种解决方案。最终发现可以通过修改vue-lazyload的源码来解决兼容问题。以下是修改后的代码示例：
// 修改前
import Vue from 'vue'
import Lazyload from 'vue-lazyload'
Vue.use
// 修改后
import Vue from 'vue'
import Lazyload from 'vue-lazyload'
const originalLoadImage = Lazyload.image.load
Lazyload.image.load = function {
img.src = img.getAttribute
originalLoadImage.call
}
初期结构规划不稳定
在设计阶段，我们对网站的架构进行了多次调整。最初的想法是使用传统的导航栏加页面的结构。但随着项目的深入发展，我们发现这种结构在展示大量作品时显得有些繁琐。
为了解决这个问题，我们重新规划了网站的结构。将首页设计成一个滚动式的画廊形式，用户可以轻松浏览所有作品；而在点击具体作品时跳转到详细页面进行展示。
在实际操作过程中，我们还发现了一些暂时未解决的问题：
- 作品分类不够清晰：虽然我们已经按照风格、题材等进行了分类，但仍有部分作品难以归类。
- 部分交互效果不理想：如滚动动画、弹窗等细节还需进一步优化。
这些问题的解决需要后续的不断迭代和完善。
通过这次项目实践，我深刻体会到在实际操作中遇到问题并寻求解决方案的重要性。对于插画设计师来说，掌握一些基本的网站搭建技能能够让他们更加方便地展示自己的作品。当然，以上只是一些经验分享和记录总结，并非标准建站方案。希望这篇文章能对您有所帮助！
