fix(koa): 修复文档显示异常，完善教程

Author: 142vip.cn

code/koa/koa-run-sort.js

@@ -0,0 +1,40 @@
+const Koa = require('koa')
+const app = new Koa()
+
+/**
+ * logger
+ * 第一个中间件，记录日志
+ */
+app.use(async(ctx, next) => {
+  const middleRes1 = await next()
+  console.log('middleware1===>', middleRes1)
+  const rt = ctx.response.get('X-Response-Time')
+  console.log(`${ctx.method} ${ctx.url} - ${rt}`)
+  return 'back middleware1 result'
+})
+
+/**
+ * x-response-time
+ * 第二个中间件，记录响应时间
+ */
+
+app.use(async(ctx, next) => {
+  const start = Date.now()
+  const middleRes2 = await next()
+  console.log('middleware2===>', middleRes2)
+  const ms = Date.now() - start
+  ctx.set('X-Response-Time', `${ms}ms`)
+  return 'back middleware2 result'
+})
+
+/**
+ * response
+ * 最后一个中间件，处理响应
+ */
+app.use(async ctx => {
+  ctx.body = 'Hello World'
+  console.log('middleware3===>')
+
+  return 'back middleware3 result'
+})
+app.listen(3000)

docs/manuscripts/server-end/framework/koa/images/koa-run-sort.png

@@ -26,6 +26,7 @@ export const KoaSidebar = [
     ]
   },
   {
-    text: '最佳实践'
+    text: '最佳实践',
+    link: 'https://code.142vip.cn'
   }
 ]

docs/manuscripts/server-end/framework/koa/koa.sidebar.ts

@@ -5,16 +5,51 @@ permalink: /manuscripts/server-end/framework/koa-tutorial/application.html
 
 # Application应用对象
 
+`Koa` 应用程序是一个包含一组中间件函数的对象，它是按照类似`堆栈`的方式组织和执行的。
+
+如何理解这里的类似堆栈的方式呢？直接下面的例子：
+
+@[code js](@code/koa/koa-run-sort.js)
+
+当服务运行起来时，会先准备一个栈，等待着被调用，暂且称为`调用栈`。 在调用栈里面，三个中间件一次进入栈中，
+其中第一个中间件会被压到栈底。
+
+进入栈的顺序（中间件1在栈底）：
+
+```mermaid
+---
+title: 中间件调用流程
+---
+stateDiagram-v2
+    客户端 --> 中间件1
+    中间件1 --> 中间件2
+    中间件2 --> 中间件3
+    中间件3 --> 服务端
+```
+
+执行调用的顺序（栈顶的中间件函数先执行）：
+
 ```mermaid
 ---
 title: 执行流程
 ---
-flowchart TB
-    a1-->a2
-    a2-->a1
-    
+flowchart TD
+    服务端-->中间件3 --> 中间件2--> 中间件1 --> 客户端
 ```
 
+其中，在中间的处理函数中存在两个参数:
+
+- `ctx` 当前请求的上下文对象
+- `next` 下一个中间件的执行器
+
+利用`next()`可以获取到下一个执行函数的返回结果。例如：在中间件2中可以拿到中间件3的返回结果
+
+![](../images/koa-run-sort.png)
+
+到这里应该就能慢慢地理解koa的app对象是如何工作的、调用链路、顺序是怎样的，这也就是来的洋葱圈模型
+
+此刻，想到那首歌：”如果你愿意一层一层地剥开我的心，你会发现、你会讶异....“
+
 ## 设置App属性
 
 在使用koa时，一般是利用Koa模块new一个app对象

docs/manuscripts/server-end/framework/koa/tutorial/Application对象.md

@@ -10,7 +10,6 @@ export const ServerEndSidebar = [
   },
   {
     text: 'ES6',
-    // collapsible: true,
     link: 'es6'
   },
   {

docs/manuscripts/server-end/server-end.sidebar.ts

@@ -8,12 +8,12 @@ actions:
   - text: 快速开刷 →
     link: /quick-start.md
     type: primary
-  - text: 工作机会
+  - text: 工作机会💡
     link: /manuscripts/job-chance/job-poster-bytedance.md
     type: secondary
-  - text: 公众号文章💡
-    link: /manuscripts/wechat-list.md
-    type: secondary
+#  - text: 公众号文章💡
+#    link: /manuscripts/wechat-list.md
+#    type: secondary
 
 features:
   - title: 前端
@@ -34,12 +34,8 @@ features:
     details: 尝试尝试再尝试，等等我呀...
 ---
 
-
-
-
 [//]: # (<BiliBili bvid="BV1rd4y1V7tB"  />)
-
-[//]: # (<XiGua id="7191010629048716605" />)
+[//]: # (<XiGua id="7195198927220834868" />)
 
 ## 本地浏览【推荐】