深圳网站建设公司关于网站首页广告图的处理方法。网站建设公司资深设计师在前面相关文章中与各位分享过图形库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>
好了，深圳网站建设公司本文关于“网站首页广告图的处理方法”就分享到这里。如果您需要高端定制网站建设服务，联系深圳网站建设公司在线客服，有专人为您免费提供完善的解决方案。谢谢关注，博纳网络编辑整理。
好了，深圳网站建设公司本文关于“网站首页广告图的处理方法”就分享到这里。如果您需要高端定制网站建设服务，联系深圳网站建设公司在线客服，有专人为您免费提供完善的解决方案。谢谢关注，博纳网络编辑整理。
当前文章链接：/construction/solution/14877.html
如果您觉得案例还不错请帮忙分享：
[声明]本网转载网络媒体稿件是为了传播更多的信息，此类稿件不代表本网观点，本网不承担此类稿件侵权行为的连带责任。故此，如果您发现本网站的内容侵犯了您的版权，请您的相关内容发至此邮箱【qin@198bona.com 】，我们在确认后，会立即删除，保证您的版权。
