feat: 在线编辑

index.html

@@ -104,7 +104,52 @@
           'https://gitee.com/-/ide/project/lingxyz/learning/edit/master/-/',
           null,
           '✍🏻'
-        )
+        ),
+        /* 编辑插件 */
+        function(hook, vm) {
+          var contents = ''
+          const editableDiv = document.createElement('div');
+          // 每次开始解析 Markdown 内容时调用
+          hook.beforeEach(function(content) {
+            contents = content
+            console.log(content)
+            return content;
+          });
+          hook.doneEach(function() {
+            editableDiv.innerHTML = contents
+          })
+          //  初始化并第一次加载完成数据后调用，没有参数。
+          hook.ready(function() {
+            // 创建元素
+            const div = document.createElement('div');
+            div.style.display = 'none';
+            editableDiv.contentEditable = true;
+            editableDiv.style.whiteSpace = 'pre-wrap';
+            // editableDiv.innerHTML = contents
+            div.appendChild(editableDiv);
+            const button = document.createElement('button');
+            button.innerHTML = '修改'
+            div.appendChild(button);
+            // 将div元素插入到x元素的最后面
+            const sectionContent = document.querySelector('section.content');
+            sectionContent.appendChild(div);
+            // 创建编辑按钮
+            const editorButton = document.createElement('button');
+            editorButton.innerHTML = '编辑'
+            const markdownSection = document.querySelector('.markdown-section');
+            editorButton.addEventListener('click', () => {
+              div.style.display = 'block'
+              editorButton.style.display = 'none'
+              markdownSection.style.display = 'none'
+            });
+            button.addEventListener('click', () => {
+              div.style.display = 'none'
+              editorButton.style.display = 'block'
+              markdownSection.style.display = 'block'
+            });
+            sectionContent.insertBefore(editorButton, sectionContent.firstChild);
+          });
+        }
       ]
     }
   </script>

web/_sidebar.md

@@ -31,5 +31,5 @@
   * SSG
 
 * **监控**
-  * [Sentry](sentry.md)
+  * [Sentry](web/sentry.md)
   * 埋点

web/javascript.md

@@ -9,6 +9,8 @@ Undefined、Null、Boolean、Number、String
 1种复杂数据类型：Object
 ```
 
+[ECMAScript 6 入门](http://es6.ruanyifeng.com/#docs/intro ':include :type=iframe width=100% height=400px')
+
 - [`ES6` 简介](http://es6.ruanyifeng.com/#docs/intro)
 - [let 和 const 命令](http://es6.ruanyifeng.com/#docs/let)
 - [变量的解构赋值](http://es6.ruanyifeng.com/#docs/destructuring)
@@ -18,17 +20,16 @@ Undefined、Null、Boolean、Number、String
 - [Symbol](http://es6.ruanyifeng.com/#docs/symbol)
 - [Set 和 Map 数据结构](http://es6.ruanyifeng.com/#docs/set-map)
 
-- 【ES7】 [ES7 and ES8 特性](https://www.jianshu.com/p/a138a525c287)
-  -  [Array.prototype.includes](es7/Array.prototype.includes.md)
-  - [Exponentiation Operator(求幂运算(a ** = b) = a ** b = Math.pow(a, b))]()
-
+[ES7 and ES8 特性](https://www.jianshu.com/p/a138a525c287 ':include :type=iframe width=100% height=400px')
+  -  Array.prototype.includes
+  - Exponentiation Operator(求幂运算(a ** = b) = a ** b = Math.pow(a, b))
 - ES8(EcmaScript 2017)
-  - [String padding(字符串填充 padStart / padEnd)]()
-  - [Object.values / Object.entries]()
-  - [Object.getOwnPropertyDescriptors返回对象所有自身属性描述]()
-  - [Trailing commas(函数参数列表和调用中尾部的逗号)]()
-  - [Async Functions(异步函数)]()
-  - [共享内存和Atomics]()
+  - String padding(字符串填充 padStart / padEnd)
+  - Object.values / Object.entries
+  - Object.getOwnPropertyDescriptors返回对象所有自身属性描述
+  - Trailing commas(函数参数列表和调用中尾部的逗号)
+  - Async Functions(异步函数)
+  - 共享内存和Atomics
 
 - [ES11](https://mp.weixin.qq.com/s/q8G82BJE1O6Kz031RNBLbw)
 ### 引用类型

web/qiankun.md

@@ -1,16 +1,19 @@
-# 背景
+## 简介
 - [qiankun 官方文档](https://qiankun.umijs.org/zh)
 - [基于 single-spa](https://github.com/single-spa/single-spa)
 - 蚂蚁金服内部孵化，服务超过200+平台
 
-# 微前端集成
-- 主应用-加载微应用
-- 微应用-路由
-- 微应用-配置原则
-- 微应用-原生配置
-- 微应用-vue配置
+## 微前端集成
+### 主应用-加载-微应用
 
-# 微前端通信
+[在主应用中注册微应用](https://qiankun.umijs.org/zh/guide/getting-started#2-%E5%9C%A8%E4%B8%BB%E5%BA%94%E7%94%A8%E4%B8%AD%E6%B3%A8%E5%86%8C%E5%BE%AE%E5%BA%94%E7%94%A8 ':include :type=iframe width=100% height=300px')
+
+### 微应用-路由
+### 微应用-配置原则
+### 微应用-原生配置
+### 微应用-vue配置
+
+## 微前端通信
 - 账号打通
 - 权限打通
 - 绕开账号权限问题
@@ -21,11 +24,11 @@
 ```
 - 参数传递，安全性
 
-# 微前端部署
+## 微前端部署
 - 微前端-部署
 - 跨域解决
 
-# 微前端原理
+## 微前端原理
 - HTML entry
 - JS 沙箱
 - 样式隔离