BrilliantCMS系統(tǒng)生成頁(yè)面的核心,是一個(gè)模板引擎,這個(gè)模板引擎從頁(yè)面模板讀取站點(diǎn)參數(shù)、欄目參數(shù)、內(nèi)容參數(shù)等,然后從數(shù)據(jù)庫(kù)中取得這些參數(shù)的值、替換掉模板中的模板標(biāo)記與表達(dá)式,生成HTML頁(yè)面。
模板實(shí)際上就是包含有“模板標(biāo)記”與“模板表達(dá)式”、“功能函數(shù)” 的HTML文件。BrilliantCMS通過(guò)解析模板文件,獲得站點(diǎn)參數(shù)信息、欄目參數(shù)信息、內(nèi)容參數(shù)信息,然后從數(shù)據(jù)庫(kù)中獲取站點(diǎn)、欄目、內(nèi)容條目的數(shù)值,替換掉模板中的“模板標(biāo)記”與“模板表達(dá)式”,產(chǎn)生HTML輸出(可以是欄目頁(yè)HTML文件、內(nèi)容頁(yè)HTML文件)。
我們通過(guò)頁(yè)面設(shè)計(jì)、制作并上傳模板(以及相關(guān)的CSS文件、圖片文件、JS文件),并為每個(gè)欄目配置欄目頁(yè)與內(nèi)容頁(yè)模板后,就可以生成首頁(yè)、欄目頁(yè)與內(nèi)容頁(yè)的HTML頁(yè)面文件,完成一個(gè)可瀏覽的站點(diǎn)。
雖然BrilliantCMS系統(tǒng)的模板語(yǔ)言與技術(shù)簡(jiǎn)單易懂,但仍需要頁(yè)面制作與設(shè)計(jì)人員精通HTML/CSS/Javascript,并需要詳細(xì)了解模板語(yǔ)言語(yǔ)法。為簡(jiǎn)化用戶模板制作的復(fù)雜度,把用戶從復(fù)雜的頁(yè)面和模板制作中解放出來(lái),專注于內(nèi)容的整理與組織,BrilliantCMS系統(tǒng)以流行而著名的Bootstrap為基礎(chǔ)進(jìn)行擴(kuò)展,構(gòu)建了一套HTML/CSS框架,提供了“所見(jiàn)即所得”頁(yè)面設(shè)計(jì)與自動(dòng)模板生成功能。
使用此功能,用戶只需要選擇BrilliantCMS系統(tǒng)提供的幾百套各種顏色、各種風(fēng)格的頁(yè)面樣板,自己定義好“幾行幾列”的頁(yè)面內(nèi)容布局,然后在這些列中根據(jù)需要?jiǎng)?chuàng)建出內(nèi)容區(qū)塊,選擇內(nèi)容來(lái)源欄目、選擇需要的內(nèi)容樣式(如標(biāo)題列表、圖片集、圖文混排、視頻等),然后讓系統(tǒng)自動(dòng)生成模板。使用此功能,你僅需要一兩個(gè)小時(shí),就可以建好一個(gè)完全遵循HTML5/CSS3標(biāo)準(zhǔn)的、支持不同終端(桌面機(jī)、平板電腦、手機(jī))、靈活而漂亮的站點(diǎn)、專題。
圖:BrilliantCMS中,所見(jiàn)即所得的頁(yè)面設(shè)計(jì)
BrilliantCMS中,你可以用一種“向?qū)健钡姆椒▌?chuàng)建一個(gè)所見(jiàn)即所得的頁(yè)面設(shè)計(jì),首先可以從系統(tǒng)內(nèi)置的300套頁(yè)面樣式中選擇你喜歡的樣式,這些樣式的設(shè)計(jì)都支持Responsive Web Design,可以式寬屏式設(shè)計(jì),也可以是Boxed設(shè)計(jì)(內(nèi)容顯示區(qū)限制在一定的寬度內(nèi)),有的基于Bootstrap 3,有點(diǎn)基于Bootstrap4。
選擇好頁(yè)面樣式后,接著進(jìn)行頁(yè)面布局的設(shè)置,下圖中,你可以一次性地為各布局行(頂端次導(dǎo)航條、頁(yè)頭行、內(nèi)容區(qū)、頁(yè)腳等)按照Bootstrap12等分法分列,即總寬度為12,你可以6+6、5+7、3+4+5、4+4+4、3+3+3+3這樣分列。
接著可以為頂端次導(dǎo)航條、頁(yè)頭、主導(dǎo)航設(shè)置選擇項(xiàng)與參數(shù),例如主導(dǎo)航是否集成搜索框,主導(dǎo)航深度等。
在內(nèi)容區(qū)的某一個(gè)區(qū)塊,你可以列表顯示某個(gè)欄目下的內(nèi)容。BrilliantCMS提供50多種內(nèi)容列表方法,這些列表方法,覆蓋了目前互聯(lián)網(wǎng)網(wǎng)站上大部分的內(nèi)容列表方法,這些列表方法分為以下幾類:
例如下列圖片就是我們截取了幾個(gè)典型的內(nèi)容列表樣式,包括“標(biāo)題+摘要”、“橫向圖文”、“幻燈片”、“時(shí)間軸”。