I've just installed Jekyll and I'm following a few tuts. I get that you define your content in a .md file in the root and that generates your html file based on the layout file you chose but what I don't get is how to split your {{ content }} up.
Say for instance I want one piece of content from my .md file in a <article> and the other in an <aside> How would I go about doing this? Code in question is pasted below. Thanks
.md file
---
layout: page
title: Page Test
permalink: /page-test/
bodyclass: page-test
---
Article content
* Hey this is my content!
Aside content
* Test links
Layout file
---
layout: default
---
<div class="post">
<header class="post-header">
<h1 class="post-title">{{ page.title }}</h1>
</header>
<article class="post-content">
{{ content }}
</article>
<aside>
</aside>
</div>
You can use the post.excerpt functionality.
_config.yml
excerpt_separator: "<!--more-->"
post
---
frontmatter
---
Excerpt text
<!--more-->
Body text
....
layout
---
layout: default
---
<div class="post">
<header class="post-header">
<h1 class="post-title">{{ page.title }}</h1>
</header>
<article class="post-content">
{% assign contentArray = page.content | markdownify | split: site.excerpt_separator %}
{{ contentArray.last }}
</article>
<aside>
{{ contentArray.first }}
</aside>
</div>
One more solution:
In frontmatter declare a variable and call it later via Liquid like so:
---
layout: page
title: Page Test
aside: "Here you can even use <strong>HTML</strong>. Even <a href='http://jekyllrb.com'>Links</a>. But it looks nasty."
---
Article content
* Hey this is my content!
Aside content
* {{ page.aside }}
You can use Liquid inside of .md-posts. And so you can use includes in a .md-post.
Example:
make a new file called aside.html inside a folder called _includes.
Put some content in it.
Call the include in your .md-post.
Code:
---
layout: page
title: Page with aside
---
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
{% include aside.html %}
More about includes › http://jekyllrb.com/docs/templates/#includes
Related
I've made a Jekyll static web site following this tutorial. The problem is when I reach the collections's section, I do what is being told but my 'portfolio' collection is not rendering.
These are the Markdown files that composes the collection _portfolio.
For example, the file called google.md has this content:
---
image_path: /img/portfolio/1.jpg
category: Diseño web
project_name: Google
link: https://google.com
---
As well the other files, but with different data.
My config.yml just has this:
collections:
portfolio:
And portfolio.html has this code:
---
layout: page
title: Portafolio
---
<section class="no-padding" id="portfolio">
<div class="container-fluid">
<div class="row no-gutter">
{%- for item in site.portfolio -%}
<div class="col-lg-4 col-sm-6">
<a href="{{ item.link }}" class="portfolio-box">
<img src="{{ item.image_path }}" class="img-responsive" alt="{{ item.project_name }}">
<div class="portfolio-box-caption">
<div class="portfolio-box-caption-content">
<div class="project-category text-faded">
{{ item.category }}
</div>
<div class="project-name">
{{ item.project_name }}
</div>
</div>
</div>
</a>
</div>
{%- endfor -%}
</div>
</div>
</section>
When I inspected the elements in the console y noticed that the page is rendering everything but the content after the {% for %} tag.
What am I missing?
Are the Markdown files wrong or is it the 'for' tag?
EDIT: This is the repository link
It seems that your collection.docs array is empty, so, no way to loop in.
You need to generate your documents.
Can you try :
collections:
portfolio:
output: true
Edit : And your configuration file must be named _config.yml and NOT config.yml.
I am making a simple jekyll blog and I have different categories of posts which hold different articles. At some places in my blog I want to display only the articles from that specific category. I keep my categories seperated in my _posts folder example:
---_posts
|
|-- category1
|-- category2
Inside my _posts folder I just have a folder for each category that keeps my articles. How can I display only the posts which are in catergory1 and category2, something like this:
{% for post in caregory1.posts limit: 2 %}
<div class="center-column">
<article>
<img src="../assets/images/test-img.jpg" alt="" class="test-img">
<p>12.12.2015</p>
<h1>Title</h1>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Dolorum voluptates aperiam, repellendus est eius debitis
suscipit consequatur iure et sequi ipsum eos culpa, delectus magnam amet explicabo! Voluptatem, adipisci quam.</p>
</article>
Jekyll derives categories from a post's superdirectory.
Therefore instead of having _posts/category1, etc, organize into category1/_posts, category2/_posts, etc.
Then iterate through site.categories.category1 to render individual posts:
{% for post in site.categories.category1 %}
<h2>{{ post.title }}</h2>
// insert your code
{% endfor %}
I am wondering why the TOC (surrounded by {{ }} or not in any kind of fashion is not rendered when used in the Jekyll post.html template:
---
layout: default
---
<article class="post" itemscope itemtype="http://schema.org/BlogPosting">
<header class="post-header">
<h1 class="post-title" itemprop="name headline">{{ page.title }}</h1>
<p class="post-meta"><time datetime="{{ page.date | date_to_xmlschema }}" itemprop="datePublished">{{ page.date | date: "%A, %B %-d, %Y" }}</time>{% if page.author %} • <span itemprop="author" itemscope itemtype="http://schema.org/Person"><span itemprop="name">{{ page.author }}</span></span>{% endif %}</p>
</header>
<div class="post-content" itemprop="articleBody">
>> * TOC <<
>> {:toc} <<
{{ content }}
</div>
</article>
The table of contents feature you are describing is a feature of the kramdown converter, which means that you have to add the toc generation code to your markdown file content. As I see you are adding it to `html.
I use it in the following way on my blog in my .md files:
* TOC
{:toc}
Please note that you can use the .no_toc classname to exclude headers from content generation.
# Contents header
{:.no_toc}
This means that you can to something like this in your post .md file, and that's another reason to add the toc to your content:
# Table of contents
{:.no_toc}
* TOC
{:toc}
# Heading 1
## Heading 2
Please also make sure that you set markdown: kramdown in your _config.yml. (kramdown is the default on GitHub pages).
I have a very basic layout:
#_layouts/default.html
{% include header.html %}
{{ content }}
{% include footer.html %}
A front page that shows all posts (without their comments):
#index.html
---
title: Schmexy Title
---
<section id="fresh-off-the-press">
{% for post in site.posts %}
<article class="post">
<header>
<p class="post-date">{{ post.date | date: '%b %d, %Y' }}</p>
<h1 class="post-heading">{{ post.title }}</h1>
</header>
{{ post.content | split:'<!-- body -->' | last }}
</article>
{% endfor %}
</section>
And a simple article format:
#_posts/2015-02-25.superduper.md
---
title: SuperDuperHeadline
category: newsflash
---
[SuperDuperHeadline][1]
===================
<!-- body -->
After a hassle-free launch, [Jekyll] has kept me up all night.
[1]: {{ page.url }}
[Jekyll]: http://jekyllrb.com
The use of the comment to avoid jekyll displaying the article title twice seems very hacky.
I tried simply deleting the headline & body hack
[SuperDuperHeadline][1]
===================
<!-- body -->
which works great for the index.html but when I click on the heading link to take me to the article it is then displayed with no heading at all as Jekyll is outputting only the html conversion of the markup inside the default layout.
SO, I tried using a sub-template to display the single post, changing the front-matter in the article to use _layouts/post.html
#_posts/2015-02-25.superduper.md
---
title: SuperDuperHeadline
category: newsflash
layout: post
---
with the new layout much like the old layout (but with the potential to show comments)
#_layouts/post.html
---
layout: default
---
<article class="post">
<header>
<p class="post-date">{{ page.date | date: '%b %d, %Y' }}</p>
<h1 class="post-heading">{{ page.title }}</h1>
</header>
{{ page.content | markdownify | split:'<!-- body -->' | last }}
<!--
<section class="comments">
<header><h1 class="comments-heading">Comments</h1></header>
<article class="comment">
<footer><p>Posted by: Commenter 1</p></footer>
<p>Comment 1</p>
</article>
<article class="comment">
<footer><p>Posted by: Commenter 2</p></footer>
<p>Comment 2</p>
</article>
</section>
-->
This sub-template needed the further hack of piping everything through markdownify before using the body hack to separate the header from the contents.
It all seems very... well, hacky. I must be doing something wrong
How do I best structure my layouts and posts for a blog?
Why is markdown not used in the sub-template?
I have re-created your Jekyll site on my machine by copying the code from your question - except for the two include files which you didn't show in your question:
{% include header.html %}
{% include footer.html %}
I used the following content for them in my project:
<!DOCTYPE html>
<html>
<head>
<title>{{ page.title }}</title>
</head>
<body>
<h1>{{ page.title }}</h1>
and
</body>
</html>
...and I had no headline displayed twice.
Can you show me your header.html and footer.html?
(or better, is the whole project online somewhere, like on GitHub, where I can see the code?)
I'm suspecting that you have something in there that causes the headline to be displayed twice.
I have built multiple sites with Jekyll and it's definitely possible to do this without any hacks:
I am simply trying to list all posts on the front page (without comments) and click through to a single post (with comments). I'd like to write the posts is .md and have them marked up properly as per post.html.
I have simplified your example a bit - take a look at this:
The code
/index.html:
---
title: Schmexy Title
layout: default
---
<section id="fresh-off-the-press">
{% for post in site.posts %}
<article class="post">
<header>
<p class="post-date">{{ post.date | date: '%b %d, %Y' }}</p>
<h1 class="post-heading">{{ post.title }}</h1>
</header>
{{ post.content }}
</article>
{% endfor %}
</section>
/layouts/default.html:
<!DOCTYPE html>
<html>
<head>
<title>{{ page.title }}</title>
</head>
<body>
<h1>{{ page.title }}</h1>
{{ content }}
</body>
</html>
/_posts/2015-02-25-superduper.md:
---
title: SuperDuperHeadline
category: newsflash
layout: default
---
After a hassle-free launch, [Jekyll] has kept me up all night.
[Jekyll]: http://jekyllrb.com
The created HTML:
/index.html:
<!DOCTYPE html>
<html>
<head>
<title>Schmexy Title</title>
</head>
<body>
<h1>Schmexy Title</h1>
<section id="fresh-off-the-press">
<article class="post">
<header>
<p class="post-date">Feb 25, 2015</p>
<h1 class="post-heading">SuperDuperHeadline</h1>
</header>
<p>After a hassle-free launch, Jekyll has kept me up all night.</p>
</article>
</section>
</body>
</html>
/newsflash/2015/02/25/superduper.html:
<!DOCTYPE html>
<html>
<head>
<title>SuperDuperHeadline</title>
</head>
<body>
<h1>SuperDuperHeadline</h1>
<p>After a hassle-free launch, Jekyll has kept me up all night.</p>
</body>
</html>
There you are - one headline per page, and the headline is a permalink.
Is this what you wanted to achieve?
(I know I omitted the comments in this first step - we'll come to that later if you still need it)
Say I have following _teaser.twig partial:
<article>
<h2> {{ article.headline }} </h2>
<p> {{ article.lede }} </p>
{% if {{article.byline }} %}
<address>{{ article.byline }}</address>
{% endif %}
</article>
Which i include these ways:
<aside>
{% for article in teasrs %}
{% include '_teaser.twig' %}
{% endfor %}
</aside>
<section>
{% for article in opinion.items %}
{% include '_teaser.twig' %}
{% endfor %}
<section>
With the following data structure in a json file:
{
"article": {
"headline": "A short headline",
"lede": "A short descriptive lede paragraph"accusantium"
},
"teasers": {
"article1": {
"headline": "Some headline",
"lede": "A lede that describes the article, but without revealing too much, so that users still have a reason to click"
},
"article2": {}
},
"opinion": {
"article": {
"byline": "Anonymous"
},
"items": {
"article1: {},
"article2: {}
}
}
}
Ideally, I'd like the variable resolving to go up the scope, the same way it does in Mustache.
The desired output is:
<aside>
<article>
<h2> Some headline </h2>
<p>
A lede that describes the article,
but without revealing too much, so that
users still have a reason to click
</p>
</article>
<article>
<h2> A short headline </h2>
<p> A short descriptive lede paragraph </p>
</article>
</aside>
<section>
<article>
<h2> A short headline </h2>
<p> A short descriptive lede paragraph </p>
<address>Anonymous</address>
</article>
<article>
<h2> A short headline </h2>
<p> A short descriptive lede paragraph </p>
<address>Anonymous</address>
</article>
<section>
Unless I'm missing something, specifying the default using the default() filter isn't desirable, as I'd like the default content to be derived from the model, not the view. For instance, In the teasers, I don't want to have a fallback byline, but in the opinion section, I'd like to always show a byline, with a fallback to Anonymous, for which using default won't help with.
Use default pipe
doc : http://twig.sensiolabs.org/doc/filters/default.html
<article>
<h2> {{ article.headline|default('default value) }} </h2>
<p> {{ article.lede|default('default value) }} </p>
</article>