OnceIO(Node.JS)的網頁(模板)的引用與嵌套

nceIO是OnceDoc企業私有內容(網盤)管理系統的底層Web框架，它可以實現模板文件、靜態文件的全緩存，運行起來完全不需要I/O操作，并且支持客戶端緩存優化，GZIP壓縮等（只壓縮一次），擁有非常好的性能，為您節約服務器成本。它的模塊化功能，可以讓你的Web進行分布式存儲，在一個擴展包里即可包含前端、后端和數據庫定義，只需通過添加/刪除目錄的方式就可實現功能刪減，實現真正的模塊化擴展。目前OnceIO已經開源，這里是介紹如何使用的一系列文章。

OnceIO 提供將一個網頁文件嵌套在另一個網頁文件中的機制。文件嵌套與模板引擎無關，語法固定為  ，其中 path 為文件相對路徑，引號必須為雙引號，中間不能有空格。以 index.html 的代碼為例：

<html>

<body>

<div>

Main content

</div>

</body>

</html>

這段代碼將 header.html 和 footer.html 兩個網頁文件嵌套在 index.html 中。用戶訪問 index.html 時，header.html 和 footer.html 也會被同時加載，其中的元素將顯示在網頁的相應位置。

header.html 代碼為：

<div>

Header

</center>

<hr>

</div>

footer.html 代碼為：

<hr>

Footer

</center>

</div>

index.html 顯示效果為：

嵌套的層數理論上是沒有限制的，被嵌套網頁也能嵌套其它網頁，但互相循環嵌套可能會造成問題。例如，如果在 header.html 中嵌套 index.html，而index.html又嵌套了header，則index.html 顯示效果為：

使用網頁嵌套時，服務器需要時間加載所有被嵌套網頁，因此用戶第一次訪問時瀏覽器可能無法顯示被嵌套網頁的內容，刷新后才能顯示完整網頁，OnceIO 內置的 preload 方法能解決這個問題。對當前目錄下的 html 后綴的文件使用 preload 的示例代碼如下：

app.preload('.', '.html')

preload 的第一個參數是相對路徑，示例中的 '.' 代表 home 路徑，home 是 OnceIO 應用程序的一個屬性，它的值可以在定義應用程序時設置，默認值為 './'，即當前目錄；第二個參數是文件類型，示例中的 '.html' 代表 html 后綴的網頁文件。

使用 preload 后，服務器會提前加載網頁文件并將其緩存在服務器內存中，用戶第一次訪問時無需刷新即可看到完整網頁。

OnceIO項目： https://github.com/OnceDoc/onceio

不多說，直接曬代碼

main.go

package main

import (
   "fmt"
   "html/template"
   "net/http"
)

func sayhello(w http.ResponseWriter, r *http.Request){
   //2、解析模板
   t, err :=template.ParseFiles("index.html", "index2.html")
   if err != nil {
      fmt.Println("模板解析失敗：",err)
   }
   //3、渲染模板
   t.Execute(w,"小丸子")
}

func main() {
   http.HandleFunc("/",sayhello)
   err :=http.ListenAndServe(":9090",nil)
   if err != nil {
      fmt.Println("服務啟動失敗：",err)
   }
}

主模板文件index.html，以及嵌套template語法

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>tmpl test</title>
</head>
<body>

<h1>測試嵌套template語法</h1>
<hr>
{{/*嵌套了另外一個單獨的模板文件*/}}
{{template "index2.html"}}
<hr>
{{/*嵌套另外一個define定義的模板*/}}
{{template "index3.html"}}

<div>你好，{{.}}</div>
</body>
</html>
{{/* 通過define定義一個模板*/}}
{{ define "index3.html"}}
    <ol>
        <li>吃飯</li>
        <li>睡覺</li>
        <li>打豆豆</li>
    </ol>
{{end}}

單獨的模板文件index2.html

<ul>
    <li>注釋</li>
    <li>日志</li>
    <li>測試</li>
</ul>

index.html文件中通過define定義得模板文件

果您覺得文章對您有點用，麻煩在您閱讀、收藏、轉發的時候，順手幫忙點個贊、留個言、加關注，這是我繼續寫下去的絕佳動力。

上篇文章深入講解SiteServer CMS：創建站點以官方剛剛提供的一套模板為例實戰演練一遍SiteServer CMS如何通過站點模板來創建站點。今天詳細講解一下這個站點模板的具體模塊是如何使用SiteServer CMS的標簽語言（STL）嵌套出來的。

模板下載地址：http://download.siteserver.cn/templates/T_Milenko.zip
模板演示地址：http://theme.demo.siteserver.cn/Milenko/

1、模板位置

如果都搞不明白模板文件在服務器上哪個位置，怎么修改？所以首先得搞明白這個問題。

