Approaches to implement macro definitions in html
I would be great doing things like
<define tag="myTag" options="3">
<h1> #1 </h1>
<ul>
<li> #2
<li> #3
</ul>
</define>
and then use it:
<myTag option="foo" option="bar" option="bean" />
I regard macros as really bi开发者_运维问答g advantage.
A work-around is using a macro processor like m4, or using php to simulate the macros efect. Any other technique to consider?
Perhaps obvious, but the C preprocessor can do the job.
index._html
#define _em(a) <em> a </em>
#define _image(a, b) <img src="a" b/>
#define _list(a, b, c) <h1> a </h1> \
<ul> \
<li> b </li> \
<li> c </li> \
</ul>
<!-- ___________________________________________________ -->
<!doctype html>
<html>
#define _theTile The Bar Title
#include "head._html"
<body>
_list(foo, bar, bean)
This is really _em(great)
_image(media/cat.jpg, )
_image(media/dog.jpg, width="25%" height="10px")
</body>
</html>
Being head._html
<head>
<meta charset="utf-8"/>
<title> _theTile </title>
<!-- more stuff ... -->
</head>
Then,
cpp -P index._html > index.html
produces:
<!doctype html>
<html>
<head>
<meta charset="utf-8"/>
<title> The Bar Title </title>
<!-- more stuff ... -->
</head>
<body>
<h1> foo </h1> <ul> <li> bar </li> <li> bean </li> </ul>
This is really <em> great </em>
<img src="media/cat.jpg" />
<img src="media/dog.jpg" width="25%" height="10px"/>
</body>
</html>
If you want to do it in the text-editor level, consider using Zen Coding.
In javascript
<!doctype html>
<html>
<script>
function em(a) {
var text = " <em> $a </em>".replace("$a", a);
document.write(text);
}
function image(a, b) {
var text = '<img src="$a" $b />'.replace("$a", a).replace("$b", b);
document.write( text );
}
function list(a, b, c) {
var text = '<h1> $a </h1> \
<ul> \
<li> $b </li> \
<li> $c </li> \
</ul>'
.replace("$a", a).replace("$b", b).replace("$c", c);
document.write (text);
}
</script>
<body>
<p>
<script> list("foo", "bar", "bean") </script>
<p> This is really <script> em("great") </script>
<p>
<script> image ("prosper.jpg", 'width="35%"') </script>
</body>
</html>
Pros: no prepocessing needed.
Cons: A bit annoying (always write <script> </script>). No direct way to include external html (afaik).
Now with php:
<!-- index.php -->
<?php
function list_($a, $b, $c) {
echo "
<h1> $a </h1>
<ul>
<li> $b </li>
<li> $c </li>
</ul>
";
}
function em($a) {
echo "<em> $a </em>";
}
function image($a, $b) {
echo "<img src=\"$a\" $b/>";
}
?>
<!doctype html>
<html>
<?php
$theTitle='The Bar Title';
include 'head.php';
?>
<body>
<? list_(foo, bar, bean) ?>
This is really <? em(great) ?>
<? image('media/cat.jpg', '' ) ?>
<? image('media/dog.jpg', 'width="25%" height="10px"') ?>
</body>
</html>
<head>
<meta charset="utf-8"/>
<title> <? echo "$theTitle"; ?> </title>
<!-- more stuff ... -->
</head>
Then
$ php index.php > index.html
gives
<!doctype html>
<html>
<head>
<meta charset="utf-8"/>
<title> The Bar Title </title>
<!-- more stuff ... -->
</head>
<body>
<h1> foo </h1>
<ul>
<li> bar </li>
<li> bean </li>
</ul>
This is really <em> great </em>
<img src="media/cat.jpg" />
<img src="media/dog.jpg" width="25%" height="10px"/>
</body>
</html>
I've written a single-class, zero-installation macro system aimed straight at HTML coding. You'll find it here:
aa_macro.py
加载中,请稍侯......
精彩评论