Подходы к реализации определений макросов в html
Я был бы великолепен, делая такие вещи, как
<define tag="myTag" options="3">
<h1> #1 </h1>
<ul>
<li> #2
<li> #3
</ul>
</define>
А затем используйте его:
<myTag option="foo" option="bar" option="bean" />
Я рассматриваю макросы как действительно большое преимущество.
Обходной путь - это использование макропроцессора, такого как m4, или использование php для имитации эффекта макросов. Какой-либо другой метод следует рассмотреть?
5 answers
Возможно, это очевидно, но препроцессор C может выполнить эту работу.
Индекс._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>
Быть главой._html
<head>
<meta charset="utf-8"/>
<title> _theTile </title>
<!-- more stuff ... -->
</head>
Затем,
cpp -P index._html > index.html
Производит:
<!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>
Если вы хотите сделать это на уровне текстового редактора, рассмотрите возможность использования Дзен-кодирования.
В 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>
Плюсы: предварительная обработка не требуется.
Минусы: Немного раздражает (всегда пишите <script> </script>). Нет прямого способа включить внешний html (afaik).
Теперь с 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>
Затем
$ php index.php > index.html
Дает
<!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>
Я написал одноклассовую макросистему с нулевой установкой, нацеленную непосредственно на HTML-кодирование. Вы найдете его здесь: