** 如果您覺得文章對您有點用世澜，麻煩在您閱讀独旷、收藏、轉(zhuǎn)發(fā)的時候寥裂，順手幫忙點個贊嵌洼、留個言、加關(guān)注封恰，這是我繼續(xù)寫下去的絕佳動力麻养。**
利用SiteServer CMS 系統(tǒng)建網(wǎng)站的主要工作量就是在于做模板，即所謂的模板嵌套诺舔。對于一個剛接觸SiteServer CMS 系統(tǒng)的新手來說鳖昌，最關(guān)心的問題莫過于模板是如何嵌套出來的、模板制作過程中需要用到哪些技術(shù)低飒、這些技術(shù)好不好掌握等問題许昨。今天這篇文章就是來展示SiteServer CMS模板嵌套全過程。
1褥赊、開始模板嵌套之前的工作
在開始展示SiteServer CMS模板嵌套全過程之前糕档，以下工作必須自行做完，否則無法開展模板嵌套工作拌喉。
- 安裝好了SiteServer CMS系統(tǒng)速那，如果還沒有安裝的請根據(jù)這篇文章：深入講解SiteServer CMS：如何安裝 把系統(tǒng)安裝好。
- 需要嵌套成模板的靜態(tài)頁面html文件（此部分工作由頁面切圖人員負(fù)責(zé)）已經(jīng)準(zhǔn)備好了司光。
- 本文演示的模板特別簡單琅坡，就是一個新聞列表的模板。之所以這樣來選擇残家，主要還是為了更清晰地給大家展示模板嵌套的整個過程榆俺，而不要被模板里面的細(xì)節(jié)所干擾。
- 本文展示的是SiteSever CMS系統(tǒng)安裝在本機(jī)，通過localhost訪問茴晋。
- 之前有發(fā)過一篇文章：深入講解SiteServer CMS：模板嵌套陪捷，這里面也講了一些模板基礎(chǔ)知識可以參考。
2诺擅、靜態(tài)頁面需求分析
不要被標(biāo)題嚇倒市袖，這里的需求分析指的是對還沒有嵌套的靜態(tài)頁面上所有元素的含義需要了解清楚。切圖人員給你的是還沒有進(jìn)行模板嵌套的網(wǎng)站靜態(tài)頁面烁涌，結(jié)構(gòu)可能是這樣子的：
直接用瀏覽器打開新聞列表靜態(tài)頁面list.html苍碟，看到效果如下圖：
從上圖可以看到，這是一個典型的圖文混排的新聞列表頁面撮执。在開始對這個頁面進(jìn)行模板嵌套之前需要了解頁面上所有元素具體含義（圖片中的紅色文字就是對每個字段的含義進(jìn)行了解釋）微峰，要不然無從下手，或者嵌套出來也可能不符合要求抒钱。特別要注意的是一些非具體元素的細(xì)節(jié)容易忽略掉蜓肆，比如：第2、4兩條記錄是有背景顏色的谋币。從這可以推斷出偶數(shù)行記錄需要帶背景顏色仗扬，這一點在模板嵌套中必須體現(xiàn)出來。
3蕾额、創(chuàng)建模板文件
需求分析清楚之后早芭，就可以開始著手模板嵌套工作了。
第一步就是把切圖人員給過來的css凡简、images和js文件夾拷備到安裝好了的SiteServer CMS系統(tǒng)根目錄下逼友，如下圖所示：
第二步就是在SiteServer CMS后臺創(chuàng)建一個空白的名叫“新聞列表模板”的欄目模板精肃，如下圖所示：
第三步就是找到剛才創(chuàng)建的模板文件（模板文件的具體位置規(guī)則可以參考這篇文章：深入講解SiteServer CMS：模板嵌套）秤涩，如下圖所示：
第四步就是用你熟悉的文本編輯器（本人習(xí)慣用Atom）打開此空白模板文件，把切圖人員提供的list.html代碼粘貼到此空白模板文件中司抱，如下圖所示：
什么都不用做筐眷，直接保存。此時如果用這個欄目模板去匹配任何一個欄目习柠，生成的欄目頁面都是一樣的匀谣，因為這純粹就是一個不包含任何STL標(biāo)簽，也即不能從數(shù)據(jù)庫中調(diào)取任何數(shù)據(jù)资溃。
4武翎、用STL標(biāo)簽進(jìn)行模板嵌套
從這開始才算是真正的用STL標(biāo)簽進(jìn)行模板嵌套。模板嵌套的過程其實就是把之前靜態(tài)頁面中的靜態(tài)文本替換STL標(biāo)簽的過程溶锭。替換成了STL標(biāo)簽宝恶，就意味著這個位置的內(nèi)容是從數(shù)據(jù)庫里讀取數(shù)據(jù)的，從而實現(xiàn)了SiteServer CMS系統(tǒng)后臺發(fā)布數(shù)據(jù)存儲在數(shù)據(jù)庫中，再通過標(biāo)簽調(diào)取顯示到網(wǎng)站前臺頁面上的效果垫毙。
首先我們進(jìn)行欄目名稱的STL標(biāo)簽替換霹疫，如下圖所示：
此時如果用這個欄目模板去匹配不同欄目，生成的欄目頁面Title就會不一樣了综芥，會顯示各自欄目的欄目名稱了丽蝎。接下來進(jìn)行新聞列表模板嵌套，先分析一下html：
SiteServer CMS系統(tǒng)STL標(biāo)簽中是用<stl:contents>標(biāo)簽來調(diào)取內(nèi)容列表的膀藐，所以可以這樣進(jìn)行STL標(biāo)簽替換：
上圖所示代碼會有一個問題屠阻，那就是沒有實現(xiàn)第2、4這樣的偶數(shù)項新聞的背景色問題额各，所以還需要這樣改進(jìn)一下代碼：
解決了偶數(shù)項新聞的背景色問題栏笆，接下來就是要進(jìn)行每一篇具體新聞的STL標(biāo)簽替換。為了方便大家對比嵌套前后的差別臊泰，特意把替換前后的代碼列在一起蛉加，用紅框框起來了，總共4組缸逃，如下圖所示：
解釋一下第1組：用{Content.ImageUrl}獲取新聞的圖片针饥，因為圖片還需要能點擊進(jìn)到詳情頁，所以又用了<stl:a>標(biāo)簽獲取新聞的鏈接需频。
對比會發(fā)現(xiàn)丁眼，凡是html標(biāo)簽?zāi)苡玫膶傩裕瑂tl標(biāo)簽也一樣能用昭殉，因為stl標(biāo)簽解析之后生成的就是html代碼苞七。所以在這里可以看到鏈接的屬性：target="_blank" 就可以直接復(fù)制到stl:a標(biāo)簽中。從這四組代碼對比還能發(fā)現(xiàn)挪丢，stl標(biāo)簽替換的過程就類似填空一樣蹂风，把原來的部分替換掉即可（當(dāng)然部分復(fù)雜的會有不同）。其他幾組就不再解釋了乾蓬，詳細(xì)的stl標(biāo)簽用法可以參考官方說明：http://stl.siteserver.cn惠啄。
偶數(shù)項的li除了多了 class="bg" 這么一個背景樣式之外，里面的元素是完全一樣的任内，所以只需要把奇數(shù)項li里的元素拷過來即可撵渡，最后給出一個完整的嵌套好了的代碼，如下圖所示：
5死嗦、匹配具體欄目趋距、生成靜態(tài)頁面
模板嵌套完成之后，需要把此模板應(yīng)用的具體欄目中越除，就是所謂的模板匹配节腐，如下圖所示：
如上圖所示靠欢，把剛才嵌套好的 “新聞列表模板” 和 “新聞” 欄目匹配好，然后再去生成頁面：
生成完成之后铜跑，再通過如下圖所示點擊紅框位置文件夾圖標(biāo)门怪，就可進(jìn)到 “新聞” 欄目對應(yīng)的前臺頁面：
看到的前臺頁面效果和最開始靜態(tài)頁面的布局是一樣的，不同的就是每篇新聞的數(shù)據(jù)锅纺，如下圖所示：
如果再查看生成出來的這個頁面的html代碼掷空，和之前切圖人員提供給我們進(jìn)行模板嵌套用的靜態(tài)頁面代碼結(jié)構(gòu)基本上是一樣，不同的也是每篇新聞的數(shù)據(jù)：
開心一笑
昨天晚上和幾個哥們出去喝酒囤锉，喝到十二點才散坦弟。早上，哥們來電話了:怎么樣官地，昨天回去那么晚酿傍，嫂子沒收拾你吧？我回答:說啥呢驱入，她還敢收拾我３喑础？家門她都沒敢開亏较！
