Home > Developer > Web Develop
Recently temporary one responsible for the company's official website of the sister paper, so temporarily took over the project Xia Guan Net, the official website is a static page, is very simple, but found a lot of pages, and each page is always part of the same as other pages, such as the page header, page end, etc. This results in a local modification to be manually repeated on the other N pages, of course, which I can't stand, so think about how to separate the common parts for invocation.
Start to want to directly use JS asynchronous request a common module page can, but take into account the SEO problem on the website, give up, and then want to be able to use Webpack code into the development environment and production environment, in the development environment for the page splicing, finished output to the production environment, so that will not affect the SEO, At the same time can also rely on Webpack's powerful packaging capabilities to package compression and other processing resources, the following brief description of the demo build.
The overall structure of the demo is as follows:
1base-Config2--webpack.dir-Foreach.config.js3 CSS4 Images5 JS6 Lib7 Publiclayout
--main.js8 Publish9 Templatesource
--commonhtml
--course
--course.ejs
--course.js
--index
--index.ejs
--index.js
.........Ten Package.json One Webpack.build.config.js AWebpack.config.js
The main building blocks are really publiclayout and templatesource two directories:
Publiclayout: The reference module of the main package public module, the Main.js code is as follows:
1Const Header = require ('.. /templatesource/commonhtml/header.html ');//introducing a public page header2Const TOPBAR = require ('.. /templatesource/commonhtml/topbar.html ');//introducing public modules that exist in the body3Const Footer = require ('.. /templatesource/commonhtml/footer.html ');//introduction of public page foot4Const HTMLCONFIG = {5 Header:header,6 Topbar:topbar,7 Footer:footer8 };9Module.exports = Htmlconfig;//Export for Call
Templatesource: The build template for the page, which uses Ejs as the front-end template, such as the index page, generated by Index.ejs:
1<%= Header%>2<link type= "Text/css" rel= "stylesheet" href= "Css/course.css" >34<body>7<div class= "Nav-bar" >9<div class= "NAV" >Ten<ul class= "Navigation" > One<li> A<a href= "index.html" target= "_self" title= "> Home </a> -</li> -<li> the<a href= "course.html" target= "_self" title= "class=" cur "> Course customization </a> -</li> - ...... -</ul> -</div> A</div> -<!--wrapper-- -<div id= "Container" > -<div> Main Content Section 1</div> -<%= Topbar%> -<div> Main Content Section 2</div> in</div> -<!--footer-- to<%= Footer%> +</body> -The <%= header%> is the introduction of the common header part of the package in Main.js, which is stitched together with the current HTML and eventually output to the publishing environment (publish).
The Index.js code is as follows:1 Const PUBLICLAYOUT = require ('.. /.. /publiclayout/main.js '); // always introduce the public part of the encapsulated page 2 Const MAININDEX = require ('./index.ejs '); // template module that introduces the current page 3 module.exports = Mainindex (publiclayout); // export multiple variables from a public part to a page template for page stitchingThe entire demo is relatively simple, just to avoid the pain of modifying the same duplication of work on multiple pages.
Github:https://github.com/frankshin/public-html-layout
Front-end referencing common HTML module scheme exploration
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
