Home 技術文章 New Layer0 (Edgio) Docs是New Starting的開始
Applications

New Layer0 (Edgio) Docs是New Starting的開始

About The Author

Outline

改變是不可避免的,而且每次都會隨之而來。 在過去幾年裏,我們被迫進行了一些變革,我們無法直接控制這些變革。 但在Layer0/Edgio,最近的變化是我們自己做的,這是非常需要的:徹底重寫和重新設計Edgio文檔。

這次大修的目的是基礎和可控性。 事實是,我們想要像我們以前從未做過的那樣,把事情交給我們自己處理。 因此,在React beta文檔的大力啓發下,我們通過創建一個基體repo實例,並根據我們的具體使用案例微調它,在巨人的肩膀上提出。‍

第一件事

第一步是Reactflux不和通道。 簡而言之,社羣幫助確定React的測試文檔REPO。

React beta repo作爲頭髮開始

我們花了幾天的時間研究了React docs beta站點是如何構建的,它使用了哪些技術,以及我們如何利用和構建在該堆棧之上以滿足我們的特定需求。 我們對MDX和Next.js的瞭解是正確的,我們發現自己有了一個頭開始。

技術

以下是所使用的一些主要技術:

  • MDX:使用嵌入式React組件進行功能降級
  • next.js:React框架
  • Webpack:模塊捆綁器
  • 造型元件:造型
  • Algolia:搜尋
  • 棱鏡:代碼語法突出顯示

MDX: MDX是元器件時代Markdown的擴展形式。 它允許您將JSX嵌入到任何降級文檔中,從而使具有降級標記的內容創作提升到一個新的水平,從而使降級標記功能正常。

我們已經知道MDX是什麼以及它的強大功能來自MDX,祕密成分和前端文檔,樣式指南和MDX的崛起等文章。 這爲我們創建的一些自定義組件鋪平了道路。

next.js: 將MDX與Next.js配對並不是什麼新功能,所以第一次本能就是閱讀官方文檔或此部落格文章。 有幾種方法可以將標記下載到Next.js頁面,例如在getStaticProps,getStaticPaths或getServerSideProps中使用remark和remarke-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。

評論/重新類型插件的豐富生態系統可以要求@MDX-js/loader的幫助,以便將markdown轉換爲html。

樣式組件: 雖然在Next.js中編寫CSS有很多方法,但我們選擇了樣式組件。 藉助風格化的組件,我們能夠以更多的組合,模塊化,耦合和更少的干擾方式創作組件樣式。 瞭解如何在React中使用樣式組件,或探索樣式組件Happy Path以瞭解有關樣式組件的更多資訊。

Algolia: 我們已升級到最新版本的DocSearch v3,該版本構建在Algolia AutoComplete之上,增強了可訪問性和響應性,從而在臺式機和移動設備上提供更流暢的體驗。 再加上Algolia Crawler在執行搜尋時提取最相關的資訊。

PRISM: PRISM是經過充分測試和信任的代碼語法螢光筆。 它不僅易於入門,而且還具有豐富的插件生態系統,並且可以通過合理的預設值進行擴展,以實現諸如主題之類的操作。

功能

儘管重新設計的特徵是在面值上有很大的外觀變化,但還有其他特徵,例如:

包含重要詳情的新主頁

開始使用Layer0/Edgio平臺的四大支柱,構建您的道路,併爲Layer0/Edgio提供更多功能。

主題

只需單擊按鈕即可切換主題模式。 從淺模式轉爲暗模式,反之亦然,或由作業系統決定。

改進的導航

兩種主要的導航模式—菜單(左側)和目錄(右側)—經過重新設計,可以更好地導航和掃描。 新的分頁控件(位於底部)可幫助您瞭解下一個指南和之前的指南。

改進的代碼鎖

使用PrismJS,語法突出顯示和自定義非常簡單。

改進的搜尋

Algolia搜尋已升級到v3,使我們可以更好地控制爲結果編制索引的內容。 這也適用於移動設備。

但等待,還有更多

React beta文檔REPO有很多事情要做,我們在這裏能夠充分利用開源的強大功能。 有一些東西我們幾乎從盒子裏得到,如目錄,文檔分頁,麪包屑, SEO等. 其中一些我們已進行調整,以更好地服務於我們的環境,還有一些我們仍在探索。

貢獻

對我們來說,這是新的文件,是朝着正確方向邁出的一步,也是新開端的開始。 我們希望您加入我們的行列,因爲我們將繼續幫助您更快,更安全地創建網站,而不會影響開發人員體驗。 Layer0開發人員文檔的原始碼位於GitHub上的開放存儲庫中,我們歡迎反饋和拉出請求。 如果您找到了打字錯誤或更好的解釋方式,請提交拉出請求或提交問題! 此外,請參閱我們的貢獻準則。

Tags

Just For You