如何在Django模板中显示语言图标而非语言名称？

需求与现有代码 #

想要在Django模板里显示语言图标而非语言名称，当前使用的模板代码如下：

{% load static i18n %}

{% get_current_language as CURRENT_LANGUAGE %}
{% get_available_languages as AVAILABLE_LANGUAGES %}
{% get_language_info_list for AVAILABLE_LANGUAGES as languages %}
<div id="language">
      {% for language in languages %}
        <ul>
            <li>
               <a href="/{{ language.code }}/"
                {% if language.code == LANGUAGE_CODE %} class="active"{% endif %}>
                {{ language.name|slice:":3" }}
               </a>
            </li>
        </ul>
      {% endfor %}
</div>

可行的实现方案 #

只需修改模板中语言链接的部分代码，同时准备好对应的语言图标文件即可：

1. 修改模板代码 #

将原有的语言名称输出部分替换为图片标签，修改后的代码如下：

<a href="/{{ language.code }}/"
 {% if language.code == LANGUAGE_CODE %} class="active"{% endif %}>
    <img src="/static/images/{{ language.name }}.png" alt="{{ language.name }}">
</a>

2. 准备图标文件 #

• 将语言图标放置在Django项目的static/images/目录下
• 图标文件名必须和language.name的取值完全对应，比如英语对应English.png，西班牙语对应Spanish.png等
• 建议给图片设置与语言名称匹配的alt属性，提升页面的无障碍访问性

内容的提问来源于stack exchange，提问作者Giorgi Wiklauri