有没有办法在 HTML 中多次使用相同的代码（代码可重用性）？

Question

我正在为我的投资组合网站制作 'Projects' 页面，我在每个项目名称前添加一个 SVG 图标。由于 SVG Icon 的代码非常大，我想要一些类似于编程语言中函数的功能，但我不知道该怎么做。

这是我的部分代码：

 <section>
    <div class="container">
        <div class="row">
            <div>
                <h5 class="card-title">
                    <svg role="img" viewBox="0 0 20 20" height="20px" width="20px">
                        <path fill="#000000" d="M4 9H3V8h1v1zm0-3H3v1h1V6zm0-2H3v1h1V4zm0-2H3v1h1V2zm8-1v12c0 .55-.45 1-1 1H6v2l-1.5-1.5L3 16v-2H1c-.55 0-1-.45-1-1V1c0-.55.45-1 1-1h10c.55 0 1 .45 1 1zm-1 10H1v2h2v-1h3v1h5v-2zm0-10H2v9h9V1z">
                        </path>
                    </svg>
                </h5>
                <!-- More Stuff here -->
            </div>

            <div>
                <h5 class="card-title">
                    <svg role="img" viewBox="0 0 20 20" height="20px" width="20px">
                        <path fill="#000000" d="M4 9H3V8h1v1zm0-3H3v1h1V6zm0-2H3v1h1V4zm0-2H3v1h1V2zm8-1v12c0 .55-.45 1-1 1H6v2l-1.5-1.5L3 16v-2H1c-.55 0-1-.45-1-1V1c0-.55.45-1 1-1h10c.55 0 1 .45 1 1zm-1 10H1v2h2v-1h3v1h5v-2zm0-10H2v9h9V1z">
                        </path>
                    </svg>
                </h5>
                <!-- More Stuff here -->
            </div>
        </div>
    </div>
</section>

此代码段包含两个 SVG 图标，但页面中有更多图标（具有更大的代码）被多次使用。因此，多次编写相同的代码是低效的。如果我们只需编写一次代码就可以在整个 HTML 文件的任何地方使用，那就太好了。

我看到了一些答案，但他们使用的是 JQuery、Php 等。我想知道是否可以仅使用 HTML/CSS/Bootstrap.

如果不行，那用JavaScript可以吗（我是JS初学者）

如果您需要检查整个代码：https://devansh-07.github.io/projects.html

Answer 1

我会从你的 html 中完全删除 svg 文件（这是语义拖动）所以我会定义一个 class 然后自动将它添加到 h5 或者 class，请看下面的演示

CSS 本机目的就是：定义一次 - 重用 x 次！但是现在人们往往会忘记它，因为过多的框架和什么不是..

.card-title::before{
  content: "";
  display: inline-block;
  width: 20px;
  height: 20px;
  background-image: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' role='img' viewBox='0 0 20 20' height='20px' width='20px'%3E%3Cpath fill='%23000000' d='M4 9H3V8h1v1zm0-3H3v1h1V6zm0-2H3v1h1V4zm0-2H3v1h1V2zm8-1v12c0 .55-.45 1-1 1H6v2l-1.5-1.5L3 16v-2H1c-.55 0-1-.45-1-1V1c0-.55.45-1 1-1h10c.55 0 1 .45 1 1zm-1 10H1v2h2v-1h3v1h5v-2zm0-10H2v9h9V1z'%3E%3C/path%3E%3C/svg%3E");
}

<section>
  <div class="container">
    <div class="row">
      <div>
        <h5 class="card-title">
          Title 1
        </h5>
        <!-- More Stuff here -->
      </div>

      <div>
        <h5 class="card-title">
          Title 2
        </h5>
        <!-- More Stuff here -->
      </div>
    </div>
  </div>
</section>

我已经在这个很棒的免费在线转换器的帮助下转换了你的 svg - 如果其他任务需要，请在这里尝试一下

https://yoksel.github.io/url-encoder/

不客气:)

Answer 2

您可以使用此代码段。将其插入文档中的 </body> 标记之前。比您可以从原始标记中删除 svg。

<script>
document.addEventListener('DOMContentLoaded', function(){
   var titles = document.querySelectorAll('.card-title');
    for (i=0;i<titles.length;i++) {
        var span = document.createElement('span');
        span.innerHTML = '<svg role="img" viewBox="0 0 20 20" height="20px" width="20px"><path fill="#ffffff" d="M4 9H3V8h1v1zm0-3H3v1h1V6zm0-2H3v1h1V4zm0-2H3v1h1V2zm8-1v12c0 .55-.45 1-1 1H6v2l-1.5-1.5L3 16v-2H1c-.55 0-1-.45-1-1V1c0-.55.45-1 1-1h10c.55 0 1 .45 1 1zm-1 10H1v2h2v-1h3v1h5v-2zm0-10H2v9h9V1z"></path></svg>';
        titles[i].prepend(span);
    }
})
</script>

Answer 3

您可以在 Symfony 中使用 Blade Templates with Laravel, also Twig Templates，您也可以在 Django 中这样做。如果你有一个 MVC 框架，有一种方法可以在所有控制器中使用视图。就像 CodeIgniter 3 使用 $this->view('route..', $data); 调用一样。然后你就可以用svg大码传给他们所有的变量，然后打印在模板里。

在Laravel Blade中是这样的：

@include('route/viewname', ['svgcode' => '...'])

在 Symfony 中，Twig 是这样的：

{% include 'route/viewname.twig' 
     with {'svgcode': '...'} %}

在 PHP 没有框架：

<?php
  $svgcode = '...';
  include 'route/viewname.php';
?>

在 CodeIgniter 3 中：

$data['svgcode'] = '...'
$this->view('route/viewname', $data);

在 Django 中：

{% include "route/viewname.html" with svgcode = "..." %}

有没有办法在 HTML 中多次使用相同的代码（代码可重用性）？

Is there any way to use the same code multiple times in HTML (Code Reusability)?

html

css

function

code-reuse