Django inheritance avoid to create many html file

Question

i am new in Django. I have task , i have Horoscope website , there is 12 Zodiac signs Aquarius,Aries and etc.... In Aquarius.html are subcategory like Aquarius love , Aquarius finance .... Template is similar, when visitor click love button i want to show love content of Aquarius ( i do not want to copy paste Aquarius.htmland create another love file and then show) how can do this? For example when user open Aquarius i want to show

 {% for aqua in aquas %}
                       {% if forloop.last %}
                        Aqua Content text{{aqua.body_text}}
                       {% endif %}
                       {% endfor %}

When open Aquarius Love (click love button) show Love content

 {% for Love in Loves %}
                           {% if forloop.last %}
                           love Content text  {{aqua.love_body_text}}
                           {% endif %}
                           {% endfor %}

how can do this? if else ?

Answer 1

I think your model like this:

    class ZodiacSign(models.Model):
        name = models.CharField(...)
        body_text = models.TextField(...)
        .
        .
        .
        love_content = models.TextField(...) or models.ForeignKey(...) or models.ManytoManyField(...)

Your Url maybe like this:

    from zodiac.views import showZodiacSign
    urlpatterns = [
        .
        .
        path("zodiacSign/<int:zodiacSignPk>", showZodiacSign, name = "showZodiacSign"),
        .
        .
    ]

I think your view like this :

    def showZodiacSign(request, zodiacSignPk):
        zodiacSign = ZodiacSign.objects.get(pk = zodiacSignPk)
        return render(request, "zodiacSign.html", { "zodiacSign", zodiacSign })

and your html file ZodiacSign.html. If i correctly understand you, you need only one html file which name is ZodiacSign.html :

   {{ zodiacSign.name }} Content Text : {{ zodiacSign.body_text }}

   <button onclick="showContent('loveContent');">Show Love Content</button>
    <style>
        .zodiacContent{
        /*this->*/    display: none;
        /*or this->    visibility: hidden;*/
        }
    </style>
    <div id = "loveContent" class="zodiacContent">
        {{ zodiacSign.love_content }} {# if you used models.TextField() for love content #}
    </div>
    <script>
        function showContent(contentBlockId) {
            let content = document.getElementById(contentBlockId);
            content.classList.toggle("zodiacContent");
        }
    </script>