第一步是要搞清楚SiteServer CMS系統安裝在服務器上什么位置，這個叫系統根目錄。這個自己安裝的比較清楚，如果是接手別人的項目，一個比較查看系統根目錄的辦法就是通過系統訪問地址到IIS里去查找站點，然后通過IIS設置里查看站點物理路徑即是系統根目錄。

第二步是搞清楚本站點的所有文件在服務器上什么位置，這個叫站點根目錄。具體辦法如下圖所示：

從上圖可以看到，模板站點：Milenko的站點文件夾就是Milenko，也就是說在系統根目錄下找到文件夾Milenko就等于找到了站點根目錄。

第三步就是了解SiteServer CMS系統本身對站點里的模板文件存放位置。SiteServer CMS 內容管理系統本身的模板有四種（模板分類的內容可以閱讀之前的文章一步一步演示SiteServer CMS建站過程（二）），每種模板的文件對應存放位置在：

總結一下上圖的規律就是：

首頁模板：在站點根目錄下，系統默認叫：T_系統首頁模板.html
欄目模板和單頁模板：在站點根目錄下的Template文件夾里，欄目模板系統默認叫：T_系統欄目模板.html
內容模板：在站點根目錄下的Template/Content文件夾里，系統默認叫：T_系統內容模板.html

2、模板編輯

其實如果不知道模板存在服務器什么位置也是可以進行編輯的添加、修改、刪除操作的，只是作為研究一個系統來說，如果這都搞不明白也實在有點說不過去，對吧？

進到SiteServer CMS內容管理系統后臺，進入如下界面：

從上圖可以看到，本站點所有模板有3個，分別是一個首頁模板、一個欄目頁模板和一個內容頁模板。點擊任何一個模板名稱，即可進入該模板的編輯界面，如下圖所示：

從上圖就可以看到，得入首頁模板的編輯界面，編輯器里有類大部分是Html代碼，但又有小部分SiteServer CMS內容管理系統的模板標簽語言Stl代碼，這就是模板內容了。至于模板內容上面的字段（模板文件、生成文件名、文件擴展名等）的具體含義，還是可以在之前的文章一步一步演示SiteServer CMS建站過程（二））里查閱到。

如果模板嵌套好了，只是簡單修改，可以通過這個編輯界面直接修改，然后保存，再到生成管理去生成相應的頁面即可看到效果。

如果我們是重新做一個全新的模板，則應該在這里新創建一個空白模板，然后用自己熟悉的開發軟件比如Atom、Visual Studio Code、Dreamwear等等，打開模板文件，把之前切好的靜態頁面拷過來放在這，然后一點一點進行模板標簽語言的替換嵌套，每修改一點點可以保存起來，然后生成頁面看嵌套效果，反復如此直到全部套完。

另外，打開欄目和內容模板發現都是空的，表明本站點沒有使用欄目頁和內容頁模板，也即本網站就只有一個首頁面。下面就詳細講講這個首頁模板的代碼吧。

3、首頁模板詳解

從上到下認為有必要解釋的地方進行代碼配套文字的方式進行講解。

<link rel="stylesheet" type="text/css" href="{Stl.SiteUrl}/css/bootstrap.css">
<link href="{Stl.SiteUrl}/css/font-awesome.min.css" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="{Stl.SiteUrl}/css/style.css">
<link rel="stylesheet" type="text/css" href="{Stl.SiteUrl}/css/owl.carousel.css"><script src="{Stl.SiteUrl}/js/jquery.quovolver.min.js"></script>

以上代碼頁面頭部需要把相應的資源文件比如css、js引進來，此時需要用到一個實體標簽{Stl.SiteUrl}，意思就是站點根目錄的意思。

<title>{Stl.SiteName}</title>

上面代碼網頁的Title是通過調用實體標簽{Stl.SiteName}把網站名稱顯示在這里。

<span class="grey">{stl:value type=mingzi}</span>{stl:value type=gongsi}

上面代碼是要把下圖中紅色和黑色兩個位置的內容通過stl:value標簽顯示出來：

而這兩部分的文字是在后臺站點屬性設置中進行管理的，如下圖所示：

只要修改上圖位置中的值，前臺就會跟著變化。可能你會有疑問，標簽里怎么知道type就是mingzi和gongsi呢？從上圖右邊的設置站點屬性，點擊進去你就會明白了，如下圖所示：

原來是給這個站點增加了兩個字段，字段名就是mingzi和gongsi。所以從這就可以大致理解SiteServer CMS系統（其實所有CMS建站系統都類似）的工作原理，那就是后臺定義好相應的字段并進行內容的管理，然后利用自定義的一套標簽語言，在不需要程序員的幫助下很方便的就能把內容顯示到前臺相應的地方上去。和其他系統不一樣的地方就是，SiteSever CMS并沒有限制或者說定義死后臺哪些字段就一定顯示在前臺哪個位置，而是模板嵌套人員很方便靈活地根據需要放在自己想要出現的地方。

