** 如果您覺(jué)得文章對(duì)您有點(diǎn)用，麻煩在您閱讀轨域、收藏袱耽、轉(zhuǎn)發(fā)的時(shí)候，順手幫忙點(diǎn)個(gè)贊干发、留個(gè)言朱巨、加關(guān)注，這是我繼續(xù)寫(xiě)下去的絕佳動(dòng)力铐然。**
上篇文章深入講解SiteServer CMS：創(chuàng)建站點(diǎn)以官方剛剛提供的一套模板為例實(shí)戰(zhàn)演練一遍SiteServer CMS如何通過(guò)站點(diǎn)模板來(lái)創(chuàng)建站點(diǎn)蔬崩。今天詳細(xì)講解一下這個(gè)站點(diǎn)模板的具體模塊是如何使用SiteServer CMS的標(biāo)簽語(yǔ)言（STL）嵌套出來(lái)的。
- 模板下載地址：http://download.siteserver.cn/templates/T_Milenko.zip
- 模板演示地址：http://theme.demo.siteserver.cn/Milenko/
1搀暑、模板位置
如果都搞不明白模板文件在服務(wù)器上哪個(gè)位置沥阳，怎么修改？所以首先得搞明白這個(gè)問(wèn)題自点。
第一步是要搞清楚SiteServer CMS系統(tǒng)安裝在服務(wù)器上什么位置桐罕，這個(gè)叫系統(tǒng)根目錄。這個(gè)自己安裝的比較清楚，如果是接手別人的項(xiàng)目功炮，一個(gè)比較查看系統(tǒng)根目錄的辦法就是通過(guò)系統(tǒng)訪問(wèn)地址到IIS里去查找站點(diǎn)溅潜，然后通過(guò)IIS設(shè)置里查看站點(diǎn)物理路徑即是系統(tǒng)根目錄。
第二步是搞清楚本站點(diǎn)的所有文件在服務(wù)器上什么位置薪伏，這個(gè)叫站點(diǎn)根目錄滚澜。具體辦法如下圖所示：
從上圖可以看到，模板站點(diǎn)：Milenko的站點(diǎn)文件夾就是Milenko嫁怀，也就是說(shuō)在系統(tǒng)根目錄下找到文件夾Milenko就等于找到了站點(diǎn)根目錄设捐。
第三步就是了解SiteServer CMS系統(tǒng)本身對(duì)站點(diǎn)里的模板文件存放位置。SiteServer CMS 內(nèi)容管理系統(tǒng)本身的模板有四種（模板分類的內(nèi)容可以閱讀之前 的文章一步一步演示SiteServer CMS建站過(guò)程（二））塘淑，每種模板的文件對(duì)應(yīng)存放位置在：
總結(jié)一下上圖的規(guī)律就是：
- 首頁(yè)模板：在站點(diǎn)根目錄下萝招，系統(tǒng)默認(rèn)叫：T_系統(tǒng)首頁(yè)模板.html
- 欄目模板和單頁(yè)模板：在站點(diǎn)根目錄下的Template文件夾里，欄目模板系統(tǒng)默認(rèn)叫：T_系統(tǒng)欄目模板.html
- 內(nèi)容模板：在站點(diǎn)根目錄下的Template/Content文件夾里存捺，系統(tǒng)默認(rèn)叫：T_系統(tǒng)內(nèi)容模板.html
2槐沼、模板編輯
其實(shí)如果不知道模板存在服務(wù)器什么位置也是可以進(jìn)行編輯的添加、修改捌治、刪除操作的岗钩，只是作為研究一個(gè)系統(tǒng)來(lái)說(shuō)，如果這都搞不明白也實(shí)在有點(diǎn)說(shuō)不過(guò)去具滴，對(duì)吧凹嘲？
進(jìn)到SiteServer CMS內(nèi)容管理系統(tǒng)后臺(tái)，進(jìn)入如下界面：
從上圖可以看到构韵，本站點(diǎn)所有模板有3個(gè)周蹭，分別是一個(gè)首頁(yè)模板、一個(gè)欄目頁(yè)模板和一個(gè)內(nèi)容頁(yè)模板疲恢。點(diǎn)擊任何一個(gè)模板名稱凶朗，即可進(jìn)入該模板的編輯界面，如下圖所示：
從上圖就可以看到显拳，得入首頁(yè)模板的編輯界面棚愤，編輯器里有類大部分是Html代碼，但又有小部分SiteServer CMS內(nèi)容管理系統(tǒng)的模板標(biāo)簽語(yǔ)言Stl代碼杂数，這就是模板內(nèi)容了宛畦。至于模板內(nèi)容上面的字段（模板文件、生成文件名揍移、文件擴(kuò)展名等）的具體含義次和，還是可以在之前的文章一步一步演示SiteServer CMS建站過(guò)程（二））里查閱到。
如果模板嵌套好了那伐，只是簡(jiǎn)單修改踏施，可以通過(guò)這個(gè)編輯界面直接修改石蔗，然后保存，再到生成管理去生成相應(yīng)的頁(yè)面即可看到效果畅形。
如果我們是重新做一個(gè)全新的模板养距，則應(yīng)該在這里新創(chuàng)建一個(gè)空白模板，然后用自己熟悉的開(kāi)發(fā)軟件比如Atom日熬、Visual Studio Code棍厌、Dreamwear等等，打開(kāi)模板文件碍遍，把之前切好的靜態(tài)頁(yè)面拷過(guò)來(lái)放在這定铜，然后一點(diǎn)一點(diǎn)進(jìn)行模板標(biāo)簽語(yǔ)言的替換嵌套阳液，每修改一點(diǎn)點(diǎn)可以保存起來(lái)怕敬，然后生成頁(yè)面看嵌套效果，反復(fù)如此直到全部套完帘皿。
另外东跪，打開(kāi)欄目和內(nèi)容模板發(fā)現(xiàn)都是空的，表明本站點(diǎn)沒(méi)有使用欄目頁(yè)和內(nèi)容頁(yè)模板鹰溜，也即本網(wǎng)站就只有一個(gè)首頁(yè)面虽填。下面就詳細(xì)講講這個(gè)首頁(yè)模板的代碼吧。
3曹动、首頁(yè)模板詳解
從上到下認(rèn)為有必要解釋的地方進(jìn)行代碼配套文字的方式進(jìn)行講解斋日。
<link href="{Stl.SiteUrl}/css/bootstrap.css" rel="stylesheet" type="text/css">
<link href="{Stl.SiteUrl}/css/font-awesome.min.css" rel="stylesheet">
<link href="{Stl.SiteUrl}/css/style.css" rel="stylesheet" type="text/css">
<link href="{Stl.SiteUrl}/css/owl.carousel.css" rel="stylesheet" type="text/css">
<script src="{Stl.SiteUrl}/js/jquery.quovolver.min.js"></script>
以上代碼頁(yè)面頭部需要把相應(yīng)的資源文件比如css、js引進(jìn)來(lái)墓陈，此時(shí)需要用到一個(gè)實(shí)體標(biāo)簽{Stl.SiteUrl}恶守，意思就是站點(diǎn)根目錄的意思。
<title>{Stl.SiteName}</title>
上面代碼網(wǎng)頁(yè)的Title是通過(guò)調(diào)用實(shí)體標(biāo)簽{Stl.SiteName}把網(wǎng)站名稱顯示在這里贡必。
<span class="grey">{stl:value type=mingzi}</span>{stl:value type=gongsi}
上面代碼是要把下圖中紅色和黑色兩個(gè)位置的內(nèi)容通過(guò)stl:value標(biāo)簽顯示出來(lái)：
而這兩部分的文字是在后臺(tái)站點(diǎn)屬性設(shè)置中進(jìn)行管理的兔港，如下圖所示：
只要修改上圖位置中的值，前臺(tái)就會(huì)跟著變化仔拟∩婪可能你會(huì)有疑問(wèn)，標(biāo)簽里怎么知道type就是mingzi和gongsi呢利花？從上圖右邊的設(shè)置站點(diǎn)屬性科侈，點(diǎn)擊進(jìn)去你就會(huì)明白了，如下圖所示：
原來(lái)是給這個(gè)站點(diǎn)增加了兩個(gè)字段炒事，字段名就是mingzi和gongsi臀栈。所以從這就可以大致理解SiteServer CMS系統(tǒng)（其實(shí)所有CMS建站系統(tǒng)都類似）的工作原理，那就是后臺(tái)定義好相應(yīng)的字段并進(jìn)行內(nèi)容的管理羡洛，然后利用自定義的一套標(biāo)簽語(yǔ)言挂脑，在不需要程序員的幫助下很方便的就能把內(nèi)容顯示到前臺(tái)相應(yīng)的地方上去藕漱。和其他系統(tǒng)不一樣的地方就是，SiteSever CMS并沒(méi)有限制或者說(shuō)定義死后臺(tái)哪些字段就一定顯示在前臺(tái)哪個(gè)位置崭闲，而是模板嵌套人員很方便靈活地根據(jù)需要放在自己想要出現(xiàn)的地方肋联。
一個(gè)很明顯的例子就是經(jīng)常有人問(wèn)到SiteServer CMS后臺(tái)沒(méi)有管理友情鏈接的地方，如果理解到了剛才這個(gè)原理刁俭，就能很好解決這個(gè)問(wèn)題了橄仍。那就是后臺(tái)隨意建一個(gè)欄目，把友情鏈接的內(nèi)容（標(biāo)題牍戚、鏈接）發(fā)在此欄目下侮繁，然后前臺(tái)利用標(biāo)簽把這個(gè)欄目下的內(nèi)容顯示到友情鏈接該顯示的位置即可。這和其他系統(tǒng)固定一個(gè)地方專門用于發(fā)友情鏈接的實(shí)現(xiàn)方式相比如孝，是不是特別靈活自由宪哩？
<stl:channels groupChannel="nav" topLevel="0">
<li class="active"><a href="{Channel.ImageUrl}">{Channel.Title}</a></li>
</stl:channels>
以上代碼是通過(guò)一個(gè)欄目標(biāo)簽stl:channels把網(wǎng)站導(dǎo)航調(diào)用出來(lái)，具體顯示效果如下圖所示：
這里有兩個(gè)地方需要解釋一下第晰。
第一個(gè)是后臺(tái)欄目這么多怎么決定哪些欄目會(huì)顯示在導(dǎo)航位置上锁孟？通過(guò)代碼groupChannel="nav" 可以看到，凡是屬于欄目組nav的欄目就會(huì)出現(xiàn)在這里了茁瘦。而這是在后臺(tái)欄目管理的欄目編輯界面里進(jìn)行設(shè)置的品抽，如下圖所示的欄目組字段把nav選中即可。
第二個(gè)是如何控制點(diǎn)擊欄目名稱跳到頁(yè)面上某個(gè)位置甜熔？通過(guò)代碼：href="{Channel.ImageUrl}" 可以看到欄目名稱對(duì)應(yīng)的地址是在欄目圖片（ImageUrl）這個(gè)字段來(lái)管理的圆恤。如下圖所示房產(chǎn)預(yù)覽欄目對(duì)應(yīng)的就是#listed，意味著點(diǎn)擊房產(chǎn)預(yù)覽欄目將跳到id="listed"的控件位置腔稀。
<stl:contents channelIndex="我們" totalNum="1">
<h2><span class="grey"><stl:content type="Title"></stl:content></span>
- <stl:content type="SubTitle"></stl:content></h2>
</stl:contents>
以上代碼是把欄目索引為“我們”（channelIndex="我們"）的欄目的第一篇文章（totalNum="1"）的標(biāo)題（type="Title"）和副標(biāo)題（type="SubTitle"）顯示到如下圖所示的紅色和白色位置：
欄目索引是在后臺(tái)欄目管理中可以查看到盆昙，如下圖所示：
通過(guò)上圖可以找到欄目“我們”，然后再到內(nèi)容管理中烧颖，把“我們”欄目第一篇文章打
開(kāi)找到標(biāo)題和副標(biāo)題進(jìn)行編輯即可控制前臺(tái)內(nèi)容：
<stl:contents channelIndex="我們" totalNum="1">
<h3 style="color: #EFEFEF; text-align: center; font-size: 36px;">
<stl:content type="slogan1"></stl:content>
</h3>
</stl:contents>
<stl:contents channelIndex="我們" totalNum="1">
<h3><stl:content type="slogan2"></stl:content></h3>
<p>
<stl:content type="slogan3"></stl:content>
<span style="display:block;">
<stl:content type="slogan4"></stl:content>
</span>
</p>
</stl:contents>
以上兩段代碼是把欄目索引為“我們”（channelIndex="我們"）的欄目的第一篇文章（totalNum="1"）的slogan1弱左、slogan2、slogan3炕淮、slogan4顯示到如下圖所示的位置：
一樣的拆火，把“我們”欄目第一篇文章打開(kāi)找到slogan1、slogan2涂圆、slogan3们镜、slogan4四個(gè)字段進(jìn)行編輯即可控制前臺(tái)內(nèi)容：
至于標(biāo)簽代碼里的slogan1、slogan2润歉、slogan3模狭、slogan4怎么和上圖中的標(biāo)題1、標(biāo)題2踩衩、標(biāo)題3嚼鹉、標(biāo)題4對(duì)應(yīng)上的贩汉，則可以通過(guò)后臺(tái)的設(shè)置管理中的內(nèi)容字段管理，找到“我們”欄目的字段內(nèi)容即可锚赤，如下圖所示：
關(guān)于內(nèi)容字段的問(wèn)題匹舞，可以在之前的文章深入講解SiteServer CMS：內(nèi)容模型里查閱到。
<h2>
<stl:channel type="keywords" channelIndex="房產(chǎn)預(yù)覽"></stl:channel>
<span>
<stl:channel type="description" channelIndex="房產(chǎn)預(yù)覽"></stl:channel>
</span>
</h2>
<div id="owl-demo">
<stl:contents channelIndex="房產(chǎn)預(yù)覽">
<div class="item">
<div class="img-info">
<h4><stl:content type="Title"></stl:content></h4>
</div
</div>
</stl:contents>
</div>
以上兩段代碼是把欄目索引為“房產(chǎn)預(yù)覽”（channelIndex="房產(chǎn)預(yù)覽"）的欄目的keywords和description以及欄目下所有內(nèi)容顯示到如下圖所示的位置：
上圖上半部分是通過(guò)第一段代碼來(lái)實(shí)現(xiàn)线脚，具體數(shù)據(jù)是在后臺(tái)欄目管理中的“房產(chǎn)預(yù)覽”欄目的編輯界面中赐稽，如下圖所示的關(guān)鍵字列表和頁(yè)面描述字段：
左右滾動(dòng)的圖片列表，是通過(guò)后臺(tái)內(nèi)容管理中的“房產(chǎn)預(yù)覽”欄目的管理界面浑侥，進(jìn)入每篇內(nèi)容的編輯界面進(jìn)行控制的姊舵，如下圖所示的標(biāo)題和圖片字段：
再往下的代碼，都和這些講解類似寓落，不同的可能就是內(nèi)容對(duì)應(yīng)的字段不同恳邀，原理是一樣的糠排。通過(guò)本段的講解你會(huì)發(fā)現(xiàn)SiteServer CMS模板嵌套的兩個(gè)關(guān)鍵點(diǎn)：對(duì)后臺(tái)系統(tǒng)的熟悉以及對(duì)模板標(biāo)簽語(yǔ)言Stl的熟練運(yùn)用罕偎。前者是讓你知道哪些數(shù)據(jù)應(yīng)該存儲(chǔ)在哪更合理硬毕，后者是把數(shù)據(jù)顯示到前臺(tái)頁(yè)面的關(guān)鍵。
以上所有標(biāo)簽的具體用法可以參考官方網(wǎng)站STL使用幫助
開(kāi)心一笑
男：老板考蕾，你這兒洗澡多少錢？
店老板：男浴池10元会宪，女浴池100肖卧。
男：你搶錢啊。掸鹅。塞帐。
店老板：我的意思是，你想去男浴池還是女浴池巍沙？
男：葵姥。。句携。 果斷交了100塊榔幸。進(jìn)去女浴池一看，瑪?shù)掳担悄械模?br> 浴池里的兄弟：哎呀削咆，又來(lái)一個(gè)
