How to split long HTML into "functions"
When writing a non-trivial static HTML page, it is very difficult to see the large-scale structure in which fine structure and content all mix. Scrolling through multiple pages to find a closing tag that matches a given opening tag is frustrating. In general, it seems messy, awkward, and difficult to maintain ... for example, writing a large program without any functions.
Of course, when I write a large program, I break it down hierarchically into smaller functions. Is there a way to do this with a large HTML file?
Basically I'm looking for a templating system where the content to be inserted into the template is more HTML, which is optional (the important part here) is in a single file.
That is, I want to be able to do something like what this hypothetical syntax suggests:
<html>
<head>{{head}}</head>
<body>
<div class="header">{{header}}</div>
<div class="navbar">{{navbar}}</div>
<div class="content">{{content}}</div>
<div class="footer">{{footer}}</div>
</body>
</html>
{{head}} =
<title>Hello World!</title>
{{styles}}
{{scripts}}
{{styles}} =
<link rel="stylesheet" type="text/css" href="style.css">
{{navbar}} =
...
...
... and so on...
Then, presumably, there would be an easy way to "compile" this to create a standard HTML file.
Are there any tools out there to write HTML this way?
In most template engines, each must be a separate file, which is not useful.
UPDATE : Gnu M4 seems to do exactly what I'm looking for, but with a few caveats:
-
Macros should appear before they are used, when I prefer them after.
-
M4 syntax mixes very awkwardly with HTML. Since the file is no longer HTML, it cannot easily be syntactically checked for errors. The M4 processor is very simple and flexible, which sometimes makes it difficult to find errors in M4 files - the parser won't complain or even notice when what you wrote means something different from what you probably meant.
-
There is no way to get formatted HTML, making the output an unreadable mess. (Since production HTML can be minified anyway, this is not a major issue and it can always be run through a formatter if it needs to be readable.)
source to share
This will parse your example template and do what you want.
perl -E 'my $pre.=join("",<>); my ($body,%h)=split(/^\{\{(\w+)\}\}\s*=\s*$/m, $pre); while ($body =~ s/\{\{(\w+)\}\}/$h{$1}/ge) { if ($rec++>200) {die("Max recursion (200)!")}};$body =~ s/({{)-/$1/sg; $body =~ s/({{)-/$1/sg; print $body' htmlfiletoparse.html
And here is the script version. joshTplEngine file;)
#!/usr/bin/perl
## get/read lines from files. Multiple input files are supported
my $pre.=join("",<>);
## split files to body and variables %h = hash
## variable is [beginning of the line]{{somestring}} = [newline]
my ($body,%h)=split(/^\{\{# split on variable line and
(\w+) ## save name
\}\}
\s*=\s*$/xm, $pre);
## replace recursively all variables defined as {{somestring}}
while ($body =~ s/
\{\{
(\w+) ## name of the variable
\}\}
/ ##
$h{$1} ## all variables have been read to hash %h and $1 contens variable name from mach
/gxe) {
## check for number of recursions, limit to 200
if ($rec++>200) {
die("Max recursion (200)!")
}
}
## replace {{- to {{ and -}} to }}
$body =~ s/({{)-/$1/sg;
$body =~ s/-(}})/$1/sg;
## end, print
print $body;
Using:
joshTplEngine.pl /some/html/file.html [/some/other/file] | tee /result/dir/out.html
I hope this little cut perl allows you to use your templates.
source to share