I would like to know if there is a way to pass a dynamic named content to the page from the layout.
For example,
Layout
<body>
<div class="container">
{{ content }}
</div>
<footer>
<p>© Company 2015</p>
</footer>
<script src="path/to/jquery.js"></script>
{{ page.other_content }}<!-- Objective: To write scripts that varies with page -->
</body>
Page
---
layout: default
title: About Us Page
---
<p> This is about us page </p>
{% capture other_content %}
<script>
$(document).ready(function(){
console.log("About us page.");
});
</script>
{% endcapture %}
Is there a way to render multiple content sections in pages from layout?
In ASP.NET we can do this is the Layout page.
#RenderSection("scripts", required: false)
In content page we can render that section like this.
#section scripts {
Hey I'm actually on the _Main layout.
I can vary according to the page.
My presence is not mandatory in every page
}
Can this be done with jekyll?
GitHub Pages disallow plugins, so I'll stick to vanilla Jekyll workarounds. You can of course use plugins, generate your site locally and host the results on GitHub.
This is ugly, but possible. Keep your layout as is:
<body>
<!-- varies with page -->
{{ page.other_content }}
</body>
Then in your page file, define the property other_content in the front matter:
---
other_content: |
<script>
console.log("You can't stop me!");
</script>
---
The pipe character denotes a multiline string. Per YAML's rules, your scripts must be indented by spaces (no tabs allowed).
If your scripts become too large, you can move them to separate files, and the front matter of your pages would refer to the script file names instead:
---
scripts: [test]
---
In the layout:
{% for s in page.scripts %}
<script src="{{ s }}.js"></script>
{% endfor %}
This works if test.js is in the same directory as the page using it. You can use site.baseurl to get absolute paths, etc.
Related
so I just started working with Jekyll and GitHub-Pages so I can run my own portfolio website. Since making things pretty is a weak point of mine, I picked up a Jekyll version of the HTML5UP Helios Template to modify for my purposes. Here is the current website (work in progress I know)
I decided to make my project pages each into posts, such that it'd be easy to add a new one if need be; each post would also have the left sidebar layout as its template, which you can see on the nav-bar.
I thought it would be easy enough to just link the markdown files to their own pages, and just use the template. Here is an example of what I was trying to do with one of the "carousel" posts:
---
layout: left-Sidebar
title: C++ Big Int Class
desc: This is a sample post that is added under the "desc" part of the YAML.
img: pic01.jpg
categories: carousel
---
and here is where I link it in the carousel:
{% for post in site.categories.carousel %}
<article>
<img src="images/{{ post.img }}" alt="" />
<header>
<h3>{{ post.title }}</h3>
</header>
<p>{{ post.desc }}</p>
</article>
{% endfor %}
now I'd think that that would work, however I instead get a post that looks like this: (I don't have enough reputation to post more than two links, so you can find it by clicking the carousel link called "C++ Big Int Class")
If anyone could tell me what is wrong (as well as any other errors you may find I'm new to this) that would be very appreciated.
I'd post the file tree structure, but it's way to large, so if you'd like to see the other files, you can check them out in my Github repo here
Pages are losing the style because you are including css and js with relative paths, e.g.:
in https://joe-mccann.github.io/carousel/2015/02/01/carousel1.html
<script src="js/jquery.min.js"></script>
That script would be expected to be at https://joe-mccann.github.io/carousel/2015/02/01/js/jquery.min.js.
To fix it, include them with the full path using this filter absolute_url:
<script src="{{ 'js/jquery.min.js' | absolute_url }}"></script>
Currently learning basics of Django. I kind of understand the concept of url and views. I've downloaded a bootstrap template and I wanted to set it as main page. I know, that I could redo all the page, making it template and put css files into static folder, then link it with url and it should probably work. I managed to display the page creating a lambda HttpResponse function, but I am unable to link css there. Is such thing possible? Can I somehow drop a webpage with css into folder and link it, or do I have to do it django way?
I know, that django way is less messy and probably better, but this is for test and learning purposes only.
Sorry, if it was already asked, I tried looking for the answer before asking.
Copy your css, and put it in HTML page inside <style> </style> tag.
I'm guessing you're going that route because it seems complex to get the static file serving working. Serving your static files is something that's really easy to do - and once you've pointed your static file at something, you can just use if for testing anything:
https://docs.djangoproject.com/en/1.9/howto/static-files/
STATIC_URL = '/static/'
STATICFILES_DIRS = ("/Users/you/path/to/static",)
Then you just need to use static in the url for that page.
I use a base.html that is extended by all of my templates. You can either have it {% include %} your css, or simply reference it. So you can change 1 variable (I do it in my master context file) and have all of your templates go along for the ride. E.g.
In base.html:
<html>
<head>
{% if testing %}
<!-- directly include stylesheet in page -->
<style>{% include "my.css" %}<style>
{% else %}
<!-- standard stylesheet link -->
<link rel='stylesheet' type='text/css' href='my.css'>
{% end %}
</head>
<body>
{% block content %}
{% endblock content %}
</body>
</html>
In your templates:
{% extends "base.html" %}
{% block content %}
Hi, Mom!
{% endblock content %}
BTW, a base.html that has your full site design and makes very liberal use of {% block %} can make the majority of your view templates short and sweet. The template docs are your friend!
I am working on a project using Jekyll. Looking online, it seems that it is possible to use liquid tags in a markdown file. For some reason, the liquid tags are not working in my markdown files. I want to use the liquid "capture" tag to store text in a variable and then output that variable in the layout.html file. I have listed the related code below.
page.md:
---
page: approach
layout: layout
---
{% capture Focus_content %}
Focus devices are awesome.
{% endcapture %}
Layout.html:
<!-- layout.html file -->
<div class="panel">
<div class="content-container panel-wrapper">
{{Focus_content}}
</div><!--end content container-->
</div><!--end panel-->
I know that Jekyll supports liquid templates. Does anyone know why when I define the variable in my markdown file, it does not output anything on the webpage when I include it in the html file?
No way to do this. Inside a layout, the only things you get from your pages, posts and collections are the content, site and page variables.
A capture made in a page, post or collection is not bubbling up to the layout.
I'd like to add some data to a layout file, to be used in my site's nav. I have a writings collection with many articles, and they use a writing layout:
// _layouts/writing.html
---
layout: default
site-section: writings
---
<div id="{{ page.site-section }}">
<article>
{{ content }}
</article>
{% include comments.html %}
</div>
I tried access the site-section variable via page.site-section, but it's not working.
How can I access that data?
It works here.
Try to do a {{ page }} it is supposed to show all the variables.
I have a small GAE app that's working fine. I use it to serve a few static files as well like (About page, Privacy and contact page). I put the "about.html" in a /static folder along with the /css, /img and /js. In "app.yaml" I declared the handler:
- url: /static
static_dir: static
It all works fine. Now I've abstracted the common contents (navigations, etc) into "_base.html" like this:
<html>
<head><title> Page title here</title>
<!--Some header files here -->
</head>
<div id="content">
{% block bodycontent %}
{% endblock bodycontent %}
</div>
</body>
</html>
The child file looks like this:
{% extends "_base.html" %}
{% block title %} About {% endblock %}
{% block bodycontent %}
<p>Some contents here...</p>
{% endblock bodycontent %}
Now, problem when it displays, the "_base.html" does not render. In fact the whole jinja code just displays. But when I wrote an handler for "about.html" it renders the base html correctly.
Question is, why do I have to create instances b4 I can display static files like About, Privacy pages just because I want to use template inheritance? Am I doing something wrong?
Templates are not static files, by definition. If you want a completely static HTML file, you can of course have one without any handler code. But templates require rendering, which means they need a handler to do it.