Pages Templates
As many other full-fledged HTML pre-processors, the Pug has the template inheritance functionality. In large projects with big number of the pages, such inheritance is usually multilevel.
The valid HTML page must include the required part, herewith it is not only the certain HTML tags, but also theirs correct nesting and specific attributes. For the 2024, the minimal HTML code of valid web page is:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Page Title</title>
</head>
<body>
<!-- Visible content -->
</body>
</html>
Besides the required part, there are optional but frequently used code fragment, for example, the below declaration specifying that the page content must not be inscribed into the screen (because today the adaptive/responsive layout is de facto required):
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
Using the template inheritance we can extract the required and frequently used options parts to the parent file, and with inline JavaScript we can even generate the template code. For example, we can specify the paths of stylesheets and scripts via variables, then parent template will generate the corresponding tags at right position.
YDF library suggests the following pre-made templates which intended to be inherited: