Sitecore Habitat 轮播图组件 Page Header Media Carousel 详解

最近在看sitecore 最佳实践项目 sitecore Habitat。争取每周都能分享一些学习心得。
分享的原因是看了一篇blog A Tale of Two Seas | Prakash Iyer。最近但凡看到跟以色列相关的都很吸引我，也很容易打动我。

Habitat首页的轮播图大概长下面这个样子。

image.png

轮播图内容实例：/sitecore/content/Habitat/Global/Media/Carousel
轮播图Carousel实例是由媒体图片Image实例或媒体视频Video实例组成的

image.png

在project级别创建/sitecore/templates/Project/Common/Content Types/Media/Carousel 模板：
创建轮播图模板：

image.png

这个轮播图模板继承 _HasMediaSelector
在Feature中定义的_HasMediaSelector模板

image.png

_HasMediaSelector 中定义了一个Multilist
multilist的datasource（ds） query:/sitecore/content//Global/Media//[@@templateid='{F0369E1A-9030-4A05-A09C-EF09B664ED27}' or @@templateid='{F1C095E2-B3E0-46D0-B838-02A9E8B880D9}']
templateid符合查询条件的所有资源
Image /sitecore/templates/Project/Common/Content Types/Media/Image
Video /sitecore/templates/Project/Common/Content Types/Media/Video

创建轮播图模板：
轮播图模板继承了 _HasMediaImage 模板
_HasMediaImage 继承了 _HasMedia 模板

/sitecore/templates/Project/Common/Content Types/Media/Image
Media 中封装的图片和一些基本的描述信息
Title for the media:
Description for the media:
High-resolution image:
Thumbnail image:

创建轮播视频模板：
继承了 _HasMediaVidow
_HasMediaVidow 继承了 _HasMedia 模板

/sitecore/templates/Project/Common/Content Types/Media/Video
同理video中也封装了video的描述属性
Link to video:
Title for the media:
Description for the media:
Thumbnail image:

1，把基本信息中需要的图片上传到 Media库中
/Habitat/Images/Wide/Habitat-004-wide
/Habitat/Images/Wide/Habitat-007-wide ...
2，创建Media/目录下的Image文件，关联上传的图片
3，创建Media/目录下的Carousel对象 ，关联创建的Image对象

内容准备好，接下来准备presentation
添加component关联datasource
组件名称“Page Header Media Carousel”路径 Renderings/Feature/Media/Page Header Media Carousel
View Rendering cs文件路径：/Views/MediaFeature/PageHeaderCarousel.cshtml

收工。
怎么样，是不是感觉复杂到不能呼吸，难怪当初sitecore培训的老师说，安装最佳实践项目就没法做了。但我们能从中学习到很多好模板内容组织的好方式和方法。

思考题：
组件需要的js css放哪了？最近在学sitecore的最佳实践项目 Habitat，随手把学到的分享出来。原因是说来话长，晚上写个外传。

预告：
接下来会分析下sitecore页面拆分学到的一些知识，比如 @Html.Sitecore().DynamicPlaceholder("section", Model.Rendering.GetUseStaticPlaceholderNames())
使用动态Placeholder。