有没有办法在HTML中多次使用同一代码代码可重用性？

问题描述

我正在为我的投资组合网站创建“项目”页面，在每个项目的名称之前添加一个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

解决方法

我会从您的html中完全删除svg个文件（这是语义上的拖动），因此我将使用定义一个类，然后将其自动添加到h5或该类中，请参见下面的演示

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 > CSS在线转换器对您的svg进行了转换-如果需要其他任务，请在这里尝试一下

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

不客气：）

您可以使用此代码段。将其插入文档中的</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>

您可以将Blade Templates与Laravel一起使用，也可以将Twig Templates与Symfony一起使用，也可以在Django中进行此操作。如果您有MVC框架，则可以使用一种方法在所有控制器中使用视图。就像使用$this->view('route..',$data);进行调用的CodeIgniter 3一样。然后，您可以使用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 = "..." %}

code-reuse function function function html