Package: django-simple-components
Django Simple ComponentsDjango Simple Components is a small package to easily create components inside your templates without saving them in the templates folder.Quick start1. Install package:To get started, install the package frompypi:pipinstalldjango-simple-componentsNow you can addsimple_componentsto your django project. Change yourINSTALLED_APPSsetting like this:INSTALLED_APPS=[...,"simple_components",]Optionally, you can specifysimple_componentsas builtins and this will be available in any of your templates without additionally specifying{% load simple_components %}:TEMPLATES=[{"BACKEND":"django.template.backends.django.DjangoTemplates","DIRS":[BASE_DIR/"templates"],"APP_DIRS":True,"OPTIONS":{"context_processors":["django.template.context_processors.debug","django.template.context_processors.request","django.contrib.auth.context_processors.auth","django.contrib.messages.context_processors.messages",],"builtins":["simple_components.templatetags.simple_components"],},},]If you choose not use it as a built-in, you will need to add{% load simple_components %}to the top of your template whenever you want to use simple components.2. Create component inside your template:You can define a base component that can be reused later. For example:{% load simple_components %}

{% #set_component "card" %}<divclass="card"><h3>{{ title }}</h3><p>{{ description }}</p></div>{% /set_component %}<divclass="card-list">{% component "card" title="Post 1" description="..." %}
    {% component "card" title="Post 2" description="..." %}
    {% component "card" title="Post 3" description="..." %}</div>You can also use named slots to change the contents of a component as quickly as possible:{% load simple_components %}

{% #set_component "profile" %}<divclass="profile"><divclass="avatar">{% @set_slot "avatar" %}<!-- fallback username as bdage --><spanclass="badge">{{ username.0 }}</span>{% /set_slot %}</div><divclass="info">{{ username }}</div></div>{% /set_component %}

{% #set_component "card" %}<divclass="card">{% set_slot "image" %}<h3>{{ title }}</h3><p>{{ description }}</p></div>{% /set_component %}<divclass="page">{% component "profile" username="Default" %}<divclass="card-list">{% #component "card" title="Post 1" description="..." %}
            {% @slot "image" %}<imgsrc="..."alt="slot image"/>{% /slot %}
        {% /component %}</div></div>3. Hooray! Everything is ready to use it.Template syntaxCreate componentTo define a component you need to use the Django tag{# set_component name %}where name is the name of the component,
listed in quotes. This is a paired tag, which means it needs to be closed:{% #set_component "card" %}<p>{{ title }}</p>{% /set_component %}Use componentIn the example above, we defined the "card" component and specified a variable that will be used during rendering later.
Now, to use this component, you just need to write:{% component "card" title="Post" %}Components can also render children - anything specified between the opening and closingcomponenttags:{% #set_component "card" %}<divclass="c1 c2 c3 c4 c5"><p>{{ title }}</p>{{ children }}</div>{% /set_component %}

{% #component "card" title="Post" %}<p>Simple</p><p>Content</p>{% /component %}Create slotsSlots are a powerful opportunity to upgrade your components! Slots can accept any content.
Each slot has a name, and is specified inside the set_component tag:{% #set_component "card" %}<divclass="card"><divclass="card-header"><h3>{{ title }}</h3></div><divclass="card-body">{% set_slot "body" %}</div></div>{% /set_component %}Any slot can have a fallback template, which will be displayed if this slot was not passed to the component.
Otherwise, aSlotNotFoundErrorwill be raised:{% @set_slot "custom" %}
    fallback
{% /set_slot %}Use slotsTo use slots in components, you need to pass the slot when rendering where it is needed:{% #set_component "card" %}<divclass="card">...<divclass="card-body">{% set_slot "body" %}</div></div>{% /set_component %}

{% #component "card" %}
    {% @slot "body" %}
        render slot inside card-body class
    {% /slot %}
{% /component %}SummarizeAll paired tags in simple components close with%{ /tag %}, wheretagcan beset_component,set_slot,component.There are{% component %}and{% set_slot %}which can be defined on the same line. For the component,
this means that it cannot use slots and children. Forset_slotthis means that the fallback template is not specified:{% component "card" title="Post" description="..." %}{% set_slot "avatar" %}To define a component or use it, you can specify#at the beginning of the tag (only for closable tags):{% #set_component name="simple" %}
    {{ children }}
{% /set_component %}{% #component name="simple" %}
    component with children content
{% /component %}To define a slot or use it, you can specify@at the beginning of the tag (only for closable tags):{% @set_slot "custom" %}
    fallback
{% /set_slot %}{% @slot "custom" %}
    render slot
{% /slot %}ContributingIf you would like to suggest a new feature, you can create an issue on the GitHub repository for this project.
Also you can fork the repository and submit a pull request with your changes.LicenseThis project is licensed under the MIT License. See the LICENSE file for more information.