mirrors/django-components
1
0
Fork 0
mirror of https://github.com/django-components/django-components.git synced 2025-12-03 20:00:02 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

docs: fix links in getting started section + few other (#1026)

Browse source
This commit is contained in:
Juro Oravec 2025-03-17 08:55:42 +01:00 • committed by GitHub
parent 12a64f8e41
commit 8e7acd82be
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
9 changed files with 83 additions and 70 deletions
Download patch file Download diff file Expand all files Collapse all files

18
docs/getting_started/your_first_component.md
View file

@ -72,7 +72,7 @@ class Calendar(Component):
!!! note
If you "inline" the HTML, JS and CSS code into the Python class, you can set up
[syntax highlighting](../../guides/setup/syntax_highlight.md) for better experience.
[syntax highlighting](../../guides/setup/syntax_highlight) for better experience.
However, autocompletion / intellisense does not work with syntax highlighting.
We'll start by creating a component that defines only a Django template:
@ -104,7 +104,7 @@ Inside `calendar.html`, write:
```
In this example we've defined one template variable `date`. You can use any and as many variables as you like. These variables will be
defined in the Python file in [`get_context_data()`](../../../reference/api#django_components.Component.get_context_data)
defined in the Python file in [`get_context_data()`](../../reference/api#django_components.Component.get_context_data)
when creating an instance of this component.
!!! note
@ -115,10 +115,10 @@ when creating an instance of this component.
### 3. Create new Component in Python
In `calendar.py`, create a subclass of [Component](../../../reference/api#django_components.Component)
In `calendar.py`, create a subclass of [Component](../../reference/api#django_components.Component)
to create a new component.
To link the HTML template with our component, set [`template_file`](../../../reference/api#django_components.Component.template_file)
To link the HTML template with our component, set [`template_file`](../../reference/api#django_components.Component.template_file)
to the name of the HTML file.
```python title="[project root]/components/calendar/calendar.py"
@ -134,15 +134,15 @@ class Calendar(Component):
1. Relative to the component's python file (as seen above),
2. Relative to any of the component directories as defined by
[`COMPONENTS.dirs`](../../reference/settings.md#django_components.app_settings.ComponentsSettings.dirs)
and/or [`COMPONENTS.app_dirs`](../../reference/settings.md#django_components.app_settings.ComponentsSettings.app_dirs)
[`COMPONENTS.dirs`](../../reference/settings#django_components.app_settings.ComponentsSettings.dirs)
and/or [`COMPONENTS.app_dirs`](../../reference/settings#django_components.app_settings.ComponentsSettings.app_dirs)
(e.g. `[your apps]/components` dir and `[project root]/components`)
### 4. Define the template variables
In `calendar.html`, we've used the variable `date`. So we need to define it for the template to work.
This is done using [`Component.get_context_data()`](../../../reference/api#django_components.Component.get_context_data).
This is done using [`Component.get_context_data()`](../../reference/api#django_components.Component.get_context_data).
It's a function that returns a dictionary. The entries in this dictionary
will become available within the template as variables, e.g. as `{{ date }}`.
@ -158,7 +158,7 @@ class Calendar(Component):
}
```
Now, when we render the component with [`Component.render()`](../../../reference/api#django_components.Component.render)
Now, when we render the component with [`Component.render()`](../../reference/api#django_components.Component.render)
method:
```py
@ -177,4 +177,4 @@ And voilá!! We've created our first component.
---
Next, [let's add JS and CSS to this component ➡️](./adding_js_and_css.md).
Next, [let's add JS and CSS to this component ➡️](../adding_js_and_css).