13 - Vue3 UI Framework - 完善官網

為了提升使用者體驗，今天我們來對 <code>jeremy-ui</code> 官網做一個優化 🚀 傳回閱讀清單點選 這裡

習慣用 <code>markdown</code> 文法編輯，是以我們增加項目源碼對 <code>markdown</code> 的支援，雖然即便這樣做依然無法和 JeremyPress 或者 VuePress 相比，但是至少不用糾結于原生 <code>html</code> 了，能夠在一定程度上解決排版問題。

我們需要增加一個 <code>plugins</code> 檔案夾，并且在此檔案夾下建立一個 <code>md.ts</code> 的檔案，代碼如下：

應該看到，這裡我們需要依賴 <code>marked</code> 這個 <code>npm</code> 庫，運作項目之前，需要先安裝一下：

另外，我們還需要在項目的根目錄下建立 <code>vite.config.ts</code> 檔案，并對 <code>markdown</code> 插件做一下配置：

我們可以使用 <code>github-markdown-css</code> 這個庫來擷取樣式表

安裝完成後，在 <code>main.ts</code> 中引入

最後，我們對 <code>Guidance.vue</code> 做下配置以便 <code>markdown</code> 檔案以及 <code>markdown</code> 樣式能夠在項目中被正确的解析：

參考 ElementUI 手冊，我們發現不僅展示了元件，還會給出例子所使用的代碼，我們也在官網中增加檢視代碼的功能。

我們可以在 <code>vite</code> 初始化的時候配置，即在 <code>vite.config.ts</code> 檔案中做配置：

注意 這裡我們通過 <code>// @ts-nocheck</code> 注釋，來忽略靜态報錯

我們可以用 <code>prismjs</code> 庫來獲得代碼高亮，先安裝

然後，再在需要使用的地方，分别引入 <code>prismjs</code> 和 <code>prismjs/themes/prism.css</code>，即可開始使用

<code>prismjs</code> 的工作原理，是構造一個對象，并綁定到 <code>window</code> 上，是以在模闆中使用的時候，需要先擷取 <code>window.Prism</code>，再在 <code>setup</code> 中 <code>return</code> 出去。<code>Prism</code> 對象的常見用例如下：

該對象上提供一個名為 <code>highlight</code> 的方法，該方法要求傳入 3 個參數，按順序分别如下

源代碼

作為代碼進行解析

作為代碼進行顯示（渲染）

最後，我們再在 <code>Content.vue</code> 檔案中配置 <code>Prism</code> 以便内容中涉及到代碼的部分都能被高亮的顯示：

另外，我們還需要在 <code>main.ts</code> 中引入代碼樣式：

樣式可以根據自己的喜好進行選擇，我這裡選的是 <code>prism-solarizedlight</code> 除此之外，檢視 <code>prism</code> 主題包可以看到其他的樣式哦

通過一個開關事件去控制代碼的顯示和隐藏

需要在 <code>Content.vue</code> 檔案中配置一下：

官網的 <code>UI</code> 架構引用改成來自 <code>npm</code> ，這樣能夠更好的提升使用者體驗。先安裝：

再在 <code>main.ts</code> 中引用樣式表：

最後，修改每個例子中的引用即可。

GitHub: https://github.com/JeremyWu917/jeremy-ui

JeremyUI: https://ui.jeremywu.top

感謝閱讀 ☕