變革是不可避免的，而且它時不時地發生。 在過去幾年裡，我們被迫進行了一些變革，而我們無法直接控制這些變革。 但在Layer0年/Edgio，最近的變化是我們自己做出的，這是非常需要的：完全重寫和重新設計Edgio文件。
這次大修旨在實現基礎性和可控性。 事實是，我們想要像以前從未做過的那樣將事情交給我們自己處理。 因此，我們受到React beta文檔的極大啟發，通過創建一個Base repo實例並根據我們的具體使用案例對其進行微調，從而在巨人的肩上建立起目標。
第一件事
第一步是反動通量不和管道。 簡而言之，社群幫助確定了React的Beta文檔版本。
反應式beta回彈是一個頭髮
我們花瞭幾天時間研究了React docs測試站點是如何構建的，它使用了什麼技術，以及我們如何在該堆棧上利用和構建以滿足我們的特定需求。 我們對MDX和Next.js的熱衷是對的，我們發現自己有了一個頭髮。
技術
以下是使用的一些主要技術：
- MDX：具有嵌入式REACT組件的功能標記
- next.js：React框架
- Webpack：模塊綁定器
- 樣式組件：樣式
- Algolia：搜尋
- Prism：代碼語法突出顯示
MDX：MDX是組件時代Markdown的擴展形式。 它允許您將JSX嵌入到任何標記文檔中，從而使標記功能正常，並將帶標記的內容創作提昇到一個新的水平。
我們已經從MDX，祕密成分和前端文檔，樣式指南和MDX的興起等文章中了解到MDX是什麼以及它的強大。 這為我們創建的一些自定義組件鋪平了道路。
next.js：將MDX與next.js配對並不是什麼新事物，因此第一本能是閱讀官方文檔或此博文。 有幾種方法可以將標記保存到Next.js頁面，例如使用本地標記文檔，然後使用getStaticProps，getStaticPaths或getServerSideProps中的remark和remark-html等軟體包將其轉換為HTML
另一種方法是使用@next/MDX包將`.md`或`.mdx`文件直接定義爲Next.js頁面，或者如果您想處理較低級別的內容，請遵循React的團隊方法和DIY。
Webpack：next.config.js (或next.config.mjs)由Next.js伺服器和構建階段使用。您可以在此處配置Next.js以用於高級使用案例，例如讓markdown讀取pages目錄中的`.mdx`文件擴展名並將其作為Next.js頁面載入。
Webpack使用加載程序來預處理文件。其中一個較常見的使用案例是傳輸，其中一個常見的軟件包是Babel-loader (使用Babel將ES2015多個代碼和傳輸文件加載到ES5)。要在Next.js中加載帶有webpack的`.mdx`文件，則使用@MDX-js/loader。
mark/rehype插件的豐富生態系統可由@mdx-js/loader提供幫助，將markdown轉換為html。
樣式組件：雖然在Next.js中有許多方法可以編寫CSS，但我們選擇了樣式組件。 有了樣式的零組件，我們就能以更集中，模組化，耦合，以及更少打擾的方式來製作零組件樣式。 了解如何在React中使用樣式組件，或探索樣式組件Happy Path，了解有關樣式組件的更多資訊。
Algolia：我們已升級到基於Algolia AutoComplete構建的最新版本DocSearch v3，增強了可訪問性和響應性，從而在桌面和移動設備上提供更流暢的體驗。 此外還有Algolia Crawler，在執行搜索時提取最相關的信息。
Prism：Prism是經過充分測試且值得信賴的代碼語法螢光筆。 它不僅易於入門，而且還具有豐富的插件生態系統，並且可以通過合理的預設值進行擴展，以用於像主題這樣的操作。
功能
雖然重新設計的特徵是表面值的外觀變化，但還有其他特徵，例如：
包含重要詳細資訊的新主頁
開始使用Layer0平臺的四大支柱，構建您的路線，並實現Layer0提供的更多功能。
主題
只需單擊按鈕即可切換主題。 從淺色模式切換到深色模式，反之亦然，或者由操作系統決定。
改進的導航
兩種主要導航模式(菜單(左側)和目錄(右側))已經過重新設計，以便更好地導航和掃描。 新的分頁控件(位於底部)可幫助您了解下一個集和前一個集。
改進的代碼塊
使用PrismJS，語法突出顯示和自定義變得非常簡單。
改進的搜尋功能
Algolia搜尋已升級到v3，這使我們可以更好地控制為結果編制索引的內容。 這也適用於移動設備。
但請稍等，還有更多
React beta版文檔repo有很多事情要做，我們已經能夠充分利用這裏的開放源代碼的強大功能。 我們幾乎可以從盒子裡得到一些東西，如目錄，文檔分頁，麵包屑，SEO等 其中一些我們已經調整以更好地服務於我們的環境，還有一些我們仍在探索。
貢獻
對我們來說，這份新文件是朝著正確方向邁出的一步，也是一個新開端的開始。 我們希望您加入我們的行列，繼續幫助您更快，更安全，同時不影響開發人員的體驗。 Layer0開發人員文檔的原始碼位於GitHub的開放存儲庫中，我們歡迎反饋和拉出請求。 如果您找到了拼寫錯誤或更好的解釋方法，請提交拉出請求或提交問題！ 此外，請參閱我們的貢獻指南。
