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

感谢阅读 ☕