洛奇的個人網站1周年：網站的製作歷程

洛奇/Rocky · 發表於 2023-8-27 22:23:21

本帖最後由洛奇/Rocky 於 2023-8-27 22:42 編輯

登錄/註冊後可看大圖

在去年的今天，我完成了初版洛奇網站的製作（詳細看此）
雖説如此，可事實上在洛奇網站的最開始的製作過程中，因爲是直接用vscode編輯Github上的項目，因此所有的改動最終都是直接上傳至Github。也是因此，在初代發佈前洛奇網站經歷的一切修改都能在github看到。

登錄/註冊後可看大圖

屏幕截图 2023-08-27 192557.png (588.9 KB, 下載次數: 68)

下載附件

2023-8-27 19:28 上傳

説實話這個網站當時我基本是邊學邊做，開坑時就會一些皮毛，到了做完時，做好一個一般的現代網站所需要的一些技能我都已經會了。

登錄/註冊後可看大圖

8月11日，網站開坑

登錄/註冊後可看大圖

屏幕截图 2023-08-27 193436.png (506.21 KB, 下載次數: 60)

下載附件

2023-8-27 19:36 上傳

就像我在發初版洛奇網站的預告時説的一樣，因爲想讓洛奇的設定往軟件工程師的方向發展，軟件工程師就是程序員，而很多程序員都有自己的網站，我就決定開坑做這個項目。
我拿Krita做出了每次洛奇網站出更新帖都必定會出現的那個圖片，作爲當時洛奇網站的banner。
其實，我本可以直接用我當時學到的知識直接做完洛奇的網站，但是在那時，我也同樣用我當時學到的知識做的自己的主頁。。。長這樣

登錄/註冊後可看大圖

屏幕截图 2023-08-27 194250.png (599.02 KB, 下載次數: 70)

下載附件

2023-8-27 19:44 上傳

（其实现在我本家的主页还是如此简陋XD）
我可不希望洛奇的網站如此簡陋，因此我決定為製作洛奇的網站而學習更多的新知識。

登錄/註冊後可看大圖

8月13日-20日，早期網站框架

登錄/註冊後可看大圖

网页捕获_27-8-2023_20445_.jpeg (169.13 KB, 下載次數: 71)

下載附件

2023-8-27 20:10 上傳

8月13日

登錄/註冊後可看大圖

网页捕获_27-8-2023_20455_.jpeg (218.55 KB, 下載次數: 61)

下載附件

2023-8-27 20:10 上傳

8月16日早

登錄/註冊後可看大圖

网页捕获_27-8-2023_2073_.jpeg (221.26 KB, 下載次數: 66)

下載附件

2023-8-27 20:11 上傳

8月16日晚

登錄/註冊後可看大圖

网页捕获_27-8-2023_20848_.jpeg (220.49 KB, 下載次數: 60)

下載附件

2023-8-27 20:12 上傳

8月20日早
這段時間裏，我學會了使用flexbox，有了這個，我可以很輕鬆讓地讓html中的一個或者一組物件出現在另一個物件的水平位置，并且掌握了更多的css技巧。我利用這些技巧做出了更加精美的網站框架。有了這些，此時的網站已經很像那麽一回事了，我當時預期的網站最終成品也是以這個框架為基礎的。
然而在開始考慮移動端時，出現了問題。。。
我當時對於響應式設計基本一竅不通，只有用flexbox的wrap屬性寫出一個類似的東西出來，這樣做出來的效果很不完美，我當時絞盡腦汁也沒能想出究竟該如何才能寫出完美的響應式架構，於是又撩置了幾天。
秀樹曾經告訴我說用Bootstrap可以實現很多炫酷的效果，於是我就這樣一直用Mimo學到bootstrap（現在的Mimo似乎沒有這一章節了）。。。

登錄/註冊後可看大圖

8月25日-27日，新的框架
我終於學到了bootstrap部分，然而Mimo的Bootstrap教程並沒有教我如何解決響應式的問題，但既然已經學到了這些bootstrap相關的知識，我覺得我應該可以直接用去網上找個模板糊弄完事。最後，我找到了這個看起來不錯的模板：

登錄/註冊後可看大圖

屏幕截图 2023-08-27 213130.png (376.1 KB, 下載次數: 63)

下載附件

2023-8-27 21:33 上傳

它有一個看起來不錯的側邊導航欄，到了移動端又會自動轉化成在頂部的下拉導航欄，我感覺這樣的導航欄對於當時的洛奇網站來説很適合，我決定直接”藉鑒“這個導航欄，其餘的架構我自己來。
bootstrap幾乎就是一些css類名而已，想必應該完全通用吧（確信）
但是我當時根本就沒想到會有修改bootstrap文件的情況。。。
當我信心十足的在bootstrap官網下載好完整的bootstrap包，導入到網頁，然後把導航欄的html代碼直接複製到洛奇網站裏，修改一下再用時，我傻眼了。。。

登錄/註冊後可看大圖

屏幕截图 2023-08-27 215233.png (974.32 KB, 下載次數: 68)

下載附件

2023-8-27 21:54 上傳

這完全不是我想要的效果啊喂！
折騰了好久，我才發現之所以會這樣是因爲那個模板裏的bootstrap是被改動過的！我也基本沒法判斷是哪裏被改了

。。。
後來我嘗試同時使用模板裏的和原裝的bootstrap，之後嘗試修改網站内容，結果變得更奇怪了。

登錄/註冊後可看大圖

夢喵 · 發表於 2023-8-27 22:34:50

我學網頁初期確實也是碼語法
到後面也是先開源免費模板套上去
畢竟都幫你把自適應寬度都弄好了（？
之後再來補自己的需求

---夢喵

茂奧 · 發表於 2023-8-27 23:30:30

一直都很羡慕能製作網站的人，我曾經也是會做網站的，後來因為某些事情忘記了，再也沒有追回來。
在這之後我又開始建設論壇——當然啊用了框架，兩個月內用戶非常少，决定關閉了（九月份）
有個人網站的人都好厲害啊

		自動登錄	找回密碼
密碼			成為喵居民

[哈拉] 洛奇的個人網站1周年：網站的製作歷程

評分