深圳网站建设公司关于网站首页广告图的处理方法

    深圳网站建设公司关于网站首页广告图的处理方法。网站建设公司资深设计师在前面相关文章中与各位分享过图形库Pattern Lab入门的文章，本文继续就前面的文章中所说的Pattern Lab工具制作广告图片分享给各位。首先运行Pattern Lab，网站建设公司提醒要理解系统背后的运行原理的最好方式，就是从一个完善的界面开始，逆向推出系统的模板，还有 Pattern Lab 用到的数据文件。因此，下面就从广告图（那座山）开始，看看如何才能在页面上展示这种带标题的图片。     首先要明白，所有的文件按不同层级，分别放在 5 个不同的文件夹中：原子、分子、有机体、模板、页面。每个模式都有一个文件，描述组成按钮、轮播图片或底部导航栏的标记。在页面这一层级上，只需选择模板并添加内容就可以生成页面，上面的模式也会有关联文件，让我们可以把 lorem ipsum 字符（或“乱数假文”）替换成真正的内容。接下来看主页模式的范例，在一番研究之后，我们会发现雪山广告图有这样一个图片标签：
     <！—— 00-homepage.mustache ——> {{> templates-homepage }} 正如你所见，Pattern Lab 使用 Mustache 格式的文件，Mustache 是一种基本的模板语言，它支持使用变量、通过迭代器遍历数据，以及导入其他文件。在 00-homepage.mustache 文件中，我们只需要导入主页模板，无需其他任何操作。“页面文件”的作用就在于，它可以把一些数据和模板关联在一起，下面就来看看对应的数据文件： <！—— 00-homepage.json ——> { "title"："Home Page"， {{# touts}} 　　　　<div class="gi"> 　　　　　{{> molecules-inset-block }} 　　　　</div> 　　　{{/ touts}} 　　</div><！——end 3up——> 　　<hr /> 　　<div class="l-two-col"> 　　　<div class="l-main"> 　　　　<section class="section latest-posts"> 　　　　　<h2 class="section-title">Latest Posts</h2> 　　　　　<ul class="post-list"> 　　　　　　{{# latest-posts }} 　　　　　　　<li>{{> molecules-media-block }}</li> 　　　　　　{{/ latest-posts }} 　　　　　</ul> 　　　　　<a href="#" class="text-btn">View more posts</a> 　　　　</section> 　　　</div><！——end .l-main——> 　　　<div class="l-sidebar"> 　　　　{{> organisms-recent-tweets }} 　　　</div><！——end .l-sidebar——> 　　</div><！——end .l-two-col——> 　</div><！——End role=main——> 　{{> organisms-footer }} </div>16.3 首页模板 首先你可能会注意到，这个模板并不是以 template-homepage 命名的。Pattern Lab 采用了智能文件解析系统，因此只需要输入 <type>-<name>，无需传递具体的路径，甚至也不需要文件名。于是，当我们需要引入名为 header 的“有机体”时，我们不用关心引入文件的实际路径 _patterns/02-organisms/00-global/00-header.mustache，只需要输入 {{> organisms-header }} 即可。 拉取 organisms-header 之后，模板文件就导入了广告图页面。导入的每个段落都可以用 {{# }} 标签包含起来，表示数据上下文的改变。 {{# hero }} 　{{> molecules-block-hero }} {{/ hero}} 这意味着，如果页面中导入了名为 block-hero 的分子，那么它会使用 hero 数据对象来加载里面的所有变量。 { 　"img"：{ 　 "landscape-16x9"：{ 　 　"src"："../../images/sample/landscape-16x9-mountains.jpg"， 　 　"alt"："Mountains" 　 } 　}， 　"headline"：{ 　 "medium"："Top 10 mountain ranges for hiking" 　} } 现在我们知道使用的是哪些数据了，下一步来看看 Mustache 文件 block-hero： <div class="block block-hero"> <a href="{{ url }}" class="inner"> 　 <div class="b-thumb"> 　 　{{> atoms-landscape-16x9 }} 　 </div> 　 <div class="b-text"> 　 　<h2 class="headline">{{ headline.medium }}</h2> 　 </div> </a> </div>
好了，深圳网站建设公司本文关于“网站首页广告图的处理方法”就分享到这里。如果您需要高端定制网站建设服务，联系深圳网站建设公司在线客服，有专人为您免费提供完善的解决方案。谢谢关注，博纳网络编辑整理。