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.
Related
I may be searching the wrong terms but I can't seem to find an obvious way to make easy links to page section ids.
Lets say I have a _widgets.md file with a section id=section-1 so I want to generate a link to: /widgets/#section-1
I found this for links:
Jekyll link within page
So an same page link is as simple as [Section 1](#section-1) but I can't seem to find how to add the anchor to links from another page like this [Widgets - Section 1]({% link _docs/widgets.md%}).
You can use the capture tag, see jekyll or shopify
In HTML
{% capture link_with_anchor %}{% link _pages/links.md %}#foobar{% endcapture %}
Links
In Markdown
{% capture link_with_anchor %}{% link _pages/links.md %}#foobar{% endcapture %}
[Links]({{ link_with_anchor }})
You can benefit from the link features (check if page exists) and can add the anchor, e.g. foobar.
One cool way to manage links is to have a central include file that defines the links by name, which is then referenced by each document.
For example you have a file in the _includes directory called "links.md" which defines all the cross-document links in your site:
[Section 1]: {% link widgets/page.md %}#section1
[Section 2]: {% link widgets/page2.md %}#section2
etc
Then in your markdown you can just say:
This is a link to [Section 1] isn't that nice.
... other content
{% include links.md %}
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.
First day with Jekyll, I basically have the minima theme from Jekyll that I'm modifying trying to create a new site.
I have a home.html within _layouts. My goal is to place paragraphs within 3 individual columns, side-by-side. My understanding is that _layouts and _includes are mainly for formatting, at least that's how I look at them. I aware one can put a bunch of static text to display within these files, but it seems cleaner (and easier to edit) if the text to display were in something like a _pages folder. But of course doing so creates a new link in the header. So I am trying to find a way insert a markdown file which is just paragraphs of text that I can cleanly insert into my main home page, and only there.
How and where does one place markdown (paragraph sizes) for the sole purpose of inserting into layouts or includes, but not writing them directly into the layout or include, nor making it a post or a page, or using variables within _data. I was hoping to make a markdown file for smaller purposes than posts, pages, etc...
My _layouts/home.html looks as follows, but the markdown isn't showing up. IIRC, this is because includes can only access _includes, and I was hoping not to have to write this data within _includes or html's.
---
layout: default
---
<div class="home">
<div class="home-col-wrapper">
<div class="home-col home-col-1">
{% include front-col-1.md %}
</div>
</div>
<div class="home-col home-col-2">
{% include front-col-2.md %}
column 2
</div>
<div class="home-col home-col-3">
{% include front-col-3.md %}
column 3
</div>
</div>
I also tried putting an *.md file in _pages and changing the layout to home, but to no avail. The text didn't show up in the home layout.
---
layout: home
---
A bunch of stuff should probably go here. So be sure to make sure it looks ok. ok? ok!
I just did something similar. If I understand your question correctly, all you need to do is to replace {% include front-col-1.md %} by
{% capture temp %}{% include front-col-1.md %}{% endcapture %}
{{ temp | markdownify }}
What happens is that Liquid captures the markdown file in the variable temp, and then markdownify converts it into HTML and adds it.
I don't think you can put the markdown files elsewhere, but they need to be in _includes.
Related: https://github.com/jekyll/jekyll-help/issues/51
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>
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.