update

04_链接/005_1_image_basic.md

+Markdown 使用一种和链接很相似的语法来标记图片，同样也允许两种样式： 行内和参考。
\ No newline at end of file

04_链接/index.yml

@@ -73,7 +73,7 @@ step4:
 
 step5:
   link: '{{chapter_4_url}}'
-  description: "添加行内链接"
+  description: "添加链接"
   transitions:
     - events: ['note_events']
       left: '/!?\[.+\]\(.+\)/g'

05_图片/005_1_image_basic.md

+Markdown 使用一种和链接很相似的语法来标记图片，同样也允许两种样式： 行内和参考。
\ No newline at end of file

05_图片/005_2_image_inner.md

+#### 行内形式图片
+
+行内形式图片的语法格式为`![Alt text](/path/to/img.jpg "Optional title")`，比如：
+
+```
+![keyboards](https://img-bss.csdn.net/1609921848459.png "好好学习")
+```
+
+<details><summary> 点击查看图片显示效果 </summary>
+<hr>
+
+![keyboards](https://img-bss.csdn.net/1609921848459.png "好好学习")
+
+</details>
\ No newline at end of file

05_图片/005_3_image_ref.md

+#### 参考形式图片
+
+参考形式图片的语法格式为如下：
+
+```
+![Alt text][id]
+[id]: url/to/image  "Optional title attribute"
+```
+
+比如：
+
+```
+![Git 课程][git]
+
+[git]: https://img-bss.csdn.net/1609921848459.png
+```
+
+<details><summary> 点击查看图片显示效果 </summary>
+<hr>
+
+![Git 课程][git]
+
+[git]: https://img-bss.csdn.net/1609921848459.png "好好学习"
+
+</details>
+
+
+到目前为止， Markdown 还没有办法指定图片的宽高，如果需要的话，可以使用 HTML 中的 `<img>` 标签：
+
+
+<details><summary> 点击查看示例 </summary>
+<hr>
+
+
+```
+<img src="https://img-bss.csdn.net/1609921848459.png" width="300px" height="200px" alt="好好学习">
+```
+
+<img src="https://img-bss.csdn.net/1609921848459.png" width="300px" height="200px" alt="好好学习">
+
+</details>
\ No newline at end of file

05_图片/005_4_done.md

+:thumbsup: :thumbsup: :thumbsup:  Well Done!
\ No newline at end of file

05_图片/005_4_error.md

+行内图片形式的格式为 ``![Alt text](/path/to/img.jpg "Optional title")``，请再仔细检查一下你的图片格式哟~~~
\ No newline at end of file

05_图片/005_4_image_exam.md

+参考下方内容，使用行内图片形式，添加一张图片：
+
+提示文字：Markdown
+
+https://img-bss.csdn.net/1609921848459.png
+

05_图片/005_5_end_1.md

+让我们来回顾一下第五章的知识点吧：
+
+1. 可以使用 ``![Alt text](/path/to/img.jpg "Optional title")`` 的形式添加一个图片
+2. 可以使用 参考形式 的方式添加一个图片，其结构为 `![内容][1]` + `[1]: image_url "alt 提示"` 的组合
+
+##### 在开始新的章节学习之前，请点击下方的 `关闭 Issue` 按钮。
\ No newline at end of file

05_图片/005_5_end_2.md

+:thumbsup: :thumbsup: :thumbsup:  Well Done!
+
+请开始前往 [第五章《图片》]({{chapter_5_issue}})的课程内容学习
\ No newline at end of file

05_图片/exam.md

+** :wave: 请点击下方的开始测试按钮  :point_down: :point_down: :point_down:  **
+
+(x) 开始测试 {{准备好了吗？让我们来考考你}}
+
+|| 提示：准备好的话，就点击开始测验按钮吧！ ||
\ No newline at end of file

05_图片/first.md

+** :wave: 准备好了吗？准备好的话请点击下方的开始学习按钮  :point_down: :point_down: :point_down:  **
+
+(x) 开始学习 {{太棒了，让我们开始学习新的内容吧}}
+
+|| 小提示：点击开始学习按钮就ok了 ||
\ No newline at end of file

05_图片/index.yml

+# # 在所有的任务之前执行
+# before:
+#   link: '{{chapter_1_url}}'
+#   transitions:
+#     action:
+#       - type: create_issue
+#         title: "Markdown ：段落及强调"
+#         with: 001_1_markdown_basic.md
+#         store:
+#           chapter_1_url: '{{result.data.html_url}}'
+#       - type: choice
+#         with: first.md
+#     to: step1
+
+before: 
+  link: '{{chapter_5_issue}}'
+  transitions:
+    action:
+      - type: issue_comment.created
+        with: first.md
+    to: step1
+
+# Task 列表
+step1:
+  link: '{{chapter_5_url}}'
+  description: "行内形式图片"
+  transitions:
+    events: ['note_events']
+    action:
+      - type: issue_comment.created
+        with: 005_2_image_inner.md
+      - type: choice
+        with: next.md
+    to: step2
+
+step2:
+  link: '{{chapter_5_url}}'
+  description: "参考形式图片"
+  transitions:
+    events: ['note_events']
+    action:
+      - type: issue_comment.created
+        with: 005_3_image_ref.md
+      - type: choice
+        with: exam.md
+    to: step3
+
+step3:
+  link: '{{chapter_5_url}}'
+#  description: "参考形式链接"
+  transitions:
+    events: ['note_events']
+    action:
+      - type: issue_comment.created
+        with: 005_4_link_exam.md
+    to: step4
+
+step4:
+  link: '{{chapter_5_url}}'
+  description: "添加图片"
+  transitions:
+    - events: ['note_events']
+      left: '/!\[.+\]\(.+\)/g'
+      operator: regexp
+      right: '{{object_attributes.note}}'
+      action:
+        - type: issue_comment.created
+          with: 005_4_done.md
+      to: step6
+    - events: ['note_events']
+      else: true
+      action: 
+        - type: issue_comment.created
+          with: 005_4_error.md
+      to: step5
+
+step5:
+  link: '{{chapter_5_url}}'
+#  description: "粗体"
+  transitions:
+    events: ['note_events']
+    action:
+      - type: issue_comment.created
+        with: 005_5_end_1.md
+    to: step6
+
+step6:
+  link: '{{chapter_5_url}}'
+#  description: "完成当前章节学习"
+  transitions:
+    events: ['close_issue']
+    action:
+      - type: create_issue
+        title: "Markdown ：图片"
+        with: 006_1_image_basic.md
+        store:
+          chapter_6_issue: '{{result.data.html_url}}'
+      - type: issue_comment.created
+        with: 005_5_end_2.md
+    to: end

05_图片/next.md

+** :point_down: :point_down: :point_down: 请点击下方的继续学习按钮   **
+
+(x) 继续学习 {{太棒了，让我们看看接下来的学习内容吧}}
+
+|| 小提示：点击继续学习按钮就可以进入下一步啦。 ||
\ No newline at end of file

05_图片/图片.md

@@ -24,18 +24,18 @@ Markdown 使用一种和链接很相似的语法来标记图片，同样也允
 比如：
 
 ```
-![小猫][cat]
+![Git 课程][git]
 
-[cat]: https://source.unsplash.com/300x300/?cats
+[git]: https://img-bss.csdn.net/1609921848459.png
 ```
 
-![小猫][cat]
+![Git 课程][git]
 
-[cat]: https://source.unsplash.com/300x300/?cats
+[git]: https://img-bss.csdn.net/1609921848459.png
 
 
 到目前为止， Markdown 还没有办法指定图片的宽高，如果需要的话，可以使用普通的 <img> 标签。
 
 ```
-<img src="https://source.unsplash.com/900x600/?computer" width="300px" height="400px" alt="电脑的照片">
+<img src="https://img-bss.csdn.net/1609921848459.png" width="300px" height="200px" alt="好好学习">
 ```