一個很明顯的例子就是經常有人問到SiteServer CMS后臺沒有管理友情鏈接的地方，如果理解到了剛才這個原理，就能很好解決這個問題了。那就是后臺隨意建一個欄目，把友情鏈接的內容（標題、鏈接）發在此欄目下，然后前臺利用標簽把這個欄目下的內容顯示到友情鏈接該顯示的位置即可。這和其他系統固定一個地方專門用于發友情鏈接的實現方式相比，是不是特別靈活自由？

<stl:channels groupChannel="nav" topLevel="0">

以上代碼是通過一個欄目標簽stl:channels把網站導航調用出來，具體顯示效果如下圖所示：

這里有兩個地方需要解釋一下。

第一個是后臺欄目這么多怎么決定哪些欄目會顯示在導航位置上？通過代碼groupChannel="nav" 可以看到，凡是屬于欄目組nav的欄目就會出現在這里了。而這是在后臺欄目管理的欄目編輯界面里進行設置的，如下圖所示的欄目組字段把nav選中即可。

第二個是如何控制點擊欄目名稱跳到頁面上某個位置？通過代碼：href="{Channel.ImageUrl}" 可以看到欄目名稱對應的地址是在欄目圖片（ImageUrl）這個字段來管理的。如下圖所示房產預覽欄目對應的就是#listed，意味著點擊房產預覽欄目將跳到id="listed"的控件位置。

<stl:contents channelIndex="我們" totalNum="1">
 <h2><span class="grey"><stl:content type="Title"></stl:content></span>

以上代碼是把欄目索引為“我們”（channelIndex="我們"）的欄目的第一篇文章（totalNum="1"）的標題（type="Title"）和副標題（type="SubTitle"）顯示到如下圖所示的紅色和白色位置：

欄目索引是在后臺欄目管理中可以查看到，如下圖所示：

通過上圖可以找到欄目“我們”，然后再到內容管理中，把“我們”欄目第一篇文章打

開找到標題和副標題進行編輯即可控制前臺內容：

<stl:contents channelIndex="我們" totalNum="1">

<stl:contents channelIndex="我們" totalNum="1">
 <h3><stl:content type="slogan2"></stl:content></h3>
 <p>

以上兩段代碼是把欄目索引為“我們”（channelIndex="我們"）的欄目的第一篇文章（totalNum="1"）的slogan1、slogan2、slogan3、slogan4顯示到如下圖所示的位置：

一樣的，把“我們”欄目第一篇文章打開找到slogan1、slogan2、slogan3、slogan4四個字段進行編輯即可控制前臺內容：

至于標簽代碼里的slogan1、slogan2、slogan3、slogan4怎么和上圖中的標題1、標題2、標題3、標題4對應上的，則可以通過后臺的設置管理中的內容字段管理，找到“我們”欄目的字段內容即可，如下圖所示：

關于內容字段的問題，可以在之前的文章深入講解SiteServer CMS：內容模型里查閱到。

 <h2>

<div id="owl-demo">

以上兩段代碼是把欄目索引為“房產預覽”（channelIndex="房產預覽"）的欄目的keywords和description以及欄目下所有內容顯示到如下圖所示的位置：

上圖上半部分是通過第一段代碼來實現，具體數據是在后臺欄目管理中的“房產預覽”欄目的編輯界面中，如下圖所示的關鍵字列表和頁面描述字段：

左右滾動的圖片列表，是通過后臺內容管理中的“房產預覽”欄目的管理界面，進入每篇內容的編輯界面進行控制的，如下圖所示的標題和圖片字段：

再往下的代碼，都和這些講解類似，不同的可能就是內容對應的字段不同，原理是一樣的。通過本段的講解你會發現SiteServer CMS模板嵌套的兩個關鍵點：對后臺系統的熟悉以及對模板標簽語言Stl的熟練運用。前者是讓你知道哪些數據應該存儲在哪更合理，后者是把數據顯示到前臺頁面的關鍵。

以上所有標簽的具體用法可以參考官方網站STL使用幫助

開心一笑

男：老板，你這兒洗澡多少錢？
店老板：男浴池10元，女浴池100。
男：你搶錢啊。。。
店老板：我的意思是，你想去男浴池還是女浴池？
男：。。。果斷交了100塊。進去女浴池一看，瑪德，全是男的！
浴池里的兄弟：哎呀，又來一個

在線咨詢

上一篇：視頻監控圖像上墻各種方式解析
下一篇：前端：JavaScript - 結點(Node) Vs 元素(Element)

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商

OnceIO(Node.JS)的網頁(模板)的引用與嵌套

main.go

主模板文件index.html，以及嵌套template語法

單獨的模板文件index2.html

index.html文件中通過define定義得模板文件

1、模板位置

2、模板編輯

3、首頁模板詳解

開心一笑

您的項目需求