Our Library 響應(yīng)式網(wǎng)頁編寫反思記錄

時(shí)間：2023-07-06 09:57:02 | 來源：網(wǎng)站運(yùn)營

時(shí)間：2023-07-06 09:57:02 來源：網(wǎng)站運(yùn)營

Our Library 響應(yīng)式網(wǎng)頁編寫反思記錄：隔離在家，每天就想著怎么折騰 。之前在做 blog 主題的時(shí)候看過了不少的網(wǎng)站找參考樣式，當(dāng)時(shí)就想著，這些網(wǎng)站可真是好看，如果我也能做一個(gè)就好了。最近又趕上了老婆的生日，于是兩者一結(jié)合，就打算做一個(gè)紀(jì)念網(wǎng)站，當(dāng)作生日禮物（雖然后來因?yàn)樽约喊胝{(diào)子的能力，沒有能夠在生日之前上線 ）。

網(wǎng)頁規(guī)劃

需求確認(rèn)

在開始準(zhǔn)備施工之前，我其實(shí)已經(jīng)看了好多差不多類型的頁面，也大概搞清楚了自己心里想要一個(gè)什么樣子的產(chǎn)品。

• 頁面簡潔，不要有大量的裝飾。個(gè)人感覺這樣比較大氣
• 能夠自適應(yīng)移動(dòng)端，
• 有設(shè)計(jì)感，不要太簡陋，
• 如果可能，適當(dāng)加一些動(dòng)畫。

因?yàn)樽约簩?duì)前端一點(diǎn)也不懂，只能靠自己半調(diào)子的認(rèn)知瞎搞搞，很多的需求也是自己看了別人的網(wǎng)站，覺得自己也應(yīng)該有這樣如此云云。

內(nèi)容規(guī)劃

在確認(rèn)了網(wǎng)頁的樣式需求之后，就是考慮在網(wǎng)頁上放點(diǎn)什么。自己之前在情人節(jié)的時(shí)候，給老婆做了一個(gè)小小的紀(jì)念頁面[1]。現(xiàn)在又要搞一個(gè)，就想著把這兩個(gè)整合起來，放到一個(gè)框架下面，也方便日后再有其它的項(xiàng)目可以加進(jìn)來。另外就是我們兩個(gè)人一直想把自己這一年做過的菜，整理出來，做成一個(gè)類似菜單的東西，到時(shí)候可以展示出來，算是給自己的生活增加一些儀式感。再加上我們兩個(gè)日常拍的照片，平時(shí)也就是偶爾發(fā)一下朋友圈，可能也需要一個(gè)集中的地方。于是心里也就有了個(gè)數(shù)，要在這上面展示啥。

• 情話版
• 項(xiàng)目展示
• 照片區(qū)
• 旅游照片
• 日常照片

大概就是這樣一些內(nèi)容，其后就是開始做施工準(zhǔn)備。

知識(shí)儲(chǔ)備

響應(yīng)式Web設(shè)計(jì)

對(duì)的，你沒有看錯(cuò)，我做好了需求與內(nèi)容確認(rèn)之后，首先做的就是找了一本講自適應(yīng)網(wǎng)頁編寫的書看了一遍 。 書名是：《響應(yīng)式Web設(shè)計(jì)+HTML5和CSS3實(shí)戰(zhàn) 第2版》大體上了解了下一些術(shù)語和常見的操作，省得自己在做的時(shí)候，在一些小問題上花費(fèi)大時(shí)間（其實(shí)后面在操作的時(shí)候，還是在幾個(gè)小問題上，浪費(fèi)了不少時(shí)間，由此可見術(shù)業(yè)有專攻不假）。

Bootstrap 響應(yīng)式框架

為了實(shí)現(xiàn)響應(yīng)式的網(wǎng)頁，我這次使用了 Bootstrap 這個(gè)框架，因?yàn)閷?duì)新手比較友好，容易上手且外行也能做出一個(gè)像樣的網(wǎng)頁出來。為了方便使用，也在開始施工之前去學(xué)習(xí)了一下。學(xué)習(xí)比較快，主要是 Bootstrap 一些類的定義。

具體施工過程中的坑

很詳細(xì)的網(wǎng)頁編寫我就不寫在這里了，有需要的朋友可以點(diǎn)擊這里查看。這里我主要記錄一下自己在學(xué)習(xí)以及編寫這個(gè)網(wǎng)頁的時(shí)候用到的一些 Js 庫和遇到的一些坑，為以后再做相同工作減少阻礙。

用到的 Js 庫

