js return list =
<ul><li data-name="{id:1,name:'a'}">a</li><li data-name="{id:2,name:'b'}">b</li></ul>
{{list|dump}} Why does it show?
<ul><li data-name=\"[object Object]\">a</li><li data-name=\"[object Object]\">b</li></ul>
you can use raw
you can use a {% raw %} block and anything inside of it will be output as plain text.
Your code:
<ul>
<li data-name="{id:1,name:'a'}">a</li>
<li data-name="{id:2,name:'b'}">b</li>
</ul>
Example:
{%
set list = [
{name: 'a', id: 'yourId1'},
{name: 'b', id: 'yourId2'}
]
%}
<ul>
{% for item in list %}
<li data-name="{{item.name}}" id="{{item.id}}">{{item.name}}</li>
{% endfor %}
</ul>
Output:
<ul>
<li data-name="a" id="yourId1">a</li>
<li data-name="b" id="yourId2">b</li>
</ul>
Related
I don t understand why I have this error as my code seems ok?
my form:
class NewListingForm(forms.Form):
title = forms.CharField(label="Listing title", widget=forms.TextInput(attrs={'class' : 'form-control col-md-8 col-lg-8'}))
description = forms.CharField(label='Description', widget=forms.Textarea(attrs={'class' : 'form-control col-md-8 col-lg-8', 'rows' : 10}))
enddate = forms.DateTimeField(
label='Date ending auction',
input_formats=['%d/%m/%Y %H:%M'],
)
category = forms.ChoiceField(widget=forms.Select(choices=categories_list))
initialBid = forms.DecimalField(label='Inital bid amount', max_digits=12, decimal_places=2)
photo = forms.ImageField(label='Image')
active = forms.BooleanField(label='Is this auction is active?')
edit = forms.BooleanField(initial=False, widget=forms.HiddenInput(), required=False)
class Meta:
model = Listing
my views:
from .models import User, Listing, Bid, Wishing, Comment, Category
from .forms import NewListingForm
#login_required
def newlisting(request):
form = NewListingForm()
if request.method == "POST":
form = NewListingForm(request.POST)
if form.is_valid():
if form.cleaned_data["edit"] is True:
form = form.save(commit=False)
form.save()
messages.success(request,
'listing saved') # message for inform user of success - See messages in html file
return HttpResponseRedirect(reverse("index", kwargs={'title': "list"}))
else:
return render(request, "auctions/newListing.html", {
"form": form,
"existing": True,
'title': "New Listing",
})
else:
return render(request, "auctions/newListing.html", {
"form": form,
"existing": False,
'title': "New Listing",
})
else:
return render(request, "auctions/newListing.html", {
"form": form,
"existing": False,
'title': "New Listing",
})
my template newListing.html:
{% extends "auctions/layout.html" %}
{% block body %}
<h2>{% if not listing_id %}Create Client {% else %} Edit {{ object.name }}{% endif %}</h2>
<form id="create-edit-client" action="" method="post" accept-charset="utf-8">
{% csrf_token %}
{% form %}
<div class="form-actions">
<input type = submit type="submit" value="Save" name="submit">
</div>>
</form>
{% endblock %}
my layout.html:
{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
<title>{% block title %}Auctions{% endblock %}</title>
<link href="{% static 'auctions/styles.css' %}" rel="stylesheet">
</head>
<body>
<h1>Auctions</h1>
<div>
{% if user.is_authenticated %}
Signed in as <strong>{{ user.username }}</strong>.
{% else %}
Not signed in.
{% endif %}
</div>
<ul class="nav">
<li class="nav-item">
<a class="nav-link" href="{% url 'index' %}">Active Listings</a>
</li>
{% if user.is_authenticated %}
<li class="nav-item">
<a class="nav-link" href="{% url 'logout' %}">Log Out</a>
</li>
{% else %}
<li class="nav-item">
<a class="nav-link" href="{% url 'login' %}">Log In</a>
</li>
<li class="nav-item">
<a class="nav-link" href="{% url 'register' %}">Register</a>
</li>
{% endif %}
</ul>
<hr>
{% block body %}
<h2>{{title}}</h2>
{% if message %}
<div>{{ message }}</div>
{% endif %}
{% endblock %}
</body>
</html>
I try to add {% load form %} but same type of error saying:
django.template.exceptions.TemplateSyntaxError: 'form' is not a registered tag library. Must be one of:
admin_list
admin_modify
admin_urls
thanks for help.
I just change {% form %} to {{ form }} seems working
I have been on this for a while with octobercms. I don't know if i am going about it the right way. I have my categories and subcategories already set up with nestedtree. In the Category model i used scope below to render just the parent category on a page.
public function scopeCategory($query)
{
return $query->where('parent_id', 0);
It all works fine.i connected it to a record details page by slug which only shows the parent category on the page as a heading.
{% if record %}
<h4>{{ record.cat_title }}</h4>
{% else %}
{{ notFoundMessage }}
{% endif %}
Now i want to render the subcategories here on the details page so when a user clicks on a category in the list page like agriculture the details page shows all the subcategories under agriculture, then the user can navigate further to the products. Not sure how to implement the subcategory part. I have tried a bunch of codes but it does nothing. Any solution to this?
Additional Info: I have already used scope to get only the parent categories on the list page
I am assuming you already used nested-tree [ https://octobercms.com/docs/database/traits#nested-tree ].
First we just pass parent parentCats to our view / page
use HardikSatasiya\SoTest\Models\Categories;
function onStart() {
$this['parentCats'] = Categories::getAllRoot();
}
In page/view to show category and its sub-categories up to N level we can use this render_cats macro
{% import _self as thisPage %}
{% macro render_cats(items) %}
{% import _self as thisPage %}
{% for item in items %}
<li>{{ item.level }} {{ item.title }}
{% if item.childcount > 0 %}
<ul>
{{ thisPage.render_cats(item.children) }}
</ul>
{% endif %}
</li>
{% endfor %}
{% endmacro %}
<ul>
{{ thisPage.render_cats(parentCats) }}
<!-- we are passing parent cats ^ here -->
</ul>
Output
<ul>
<li>
0 Parent Cat 1
<!-- ^ this is level -->
<ul>
<li>
1 Sub cat 1
<ul>
<li>2 Sub Sub cat 1
</li>
<li>2 Sub Sub cat 3
</li>
<li>2 Sub Sub cat 3
</li>
</ul>
</li>
<li>1 Sub cat 2
</li>
</ul>
</li>
<li>
0 Parent Cat 2
<ul>
<li>1 Sub cat 3
</li>
<li>1 Sub cat 4
</li>
</ul>
</li>
</ul>
If any doubt please comment
I have this code:
<nav>
<ul>
{% for page in site.pages %}
{% if page.title %}
<li>{{ page.title }}</li>
{% endif %}
{% endfor %}
</ul>
</nav>
I don't have any pages with title yet but I may have in the future and tidy-html5, that I'm using to output html with indent, give warning that ul is empty. Without title check it output generated pages tags or global pages like sitemap or rss feed.
Is there a way to first filter array and then don't show nav if the array is empty, something like:
{% pages = [for page in pages if page.title] %}
{% if pages.length %}
<nav>
<ul>
....
</ul>
</nav>
{% endif %}
To get only pages with titles:
pages = site.pages.select{ |p| p.title }
So your code might look something like:
{% assign pages = site.pages.select{ |p| p.title } %}
{% if pages %}
<ul>
{% for page in pages %}
<li>...</li>
{% endfor %}
</ul>
{% endif %}
I am looking for a way to build a navigation that is populated with a .yaml file. I can iterate over the yaml to create the nav items and correct urls that also adds an active class to the nav item when you are on that particular url. I uploaded a screenshot of the existing nav
nav getting populated with active class
my yaml file
nav:
- page: Home
url: /index.html
- page: Getting Started
url: /getting-started.html
- title: Delivery
subfolderitems:
- page: Intro
url: /Delivery/delivery-intro.html
- page: Set Up
url: /Delivery/delivery-deploy.html
- page: Thing 3
url: /thing3.html
- title: Group 2
subfolderitems:
- page: Piece 1
url: /piece1.html
- page: Piece 2
url: /piece2.html
- page: Piece 3
url: /piece3.html
- title: Group 3
subfolderitems:
- page: Widget 1
url: /widget1.html
- page: Widget 2
url: /widget2.html
- page: Widget 3
url: /widget3.html
my html file
<nav>
<ul id="nav-menu" class="nav nav-list">
{% for item in site.data.static-nav.nav %}
<li class="{% if item.url == page.url %} active-item {% endif %}">
{{ item.page }}
</li>
{% if item.subfolderitems[0] %}
{% for subitem in item.subfolderitems %}
{% if subitem.url == page.url %}
{% assign activesubitem = true %}
{% endif %}
{% endfor %}
<li class="parent {% if activesubitem == true %}collapsibleListOpen{% else %}collapsibleListClosed{% endif %}">
<div class="subtree-name">{{ item.title }}</div>
<ul class="nav nav-list">
{% for subitem in item.subfolderitems %}
<li class="{% if subitem.url == page.url %} active-item {% endif %}">
{{ subitem.page }}
</li>
{% endfor %}
</ul>
</li>
{% endif %}
{% endfor %}
</ul>
</nav>
I am running into an issue with the subfolder items being in accordions and having the parent accordion being toggled opened when one of the subitems matches the current url and therefore being active. Is there away to find the parent item with yaml and liquid? I then could somehow check if a parent nav item contains an active sub item ?
If anyone else is stuck on this, I was able to use {% break %}inside the for loop to break out of the loop. You may need a newish version of liquid to use {% break %}. I then assigned a variable that will add the class to have the correct accordion be opened when you open a subpage that is within that accordion.
<nav>
<ul id="nav-menu" class="nav nav-list">
{% for item in site.data.static-nav.nav %}
<li class="{% if item.url == page.url %} active-item {% endif %}">
{{ item.page }}
</li>
{% assign item_isOpen = false %}
{% if item.subfolderitems[0] %}
{% for subitem in item.subfolderitems %}
{% if subitem.url == page.url %}
{% assign item_isOpen = true %}
{% break %}
{% endif %}
{% endfor %}
<li class="{% if item_isOpen == true %} parent collapsibleListOpen {% else %} parent collapsibleListClosed {% endif %}">
<div class="subtree-name">{{ item.title }}</div>
<ul class="nav nav-list">
{% for subitem in item.subfolderitems %}
<li class="{% if subitem.url == page.url %} active-item {% endif %}">
{{ subitem.page }}
</li>
{% endfor %}
</ul>
</li>
{% endif %}
{% endfor %}
</ul>
Here's the scenario: I have a portfolio website running on Siteleaf (siteleaf.com - which uses liquid template) and I have a portfolio section with several projects as posts. The trick is that I only wish to bring the projects with the tag featured
I was able to bring the posts but only limit the number of posts that is shown, but not the tag that they are assigned. Here's the code I'm using:
<ul class="container work-gallery clearfix">
{% for post in site.pages['work'].posts limit:6 %}
<li class="col-md-6 thumb">
<a href="{{post.url}}" style="background-image: url('{{post.assets.first.url}}');">
<h4>{{post.title}}</h4>
</a>
</li>
{% endfor %}
</ul>
Is there a way to do it? Thanks for the help!
I'll bet you've since figured this out, because you're super close.
There are a few ways to do this (more info here and here). I'll assume for this example that you're using Siteleaf's default tags taxonomy (aka Tag Set).
<ul>
{% for post in taxonomy['tags']['featured'].posts limit:6 %}
<li>
<a href="{{post.url}}">
<h4>{{post.title}}</h4>
</a>
</li>
{% endfor %}
</ul>
You could then just add an if if you wanted to do something with the others.
Alternatively, if you wanted to really party, you could use the assign tag to store a variable, then use it as a condition for output (or for additional tags or variables).
{% assign featured_posts = '' %}
<ul>
{% for post in taxonomy['tags']['featured'].posts limit:6 %}
{% assign featured_posts = featured_posts | append:',' | append:post.id %}
<li>
<a href="{{post.url}}">
<h4>{{post.title}}</h4>
</a>
</li>
{% endfor %}
...
<ul>
{% for post in posts %}
{% unless featured_posts contains post.id %}
<li class="not-featured">
<a href="{{post.url}}">
<h4>{{post.title}}</h4>
</a>
</li>
{% endunless %}
{% endfor %}
</ul>