在html中实现宏定义的方法

发布于 2024-12-07 12:16:34 字数 368 浏览 0 评论 0原文

我会很高兴做这样的事情

<define tag="myTag" options="3">
<h1> #1 </h1>

<ul>
  <li> #2
  <li> #3
</ul>

</define>

然后使用它：

<myTag option="foo" option="bar" option="bean" />

我将宏视为确实有很大优势。

解决方法是使用像 m4 这样的宏处理器，或者使用 php 来模拟宏效果。还有其他技术需要考虑吗？

原文

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 big advantage.

A work-around is using a macro processor like m4, or using php to simulate the macros efect. Any other technique to consider?

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

作死小能手 2024-12-14 12:16:34

也许很明显，但 C 预处理器可以完成这项工作。

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>

为 head._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>

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>

回复收藏 0 原文

一片旧的回忆 2024-12-14 12:16:34

如果您想在文本编辑器级别执行此操作，请考虑使用 Zen Coding。

回复收藏 0 原文

肤浅与狂妄 2024-12-14 12:16:34

在 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>

优点：不需要预处理。

缺点：有点烦人（总是写）。没有直接的方法来包含外部 html（据我所知）。

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).

回复收藏 0 原文

叹梦 2024-12-14 12:16:34

现在使用 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>

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>

回复收藏 0 原文