深圳網(wǎng)站建設(shè)公司關(guān)于網(wǎng)站首頁(yè)廣告圖的處理方法
文章編輯：網(wǎng)站建設(shè) 文章來(lái)源：深圳網(wǎng)站建設(shè)專欄 瀏覽量：次
深圳網(wǎng)站建設(shè)公司關(guān)于網(wǎng)站首頁(yè)廣告圖的處理方法。網(wǎng)站建設(shè)公司資深設(shè)計(jì)師在前面相關(guān)文章中與各位分享過(guò)圖形庫(kù)Pattern Lab入門的文章，本文繼續(xù)就前面的文章中所說(shuō)的Pattern Lab工具制作廣告圖片分享給各位。首先運(yùn)行Pattern Lab，網(wǎng)站建設(shè)公司提醒要理解系統(tǒng)背后的運(yùn)行原理的最好方式，就是從一個(gè)完善的界面開(kāi)始，逆向推出系統(tǒng)的模板，還有 Pattern Lab 用到的數(shù)據(jù)文件。因此，下面就從廣告圖（那座山）開(kāi)始，看看如何才能在頁(yè)面上展示這種帶標(biāo)題的圖片。
首先要明白，所有的文件按不同層級(jí)，分別放在 5 個(gè)不同的文件夾中：原子、分子、有機(jī)體、模板、頁(yè)面。每個(gè)模式都有一個(gè)文件，描述組成按鈕、輪播圖片或底部導(dǎo)航欄的標(biāo)記。在頁(yè)面這一層級(jí)上，只需選擇模板并添加內(nèi)容就可以生成頁(yè)面，上面的模式也會(huì)有關(guān)聯(lián)文件，讓我們可以把 lorem ipsum 字符（或“亂數(shù)假文”）替換成真正的內(nèi)容。接下來(lái)看主頁(yè)模式的范例，在一番研究之后，我們會(huì)發(fā)現(xiàn)雪山廣告圖有這樣一個(gè)圖片標(biāo)簽：
<！—— 00-homepage.mustache ——>
{{> templates-homepage }}
正如你所見(jiàn)，Pattern Lab 使用 Mustache 格式的文件，Mustache 是一種基本的模板語(yǔ)言，它支持使用變量、通過(guò)迭代器遍歷數(shù)據(jù)，以及導(dǎo)入其他文件。在 00-homepage.mustache 文件中，我們只需要導(dǎo)入主頁(yè)模板，無(wú)需其他任何操作。“頁(yè)面文件”的作用就在于，它可以把一些數(shù)據(jù)和模板關(guān)聯(lián)在一起，下面就來(lái)看看對(duì)應(yīng)的數(shù)據(jù)文件：
<！—— 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 首頁(yè)模板
首先你可能會(huì)注意到，這個(gè)模板并不是以 template-homepage 命名的。Pattern Lab 采用了智能文件解析系統(tǒng)，因此只需要輸入 <type>-<name>，無(wú)需傳遞具體的路徑，甚至也不需要文件名。于是，當(dāng)我們需要引入名為 header 的“有機(jī)體”時(shí)，我們不用關(guān)心引入文件的實(shí)際路徑 _patterns/02-organisms/00-global/00-header.mustache，只需要輸入 {{> organisms-header }} 即可。
拉取 organisms-header 之后，模板文件就導(dǎo)入了廣告圖頁(yè)面。導(dǎo)入的每個(gè)段落都可以用 {{# }} 標(biāo)簽包含起來(lái)，表示數(shù)據(jù)上下文的改變。
{{# hero }}
{{> molecules-block-hero }}
{{/ hero}}
這意味著，如果頁(yè)面中導(dǎo)入了名為 block-hero 的分子，那么它會(huì)使用 hero 數(shù)據(jù)對(duì)象來(lái)加載里面的所有變量。
{
"img"：{
"landscape-16x9"：{
"src"："../../images/sample/landscape-16x9-mountains.jpg"，
"alt"："Mountains"
}
}，
"headline"：{
"medium"："Top 10 mountain ranges for hiking"
}
}
現(xiàn)在我們知道使用的是哪些數(shù)據(jù)了，下一步來(lái)看看 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>
好了，深圳網(wǎng)站建設(shè)公司本文關(guān)于“網(wǎng)站首頁(yè)廣告圖的處理方法”就分享到這里。如果您需要高端定制網(wǎng)站建設(shè)服務(wù)，聯(lián)系深圳網(wǎng)站建設(shè)公司在線客服，有專人為您免費(fèi)提供完善的解決方案。謝謝關(guān)注，博納網(wǎng)絡(luò)編輯整理。
好了，深圳網(wǎng)站建設(shè)公司本文關(guān)于“網(wǎng)站首頁(yè)廣告圖的處理方法”就分享到這里。如果您需要高端定制網(wǎng)站建設(shè)服務(wù)，聯(lián)系深圳網(wǎng)站建設(shè)公司在線客服，有專人為您免費(fèi)提供完善的解決方案。謝謝關(guān)注，博納網(wǎng)絡(luò)編輯整理。
當(dāng)前文章鏈接：/construction/solution/14877.html
上一篇：深圳網(wǎng)站建設(shè)公司詳解網(wǎng)站頁(yè)面大小的原始指標(biāo)
下一篇：深圳網(wǎng)站建設(shè)公司詳解移動(dòng)電子商務(wù)平臺(tái)的威脅模型行為統(tǒng)計(jì)
如果您覺(jué)得案例還不錯(cuò)請(qǐng)幫忙分享：
[聲明]本網(wǎng)轉(zhuǎn)載網(wǎng)絡(luò)媒體稿件是為了傳播更多的信息，此類稿件不代表本網(wǎng)觀點(diǎn)，本網(wǎng)不承擔(dān)此類稿件侵權(quán)行為的連帶責(zé)任。故此，如果您發(fā)現(xiàn)本網(wǎng)站的內(nèi)容侵犯了您的版權(quán)，請(qǐng)您的相關(guān)內(nèi)容發(fā)至此郵箱【qin@198bona.com 】，我們?cè)诖_認(rèn)后，會(huì)立即刪除，保證您的版權(quán)。
相關(guān)案例推薦
資訊分類
最新發(fā)布
- 深圳網(wǎng)站建設(shè)公司詳解移動(dòng)電子商務(wù)平臺(tái)的威脅模型行為統(tǒng)計(jì)
- 深圳網(wǎng)站建設(shè)公司關(guān)于網(wǎng)站首頁(yè)廣告圖的處理方法
- 深圳網(wǎng)站建設(shè)公司詳解網(wǎng)站頁(yè)面大小的原始指標(biāo)
- 深圳網(wǎng)站建設(shè)公司分享前端架構(gòu)與持續(xù)集成的服務(wù)器的關(guān)系
- 網(wǎng)站建設(shè)關(guān)于前端架構(gòu)設(shè)計(jì)的的核心詳解
- 外貿(mào)網(wǎng)站建設(shè)關(guān)于跨境出口電商的主要國(guó)家分布分析
- 商城網(wǎng)站建設(shè)后營(yíng)運(yùn)關(guān)于數(shù)據(jù)化運(yùn)營(yíng)管理的方法
- 深圳網(wǎng)站建設(shè)公司對(duì)電商平臺(tái)運(yùn)營(yíng)管理的理解
- 網(wǎng)站建設(shè)知識(shí)之什么是超文本傳輸協(xié)議?
- 深圳網(wǎng)站建設(shè)公司關(guān)于旅游類型網(wǎng)站存在的意義淺談
相關(guān)資訊
- 深圳網(wǎng)站建設(shè)公司對(duì)電子商務(wù)網(wǎng)站的分類與盈利點(diǎn)解析
- 深圳網(wǎng)站建設(shè)公司揭秘社區(qū)網(wǎng)站營(yíng)運(yùn)的其他贏利手段
- 如何確定電子商務(wù)網(wǎng)站建設(shè)的贏利模式
- 商城網(wǎng)站建設(shè)：對(duì)配送設(shè)置多倉(cāng)分類的規(guī)劃
- 網(wǎng)站改版：商品推薦行為方案規(guī)劃
- 網(wǎng)站建設(shè)：緩存結(jié)構(gòu)與鏡像解決高并發(fā)方案
- 網(wǎng)站建設(shè)：怎樣處理商城系統(tǒng)中臺(tái)業(yè)務(wù)情況分析
- 深圳網(wǎng)站建設(shè)：關(guān)于智能無(wú)人售貨網(wǎng)站建設(shè)公司怎樣解決設(shè)備履約維護(hù)？
- O2O電商平臺(tái)網(wǎng)站建設(shè)：從商家的角度分析模式是否可行
- 大型電商網(wǎng)站建設(shè)方案策劃書(shū)的編寫(xiě)注意事項(xiàng)
