QX-AI
GPT-4
QX-AI初始化中...
暂无预设简介，请点击下方生成AI简介按钮。
介绍自己
生成预设简介
推荐相关文章
生成AI简介

前言

  官方文档:Mini Sandbox,Github仓库:mini-sandbox

  这也算是一篇安利文，markdown本身的代码框直接显示代码，对于前端的代码来说，样式效果全靠截图，动不起来，也没交互，虽然可以复制到我另一个单页HTML/CSS/JS 在线工具，但切换页面和复制终究不直观，影响阅读体验。

  前段时间看到这个新的前端代码、组件可视化方案，兼容任意js环境，就计划弄到Hexo上试试，其纯前端部署,不依赖服务器,静态页即可实现编辑和预览功能也十分契合Hexo静态站，手动适配了下Hexo的夜间模式以及pjax，效果非常不错。

安装

首先推荐先看官方文档。

  我将其保存在本地引入，并且稍微根据需要对mini-sandbox.js作了一点修改，由于这个js压缩后还有450kb，我建议是在有使用需要的单页通过cdn引入。

1
<script src="https://unpkg.com/mini-sandbox@0.3.11"></script>

使用

  在Hexo中使用也很方便

在markdown中需要的地方插入div,并在文末引入一个js
1
2
3
<div id="my-sandbox"></div>
···
<script src="index.js"></script>

index.js中按文档这样写
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
new MiniSandbox({
    el: '#my-sandbox',//注意id和上面的一致
    files: {//要几个页面就仿照写法加几个
        'index.html': {//html
            title: 'HTML',//tab上实际显示的名字
            defaultValue: `<button>点击</button>`,//HTML的内容/代码
            cssLibs: ['index.css'],//html引入的css
            jsLibs: ['index.js'],//html引入的js
        },
        'index.css': {
            title: 'CSS',
            //CSS的内容/代码,写起来排版有点怪，但熟悉了也还好
            defaultValue: `button {
  width: 100%;
  color: red;
}
        `},
        'index.js': {
            title: 'JS',
            //JS的内容/代码
            defaultValue: `const btn = document.querySelector('button')
btn.addEventListener('click', () => {  
    alert('这是一个按钮')
})
        `}
    },
    //用来设置一些Sandbox的默认配置
    defaultConfig: {
        height: '330px',//Sandbox的高度,默认为 '300px'
        autoRun: true,//每次修改后是否自动运行, 默认等于 true
        autoRunInterval: 1000,//每次自动运行的时间间隔,单位为毫秒,默认等于300
        editorRange: '55%',//编辑区域默认占比,默认情况下编辑区域占50%
        draggable: true,//是否可以左右拖动布局, 默认为true
        direction: 'row',//控制上下/左右布局,默认为'row','row' | 'row-reverse' | 'column' | 'column-reverse'
      }
})

  效果如下:

  Mini Sandbox不仅让我能方便展示前端的代码、组件，同时也允许读者直接修改代码框中的内容并运行（自动的，实时的），试着改改下面的代码，看看效果吧。

  Mini Sandbox还对CSS有补全和提示，F12可以直接用浏览器的。

  当然，如果单纯展示,不希望读者修改，也可以将css、js写在resource中:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
new MiniSandbox({
  el: '#exhibition-sandbox',
  files: {
    'index.html': {
      title: 'HTML',
      defaultValue: `<input type="text" value="0"><br><br>
<input type="submit" value="加一">
<input type="submit" value="清除">  
    `}
  },
  resource: {
    cssLibs: [],
    jsLibs: [],
    css: `
      input {
        color: blue;
      }
    `,
    js: `
      var text = document.getElementsByTagName('input')[0];
      var add = document.getElementsByTagName('input')[1];
      var clear = document.getElementsByTagName('input')[2];
      add.onclick = function numberadd(){
        text.value++;  
      }
      clear.onclick = function clearnumber(){
        text.value = 0; 
      }
    `,
  }
})

  效果:

  Mini Sandbox左上角按钮点击后有一些可自定义的功能

  除了上述的一些基本功能,Mini Sandbox还有很多功能，如直接放置CDN链接展示组件库，如Sandbox事件的触发回调函数，如支持vue、react等，并且在持续更新。

更多示例

官方文档提供了一些示例：Examples & 示例

Hexo夜间适配

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
.mini-sandbox{
  box-shadow: none!important;
  border-radius: 7px;
}
[data-theme=dark]
.mini-sandbox{
  background-color: #151515!important;
}
[data-theme=dark]
.cm-activeLine{
   background-color: #252525!important;
}
[data-theme=dark]
.mini-sandbox .sandbox-head{
  background: #202020!important;
}
[data-theme=dark]
.mini-sandbox .cm-gutters{
  background: #202020!important;
}
.mini-sandbox .sandbox-head .sandbox-tab .sandbox-tab-active{
  box-shadow: none!important;
}
[data-theme=dark]
.mini-sandbox .sandbox-head .sandbox-tab .sandbox-tab-active{
  background: #363636!important;
}
[data-theme=dark]
.cm-activeLineGutter{
  background: #363636!important;
}
[data-theme=dark]
.sandbox-body .sandbox-gutter{
  background: #363636!important;
}
[data-theme=dark]
.mini-sandbox .sandbox-gutter{
  border-left: 1px solid #404040!important;
  border-right: 1px solid #404040!important;
}
[data-theme=dark]
.mini-sandbox .sandbox-head .sandbox-tab .sandbox-tab-active::after{
  background: none!important;
}
[data-theme=dark]
.mini-sandbox .sandbox-head .sandbox-tab .sandbox-tab-active::before{
  background: none!important;
}
[data-theme=dark]
.mini-sandbox .sandbox-render{
  background: #E1E1E1!important;
}
[data-theme=dark]
.mini-sandbox .ͼd{
  color: #c3e88d!important;
}
[data-theme=dark]
.mini-sandbox .ͼc{
  color: #c3e88d!important;
}
[data-theme=dark]
.mini-sandbox .ͼb{
  color: #1E90FF!important;
}
[data-theme=dark]
.mini-sandbox .ͼf{
  color: #1E90FF!important;
}
[data-theme=dark]
.mini-sandbox .ͼh{
  color: #ff5370!important;
}
[data-theme=dark]
.mini-sandbox .ͼa{
  color: #FF00FF!important;
}
[data-theme=dark]
.mini-sandbox .ͼi{
  color:#5F9EA0!important;
}
[data-theme=dark]
.mini-sandbox .ͼl{
  color:#969896!important;
}
.mini-sandbox{
  margin-bottom: 10px;
}