I'm totally new to django CMS (started 2 days ago) and I've followed the tutorial that Divio provides.
I have the home page totally working and it's great and all. I'm trying to create the rest of the pages now and I'm confused.
In my templates directory, I have a base.html that has the general layout of the site and a block for content.
Then I have content.html which puts the home page code into the content block.
page-content.html is where I have the code in the content block for every other page on my site.
My problem is, that whenever I add a new page on my site with the django CMS toolbar, it's always using the content.html page. Basically, when I click the Add a Page button, it only adds a page that looks exactly like the home page. I want to have my home page be one layout and then every page from there be a different layout, so that when I click Add a Page it lets me add a second type of layout. Is this possible?
Note: Both the home and the other layouts are fine as a page. They aren't really news-blog pages or anything like that. Just a regular page that I can put different CMS plugins on is perfect.
Please just let me know if you need more info to properly answer! :)
base.html
{% load staticfiles i18n cms_tags sekizai_tags menu_tags %}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<meta name="description" content="">
<meta name="author" content="">
<link rel="icon" href="../../favicon.ico">
<title>
{% block title %}
{% page_attribute "page_title" %} - {{ request.site.name }}
{% endblock title %}
</title>
<!-- Bootstrap Core CSS -->
<link href="{% static 'vendor/bootstrap/css/bootstrap.min.css' %}" rel="stylesheet">
<!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
<link href="{% static 'css/ie10-viewport-bug-workaround.css' %}" rel="stylesheet">
<!-- Custom Fonts -->
<link href="{% static 'vendor/font-awesome/css/font-awesome.min.css' %}" rel="stylesheet" type="text/css">
<link href='https://fonts.googleapis.com/css?family=Lora:400,700,400italic,700italic' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,800italic,400,300,600,700,800' rel='stylesheet' type='text/css'>
<!-- Custom CSS -->
<link href="{% static 'css/ce3.css' %}" rel="stylesheet">
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
<!-- django CMS -->
{% render_block "css" %}
<!-- Divio Cloud -->
{{ ALDRYN_SNAKE.render_head }}
<!-- django CMS toolbar adjustment -->
{% if request.toolbar %}
<style>
.cms-toolbar-expanded .navbar-custom {
margin-top: 45px;
}
</style>
{% endif %}
</head>
<body>
<!-- django CMS Toolbar -->
{% cms_toolbar %}
<!-- Navigation -->
<nav class="navbar navbar-default navbar-custom navbar-fixed-top navbar-ce3">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header page-scroll">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
Menu <i class="fa fa-bars"></i>
</button>
<a class="navbar-brand" href="index.html">{{ request.site.name }}</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-right">
<li>About</li>
<li>News & Updates</li>
<li>Contact Us</li>
<li class="dropdown">
Kristina <span class="caret"></span>
<ul class="dropdown-menu">
<li>Account</li>
<li>Sign Out</li>
</ul>
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container -->
</nav>
<!-- Main Content -->
{% block content %}
{% endblock %}
<hr>
<!-- Footer -->
<div class="container footer-container">
<div class="row">
<footer class="footer">
<div class="foot-1">
{% placeholder "address" %}
</div>
<div class="foot-2">
<ul>
<li>About</li>
<li>|</li>
<li>Terms of Use</li>
<li>|</li>
<li>Contact Us</li>
</ul>
</div>
</footer> <!-- end footer -->
</div> <!-- end row -->
</div> <!-- end container -->
<!-- jQuery -->
<script src="{% static 'vendor/jquery/jquery.min.js' %}"></script>
<!-- Bootstrap Core JavaScript -->
<script src="{% static 'vendor/bootstrap/js/bootstrap.min.js' %}"></script>
<!-- Contact Form JavaScript -->
<script src="{% static 'js/jqBootstrapValidation.js' %}"></script>
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="../../assets/js/vendor/jquery.min.js"><\/script>')</script>
<script src="js/bootstrap.min.js"></script>
<!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
<script src="js/ie10-viewport-bug-workaround.js"></script>
<!-- django CMS -->
{% render_block "js" %}
<!-- Divio Cloud -->
{{ ALDRYN_SNAKE.render_tail }}
</body>
</html>
content.html
{% extends "base.html" %}
{% load cms_tags %}
{% block content %}
<div class="container">
<div class="banner-zone">
<div class="container">
<div class="row">
<div class="col-md-7">
<div class="title-box">
<h1>{% placeholder "banner title" %}</h1>
<h2>{% placeholder "banner subtitle" %}</h2>
</div>
</div>
<div class="col-md-5">
<div class="black-box">
<p>{% placeholder "banner introduction" %}</p>
</div>
</div>
</div><!-- row -->
</div><!-- container -->
</div><!-- banner-zone -->
<div class="container">
<div class="row text-block">
<a id="nav-anchor"></a>
<p class="emphasis"><span>The Cookbook.</span> The links below lay out the steps along the CE3 roadmap, from Research and Analysis, to Deployment and Operations. Within each chevron, you will find information, tools and resources to help you complete that step.</p>
</div>
<div class="row" style="margin-top:70px">
<div class="col-sm-5">
{% placeholder "CE3 Pilot Image" %}
</div>
<div class="col-sm-7">
<h3>The CE3 Pilot</h3>
<p>{% placeholder "project introduction" %}</p>
</div>
</div>
</div> <!-- /container -->
</div>
{% endblock content %}
page-content.html
{% extends "base.html" %}
{% load cms_tags %}
{% block content %}
<div class="container">
<div class="row">
<div class="col-sm-4">
<!-- Secondary left-side navbar -->
<div class="navbar navbar-default sidenav-ce3">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#side-nav">
Phase Menu
</button>
</div>
<div id="side-nav" class="collapse navbar-collapse main-nav">
<ul class="nav navbar-nav">
<li class="step-through-nav"><a href="index.html#nav-anchor"><span
class="glyphicon glyphicon-chevron-left"></span> Back to Cookbook</a></li>
<li class="active">Preliminary Solution Design Summary
</li>
<li>1. Pulling Together The Design</li>
<li>2. Assemble Technical Requirements</li>
<li>3. Develop and Post Competitive Tender</li>
<li>4. Shortlist Selections</li>
<li>5. Reconcile Submission CAPEX with Business Model</li>
<li>6. Iterate Solution Design With Selected Vendors</li>
<li>7. Select Final Design & Finalize Business Model</li>
<li class="step-through-nav"><span class="descriptor">up next:</span><a
class="chevron-in-line" href="proj-finance.html">Project Finance</a></li>
</ul>
</div>
</div>
</div><!-- col-sm-4 left-nav -->
<div class="col-sm-8 main-content">
<h1>{% placeholder "page title" %}</h1>
<h4>{% placeholder "page subtitle" %}</h4>
<h3>Purpose</h3>
{% placeholder "purpose" %}
<div class="row">
{% include "page-elements/tools_templates.html" %}
</div>
<div class="row">
{% include "page-elements/helpful_resources.html" %}
</div>
<div class="row">
{% include "page-elements/publications.html" %}
</div>
</div>
</div>
</div> <!-- /container -->
{% endblock content %}
My project structure is as follows:
The issue was actually in the settings.py file.
According to the documentation, templates need to be specified in the CMS_TEMPLATES within settings.py
(http://docs.django-cms.org/en/release-3.4.x/introduction/templates_placeholders.html#templates)
My original settings.py file did not have any CMS_TEMPLATES in it.
Original settings.py file:
INSTALLED_ADDONS = [
# <INSTALLED_ADDONS> # Warning: text inside the INSTALLED_ADDONS tags is auto-generated. Manual changes will be overwritten.
'aldryn-addons',
'aldryn-django',
'aldryn-sso',
'aldryn-django-cms',
'aldryn-devsync',
'aldryn-bootstrap3',
'djangocms-googlemap',
'djangocms-history',
'djangocms-snippet',
'djangocms-style',
'djangocms-text-ckeditor',
'djangocms-video',
'django-filer',
# </INSTALLED_ADDONS>
]
import aldryn_addons.settings
aldryn_addons.settings.load(locals())
# all django settings can be altered here
INSTALLED_APPS.extend([
# add your project specific apps here
])
MIDDLEWARE_CLASSES.extend([
# add your own middlewares here
])
Edited settings.py file:
INSTALLED_ADDONS = [
# <INSTALLED_ADDONS> # Warning: text inside the INSTALLED_ADDONS tags is auto-generated. Manual changes will be overwritten.
'aldryn-addons',
'aldryn-django',
'aldryn-sso',
'aldryn-django-cms',
'aldryn-devsync',
'aldryn-bootstrap3',
'djangocms-googlemap',
'djangocms-history',
'djangocms-snippet',
'djangocms-style',
'djangocms-text-ckeditor',
'djangocms-video',
'django-filer',
# </INSTALLED_ADDONS>
]
import aldryn_addons.settings
aldryn_addons.settings.load(locals())
# all django settings can be altered here
INSTALLED_APPS.extend([
# add your project specific apps here
])
MIDDLEWARE_CLASSES.extend([
# add your own middlewares here
])
CMS_TEMPLATES = (
('content.html', 'Home Page'),
('page-content.html', 'Section Page'),
('sub-section-page.html', 'Sub Section Page'),
)
Once the templates are specified in the settings.py file, they are available in the CMS Toolbar from Page > Templates.
Related
The footer from my homepage is behaving like a div - just after the content and not at the bottom of the page - only in my home page, i.e., at the store.html file. In all the other pages it behaves as expected. I've lost more time trying to solve this than I'd like to say... What am I missing?
footer.html
<footer>
<div class="container">Helga's</div>
</footer>
main.html
<head>
...
</head>
<body>
{% include 'store/navbar.html' %}
<div class="container">
<br>
{% block content %}
{% endblock content %}
</div>
{% include 'store/footer.html' %}
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"
integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous">
</script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.0/dist/umd/popper.min.js"
integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous">
</script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"
integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous">
</script>
<script type="text/javascript" src="{% static 'js/cart.js' %}"></script>
</body>
store.html
{% extends 'store/main.html' %}
{% load static %}
{% block content %}
<div class="row h-50">
{% for product in products %}
<div class="col-lg-3">
<a href="#">
<img class="thumbnail" src="{{product.image_url}}">
</a>
<div class="box-element product">
<h6 style="text-align: center;"><strong>{{product.name}}</strong></h6>
<hr>
<button data-product={{product.id}} data-action="add"
class="btn btn-outline-secondary add-btn btn-sm update-cart">Buy</button>
<h4 style="float: right; font-size: 22;">R${{product.price|floatformat:2}}</h4>
</div>
</div>
{% endfor %}
</div>
{% endblock content %}
Basically, the footer element is not different from div in terms of visual presentation. The footer does not come fixed to the bottom of a page or section by default - you need to configure it this way with CSS.
Maybe the element is positioned at the bottom of your other pages just because they have more content above, which naturally moves the footer down.
Because you have not provided any snippets about the styling of your page, I can only suggest you take a look at the several approaches to make the footer stick to the bottom of the page.
I have a layout.html where I am setting the general layout for my project and then for each page I want to render different HTML based on the layout.html
For my home page I want to render a slider that provides a welcome message to the page, nice pictures etc, I only want this displayed on the home page.
The issue I am having is that when I I have {% include "slider.html" %} on my layout.html, the slider renders fine, but when I move it to my home.html which extends layout.html the slider is not rendered.
How can I do this so teh slider is only rendered when the user goes to home?
home.html
{% extends "layout.html" %}
{% include "slider.html" %}
{% block content %}
<div class="container clearfix">
<div class="heading-block topmargin-lg center">
<h2>My super blog</h2>
</div>
</div>
{% endblock %}
layout.html
{% load static %}
<!DOCTYPE html>
<html dir="ltr" lang="en-US">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta name="author" content="SemiColonWeb" />
<!-- Stylesheets
============================================= -->
<link href="https://fonts.googleapis.com/css?family=Lato:300,400,400i,700|Raleway:300,400,500,600,700|Crete+Round:400i" rel="stylesheet" type="text/css" />
<link rel="stylesheet" href="{% static 'css/bootstrap.css' %}" type="text/css"/>
<link rel="stylesheet" href="{% static 'css/style.css' %}" type="text/css" />
<link rel="stylesheet" href="{% static 'css/swiper.css' %}" type="text/css" />
<link rel="stylesheet" href="{% static 'css/dark.css' %}" type="text/css" />
<link rel="stylesheet" href="{% static 'css/font-icons.css' %}" type="text/css" />
<link rel="stylesheet" href="{% static 'css/animate.css' %}" type="text/css" />
<link rel="stylesheet" href="{% static 'css/magnific-popup.css' %}" type="text/css" />
<link rel="stylesheet" href="{% static 'css/style-rtl-vars.css' %}" type="text/css" />
<link rel="stylesheet" href="{% static 'app/content/responsive.css' %}" type="text/css" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<!-- Document Title
============================================= -->
<title>Super blog</title>
</head>
<body class="stretched">
<!-- Document Wrapper
============================================= -->
<div id="wrapper" class="clearfix">
{% include "header.html" %}
<section id="content">
<div class="content-wrap">
<div class="container clearfix">
{% block content %}
{% endblock %}
</div>
</div>
</section>
{% include "footer.html" %}
</div>
<script type="text/javascript" src="{% static 'scripts/jquery.js' %}"></script>
<script type="text/javascript" src="{% static 'scripts/plugins.js' %}"></script>
<script type="text/javascript" src="{% static 'scripts/functions.js' %}"></script>
</body>
slider.html
<section id="slider" class="slider-element slider-parallax swiper_wrapper full-screen clearfix">
<div class="slider-parallax-inner">
<div class="swiper-container swiper-parent">
<div class="swiper-wrapper">
<div class="swiper-slide dark" style="background-image: url('/static/images/typing-on-mac.jpg');">
<div class="container clearfix">
<div class="slider-caption slider-caption-center">
<h2 data-animate="fadeInUp">super blog</h2>
<p class="d-none d-sm-block" data-animate="fadeInUp" data-delay="200">some text</p>
</div>
</div>
</div>
</div>
</div>
<i class="icon-angle-down infinite animated fadeInDown"></i>
</div>
</section>
You need to include it in a {% block %}, since otherwise, it is of course not included in the final content.
If you extend a template, then you can only override the blocks. All content not in the blocks, will be interpreted, but will not be put into the final response.
So you can for example include the content of the {% include %} part in:
{% extends "layout.html" %}
{% block content %}
{% include "slider.html" %}
<div class="container clearfix">
<div class="heading-block topmargin-lg center">
<h2>My super blog</h2>
</div>
</div>
{% endblock %}
I have an <audio> element that's seems to work fine. However, whenever I try to use the seeker, it just takes the audio back to the beginning. This is the HTML:
<audio id="audio-player" src="/music/You-Too-Much.mp3" type="audio/mp3" controls="controls"></audio>
I've searched online, but I can't seem to find a cause or solution for this. I need this fixed. Thanks.
Full HTML code:
{% extends 'base.html.twig' %}
{% block title %}
Welcome
{% endblock %}
{% block nav_head %} Havilah Radio {% endblock %}
{% block content %}
<div class="music-player">
<div class="row">
<div class="col-md-3">
<img class="cover" src="/img/album-art/HANILAH.jpg" alt="">
<div class="footer-song-info">
<h4>
You Too Much
</h4>
<h6>Unknown Artist</h6>
</div>
</div>
<div class="col-md-6">
<audio id="audio-player" src="/music/untitled05.mp3" type="audio/mp3" controls="controls"></audio>
</div>
</div>
</div>
{% endblock %}
The main code extends this base.html.twig:
<!DOCTYPE html>
<!--suppress HtmlUnknownTarget -->
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="theme-color" content="#9e1935">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>{% block title %}{% endblock %} | Havilah Radio</title>
<link rel='stylesheet' href='https://fonts.googleapis.com/css?family=Fira+Sans' />
<!-- Bootstrap CSS -->
<link href="{{ asset('lib/bootstrap/css/bootstrap.css') }}" rel="stylesheet" type="text/css" media="all"/>
<!-- Font Icons -->
<link href="{{ asset('lib/iconsmind/iconsmind.css') }}" rel="stylesheet" type="text/css" media="all"/>
<!-- Extra CSS -->
{% block css %}{% endblock %}
<!-- Custom CSS -->
<link href="{{ asset('css/style.css') }}" rel="stylesheet" type="text/css" media="all"/>
</head>
<body style="background: {% block body_background %}#fff {% endblock %}">
<div class="body">
<nav class="navbar navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-nav">
<i class="icon-Align-Right icon"></i>
</button>
<a class="navbar-brand" href="/"><img src={{ asset('img/havilahradio-logo.png') }} />
</a>
</div>
<div class="collapse navbar-collapse" id="navbar-nav">
</div>
</div>
</nav>
{% block content %}{% endblock %}
</div>
</body>
<!-- JQuery -->
<script src="{{ asset('lib/jquery/jquery-3.1.0.min.js') }}"></script>
<script src="{{ asset('lib/jquery/jquery.easing.1.3.js') }}"></script>
<!-- Bootstrap JS -->
<script src="{{ asset('lib/bootstrap/js/bootstrap.min.js') }}" ></script>
<script src="{{ asset('lib/bootstrap/js/bootstrap_select.min.js') }}" ></script>
<!-- Extra JS -->
{% block js %}{% endblock %}
<!-- Custom JS -->
<script src="{{ asset('js/app.js') }}"></script>
</html>
I'm having a problem with top navigation resizing. I have two layouts - one with side and top navigation and one just with top navigation. When I'm in template without side navigation, my top nav li elements are resizing and they're slightly bigger then in the main layout with both navbars. I have no clue why this is happening, because both layouts use the same 'topnav.html' template and the css is also the same. I'm using bootstrap 3 and I'm wondering if maybe bootstrap grid is the one to blame. I've tried to add the same div structure in my layout_no_navbar.html as in layout.html template, but it didn't work. My goal is to maintain the same top navigation li sizes in both layouts. Please, help!
Here is the part of my main layout with both navbars (layout.html):
<div class="row">
<div class="col-md-3">
{% include 'portal/layout/navbar.html' %}
</div>
<div class="col-md-9">
<div class="content-container">
<!-- Navigation -->
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<!-- Brand and toggle get grouped for better mobile display -->
{% include 'portal/layout/topnav.html' %}
</nav>
<div id="page-wrapper">
{% for message in messages %}
<div class="alert {{ message.tags }} alert-dismissible" role="alert">
<button type="button" class="close" data-dismiss="alert" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
{{ message }}
</div>
{% endfor %}
{% block content %}
{% endblock %}
</div>
<!-- /#page-wrapper content-container -->
</div>
</div>
</div>
Here's the layout without side navbar (layout_no_navbar.html):
<div>
{% include 'portal/_user_edit_modal.html' %}
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<!-- Brand and toggle get grouped for better mobile display -->
<!-- Navigation -->
{% include 'portal/layout/topnav.html' %}
</nav>
{% for message in messages %}
<div class="alert {{ message.tags }} alert-dismissible" role="alert">
<button type="button" class="close" data-dismiss="alert" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
{{ message }}
</div>
{% endfor %}
{% block content %}
{% endblock %}
</div>
in both layouts I have:
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
and here are the pic's of both top navbar in different layouts. For example, the 'logout' size in layout.html is : 104.8 x 50 and in top nav in layout_no_navbar.html it's 107.5 x 50. I know it's hard to see the difference, but believe me, it's noticeable while jumping between pages. For examle, you can notice it while looking on 'J' letter in 'Józio Wacławiński'
top navbar in layout.html
top navar in layout_no_navbar.html
I'm not sure that I understand the question, but...
In the layout_no_navbar.html, you haven't wrapped your topnav.html with , so it takes more width than in layout.html. So you can do something like:
<div>
{% include 'portal/_user_edit_modal.html' %}
<div class="row">
<div class="col-md-9 col-md-offset-3">
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<!-- Brand and toggle get grouped for better mobile display -->
<!-- Navigation -->
{% include 'portal/layout/topnav.html' %}
</nav>
</div>
</div>
{% for message in messages %}
<div class="alert {{ message.tags }} alert-dismissible" role="alert">
<button type="button" class="close" data-dismiss="alert" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
{{ message }}
</div>
{% endfor %}
{% block content %}
{% endblock %}
</div>
In your layout_no_navbar.html file.
Hope it helps. :)
So i'm making a blog in Jekyll based on a start bootstrap theme (also following a course on Udemy) I've made the post layout etc, and everything works fine until i add a second post that messes up everything.
Post layout with only one post (remove the /remove-this/second-image/ to get the first and second link to see the layout with one post, left link, and the layout with two posts, right link sry I didn't have sufficient reputation ^^)
I would like to know how to fix this problem
Thanks for helping
here is the code used for the post layout (I also made a GitHub repository):
{% include post_header.html %}
<!-- Post Content -->
<article>
<div class="container">
<div class="row">
<div class="col-lg-8 col-lg-offset-2 col-md-10 col-md-offset-1">
{{ content }}
</div>
</div>
</div>
</article>
{% include footer.html %}
includes:
post_header.html:
{% for post in site.posts %}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">
<title> {{ post.title }} </title>
<!-- Bootstrap Core CSS -->
<link href="{{ site.url }}/css/bootstrap.min.css" rel="stylesheet">
<!-- Custom CSS -->
<link href="{{ site.url }}/css/clean-blog.css" rel="stylesheet">
<!-- Custom Fonts -->
<link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet" type="text/css">
<link href='http://fonts.googleapis.com/css?family=Lora:400,700,400italic,700italic' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,800italic,400,300,600,700,800' rel='stylesheet' type='text/css'>
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<!-- Navigation -->
{% include nav.html %}
<!-- Post Header -->
<!-- Page Header -->
<!-- Set your background image for this header on the line below. -->
<header class="intro-header" style="background-image: url('{{ site.url }}/img/{{ post.coverImg }}')">
<div class="container">
<div class="row">
<div class="col-lg-8 col-lg-offset-2 col-md-10 col-md-offset-1">
<div class="post-heading">
<h1>{{ post.title }}</h1>
<h2 class="subheading">{{ post.description }}</h2>
<span class="meta">Publié par {{ post.author }} on {{ post.date | date_to_string }}</span>
</div>
</div>
</div>
</div>
</header>
{% endfor %}
footer.html:
<!-- Footer -->
<footer>
<div class="container">
<div class="row">
<div class="col-lg-8 col-lg-offset-2 col-md-10 col-md-offset-1">
<ul class="list-inline text-center">
<li>
<a href="https://twitter.com/Bonny_AG" target="_blank">
<span class="fa-stack fa-lg">
<i class="fa fa-circle fa-stack-2x"></i>
<i class="fa fa-twitter fa-stack-1x fa-inverse"></i>
</span>
</a>
</li>
<li>
<a href="#" target="_blank">
<span class="fa-stack fa-lg">
<i class="fa fa-circle fa-stack-2x"></i>
<i class="fa fa-facebook fa-stack-1x fa-inverse"></i>
</span>
</a>
</li>
<li>
<a href="https://github.com/BonnyAG" target="_blank">
<span class="fa-stack fa-lg">
<i class="fa fa-circle fa-stack-2x"></i>
<i class="fa fa-github fa-stack-1x fa-inverse"></i>
</span>
</a>
</li>
</ul>
<p class="copyright text-muted">Copyright ©BonnyAG 2015, All content made by BonnyAG for this blog, please ask permission before using the content in other websites.</p>
</div>
</div>
</div>
</footer>
<!-- jQuery -->
<script src="{{ site.url }}/js/jquery.js"></script>
<!-- Bootstrap Core JavaScript -->
<script src="{{ site.url }}/js/bootstrap.min.js"></script>
<!-- Custom Theme JavaScript -->
<script src="{{ site.url }}/js/clean-blog.min.js"></script>
</body>
</html>
So after digging in a little deeper i found that what caused the error was that i had a header for static pages and one for blog posts and that was causing the error. So here is the code fix
Post layout:
{% include header.html %}
<!-- Post Content -->
<article>
<div class="container">
<div class="row">
<div class="col-lg-8 col-lg-offset-2 col-md-10 col-md-offset-1">
{{ content }}
</div>
</div>
</div>
</article>
{% include footer.html %}
header.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">
<title>{{ page.title }}</title>
<!-- Bootstrap Core CSS -->
<link href="{{ site.url }}/css/bootstrap.min.css" rel="stylesheet">
<!-- Custom CSS -->
<link href="{{ site.url }}/css/clean-blog.css" rel="stylesheet">
<!-- Custom Fonts -->
<link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet" type="text/css">
<link href='http://fonts.googleapis.com/css?family=Lora:400,700,400italic,700italic' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,800italic,400,300,600,700,800' rel='stylesheet' type='text/css'>
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
{% include nav.html %}
<body>
<!-- Page Header -->
<!-- Set your background image for this header on the line below. -->
<header class="intro-header" style="background-image: url('{{ site.url }}/img/{{ page.coverImg }}')">
<div class="container">
<div class="row">
<div class="col-lg-8 col-lg-offset-2 col-md-10 col-md-offset-1">
{% if page.author %}
<div class="post-heading">
<h1>{{ page.title }}</h1>
<h2 class="subheading">{{ page.description }}</h2>
<span class="meta">Publié par {{ page.author }} on {{ page.date | date_to_string }}</span>
</div>
{% else %}
<div class="site-heading">
<h1>{{ page.header }}</h1>
<hr class="small">
<span class="subheading">{{ page.description }}</span>
</div>
{% endif %}
</div>
</div>
</div>
</header>