商城網(wǎng)站建設(shè)關(guān)于首頁模板與代碼變量網(wǎng)站開發(fā)解決方案。網(wǎng)站建設(shè)公司設(shè)計師提醒大多數(shù)網(wǎng)頁設(shè)計是以目標為導(dǎo)向，也就是網(wǎng)頁做出來能為用戶提供什么、能解決用戶的哪些問題。例如電商網(wǎng)站的終極目標是賣出更多的商品，資訊類網(wǎng)站的目標是讓用戶能更多地閱讀最新訊息，目標不同，兩類網(wǎng)站在設(shè)計上也會有截然不同的差異。
在設(shè)計上，電商網(wǎng)站建設(shè)會更注重頁面氛圍的營造，把紅紅火火的促銷氛圍搞起來，用戶看到會更興奮。在電商網(wǎng)站中，設(shè)計重點放在幫助用戶瀏覽店鋪并輕松找到特定商品上，放在詳情頁上用盡可能好的方式展示商品；付款流程也經(jīng)過簡化和仔細計算(例如某寶最近更新的訂單頁把價格聚集在一起)，因此用戶不需要經(jīng)過太多思考就能快速下單購買。打造平衡的效果，網(wǎng)頁中炫酷的視覺效果能讓用戶印象深刻，但效果實現(xiàn)需要付出更成本。能明確知道什么時候更簡潔的視覺效果能讓整個設(shè)計變得更好，能讓用戶專注于正確的事情，這一點很重要。
有時候在網(wǎng)頁中添加過多元素，會分散有價值的信息，用戶也難以識別他們想看的內(nèi)容。首先你可能會注意到，這個模板并不是以 template-homepage 命名的。Pattern Lab 采用了智能文件解析系統(tǒng)，因此只需要輸入 <type>-<name>，無需傳遞具體的路徑，甚至也不需要文件名。于是，當我們需要引入名為 header 的“有機體”時，我們不用關(guān)心引入文件的實際路徑 _patterns/02-organisms/00-global/00-header.mustache，只需要輸入 {{> organisms-header }} 即可。
拉取 organisms-header 之后，模板文件就導(dǎo)入了廣告圖頁面。導(dǎo)入的每個段落都可以用 {{# }} 標簽包含起來，表示數(shù)據(jù)上下文的改變。
{{# hero }}
{{> molecules-block-hero }}
{{/ hero}}
這意味著，如果頁面中導(dǎo)入了名為 block-hero 的分子，那么它會使用 hero 數(shù)據(jù)對象來加載里面的所有變量。
{
"img"：{
"landscape-16x9"：{
"src"："../../images/sample/landscape-16x9-mountains.jpg"，
"alt"："Mountains"
}
}，
"headline"：{
"medium"："Top 10 mountain ranges for hiking"
}
}
現(xiàn)在我們知道使用的是哪些數(shù)據(jù)了，下一步來看看 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)于首頁模板的首變量
這個 Mustache 文件保存了我們的首變量。在 Mustache 語法里，變量就是包含在 {{}} 里的詞。你可能留意到這里的首變量是 {rl}，它在我們數(shù)據(jù)集里還沒有一個關(guān)聯(lián)的值。如果想要指定這個 URL，就需要給數(shù)據(jù)集添加一個關(guān)鍵詞為 url 的屬性，然后這個模板就會調(diào)用賦給 url 屬性的值。
{
"url"："http://www.google.com"，
"img"：{
"landscape-16x9"：{
"src"："../../images/sample/16x9-mountains.jpg"，
"alt"："Mountains"
}
}，
"headline"：{
"medium"："Top 10 mountain ranges for hiking"
}
}
然而我們并沒有指定值，這個時候 Pattern Lab 可以智能地調(diào)用全局的 data.json 文件里定義好的 url 默認值。
下一個變量是 {{ headline.medium }}，這確實是一個我們有的值。中間的點號意思是在 headline 對象里找到 medium 的屬性名，然后返回它的值：Top 10 mountain ranges for hiking。
好了，
深圳網(wǎng)站建設(shè)公司本文關(guān)于“商城網(wǎng)站建設(shè)關(guān)于首頁模板與代碼變量網(wǎng)站開發(fā)解決方案”知識就分享到這里。如果您需要深圳專業(yè)的高端網(wǎng)站建設(shè)公司為您量身定制設(shè)計網(wǎng)站，請您聯(lián)系我們網(wǎng)站在線客服或者撥打網(wǎng)站聯(lián)系電話，有專業(yè)的網(wǎng)站設(shè)計師為您提供完善的建站設(shè)計解決方案。謝謝關(guān)注，博納網(wǎng)絡(luò)編輯整理。
