Отображение звезды рейтинга в Django

Я пишу небольшой сайт на Django и хочу отображать звезды рейтинга, но немного застрял. В моем html-файле я делаю что-то вроде следующего

<div class="rating-star">
    <span>
        <i class="fas fa-star{% if review.rating == 0.5 %}-half-alt {% endif %}" aria-hidden="true"></i>

        <i class="fas fa-star{% if review.rating == 1.5 %}-half-alt {% endif %}" aria-hidden="true"></i>

        <i class="fas fa-star{% if review.rating == 2.5 %}-half-alt {% endif %}" aria-hidden="true"></i>

        <i class="fas fa-star{% if review.rating == 3.5 %}-half-alt {% endif %}" aria-hidden="true"></i>

        <i class="fas fa-star{% if review.rating == 4.5 %}-half-alt {% endif %}" aria-hidden="true"></i>
    </span>
</div>

В каждом теге <i> я также хочу использовать elif для отображения far fa-star. Позвольте мне показать пример с использованием fontawesome v4.7. В fontawesome v4.7 это выглядит так, как показано ниже, и я хочу добиться того же с fontawesome v5.13, но не знаю, как

<span>
    <i class="fa fa-star{% if review.rating == 0.5 %}-half-o{% elif review.rating < 1 %}-o {% endif %}" aria-hidden="true"></i>

    <i class="fa fa-star{% if review.rating == 1.5 %}-half-o{% elif review.rating < 2 %}-o {% endif %}" aria-hidden="true"></i>

    <i class="fa fa-star{% if review.rating == 2.5 %}-half-o{% elif review.rating < 3 %}-o {% endif %}" aria-hidden="true"></i>

    <i class="fa fa-star{% if review.rating == 3.5 %}-half-o{% elif review.rating < 4 %}-o {% endif %}" aria-hidden="true"></i>

    <i class="fa fa-star{% if review.rating == 4.5 %}-half-o{% elif review.rating < 5 %}-o {% endif %}" aria-hidden="true"></i>
</span>

Этот сниппет можно использовать для отображения пустых, половинных или полных звезд рейтинга (макс. звезд i 5) со шрифтом awesome v5+ :

<div class="rating-star">
    <span title="{{ review.rating }}/5">
    <!-- By default the star is full else it is empty otherwise it is half -->
        <i class="fa fa-star{% if review.rating < 0.5%}-o{% elif review.rating >= 0.5 and review.rating < 1 %}-half-o{% endif %}" aria-hidden="true"></i>
        <i class="fa fa-star{% if review.rating < 1.5%}-o{% elif review.rating >= 1.5 and review.rating < 2 %}-half-o{% endif %}" aria-hidden="true"></i>
        <i class="fa fa-star{% if review.rating < 2.5%}-o{% elif review.rating >= 2.5 and review.rating < 3 %}-half-o{% endif %}" aria-hidden="true"></i>
        <i class="fa fa-star{% if review.rating < 3.5%}-o{% elif review.rating >= 3.5 and review.rating < 4 %}-half-o{% endif %}" aria-hidden="true"></i>
        <i class="fa fa-star{% if review.rating < 4.5%}-o{% elif review.rating >= 4.5 and review.rating < 5 %}-half-o{% endif %}" aria-hidden="true"></i>
    </span>
    <span><strong>( {{ review.rating }}/5 )</strong></span>
</div>

Объяснение : У нас есть 3 различных состояния звезд :

  1. пустой -> fa fa-star-o
  2. полный -> fa fa-star-half-o
  3. полный -> fa fa-star

Эта цепочка условий в классе i :

class="fa fa-star{% if review.rating < 0.5%}-o{% elif review.rating >= 0.5 and review.rating < 1 %}-half-o{% endif %}"

означает, что звезда пустая if рейтинг < 0.5, звезда наполовину if рейтинг >=0.5 и < 1, звезда полная иначе (звезда ==1)

Такая же логика имеет место для оставшихся 4 звезд. Здесь мы предполагаем, что общее количество звезд равно 5

Вернуться на верх