如何建構材質設計( Material Design )網頁？流程大概是？(基于React)

嘗試閱讀我的建站流程，并跟随幾個問題來針對您自身定制建構方案。

文末有所有相關内容的連結，請先專注于文章内容吧

7月起

前端設計

React: 引用 Material UI 元件庫建構網頁、設計頁面路由
Material UI: 基于 Material Design 的 React 元件庫
           

在這個月決定開始制作個人網頁，很久之前關注到了Material UI——一個基于 React 的 Material Design 元件庫，又由于 React 可以實作，這次便抛棄 HTML + CSS + JavaScript 的方法來建構網頁。事實證明，React + Material UI 在極大程度上縮短了本網站的開發周期。

我開始學習 React 課程，跟随 尚矽谷2021版React技術全家桶全套完整版 - 天禹老師 這個課程，學習到了第 64 集 - 最後一節 TodoList 案例 。此時已至7月20日。

為什麼不學習後面的課程？

我們的目标明确，能夠處理好元件的編寫、父子元件傳遞資料和各個寫法互相轉換即可。如果項目趕，後期需要的例如路由（實作頁面轉換，實際上 React 隻有一個 HTML 頁面，每次進行了不同的渲染）、componentDidMount 的利用（可以幫助頁面重新整理資料和接收來自伺服器的資料等，課程内已經講過），可以搜尋一些資料定向補充學習即可，請不要把您珍貴的開發時間浪費在不必要的知識點上。

提到轉換是因為 Material UI 元件庫内的示例代碼都為函數式元件，但我們會遇到已經寫好了某一種大型元件的情況（例如已經寫好了大型的類式元件，不易删改，新加入的元件由函數式編寫），某些用法也可能隻能被用在類式元件或函數式元件中，是以，學會轉換能夠幫助我們順利的進行元件的編寫。

還是7月

在已經跟随 TodoList 案例進行編碼後，就能對 React 的使用有大概的了解。因為網站最初定義為個人部落格，是以首頁的最初架構借鑒了 Material UI 部落格模闆，但後來逐漸發展為 Material Design 與前端交流，是以中途構想了其他的幾個頁面。得益于 React，每一天都能夠完成很多元件的編寫和引入利用，大概7月28日整個網頁已經初步完善（包括背景頁面與資訊請求）。

背景的設計

Egg.js: 接收 MYSQL 的資料并建立一個伺服器網頁供前端請求
MYSQL: 提供文章、賬号資料
Axios: 在前端快速實作 Get、Post 請求
           

這麼設計是因為有幸搜尋到來自 技術胖 的部落格設計教學 —— React實戰技術部落格系統。視訊裡利用了 Ant Design 來建構部落格（元件庫，同樣可建構界面），與 Material UI 元件庫的元件樣式完全不相同，是以在寫文章清單元件的時候也确實遇到了一些問題，但是網際網路上有很多解決方案，特别是來自 Github 的一些内容，您隻需要專項搜尋即可，下一期會出一篇關于我遇到了那些經典問題并如何解決的文章。

跟随 學習到 32 集 ——背景開發8—中台登入接口編寫，就應該可以自己寫 Egg.js 的控制器和端口了。當然，如果您閱讀了 Egg.js 的官方文檔，那麼您應該了解，實際上要編寫更完善的代碼，我們還要寫 Service，但技術胖的編寫方式幫助我們省略了一些代碼量，加快了開發，但是可能不對您的項目适用，是以請合理學習與應用，不要一刀切。

7月末

深入學習網頁所需要的 Material Design 相關指南

既然選擇使用了 Material Design，那麼，在網頁基本結構和邏輯建構好後，遵守相應的規範就應該成為第一需求了，于是，針對懸浮操作按鈕、顔色、暗色模式進行了進一步的了解，并優化了網頁的相關部分。因為目前無法選出符合自己網頁的顔色調色闆，是以選用了預設的紫色作為次要顔色。

都來到這裡了，再努力一下吧！

後來，看到了一篇來自谷歌開發者的文章 ——使用 Material Design 元件實作 Material 動效，正如初次見到 Material Design 一樣，再次被其驚豔到。于是再深入研究了下 Material UI 的提供的動畫庫（承認，不知如何使用 React Transition 來實作一個跟這篇文章中的郵件應用一樣的動效，是以自己隻實作了一個打開文章界面漸變的效果），當然，相關的規範還是需要遵循。

8月了，不早了。

開始了解如何搭建網站，再一次開始大量搜尋資料：Linux基本操作、Nginx反向代理、manifest.json 檔案的優化 等。最後終于把網頁備案了。

我知道您還能再優化

利用浏覽器自帶的 Lighthouse 工具 （ 我使用了 Edge 浏覽器，大部分主流的浏覽器都有這個功能 ）能夠很友善的看到自己網頁某一個頁面的評分，包括了性能，可通路性（ 無障礙性）、是否是最佳做法。雖然是英文，但是看不懂的利用網頁翻譯插件即可。通過這一步操作，發現字型沒有預先加載，是因為自己粗心引用了兩次相同的 Google Font API，導緻了誤判。順便也在 Google Font API 上找到了更适合網頁的字型。

同時也發現了文章加載過慢的問題，原因是一開始設計的時候把所有的文章資料全部加載到了一個頁面上，導緻文章和媒體頁面卡頓，現在已經優化了，我把點選後對應的文章資料單一傳到了一個新的頁面打開。

後續，等待備案成功。

詢問自己幾個問題，幫助您改善建構方案

Material Design 設計主管 Bethany 在 AMA # 答疑解惑會議上講到：“從我交談的每個人的對話中，我了解到他們都能對于自己的事業提出一些自己想要去探索的問題。”

這裡我根據自己的建構曆程，提出了以下幾個問題：

1. 我為什麼要使用這個技術？
2. 我應該一直跟随這個指南（視訊、文檔）嗎？現在的需求允許我這麼做嗎？
3. 他或她又或者是他們講的對嗎？
4. 我可不可以在不影響整個建構的情況下簡略代碼？
5. 如果使用了規範，還有什麼我沒有遵守嗎？
6. 我喜歡目前的方向嗎？是不是可以繼續使用？

如果您仔細閱讀了文章，您應該知道我對于其中的問題是有所思考的，尤其是前三個問題，在學習他人分享的時候是值得考慮的。當然，由于學的太少，是以這篇文章裡可能有很多我沒發現的描述問題，若您能幫助我改正，歡迎與我交流，我會了解後及時更正，多謝您的幫助。

當然，這隻是我的一個學習與輸出流程，每個人都是獨一無二的，對于您的建構流程應該是屬于适合您自己的才是最棒的，當然，如果您選擇了相同的路線，有任何問題歡迎與我交流。對了，不要害怕失敗。

😃

新開了一個專欄——AMA # 答疑解惑，翻譯了5月份 Google I/O 2021 大會上 Material Design 團隊對于網友問題的線上回答，敬請關注本賬号内容。

相關内容

Material UI 元件庫 - React

Material UI 部落格模闆 - React

關于 Material Design 的各種網頁元件庫 - Vuetify、Angular

React 中文文檔

尚矽谷2021版React技術全家桶全套完整版 - 天禹老師

React實戰技術部落格系統 - 技術胖

Service - Egg.js

Material 顔色工具

Material Design 暗色模式文檔

Material Design 動效文檔