减少HTML足迹？

Question

我想在我的网站的页脚中显示一个社交网络图标列表。例如（EveryDollar blog）：

我已经为页脚手动创建了HTML标记（使用EveryDollar句柄作为参考）：

<ul>
  <li>
    <a class="socialLink socialLink_facebook"
       href="https://www.facebook.com/everydollar"
       target="_blank"
       rel="noopener noreferrer">
      Facebook
    </a>
  </li>
  <li>
    <a class="socialLink socialLink_twitter"
       href="https://www.twitter.com/everydollar"
       target="_blank"
       rel="noopener noreferrer">
      Twitter
    </a>
  </li>
  <li>
    <a class="socialLink socialLink_instagram"
       href="https://www.instagram.com/everydollar"
       target="_blank"
       rel="noopener noreferrer">
      Instagram
    </a>
  </li>
  <li>
    <a class="socialLink socialLink_pinterest"
       href="https://www.pinterest.com/everydollar"
       target="_blank"
       rel="noopener noreferrer">
      Pinterest
    </a>
  </li>
</ul>

但是我发现手动创建和维护标记存在以下问题：

1. 不容易扩展：：如果我需要添加其他链接，则必须 a）复制并粘贴现有项，并更改网络名称和url或< strong> b）。手动创建一个全新的列表项。
2. 繁琐的修改：：如果我需要更改HTML属性（例如，将类socialLink更改为social-link或删除target="_blank"属性），则必须这样做每个项目上。

如何使用FreeMarker来使此标记更具扩展性并减少HTML足迹？

Answer 1

创建并遍历sequence个社交网络名称：

[#assign socialNetworks = ["Facebook", "Twitter", "Instagram", "Pinterest"]]
<ul>
  [#list socialNetworks as socialNetwork]
    [#assign nameLowerCase = socialNetwork?lower_case]
    <li>
      <a class="socialLink socialLink_${nameLowerCase!}"
         href="https://www.${nameLowerCase!}.com/everydollar"
         target="_blank"
         rel="noopener noreferrer">
        ${socialNetwork}
      </a>
    </li>
  [/#list]
</ul>

循环浏览FreeMarker序列具有以下好处：

1. 易于扩展：：添加新的社交网络与向序列中添加新名称一样容易。
2. 毫不费力的修改：更改HTML属性仅在一个地方进行，并应用于所有呈现的标记。