mirror of
https://github.com/Django-LiveView/docs.git
synced 2025-12-31 05:32:23 +01:00
Add code example and improve design
- Add "See it in action" section with complete code example showing button click loading article - Include HTML, Python handler, and result sections to demonstrate full workflow - Change bold text color to brown for better visibility and design consistency - Invert link underline behavior: underlined by default, removed on hover
This commit is contained in:
@@ -45,6 +45,12 @@ i {
|
|||||||
font-style: normal;
|
font-style: normal;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
strong,
|
||||||
|
b {
|
||||||
|
color: var(--color-brown);
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
|
||||||
/* Components */
|
/* Components */
|
||||||
|
|
||||||
.container {
|
.container {
|
||||||
@@ -65,13 +71,13 @@ a,
|
|||||||
.link {
|
.link {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
color: var(--color-brown);
|
color: var(--color-brown);
|
||||||
text-decoration: none;
|
text-decoration: underline;
|
||||||
padding-block: .3rem;
|
padding-block: .3rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
a:hover,
|
a:hover,
|
||||||
.link:hover {
|
.link:hover {
|
||||||
text-decoration: underline;
|
text-decoration: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
.title {
|
.title {
|
||||||
|
|||||||
61
one.org
61
one.org
@@ -13,6 +13,67 @@ Django LiveView is a framework for creating real-time, interactive web applicati
|
|||||||
|
|
||||||
Build rich, dynamic user experiences with server-rendered HTML without writing a single line of JavaScript. Perfect for Django developers who want real-time features without the complexity of a separate frontend framework.
|
Build rich, dynamic user experiences with server-rendered HTML without writing a single line of JavaScript. Perfect for Django developers who want real-time features without the complexity of a separate frontend framework.
|
||||||
|
|
||||||
|
** See it in action
|
||||||
|
|
||||||
|
Here's a complete example: a button that loads the latest blog article with a single click.
|
||||||
|
|
||||||
|
*HTML:*
|
||||||
|
|
||||||
|
#+BEGIN_SRC html
|
||||||
|
<button
|
||||||
|
data-liveview-function="load_latest_article"
|
||||||
|
data-action="click->page#run">
|
||||||
|
Load Latest Article
|
||||||
|
</button>
|
||||||
|
|
||||||
|
<div id="article-container"></div>
|
||||||
|
#+END_SRC
|
||||||
|
|
||||||
|
*Python:*
|
||||||
|
|
||||||
|
#+BEGIN_SRC python
|
||||||
|
from liveview import liveview_handler, send
|
||||||
|
from django.template.loader import render_to_string
|
||||||
|
|
||||||
|
@liveview_handler("load_latest_article")
|
||||||
|
def load_latest_article(consumer, content):
|
||||||
|
# Get the latest article from database
|
||||||
|
article = Article.objects.latest('published_at')
|
||||||
|
|
||||||
|
# Render with Django templates
|
||||||
|
html = render_to_string('article.html', {
|
||||||
|
'article': article
|
||||||
|
})
|
||||||
|
|
||||||
|
# Send to frontend
|
||||||
|
send(consumer, {
|
||||||
|
"target": "#article-container",
|
||||||
|
"html": html
|
||||||
|
})
|
||||||
|
#+END_SRC
|
||||||
|
|
||||||
|
*Result (after clicking the button):*
|
||||||
|
|
||||||
|
#+BEGIN_SRC html
|
||||||
|
<button
|
||||||
|
data-liveview-function="load_latest_article"
|
||||||
|
data-action="click->page#run">
|
||||||
|
Load Latest Article
|
||||||
|
</button>
|
||||||
|
|
||||||
|
<div id="article-container">
|
||||||
|
<article>
|
||||||
|
<h2>Understanding Django Channels</h2>
|
||||||
|
<p class="meta">Published on Dec 15, 2024 by Jane Doe</p>
|
||||||
|
<p>Django Channels extends Django to handle WebSockets,
|
||||||
|
long-running connections, and background tasks...</p>
|
||||||
|
<a href="/blog/understanding-django-channels/">Read more</a>
|
||||||
|
</article>
|
||||||
|
</div>
|
||||||
|
#+END_SRC
|
||||||
|
|
||||||
|
That's it! No page reload, no API endpoints, no REST, no GraphQL, no frontend framework. The article appears instantly via WebSocket. Just Python and Django templates working together in real-time.
|
||||||
|
|
||||||
** Key features
|
** Key features
|
||||||
|
|
||||||
- 🎯 **Create SPAs without using APIs**: No REST or GraphQL needed
|
- 🎯 **Create SPAs without using APIs**: No REST or GraphQL needed
|
||||||
|
|||||||
Reference in New Issue
Block a user