创建小故事 - 为小故事添加更多的内容段落 - 《移动网页加速器(MIP)教程》

知识储备
为小故事添加更多段落
- 添加第一个内容段落
- 添加第二个内容段落
小故事开发系列教程

知识储备

在阅读本篇前，您需要了解什么是小故事，可以查看开发小故事前期准备、小故事的组织结构、创建小故事的封面了解基础信息；

为小故事添加更多段落

在了解了如何使用mip-story-view标签的基础上，接下来继续添加其他的内容段落；

添加第一个内容段落

<mip-story>
    <mip-story-view>
        <mip-story-layer template="vertical">
            <!-- 主标题 -->
            <div class="common-wrap">山姆·洛克威尔</div>
            <mip-img layout="responsive" width="1242" height="1665" src="./static/p5.png"></mip-img>
            <!-- 副标题 -->
            <div class="common-wrap-1">
                <span></span>
                <span>最佳男配角</span>
                <span>主演：三块广告牌</span>
            </div>
        </mip-story-layer>
    </mip-story-view>
</mip-story>

添加第二个内容段落

<mip-story>
    <mip-story-view>
        <mip-story-layer template="fill">
            <mip-img layout="responsive" width="480" height="720" src="https://www.mipengine.org/static/img/mip-story/p6.png"></mip-img>
        </mip-story-layer>
        <mip-story-layer template="thirds" class="common-wrap-2">
            <div flex-area="upper-third">艾莉森·珍妮</div>
            <div flex-area="middle-third"></div>
            <div flex-area="lower-third">
                <span></span>
                <div>最佳女配角</div>
                <div>主演: 我，花样女王</div>
            </div>
        </mip-story-layer>
    </mip-story-view>
</mip-story>

以上是分别两种不同形式的，可满足您在开发过程的不同布局需求，完成内容段落之后，接下来，需要去完善一下小故事的封底页面；

上一节：为小故事创建一个封面。

下一节：为小故事段落中的元素添加交互动画。

小故事开发系列教程