Template framework for making static sites with PHP

xiaoxiao2021-03-06  20

The template can improve the structure of the website. This article describes how to use a template control page layout in a website composed of a large number of static HTML pages through a new function and template class.

outline:

====================================

Separation function and layout

Avoid pages element repeat

Template frame for static website

====================================

Separation function and layout

First let's take a look at the two main purposes of the application template:

Separation function (PHP) and layout (HTML)

Avoid pages element repeat

The first purpose is to talk about the most purpose. It is idea that a set of programmates write a PHP script for generating page content, and another set of designers designed HTML and graphics to control the final appearance of the page. The basic idea of ​​separation function and layout is to make the two groups of people to write and use independent set of files: programmathers only need to care about files that only contain PHP code, do not need to care about the appearance of the page; and page designers can use themselves The most familiar visual editor design page layout, there is no need to worry about destroying any PHP code embedded to the page.

If you have seen a few tutorials about the PHP template, then you should have already understood the working mechanism of the template. Consider a simple page part: Above the page is the header, the left is the navigation bar, the rest is the content area. This website can have the following template file:

Template example </ title> </ head> <body> <table> <tr> <td> {header} </ td> </ Tr> <Tr> <TD> {LeftNAV} </ td> <td> {content} </ td> </ tr> </ table> </ body> </ html> <! - header.htm - > <img src = "Sitelogo.jpg"> <! - leftnav.htm -> <br> <a href="foo"> foo </a> <br> <a href="bar"> Bar < / A> You can see how the page is constructed from these templates: the main template controls the layout of the entire page; the Header template and the Leftnav template control the public elements of the page. The identifier word inside the arc random arc "{}" is a content occupying element. The main benefit of using templates is that the interface designer can edit these files in their own will, such as setting font, modifying color, and graphics, or completely changing the layout of the page. Interface designers can edit these pages with any ordinary HTML editor or visual tool, because these files contain only HTML code, without any PHP code. All PHP code is saved to a separate file, which is the file actually called by the page URL. The web server parsing the file via the PHP engine and then returns the result to the browser. Generally, PHP code always dynamically generates page content, such as querying the database or performing some calculation. Here is an example: <? Php // example.php require ('class.fastTemplate.php'); $ TPL = new fasttemplate ('.'); $ TPL-> Define (array ('main' => "main .htm ',' header '=>' Header.htm ',' Leftnav '=>' Leftnav.htm ')); // The PHP code setting $ Content makes it contains the right page content $ TPL-> Assign ('Content', $ Content); $ TPL-> Parse ('Header', 'Header'); $ TPL-> Parse ('Leftnav', 'Leftnav'); $ TPL-> PARSE ('main', ' Main '); $ TPL-> FASTPRINT (' main ');> Here we use the popular FastTemplate template class, but its basic ideas are the same for many other templates. First of all, you instantiate a class, tell it where to find the template file and which template file corresponds to the page; then generate the page content, give the results to the identification word; then, parse each template file, The template class will perform the necessary replacement operation; finally output the resolution result to the browser.</p> <p>This file is completely constructed by PHP code, does not contain any HTML code, which is its biggest advantage. Now, the PHP programmer can focus on writing code that generates page content without having to format the final page correctly for how to generate HTML. You can use this method and the above file to construct a complete website. If the PHP code is generated by the query string in the URL, for example</p> <p>Http://www.foo.com/example.php?article=099, you can construct a complete magazine website accordingly.</p> <p>It is easy to see that there is a second benefit using template. As shown in the above example, the navigation strips on the left side of the page are saved as a file, and we can change the navigation bar left on the left side of the website only by editing this template file.</p> <p>Avoid pages element repeat</p> <p>"This is really good", you may think, "My website is mainly composed of a large number of static pages. Now I can delete their public part from all pages, and update these public part is too much trouble. I will You can make a unified page layout that is easy to maintain with a template. "But things are not as simple," a large number of static pages "said the problem.</p> <p>Consider the above example. This example actually has only an example.php page, which can generate all the pages of the entire website because it utilizes the query string in the URL to dynamically construct the page dynamically from the information source such as the database.</p> <p>The websites in most people in us do not have to have a database support. Most of our website consists of static pages, then use PHP here, there are some dynamic functions, such as search engines, feedback forms, etc. So how do I apply templates on this website?</p> <p>The easiest way is to copy a php file for each page, and then set the variables of the PHP code to the appropriate page content in each page. For example, suppose there are three pages, they are homepage (home), About and Products, we can generate them with three files. The content of these three files is like:</p> <p><? php // Home.php Require ('Class.fastTemplate.php'); $ TPL = New FastTemplate ('.'); $ TPL-> Define (Array ('main' => 'main.htm', ' Header '=>' Header.htm ',' Leftnav '=>' Leftnav.htm ')); $ Content = "<p> Welcome to Access </ P> <img src = /" demo.jpg / "> <P > I hope you can like this website </ p> "; $ TPL-> Assign ('Content', $ Content); $ TPL-> PARSE ('Header', 'Header'); $ TPL-> PARSE ('Leftnav ',' Leftnav '); $ TPL-> PARSE (' main ',' main '); $ TPL-> Fastprint (' main ');?></p> <p>Obviously, this method has three problems: we must copy these complex, involving the PHP code involved in the template, which makes the page difficult to maintain as repeating public page elements; now the file has mixed HTML and PHP code; The content variable assignment will become very difficult because we have to handle a lot of special characters. The key to solving this problem is to separate the PHP code and HTML content, although we cannot delete all HTML content from the file, but can remove most PHP code.</p> <p>Template frame for static website</p> <p>First, we write template files as all of the page public elements and page overall layouts, and then remove the public part from all pages, leaving only page content; then add three lines of PHP code in each page. As follows:</p> <p><? php <! - Home.php -> <? PHP Require ('prepend.php');?> <? php pagestart ('Home');?> <h1> Hello </ h1> <p > Welcome access </ p> <img src = "demo.jpg"> <p> I hope you can like this website </ p> <? Php pagefinish ();?>?></p> <p>This method basically solves the various problems mentioned earlier. There are only three lines of PHP code in the file, and there is no row of code directly to the template, so it is necessary to change the possibility of these code. Further, since the HTML content is located outside the PHP tag, there is no processing problem of special character. We can easily add this three-line PHP code to all static HTML pages.</p> <p>The Require function introduced a PHP file that contains all the required PHP code related to the template. Where the Pagestart function sets the template object and the page title, the PageFinish function parsing the template and generates the result to send it to the browser.</p> <p>How is this implementation? Why is HTML in the file before calling the PageFinish function to the browser? The answer is a new feature of PHP 4, which allows the contents of the output to the browser to the buffer. Let's take a look at the specific code of prepend.php:</p> <p><? PHP Require ('Class.fastTemplate.php'); Function Pagestart ($ TITLE = ') {Global $ TPL; $ TPL = New FastTemplate ('. '); $ TPL-> Define (Array (' main ' => 'main.htm', 'header' => 'Header.htm', 'Leftnav' => 'Leftnav.htm'); $ TPL-> Assign ('Title', $ TITLE); OB_START (); Function Pagefinish () {Global $ TPL; $ Content = Ob_Get_Contents (); OB_END_CLEAN (); $ TPL-> Assign ('Content', $ Content); $ TPL-> Parse ('Header', 'Header'); $ TPL-> PARSE ('Leftnav', 'Leftnav'); $ TPL-> PARSE ('main', 'main'); $ TPL-> Fastprint ('main');}?> PageStart function first created and set A template instance and then cache it. Thereafter, all HTML content from the page itself will enter the cache. The PageFinish function takes out the contents of the cache and specifies these contents in the template object, finally parsing the template and outputs the completed page.</p> <p>This is the entire work process of the entire template frame. First, write a template that contains all the public elements of the website, then removes all public page layout code from all pages, in which the PHP code will never need to be changed; then add the fastTemplate class file and prepend.php to the included path So you get a website that can focus on a page layout, it has better reliability and maintainability, and the large-scale modification of the site level has become quite easy.</p> <p>FastTemplate class can be</p> <p>Http://www.thewebmasters.net/ Find, the latest version number is 1.1.0, there is a small patch used to ensure that the class is properly run in PHP 4. The classes in this article download code have been corrected by this patch. <script language = "javascript" type = "text / javascript"> Function FormCheck (Form) {if (form.name.value == ") {alert (" Please enter your name "); return false;} if (form);} (Form);} .content.value == "") {Alert ("Please enter content"); return false;}} </ script></p></div><div class="text-center mt-3 text-grey"> 转载请注明原文地址:https://www.9cbs.com/read-41033.html</div><div class="plugin d-flex justify-content-center mt-3"></div><hr><div class="row"><div class="col-lg-12 text-muted mt-2"><i class="icon-tags mr-2"></i><span class="badge border border-secondary mr-2"><h2 class="h6 mb-0 small"><a class="text-secondary" href="tag-2.html">9cbs</a></h2></span></div></div></div></div><div class="card card-postlist border-white shadow"><div class="card-body"><div class="card-title"><div class="d-flex justify-content-between"><div><b>New Post</b>(<span class="posts">0</span>) </div><div></div></div></div><ul class="postlist list-unstyled"> </ul></div></div><div class="d-none threadlist"><input type="checkbox" name="modtid" value="41033" checked /></div></div></div></div></div><footer class="text-muted small bg-dark py-4 mt-3" id="footer"><div class="container"><div class="row"><div class="col">CopyRight © 2020 All Rights Reserved </div><div class="col text-right">Processed: <b>0.037</b>, SQL: <b>9</b></div></div></div></footer><script src="./lang/en-us/lang.js?2.2.0"></script><script src="view/js/jquery.min.js?2.2.0"></script><script src="view/js/popper.min.js?2.2.0"></script><script src="view/js/bootstrap.min.js?2.2.0"></script><script src="view/js/xiuno.js?2.2.0"></script><script src="view/js/bootstrap-plugin.js?2.2.0"></script><script src="view/js/async.min.js?2.2.0"></script><script src="view/js/form.js?2.2.0"></script><script> var debug = DEBUG = 0; var url_rewrite_on = 1; var url_path = './'; var forumarr = {"1":"Tech"}; var fid = 1; var uid = 0; var gid = 0; xn.options.water_image_url = 'view/img/water-small.png'; </script><script src="view/js/wellcms.js?2.2.0"></script><a class="scroll-to-top rounded" href="javascript:void(0);"><i class="icon-angle-up"></i></a><a class="scroll-to-bottom rounded" href="javascript:void(0);" style="display: inline;"><i class="icon-angle-down"></i></a></body></html><script> var forum_url = 'list-1.html'; var safe_token = 'ezuFgRnxzZp_2BYa1vDEDmhFVG3HLdGY5T6JDkoHw_2BQOp6RRN72qmGoEepeRCGAqVkgMg69v2tDV22piV9c42J3g_3D_3D'; var body = $('body'); body.on('submit', '#form', function() { var jthis = $(this); var jsubmit = jthis.find('#submit'); jthis.reset(); jsubmit.button('loading'); var postdata = jthis.serializeObject(); $.xpost(jthis.attr('action'), postdata, function(code, message) { if(code == 0) { location.reload(); } else { $.alert(message); jsubmit.button('reset'); } }); return false; }); function resize_image() { var jmessagelist = $('div.message'); var first_width = jmessagelist.width(); jmessagelist.each(function() { var jdiv = $(this); var maxwidth = jdiv.attr('isfirst') ? first_width : jdiv.width(); var jmessage_width = Math.min(jdiv.width(), maxwidth); jdiv.find('img, embed, iframe, video').each(function() { var jimg = $(this); var img_width = this.org_width; var img_height = this.org_height; if(!img_width) { var img_width = jimg.attr('width'); var img_height = jimg.attr('height'); this.org_width = img_width; this.org_height = img_height; } if(img_width > jmessage_width) { if(this.tagName == 'IMG') { jimg.width(jmessage_width); jimg.css('height', 'auto'); jimg.css('cursor', 'pointer'); jimg.on('click', function() { }); } else { jimg.width(jmessage_width); var height = (img_height / img_width) * jimg.width(); jimg.height(height); } } }); }); } function resize_table() { $('div.message').each(function() { var jdiv = $(this); jdiv.find('table').addClass('table').wrap('<div class="table-responsive"></div>'); }); } $(function() { resize_image(); resize_table(); $(window).on('resize', resize_image); }); var jmessage = $('#message'); jmessage.on('focus', function() {if(jmessage.t) { clearTimeout(jmessage.t); jmessage.t = null; } jmessage.css('height', '6rem'); }); jmessage.on('blur', function() {jmessage.t = setTimeout(function() { jmessage.css('height', '2.5rem');}, 1000); }); $('#nav li[data-active="fid-1"]').addClass('active'); </script>