因?yàn)槲耶吘故且粋€(gè)徹頭徹尾的外行人，所以在開始施工的時(shí)候，采用的最原始方法就是選定一個(gè)網(wǎng)站，開始照著這個(gè)網(wǎng)站做。就在我分析這些網(wǎng)站的代碼時(shí)，發(fā)現(xiàn)其中有一些部分很奇怪，非常像是「生成」的內(nèi)容。仔細(xì)研究之后發(fā)現(xiàn)，對(duì)于同樣的需求，已經(jīng)有很多成熟的解決方，很多網(wǎng)站也沒有自己去「造輪子」而是直接使用了這些 Js 庫。

但是由于我自己是一個(gè)非常徹底的外行，看到一些效果的時(shí)候，不知道是基于其它庫實(shí)現(xiàn)的，結(jié)果我就掉進(jìn)了一個(gè)大坑：扒 js 代碼去研究咋實(shí)現(xiàn)的…… 我大概看了幾天的 Tween、fullpage 的代碼。 此事不表，我列一下我主要用到的庫有哪些：

• Bootstrap 用來實(shí)現(xiàn)響應(yīng)式的框架
• Fullpage 用來實(shí)現(xiàn)那種整頁展示效果
• nanogallery2 實(shí)現(xiàn)圖片排版，輪播
• ScrollMagic 整頁滾動(dòng)效果 可能和 fullPage 效果差不多，就用 fp 代替了
• slick 用于圖片輪播， 后來使用 nanogallery2 代替。

使用這些庫之后完成的效果分別是這樣的：

Fullpage:





nanogallery2:





其實(shí)如果一開始就知道使用這幾個(gè)庫，那整個(gè)過程相當(dāng)簡簡單單，讀完每個(gè)庫的 Documents 之后，就可以非?？焖俚耐瓿勺约合胍慕Y(jié)果，畢竟這幾個(gè)庫都是使用廣泛且完成度相當(dāng)高。

幾個(gè)坑

1. 完成比完美更重要

第一個(gè)坑就是 Tween（GSAP） 這個(gè)動(dòng)畫插件，看到了別人成品極其炫麗的樣子（我參照的網(wǎng)站可以點(diǎn)這里查看，我不禁也動(dòng)了念頭，但是搞了半天，發(fā)現(xiàn)這個(gè)庫的入門成本還是挺高的，比較光是畫 svg 的路徑可能就直接搞死我。最終的結(jié)局就是我在研究了兩天之后，被迫放棄。這個(gè)庫可以放到以后網(wǎng)站升級(jí)的時(shí)候去研究。我當(dāng)時(shí)已經(jīng)在這個(gè)庫上花了不少時(shí)間，并且我感覺自己不是一時(shí)半會(huì)就能使用它，所以不得以放棄。、

2. 先確定是什么，更確定怎么做

再一個(gè)坑就是我一頭插進(jìn) Tween 和 Fullpage 的 js 代碼中去看具體實(shí)現(xiàn)的方法，其實(shí)不是我自己對(duì)自己的能力高估了，只是我沒有想到，這些代碼竟然是這樣一個(gè)龐大的庫里的 （主要是這些網(wǎng)站不是引入 js 文件，而是把所有的 js 文件都整合成了一個(gè)文件，所以我也不知道其中的代碼哪一部分是啥）。后來我發(fā)現(xiàn)，這些庫里的代碼其實(shí)都是有比較明顯的特征，或者是函數(shù)名，或者是報(bào)錯(cuò)信息。從這里我得到一個(gè)教訓(xùn)，以后再做類似的事情，我得先找到這些特征的地方，搜索一下，確定這是什么，再去想怎么解決。

3. Fullpage 與 nanogallery2 沖突

其實(shí)這個(gè)問題是一個(gè)真正的技術(shù)問題 上面兩個(gè)都是我自己血的教訓(xùn)。但是這個(gè)問題也已經(jīng)被很多人發(fā)現(xiàn)，并且官方也給了解決方法。這就是使用受眾多的庫的好處之一，很多坑別人都已經(jīng)趟過一遍 。簡單點(diǎn)說就是 Fullpage 和其它使用 Scroll 監(jiān)聽器的插件會(huì)沖突。解決方法個(gè)人感覺不太優(yōu)雅，但是官方也就只給了這一種方法。具體可以見此處。我自己也沒有心情去看看 nanogallery2 的代碼做修改，就按照官方的解決方法來了。

---

1. 如果沒有記，這個(gè)紀(jì)念頁面的開發(fā)者應(yīng)該是我當(dāng)時(shí)學(xué)校計(jì)院的一個(gè)學(xué)長。當(dāng)時(shí)此網(wǎng)頁一出，就引大眾羨慕。但其后事情發(fā)展實(shí)在讓人嘆息。當(dāng)時(shí)在日月光華上也是十大，我雖然圍觀過，但是對(duì)內(nèi)情知之不詳，此處不表。 ??