九藏喵窩V5

標題: 洛奇的個人網站銳意製作中 [打印本頁]

作者: 洛奇/Rocky 時間: 2022-8-26 00:03
標題: 洛奇的個人網站銳意製作中
本帖最後由 Kirbysfan 於 2022-8-26 00:39 編輯

6月的時候，我接觸了一個叫Mimo的代碼學習應用程序，很喜歡學習編程的我用它重新學習了Python的基礎，并且學習了最基礎的網頁製作。
從會寫HTML的那一刻起，我就為自己建立了個人網站。
來到喵窩並創造了屬於自己的喵設--洛奇后，我一直都想將洛奇的設定往軟件工程師的方向完善。
與此同時，我也想到很多程序員都是有自己的網站的。
因此，從洛奇誕生以來，我就有了爲其建立網站的想法。
我決定先從網站的基本模板開始做起，并且不套模板，因爲自己做出來的網站才是最有價值的。
我想讓洛奇的網站看起來更加正式和美觀，因此我自此以後我開始每天都學習一些Web知識，每學到一個對完善網站有幫助的知識，就首先應用到洛奇的網站上。
我雖然成功做出了華麗的網站，但如何使其在電腦端與移動端都能完美的顯示一直都是個問題。。。

昨天下午學到了BootStrap，我早就聽説它可以用於構建桌面與移動端都能很好的顯示的網站，於是我決定學習它後解決這個一直沒有解決的問題。
然而，問題來了。。Mimo對於用BootStrap構建這類網站的教程幾乎沒有。。。

我當初決定放棄，並開始打算套模板。
我找到了一些可以具有自定義左側導航欄，切換到移動端還可以實現抽屜式導航欄功能的模板。
打開VSCode看了下它的源代碼後，我有了把它直接複製粘貼到原網站本體上的想法（此時原網站已經導入了BootStrap庫）
結果很快就產生了一堆問題，我當初並沒有注意到那個模板的Bootstrap庫是修改過的，結果左側狀態欄死活無法實現。把那邊的Bootstrap庫導過去後反而產生了更嚴重的排版問題。
於是我決定學習製作這種左側導航欄。
在網上看了半天的各種文檔后，我在Github找到了可以實現左側導航欄的插件，這樣只要掌握普通導航欄的製作方式後再導入插件就可以輕鬆實現左側導航欄。
於是我開始照著文檔學習導航欄的做法，最終自己重新寫了一邊導航欄的HTML代碼，但保留了那個模板裏實現移動端導航欄的部分，與此同時，刪掉了此前用Flexbox創造的右側導航欄。
最後，我終於完成了網站的模板部分！它在桌面端看起來就像這樣！

登錄/註冊後可看大圖

而在移動端，它看起來像這樣！

登錄/註冊後可看大圖

到了今天早上，我就可以完善網站内的内容，同時趁此機會完善喵設的各種設定！
一個更加生動的洛奇就將呈現於喵窩！

補充：圖床在GitHub，因此一些陸喵可能加載不出來圖片，我在此感到抱歉= =

作者: 小松 時間: 2022-8-26 08:43
寫得還蠻不錯的阿努力認真的學習能使你更加進步不懂的部份也能多查查資料網路上教學多
或是問會的朋友也可以加油

作者: 九藏 時間: 2022-8-26 09:49

那麼就好好期待你的作品囉!

歡迎光臨九藏喵窩V5 (https://forum.dnaxcat.net/)