From f65a5ab6cc7446ac3f6cc4933739dab7d635442c Mon Sep 17 00:00:00 2001
From: Espoir-L <413308430@qq.com>
Date: Mon, 21 May 2018 09:27:01 +0800
Subject: [PATCH 1/2] =?UTF-8?q?docs:=20=E5=A2=9E=E5=8A=A0=E5=BC=80?=
=?UTF-8?q?=E5=8F=91=E4=B8=80=E4=B8=AA=E5=B0=8F=E6=95=85=E4=BA=8B=E7=9A=84?=
=?UTF-8?q?=E4=BB=8B=E7=BB=8D?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
source/doc/story/create.md | 718 +++++++++++++++++++++++++++++++++++++
1 file changed, 718 insertions(+)
create mode 100644 source/doc/story/create.md
diff --git a/source/doc/story/create.md b/source/doc/story/create.md
new file mode 100644
index 0000000..553910d
--- /dev/null
+++ b/source/doc/story/create.md
@@ -0,0 +1,718 @@
+title: 创建小故事
+layout: doc
+---
+
+## 小故事的概念
+
+### 小故事是什么
+
+ 小故事是一种可交互的多媒体卡片，是由多元化内容组成的媒体形态，可带来沉浸式、多媒体、可交互的浏览体验，如图，是一个小故事的示例；
+
+- 示例
+
+
+
+### 小故事产品构成
+
+ 每个小故事（Story）下有多个段落（View），每个段落（View）可自由组合音频、视频、图片、GIF、文字等富媒体元素(Element)。
+
+
+
+
+
+### 小故事面向人群
+
+ 小故事采用开放的[MIP技术](https://www.mipengine.org/)，能让站长、自媒体、开发者、商家等各种可以提供优质有创意内容的人群使用工具或MIP技术进行小故事创作。
+
+ 在百度搜索结果页的呈现形式如图：
+
+
+
+## 起步教程
+
+### 1. 技术储备
+
+开发一个小故事的技术储备：
+
+1. HTML，CSS和JavaScript的基本知识；
+2. 对MIP的基础原理和规范，请参考[MIP 的开发文档](https://www.mipengine.org/doc/00-mip-101.html) ；
+
+### 2、开发环境准备，Run起示例Demo
+
+1、下载代码；
+
+- 下载本教程的代码，下载地址如下：[oscar-demo](http://mipstatic.baidu.com/static/mip-static/mip-story/demo/story-demo.zip)；
+- 提取zip文件的内容，减压后在story-demo目录下的oscar-story.html是完整小故事demo的入口。
+
+2、运行示例页面
+
+ 运行示例代码的方法如同启动MIP页面的服务，MIP 页文件可以直接运行，你可以选择如下方式，像预览普通 HTML 站点一样预览 MIP-HTML 页面：
+
+- 直接在浏览器中打开（由于 XML HTTP Requests 失败可能会导致某些元素预览失败）。
+- 在本地部署一个服务，如 Apache，Nginx 等。
+ 使用 MIP-CLI 辅助预览，使用方法见 MIP 博客：[开发教程一](http://www.cnblogs.com/mipengine/p/mip_cli_1_install.html)。
+
+设置完本地的web服务，通过访问一下URL，可查看小故事的Demo示例：
+
+```
+http://localhost:8000/oscar-story.html
+```
+
+完成了以上准备工作，那么接下来，让我们开始开发属于你自己的小故事。
+
+## 小故事的组织结构介绍
+
+ 小故事主要由 [mip-story 组件](/examples/mip-extensions/mip-story.html) 承载，充当小故事中所有段落的容器，按照段落个数自动生成段落导航，返回链接，段落播放完的重播和分享功能。
+
+小故事具有三个基本概念：段落（view），层（layer）和元素（element）.
+
+- 每个小故事可以包含多个段落（view），每个段落充满屏幕。用户操作翻页后，会看到下一个段落。
+- 每个段落又可以包含多个层（layer），单个层可以设置布局模式，如多行布局，左右布局，图片拉伸布局等。
+- 元素（element）是资源素材，如背景图，主标题，详细描述等。在 ``、`
`、`` 等标签中声明。
+
+
+
+ 这里的每一个组件都是一个mip组件，其中故事组件为`mip-story`，段落为`mip-story-view`，层为`mip-story-layer`，元素为资源素材，如背景图，主标题，详细描述等。在 ``、`
`、`` 等标签中声明。
+
+
+
+## 开发小故事
+
+开发一个小故事，只需要简单的三部：
+
+1. 创建封面以及段落；
+2. 为段落添加丰富内容；
+3. 为小故事添加封底；
+
+下面请跟随详细步骤教程开始制作你的第一个小故事吧！
+
+ 小故事由`mip-story`组件表示，它作为故事中所有页面的容器。该`mip-story`组件还负责创建UI外壳，包括处理手势和导航。
+
+ `mip-story`组件是一个自定义的MIP组件，与所有自定义组件一样，您必须要将该组件的关联脚本添加到MIP文档；在一个标准的 [MIP HTML 页面](https://www.mipengine.org/doc/01-mip-demo.html)的`
+
+
+
+
+
+
+