Home > Developer > Web Develop

Support HTML page design with Nginx SSI function

Source: Internet
Author: User
Developer on Alibaba Coud: Build your first app with APIs, SDKs, and tutorials on the Alibaba Cloud. Read more ＞

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

This article is an English version of an article which is originally in the Chinese language on aliyun.com and is provided for information purposes only. This website makes no representation or warranty of any kind, either expressed or implied, as to the accuracy, completeness ownership or reliability of the article or any translations thereof. If you have any concerns or complaints relating to the article, please send an email, providing a detailed description of the concern or complaint, to info-contact@alibabacloud.com. A staff member will contact you within 5 working days. Once verified, infringing content will be removed immediately.

Related Keywords:
html ssi ssi html ssi web page create html web page design html web page design tutorial html web page design code javascript function in html page

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.

What's Trending
Top 10 Tags
datastax versions naming convention zookeeper client class definition md5 microsoft sql server 2005 data structures exception handling error handling
Top 10 Keywords
microsoft download center down wordpress address url site address url wordpress address url windows installer 4 0 download 302 not found web address url definition site address url wordpress db2 integer mac os installation step by step pdf abbreviation for return

A Free Trial That Lets You Build Big!

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

Get Started for Free

  • Sales Support

    1 on 1 presale consultation

    Chat Contact Sales

  • After-Sales Support

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

    Open a Ticket

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

    Learn More