使用Nginx SSI功能輔助HTML頁面設計

時間 2020-07-26

標籤使用 nginx ssi 功能輔助 html 頁面設計欄目 Nginx 简体版

原文原文鏈接

SSI，Server Side Include，支持html靜態文件內以css

的方式引入其餘html靜態文件，這一功能特性有助於頁面設計的碎片化和效率效果提高（設計頁面主要關心content內容的設計，並且碎片不會在多個頁面存在N個copy，而是一次性均可以修改更新），demo內容見附件qingbo_design_demo。html

demo目錄文件結構：

設計頁面目錄在svn的同步管理下，能夠使用eclipse或者dreamwaver等修改html頁面，而後同步提交到svn便可

readme文件內容

1，解壓安裝nginx windows版本

2，配置eclipse的external tool configuration

Location，選擇Browse File System，找到nginx.exe

Working Derectory，選擇nginx解壓目錄

Arguments，運行nginx 空，中止nginx -s quit，重啓nginx -s reload

3，將nginx/conf/nginx.conf連接到eclipse，方便編輯配置nginx

配置http，或server，或location

ssi on;

配置默認服務的根

location / {

root E:\sapling\demo\qingbo_design_demo; #設計頁面路徑

index index.html;

}

4，運行nginx，訪問http://localhost/index.html

5，編輯html，並按碎片劃分，按如下方式拼接碎片代碼

6，一級頁面的佈局，

/layout/head.html，引入資源css+js等（必定要是公共的資源）

/laytou/header.html，導航區

/layout/footer.html，尾部

7，二級頁面的佈局和菜單

/user/layout/head.html，二級頁面能夠有本身的特有碎片（引入特有的樣式和腳本），也能夠使用一級頁面的碎片

/user/layout/left.html，二級頁面可能有菜單，甚至是兩級菜單

8，index.html

<!DOCTYPE HTML>

<html>

<head>

<meta charset="UTF-8">

<meta name="keywords" content="Demo,Index">

<meta name="description" content="Demo HTML design">

<title>index</title>

</head>

<body>

index body content

<br/>

<button onclick="clickme()">Click Me</button>

</body>

</html>

效果圖：http://localhost/index.html

index+about，全局佈局碎片

用戶中心+個人帳戶，特有佈局碎片

eclipse配置圖：

配置nginx.conf

來自爲知筆記(Wiz)

附件列表

相關文章

相關標籤/搜索

Vue經常使用功能

網站建設指南

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。

最新文章

本站公眾號

歡迎關注本站公眾號,獲取更多信息

相關文章

>>更多相關文章<<