Is it possible to create folders within the _includes folder of a Jekyll project to separate multiple email campaigns for one single company? Everything needs to be more organized, each company having their own separate folder inside _includes and not having to create one Jekyll project for each campaign. Having them all inside one big Jekyll project is what I'm looking for.
New to Jekyll. noob question. Sorry.
I am running multi niche blog in Jekyll, and here what I have done in my website.
I have created multiple layout for different type of pages, for example, here I created blogger.html layout (May be you are using default post or page layout)
---
layout: null
---
<html>
{% include head.html %}
<body>
{% include header/blogger.html %}
<section class="container">
<div class ="content row">
<section class="main col col-lg-7">
<div class="post">
<header class="post-header">
<h1 class="post-title">{{ page.title }}</h1>
</header>
<article class="post-content">
{{ content }}
</article>
</div>
</section>
</div>
</section>
{% include footer.html %}
</body>
</html>
As you can see(after <body> tag), I have added blogger file into _include folder, so yes, you can add any file/folder into _include folder, just make sure, the relative path is correct.
Related
I'm making a site using this theme: Github repo; theme demo.
The theme is built with the blog feed on the homepage (index.html). What I would like to do instead is:
make a static homepage (i.e. no blog feed on the homepage), and
have the blog feed live on a separate page called "Blog", with the link "/blog" or "/blog.html".
The code for the blog feed lives in _includes/blog.html and is included in the home layout using {% include blog.html %}.
What I've tried
changed the layout of index.html to a static layout like page, and created a new page in the root called blog.html with the layout home - this succeeded in creating a static homepage, but the blog page yields a home-like header but no blog feed (essentially a page with no content).
created a new page in the root called blog.html with the layout default, and pasted the content of the home layout (including {% include blog.html %}) into that page - this yielded the same result as above.
created a new layout called blog, which is a copy of the current home layout. I deleted the line {% include blog.html %} from the home layout. Then I gave index.html the home layout and created a new page in the root called blog.html with the layout blog. This yielded the same result as above.
In short, it seems like the blog feed isn't able to generate in any file other than index.html, and I haven't been able to figure out why. Is it something I'm missing in the theme's configuration? Apologies if this turns out to be a dumb question - I'm rather new to this. Thank you for any help you can give me!
EDIT: Turns out it was an issue with the paginator, which by default paginates from home.
The index.html uses the home layout:
---
layout: home
---
This lives in _layouts/home.html and contains a header and includes blog.html. It looks like this:
---
layout: default
---
<div class="home">
<div id="main" class="call-out"
style="background-image: url('{{ site.header_feature_image | relative_url }}')">
<h1> {{ site.header_text | default: "Change <code>header_text</code> in <code>_config.yml</code>"}} </h1>
</div>
{% include blog.html %}
</div>
The blog.html file loops over all (blog) posts:
<div class="posts">
{% for post in paginator.posts %}
...
To solve your issue, you need to define your own home page as an include like this:
Create your-custom-homepage.html with html of your choice.
Include it in home.html as {% include your-custom-homepage.html %} instead of {% include blog.html %}. Just replace the line in _layouts/home.html.
Then it will contain the header and your content.
The Jekyll documentation, e.g. https://jekyllrb.com/docs/step-by-step/04-layouts/ and https://jekyllrb.com/docs/includes/ will hopefully explain the details.
I have a Jekyll project setup using multiple collections to group documents together. My _config.yml looks like this:
collections:
course001:
output: true
title: "Theme structure"
relative_url: "/theme-structure" # The subpath of the the site,
permalink: /theme-structure/:name
The directory structure of the course001 collection looks like this:
course001/
index.md
figures/
figure01.jpg
The the generated HTML looks like this:
_site/
figure01.jpg
theme-structure/
index.html
Instead of the expected:
_site/
theme-structure/
index.html
figure01.jpg
Why does the image appear in the site root folder? I do not want the images to appear in the root folder due to potential for name collision. This is only a problem for images, not documents which end up in the expected place.
Thanks for any help!
I don't know if this it's what you really looking for. Anyway, I propose you a new structure for your project supposing that you are going to create a lot of courses each with its own lectures. If you have also sub-lectures the code is easy to expand and handle them.
The first thing is your _config.yml file. You should create two collections for courses and lectures (unfortunately Jekyll doesn't handle sub-collections).
collections:
courses:
output: true
lectures:
output: true
You have to create both _courses and _lectures folders.
In the _lecture folder you should put the markdown files of your lectures. Each lecture should have a tag for the course it belongs to. I also add a tag for the lecture to facilitate the handling of paths. This is an example of a lecture file with an image.
---
layout: lecture
title: My first lecture
course: 001
lecture: my-first-lecture
---
This is my first lecture!!
![fish][fish]
[fish]: assets/img/{{page.lecture}}/fish.png
As you can see you need a folder assets in your _lecture folder. You could use the file lecture.html in your _layout folder to contain your template. The following one is just an example and basically is the same as a page layout.
---
layout: default
---
<article class="post">
<header class="post-header">
<h1 class="post-title">{{ page.title | escape }}</h1>
</header>
<div class="post-content">
{{ content }}
</div>
</article>
Now you need to group them by courses. Unfortunately, as I previously stated, Jekyll doesn't handle nested collection so we check the tag course in each lecture to see what are the lecture in each course. Thus if you want to type a list of lectures at the beginning of each course page then you should have a file _layout/course.html similar to
---
layout: default
---
<article class="post">
<header class="post-header">
<h1 class="post-title">{{ page.title | escape }}</h1>
</header>
<div class="post-content">
<ol>
{% for lecture in site.lectures %}
{% if lecture.course == page.course %}
<li>{{lecture.title}}</li>
{% endif %}
{% endfor %}
</ol>
{{ content }}
</div>
</article>
A typical markdown file for a course should be stored in _courses and will be similar to
---
layout: course
title: My first course
course: 001
---
This is my first course!!
The only thing left is a page to show the list of your courses. You could create a coursed.md file in your project folder with this content.
---
layout: page
title: Courses
permalink: /courses/
---
These are my courses:
<ol>
{% for course in site.courses %}
<li>{{course.title}}</li>
{% endfor %}
</ol>
I know that this probably is more than what you asked in your question and you still wonder why the strange behavior. I think that this is due to the fact that you should store the files that you want in your built site in an assets folder. This is the only way (I think, but maybe I'm wrong). I'm not referring only to the assets folder in your main directory but also to the assets folders in your collection's directories.
I have the following code in an html page and am trying to use jinja logic to embed html somewhere specific (in the blog/about me section of the html)
Code that doesn't work (see specifics below)
<!-- About Section (Blog)-->
<section class="bg-primary text-white mb-0" id="about">
<div class="container">
<h2 class="text-center text-uppercase text-white">Blog</h2>
<hr class="star-light mb-5">
<div class="row">
<div class="col-lg-4 ml-auto">
<p class="lead">This is the blog section</p>
{%block content%}
{%endblock %}
</div>
<div class="col-lg-4 mr-auto">
<p class="lead">The blogs outlined in the models section and stored in the database, are going to be displayed here.</p>
</div>
It's these two lines that ordinarily produce an htmlsnippet output:
{%block content%}
{%endblock %}
In another place on the site (right at the bottom) I've used the same logic, and the snippet output has displayed fine.
Code that works fine
<!-- Custom scripts for this template -->
<script src="/static/js/freelancer.min.js"></script>
<div>
{%block content%}
{%endblock %}
</div>
</body>
</html>
The error I get is:
'block' tag with name 'content' appears more than once
141 <div class="col-lg-4 ml-auto">
142 <p class="lead">This is the blog section</p>
143 {%block content%}
144 {%endblock %}
145 </div>
146 <div class="col-lg-4 mr-auto">
147 <p class="lead">The blogs outlined in the models section and stored in the database, are going to be displayed here.</p>
148
149 </div>
150 <div>
151 {%block content%}
152 {%endblock %}
153 </div>
Of course, I note the error that says: 'block' tag with name 'content' appears more than once ...but my question is
Noting that I know how to fix the error (use the content just once), What is then the best way to include an html snippet, and more importantly, an html snippet that say, has posts, which are generated from the database? Is Jinja logic as shown below using block contents the only way, or is there a better way?
For instance, I have other html snippets in other apps in the same django project (e.g. in blog/templates/blog/post.html) ...this also extends the home page, but how do I include this in the home page? I don't quite understand the structure and how to reference things from different directories. Even if they have to be in the same directory, if you can only include one html snippet, how is it checking the folder it's referenced from?
Structure:
C:\Users\User\Desktop\Django Tutorials\understanding_html_setup\pythonsite\mysite\aboutme\templates
This is where the header.html and home.html live (header is where the main bootstrap index page has been put for now)
there is another folder here called 'includes' which has all the html snippets such as 'mysnippet.html'.
Important: ** it is THIS 'aboutme.html' that is being referenced in the jinja logic above.**
C:\Users\User\Desktop\Django Tutorials\understanding_html_setup\pythonsite\mysite\aboutme\templates\aboutme\includes\mysnippet.html
Other apps such as blog:
C:\Users\User\Desktop\Django Tutorials\understanding_html_setup\pythonsite\mysite\blog\templates\blog
is where I have
blog.html and post.html
How would I include the content of post.html or blog.html in the above shown snippet (main homepage)
Final note:
The home.html page includes this code, which I note points to the inclusion of the aboutme code snippet. But still the question remains, how do I include other snippets, and what is the best way to understand this structure and how things fit together. Tutorials or link references also welcome.
home.html (in: C:\Users\User\Desktop\Django Tutorials\understanding_html_setup\pythonsite\mysite\aboutme\templates\aboutme\home.html)
{%extends "aboutme/header.html" %}
{%block content%}
<p>Welcome to this "about" page that is all about the website: </p>
{%include "aboutme/includes/mysnippet.html"%}
{% endblock %}
I think any guidance on the optimal and simplest set up will be invaluable for SO Django beginners. Are there flow or diagrams that show clearly how things ought to be arranged from an html and display point of view?
UPDATE:
Based on the answer below, I changed the 'content' name to something else, and it does indeed allow other snippets to be included. Thank you!
I still don't know a) the best way to organise html pages and to include snippets and also how to include a page that is drawing from a database: e.g. posts:
I tried this - that seeks to include post.html but it doesn't work - it instead just messes up the formatting and repeats the blog section elsewhere on the bootstrap page.
{%extends "aboutme/header.html" %}
{%block content%}
<p>Welcome to this "about" page that is all about the website:</p>
{%include "aboutme/includes/mysnippet.html"%}
{% endblock %}
{%block moose%}
<p>This is test text that says moose</p>
{%include "blog/post.html"%}
{% endblock %}
The 'moose' text does show up, but not the blogs/posts.
post.html (in the blog app) is:
{% extends "aboutme/header.html" %}
{%block content %}
<h3>{{post.title}}</h3>
<h6>on{{post.date}}</h6>
{{post.body|safe|linebreaks}}
{% endblock %}
I am working on github pages with jekyll. I want to put the about me on my homepage by default.
I've searched a lot but found little help for this demand.
One easy method is to put the about.md file in the _posts directory with the first date. Then, when Jekyll indexes _posts, you can always assume that site.posts.first is the about.md.
Some sample code below:
---
layout: default
---
<section class="main-content">
{% assign post = site.posts.first %}
{% assign content = post.content %}
<article class="module color-3">
{{ content }}
</article>
</section>
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.