I am building a web app using flask. I found that I am retying the same thing over and over with a minor edit into everyone of my HTML pages so I want to make it into a template. How can I make it a dynamic template? Below is the code that I use for my ABOUTUS page which is just one line different from my CONTACT page.
About Us Page header:
<div id="menu">
<div class="pure-menu">
<a class="pure-menu-heading" href="#">WebAPP</a>
<ul class="pure-menu-list">
<li class="pure-menu-item">Home</li>
<li class="pure-menu-item menu-item-divided pure-menu-selected">About</li>
<li class="pure-menu-item">Membership</li>
<li class="pure-menu-item">Contact</li>
{% if current_user.is_authenticated %}
<li class="pure-menu-item">Log out</li>
{% else %}
<li class="pure-menu-item">Log in</li>
{% endif %}
</ul>
</div>
Contact Page header:
<div id="menu">
<div class="pure-menu">
<a class="pure-menu-heading" href="#">WebAPP</a>
<ul class="pure-menu-list">
<li class="pure-menu-item">Home</li>
<li class="pure-menu-item">About</li>
<li class="pure-menu-item">Membership</li>
<li class="pure-menu-item menu-item-divided pure-menu-selected">Contact</li>
{% if current_user.is_authenticated %}
<li class="pure-menu-item">Log out</li>
{% else %}
<li class="pure-menu-item">Log in</li>
{% endif %}
</ul>
</div>
</div>
The only change is that I move the menu-item-divided pure-menu-selected line from one line to the other based on what template I am loading. I cannot think of a way to do this dynamically so that I can turn this into a template that I can just extend for every file.
You could just use standard jinja template inheritance as mentioned in comment above.
Docs here: Template Inheritance
Method 1:
Import request method in your routes.py file,
Use jinga if condition to check whether page is pointing to
current url endpoint.
<li class="pure-menu-item{% if request.path == '/contact'} menu-item-divided pure-menu-selected{% endif %}"><a href="/contact" class="pure-menu-link">Contact</a</li>
Tip: You can use flask dynamic url difination {{ url_for('contact') }} instead of hard coding urls.
Method 2: (recommended)
This is not related to flask jinja but does the work as intended in front-end but using JavaScript with jQuery library.
Add this script at the end of the template before closing body tag.
jQuery version
<script>
let current_path = "{{ request.path }}"
if (current_path === window.location.pathname) {
$(".pure-menu-item a[href='"+current_path+"']")
.prop("href", "#").closest('li')
.addClass("pure-menu-item menu-item-divided pure-menu-selected");
}
</script>
Vanilla JS (plain js)
<script>
let current_path = "{{ request.path }}"
let current_nav = document.querySelctor("div.pure-menu-item a[href='"+current_path+"']");
if (current_path === window.location.pathname) {
current_nav.setAttribute("href", "#");
current_nav.closest('li').classList.add("pure-menu-item menu-item-divided pure-menu-selected");
}
</script>
What it does?
If the current url matches to the url specfied in navigation above, it adds the menu-item-divided pure-menu-selected class to the div and disables the current url routing by replacing the actual url to #.
Clean and elegant.
Why?
If you use JavaScript you don't have to define hundreds of {% if... %} in back-end, those if statements you defined in back-end will be checked in every pages user loads, additionally you just saved on more ifs and elses to check if loaded page is nav link's page and disable routing by change url to #. Wow you just saved millions of cpu cycles. :-)
Related
Hello I am working on my website with multiple pages and I want to do smooth scrolling on a certain page but I don't want to use the html tag because it will only be for this specific page and not the whole website here is my code.
{% if section.settings.display_product_detail_description == false and section.settings.display_product_reviews == false and section.settings.display_shipping_returns == false %}
{% assign tab5_active = true %}
{% endif %}
<div class="scroll-to-table">
<li class = "tab-title">
<a href="#product_attributes_table" class="tab-links {% if tab5_active %} active {% endif %}">
Specs
</a>
</li>
</div>
This is the code for the HTML
div.scroll-to-table{
scroll-behavior: smooth;}
And here is the code for the CSS
At the moment all that the page is doing is a jump and not a smooth scroll. I've tried using ID instead of Class, .scroll-to-table instead of div.scroll-to-table, and changing the element in which I call the CSS from but no luck
We can add scroll-behaviour: smooth to particular page by using javascript IIFE (Immediately Invoked Function Expression). This will add the smooth behaviour to the only page that runs this script.
<script>
(function () {
document.documentElement.style.scrollBehavior = smooth;
})();
</script>
I am creating website in django from 2 to 3 pages so the problem is in the html part when linking the pages in html there is two pages now ( index " the main home page for the site - about)
so when I run the server it open the index page and when I click on about link the url will be (www.xxxx.com/about/about) and when I click on the index link the url will be( www.xxxx.com/about) not the index page . so the two link direct me to the about page but with different url
here is the url in the main project :
urlpatterns = [
path('',include('pages.urls')),
path('about/',include('pages.urls')),
path('admin/', admin.site.urls),
]
and the urls.py in pages app:
urlpatterns = [
path('',views.index , name='index'),
path('about/',views.about , name='about'),
]
and the views.py in pages app :
def index(reqouest):
return render(reqouest,'pages/index.html')
def about(reqouest):
return render(reqouest ,'pages/about.html')
and the about html page :
<section id="bc" class="mt-3">
<div class="container">
<nav aria-label="breadcrumb">
<ol class="breadcrumb">
<li class="breadcrumb-item">
<a href="{% url 'index' %}">
<i class="fas fa-home"></i> Home</a>
</li>
<li class="breadcrumb-item active"> About</li>
</ol>
</nav>
</div>
</section>
p.s I put the html pages in template/pages folder
Remove path('about/',include('pages.urls')) from your main app urls.
You shouldn't have 2 url prefixes that include the same urls. Only the last include will be used when you're reversing urls by name since you're basically defining the same name twice.
When you do path('about/', include('pages.urls')), you're telling django to build all the urls in pages.urls prefixed by about/, so /about/ becomes the "index" url pattern and /about/about/ the "about" url pattern.
The first include (path('', include('pages.urls'))) means you're creating the urls / and /about/, which will work, but they won't be named urls anymore since you override the names with your second include.
So if you remove your second include for pages.urls, you'll get what you want.
I’m trying to render specific md file inside of html using code:
{% assign subheader = site.pages | where: "title", "subheader" | first %}
{{ subheader.content }}
It works, but my layout isn’t respected. Does it work as expected? Is there a way to apply this layout?
Layouts are applied in context to the "current page".
In your example, if {{ subheader.content }} has been inserted into say, base.md that defines a layout: base in the front matter, then {{ subheader.content }} is rendered as part of "base.md" and will therefore be a part of its layout (_layouts/base.html).
There is no out-of-the-box way to render individual sections of a page rendered with multiple layouts.
The only possible route is to inherit another layout.
For example,
say I have a "base" layout with following:
[...]
<header>
<div id="parent-element">
<div class="btn">foo</div>
{{ content }}
</div>
</header>
[...]
and another layout subheader:
---
layout: base
---
<ul id="greek">
<li>alpha</li>
<li>beta</li>
<li>gamma</li>
</ul>
{{ content }}
and finally a "page.md" that uses the subheader layout:
---
layout: subheader
---
<ul id="fruits">
<li>apples</li>
<li>oranges</li>
<li>bananas</li>
</ul>
Then, the generated "page.html" will be:
[...]
<header>
<div id="parent-element">
<div class="btn">foo</div>
<ul id="greek">
<li>alpha</li>
<li>beta</li>
<li>gamma</li>
</ul>
<ul id="fruits">
<li>apples</li>
<li>oranges</li>
<li>bananas</li>
</ul>
</div>
</header>
[...]
I am using Laravel 5.0, and I would like to make the class of an element 'active' if the url contains the word 'dashboard'. I was able to achieve this in Laravel 5.4 as:
<li class="{{request()->is('dashboard') ? 'active':'inactive'}}">
But this does not work in Laravel 5.0. Can someone provide a solution which would work?
A really clean solution would be creating a helper function to help you like so:
function set_active($uri)
{
return Request::is($uri) ? 'active' : 'inactive';
}
and then in your blade file:
<li class="{{set_active('dashboard')}}">
If you want to check if the url CONTAINS dashboard you need to add some wild cards. right now you're just checking that the path IS dashboard. The example below will set class active any time the path starts with admin/hub
<li class="{{ Request::is('admin/hub*') ? 'active' : '' }}">
<a href="{{ url('admin/hub') }}" id="hub">
<i class="fa fa-desktop"></i> <span>Hub</span>
</a>
</li>
If you want to set the class if the request contains dashboard ANYWHERE use
Request::is('*dashboard*') ? 'active' : ''
You can try something like this:
#if (strpos(Request::url(), 'dashboard') !== false)
<li class="active">
#else
<li class="inactive">
#endif
i'am using bootstrap Tab panes and i need to show posts with specific tag in each pane without reloading the page of course
for more detail i'm using Django with Wagtail CMS my app based on models file
EDIT : add tag dict to context
models.py:
class BlogIndex(Page):
intro = RichTextField(blank=True)
def get_context(self, request):
base_tags = ['foo','boo','voo']
# Update context to include only published posts, ordered by reverse-chron
context = super(BlogIndex, self).get_context(request)
blogpages = self.get_children().live().order_by('-first_published_at')
context['blogpages'] = blogpages
context['base_tags'] = base_tags
return context
class BlogPageTag(TaggedItemBase):
content_object = ParentalKey('BlogPage', related_name='tagged_items')
class BlogPage(Page):
#info
tags = ClusterTaggableManager(through=BlogPageTag, blank=True)
#contentpanel ....
note: i am using taggit but it seems that i didn't well handle it
blog_index.html
<div>
<ul class="nav nav-tabs" role="tablist">
{% for tag in base_tags %}
<li role="presentation" ><a href="#{{tag}}" aria-controls="{{tag}}"
role="tab" data-toggle="tab">{{tag}}</a></li>
{% ednfor %}
</ul>
<!-- Tab panes -->
<div class="tab-content">
{% for tag in base_tags %}
<div role="tabpanel" class="tab-pane" id="{{tag}}">
#this is what i'am thinking of
#for posts in blogpages :
# if post tag == "{{tag}}":
# show post
</div>
</div>
</div>
If you have a few specific tags, you can call them in the template by define them below.
On the other hand if tags will increase continuously, It might be better to create a new model for tags.
class PostListView(ListView):
model = Post
def get_context_data(self, **kwargs):
context = super(PostListView, self).get_context_data(**kwargs)
all_list = Post.objects.all()
news_list = Post.objects.filter(tag='news')
context = {
'all_list': all_list,
'news_list': news_list,
}
return context
Edit:
You can show like this;
{% for object in news_list %}
{{ object.title }}
{{ object.timestamp }}
{% endfor %}