跳至主要內容
Playground 插件 v3

Playground 插件 v3

让你的 VuePress 站点中的 Markdown 文件支持 Vue SFC Playground 类似的代码案例。

v2 相比,重写了 Markdown 插件的逻辑,减少 container 嵌套。

使用 @file, @imports, @settings 来代替原来的 ::: file, ::: imports, ::: settings, 其他未变。


Zhao Bin原创大约 2 分钟themeplaygroundvuepressthememarkdownplayground
ECharts 插件

ECharts 插件

让你的 VuePress 站点的 Markdown 文件支持 ECharts 图表。

使用本插件时,需要自己安装 echarts 依赖,本插件会将 echarts 加到 optimizeDeps 中。
另外,本插件使用了 vueuse,用来做宽度自适应。


Zhao Bin原创大约 2 分钟themeechartsvuepressthememarkdownecharts
Sandpack 插件

Sandpack 插件

让你的 VuePress 站点中的 Markdown 文件支持 Sandpack 类似的代码案例。

缘由

手头的项目刚刚收尾,看知乎一个 React 和 Vue 撕逼问题时,里面提到了最新的 React 的一些新特性,也附上了 React 新的官网 react.dev . 出于好奇点了进去,然后看到了官网的可交互示例,觉得不错,然后看了下源代码,发现是使用的 sandpack-react
看了下 sandpack 官网,感觉功能挺强大的,集成到 vuepress 里做代码演示很不错。


Zhao Bin原创大约 2 分钟themeplaygroundvuepressthememarkdownsandpackcodesandboxplayground
文章分栏布局

文章分栏布局

如果想要文章分两栏来展示的话,可以借助 CSS 的 columns 来完成。

为了方便直接使用,做了一个 css 文件。


Zhao Bin原创小于 1 分钟themevuepresstheme
自动显示当前路径下的文章列表

自动显示当前路径下的文章列表

起因是为了方便管理文章,将文章按目录存放,但是这样存放后,地址栏和导航栏会自动多一层路径。

如果启用了 AutoCatalog 功能的话,会自动显示目录,不开启的话,显示会有问题。
AutoCatalog 显示的目录不太符合文章的风格,想做成显示文章列表的样子,于是就写了 AutoArticles 功能。
同时,验证了一下自定义布局的功能。

自定义布局

为了在文章目录下显示文章列表,默认的布局无法实现,因此需要自定义布局。


Zhao Bin原创大约 2 分钟themevuepresstheme
Gitlab 贡献者插件

Gitlab 贡献者插件

本插件用来显示 gitlab 作为版本管理的 vuepress-theme-hope 项目的贡献者。

初衷

公司领导想提高效率,征集经验集,工具集以方便大家使用,于是就用 vuepress-theme-hope 搭了个简单的知识库。
再配合 waline 加上了评论功能。

由于是内网环境,所以在公司的 gitlab 服务器上建了一个 git 仓库。
为了鼓励大家积极踊跃地分享,写了个 GitlabContributors 组件,在主页上显示贡献者头像。


Zhao Bin原创大约 5 分钟themevuepressthemegitlab
Playground 插件 v2

Playground 插件 v2

让你的 VuePress 站点中的 Markdown 文件支持 Vue SFC Playground 类似的代码案例。

同时支持外置和内置两种模式:

  • 外置模式,通过嵌入iframe的形式来引入 playground.
  • 内置模式,通过@vue/repl直接渲染出来 playground.

v1 更强大。


Zhao Bin原创大约 4 分钟themeplaygroundvuepressthememarkdownplayground
自定义主题

自定义主题

本站使用功能强大的 vuepress-theme-hope 主题,主题简洁,markdown 插件功能丰富。
同时,vuepress-theme-hope 提供了完善的文档,以及 QQ 交流群,作者 Mr.Hope 更新频率高,问题反馈处理也很及时。

使用 vuepress-theme-hope 时,发现了一些小问题,自己重写了一点 css,根据文档可以替换组件,或者继承主题实现自己的主题。
最开始修改过的导航栏跟博主信息的间距问题,文章置顶图标,已经提过 PR 不需要再自定义了。
下面介绍一下自定义的部分。


Zhao Bin大约 2 分钟themevuepressthememarkdown