A web template system in
web publishing lets web designers and developers work with ''web templates'' to automatically generate custom
web pages, such as the results from a search. This reuses static web page elements while defining dynamic elements based on
web request parameters.
Web templates support static content, providing basic structure and appearance. Developers can implement templates from
content management systems,
web application frameworks, and
HTML editors.
Overview
A ''web template system'' is composed of the following:
* A
template engine: the primary
processing element
This glossary of computer hardware terms is a list of definitions of terms and concepts related to computer hardware, i.e. the physical and structural components of computers, architectural issues, and peripheral devices.
A
...
of the system;
* ''
Content resource
Content or contents may refer to:
Media
* Content (media), information or experience provided to audience or end-users by publishers or media producers
** Content industry, an umbrella term that encompasses companies owning and providing ma ...
'': any of various kinds of input
data streams, such as from a
relational database,
XML
Extensible Markup Language (XML) is a markup language and file format for storing, transmitting, and reconstructing arbitrary data. It defines a set of rules for encoding documents in a format that is both human-readable and machine-readable. T ...
files,
LDAP directory, and other kinds of local or
networked data;
* ''
Template resource
Template may refer to:
Tools
* Die (manufacturing), used to cut or shape material
* Mold, in a molding process
* Stencil, a pattern or overlay used in graphic arts (drawing, painting, etc.) and sewing to replicate letters, shapes or designs
...
'': ''web template''s specified according to a
template language;
The template and content resources are processed and combined by the template engine to mass-produce web documents. For purposes of this article, web documents include any of various output formats for transmission over the web via
HTTP
The Hypertext Transfer Protocol (HTTP) is an application layer protocol in the Internet protocol suite model for distributed, collaborative, hypermedia information systems. HTTP is the foundation of data communication for the World Wide We ...
,
HTTPS, or another
Internet protocol
The Internet Protocol (IP) is the network layer communications protocol in the Internet protocol suite for relaying datagrams across network boundaries. Its routing function enables internetworking, and essentially establishes the Internet.
...
.
Example
With the model typically held in a relational database, the remaining components of the
MVC architecture are the control and view. In the simplest of systems these two are not separated. However, adapting the
separation of concerns principle one can completely decouple the relationships.
For example, the view template may look like this:
Sites
Then, the control template loads the view, and then uses
XPath addressing to insert components from a database, for instance:
preserveWhiteSpace = false;
$doc->Load('view.html');
$titlenode = $doc->createTextNode("Like this");
$xpath = new DOMXPath($doc);
$xpath->registerNamespace("h", "http://www.w3.org/1999/xhtml");
$query = "//h:* data-xp='title'comment()";
$entries = $xpath->query($query);
foreach ($entries as $entry)
echo $doc->saveXML();
?>
Kinds of template systems
A web browser and web server are a
client–server architecture. Sites often also use a
web cache to improve performance. Five templating system types are classified based on when they replace placeholders with real content and assemble pages.
* Server-side - run-time substitution happens on the web server
* Client-side - run-time substitution happens in the web browser
* Edge-side - run-time substitution happens on a proxy between web server and browser
* Outside server - static web pages are produced offline and uploaded to the web server; no run-time substitution
* Distributed - run-time substitution happens on multiple servers
Template languages may be:
* Embedded or event-driven.
* Simple, iterable, programmable, or complex.
* Defined by a consortium, privately defined, or de facto defined by an open implementation. Ownership influences the stability and credibility of a specification. However, in most jurisdictions, language specification cannot be copyrighted, so control is seldom absolute.
The source code of the
template engine can be proprietary or
open source.
Many template systems are a component of a larger programming platform or framework. They are referred to as the "platform's template system". Some template systems have the option of substituting a different template language or engine.
Programming languages such as
Perl
Perl is a family of two high-level, general-purpose, interpreted, dynamic programming languages. "Perl" refers to Perl 5, but from 2000 to 2019 it also referred to its redesigned "sister language", Perl 6, before the latter's name was offic ...
,
Ruby
A ruby is a pinkish red to blood-red colored gemstone, a variety of the mineral corundum ( aluminium oxide). Ruby is one of the most popular traditional jewelry gems and is very durable. Other varieties of gem-quality corundum are called ...
,
C, and
Java
Java (; id, Jawa, ; jv, ꦗꦮ; su, ) is one of the Greater Sunda Islands in Indonesia. It is bordered by the Indian Ocean to the south and the Java Sea to the north. With a population of 151.6 million people, Java is the world's mo ...
support template processing either natively, or through add-on libraries and modules.
JavaServer Pages (JSP),
PHP, and
Active Server Pages
Active Server Pages (ASP) is Microsoft's first server-side scripting language and engine for dynamic web pages.
It was first released in December 1996, before being superseded in January 2002 by ASP.NET.
History
Initially released as an ...
(ASP with
VBScript
VBScript (''" Microsoft Visual Basic Scripting Edition"'') is an Active Scripting language developed by Microsoft that is modeled on Visual Basic. It allows Microsoft Windows system administrators to generate powerful tools for managing comput ...
,
JScript
JScript is Microsoft's legacy dialect of the ECMAScript standard that is used in Microsoft's Internet Explorer 11 and older.
JScript is implemented as an Active Scripting engine. This means that it can be "plugged in" to OLE Automation applica ...
or other languages) are examples, themselves, of web template engines. These technologies are typically used in server-side templating systems, but could be adapted for use on an "edge-side" proxy or for static page generation.
Static site generators
Static site generators are engines that use flat text input files like
markdown and
asciidoc
AsciiDoc is a human-readable document format, semantically equivalent to DocBook XML, but using plain-text mark-up conventions. AsciiDoc documents can be created using any text editor and read “as-is”, or rendered to HTML or any other for ...
to generate a
static web page. Examples
Jekyll (on
GitHub
GitHub, Inc. () is an Internet hosting service for software development and version control using Git. It provides the distributed version control of Git plus access control, bug tracking, software feature requests, task management, cont ...
),
Hugo (on
GitLab
GitLab Inc. is an open-core company that operates GitLab, a DevOps software package which can develop, secure, and operate software. The open source software project was created by Ukrainian developer Dmitriy Zaporozhets and Dutch developer ...
) Pelican (
Python).
Static HTML Editors
HTML editors often use web template systems to produce only
static web pages. These can be viewed as a ready-made
web design, used to mass-produce "cookie-cutter"
website
A website (also written as a web site) is a collection of web pages and related content that is identified by a common domain name and published on at least one web server. Examples of notable websites are Google, Facebook, Amazon, and W ...
s for rapid deployment. They also commonly include themes in place of
CSS
Cascading Style Sheets (CSS) is a style sheet language used for describing the presentation of a document written in a markup language such as HTML or XML (including XML dialects such as SVG, MathML or XHTML). CSS is a cornerstone technolo ...
styles. In general, the template language is used only with the editor's software.
FrontPage and
Dreamweaver
Adobe Dreamweaver is a proprietary web development tool from Adobe Inc. It was created by Macromedia in 1997 and developed by them until Macromedia was acquired by Adobe Systems in 2005.
Adobe Dreamweaver is available for the macOS and Windo ...
were once the most popular editors with template sub-systems. A Flash web template uses
Macromedia Flash to create visually interactive sites.
Many ''server-side template systems'' have an option to publish output pages on the server, where the published pages are
static. This is common on
content management systems, like
Vignette, but is not considered out-server generation. In the majority of cases, this "publish option" doesn't interfere with the ''template system'', and it can be made by external software, as
Wget.
Server-side systems
People began to use
server-side dynamic pages generated from templates with pre-existent software adapted for this task. This early software was the
preprocessors and
macro languages, adapted for the web use, running on
CGI. Next, a simple but relevant technology was the direct execution made on extension modules, started with
SSI.
Many ''template systems'' are typically used as ''server-side template systems'':
Technically, the methodology of embedding programming languages within HTML (or XML, etc.), used in many "server-side included script languages" are also templates. All of them are
Embedded complex languages.
There are also
preprocessors used as
server-side template engines. Examples:
Edge-side systems
Edge-Side template and inclusion systems. "Edge-side" refers to web servers that reside in the space between the client (browser) and the originating server. They are often referred to as "reverse-proxy" servers. These servers are generally tasked with reducing the load and traffic on originating servers by caching content such as images and page fragments, and delivering this to the browser in an efficient manner.
Basic
Edge Side Includes (ESI) is an SSI-like language. ESI has been implemented for content delivery networks. The ESI template language may also be implemented in web browsers using JavaScript and Ajax, or via a browser "plug-in".
Client-side systems
Many web browsers can apply an
XSLT stylesheet to XML data that transforms the data into an XHTML document, thereby providing template functionality in the browser itself.
Other systems implement template functionality in the browser using
JavaScript
JavaScript (), often abbreviated as JS, is a programming language that is one of the core technologies of the World Wide Web, alongside HTML and CSS. As of 2022, 98% of websites use JavaScript on the client side for webpage behavior, of ...
or another
client-side scripting language, including:
*
MustacheSquirrellyHandlebars
Distributed systems
The most simple form is
transclusions (HTML frames). In other cases
dynamic web pages are needed.
Examples:
*
Ajax
*
Rich Internet application
See also
References
{{Reflist
9
Free ecommerce website themesMG Technologies Blogs and Information Portal of Website Themes.
External links
JavaScript template librariescomparison from 2009
Enforcing Strict Model–View Separation in Template EnginesA Double-Model Approach to Achieve Effective Model–View Separation in Template Based Web ApplicationsA PHP template engine comparison with graphic chartsComparisons/benchmarks of some Python template-engines and some generic thoughts about template-enginesweb-mode.el is an emacs major for editing web templates
Scripting languages
*
Web design