Support HTML page design with Nginx SSI function

Source: Internet
Author: User

Ssi,server Side Include, supported in HTML static files to

<!--introduce other HTML static files #include file= "/layout/header.html" -- This feature helps to fragment and improve the efficiency of the page design (the design page is mainly concerned about content design, and the fragment will not have n copy on multiple pages, but can modify the update at once), the demo content is shown in the attachment Qingbo_design_demo.

Demo directory File structure: Design page directory under SVN synchronization management, you can modify the HTML page using Eclipse or Dreamwaver, and then synchronously submit to SVN to Readme file content 1, unzip the installation of Windows version of Nginx2, configure Eclipse's external tool configurationLocation , select the browse File System to locate Nginx.exeworking derectory, select Nginx Extract directoryArguments, run Nginx empty, stop nginx-s quit, restart nginx-s reload3, Link nginx/conf/nginx.conf to eclipse, easy to edit configuration NginxConfigure HTTP, or server, or locationSSI on;Configure the root of the default serviceLocation /{root E:\sapling\demo\qingbo_design_demo; #设计页面路径index index.html;}    4, run Nginx, Access http://localhost/index.html5, edit the HTML and divide by fragmentation, stitching the fragment code as follows<!--#include file= "/layout/header.html" -6, the layout of the first-level page,/layout/head.html, the introduction of resources CSS+JS, etc. (must be public resources)/laytou/header.html, navigation area/layout/footer.html, tail7, layout and menus for level two pages/user/layout/head.html, level two pages can have their own unique fragments (introducing unique styles and scripts), or you can use the fragmentation of a first-level page/user/layout/left.html, Level Two page may have menu, even level two menu8,index.html<! DOCTYPE html><meta charset= "UTF-8" ><meta name= "keywords" content= "demo,index" ><meta name= "description" content= "Demo HTML Design" ><title>index</title><!--#include file= "/layout/head.html" -<!--can also introduce page-specific resources and styles--<body><!--#include file= "/layout/header.html" -Index Body Content<br/><button onclick= "ClickMe ()" >click me</button><!--#include file= "/layout/footer.html" -</body>: http://localhost/index.htmlindex+about, Global layout Fragmentation User Center + my account, unique layout fragment Eclipse configuration diagram: Configuration nginx.conf



From for notes (Wiz)



List of attachments

Support HTML page design with Nginx SSI function

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.