51工具盒子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夜间适配 {#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; } |
