I'm trying to generate an additional Jekyll page called posts.html.
I'm looking to use the Jekyll variables such as site.posts to iterate through the posts I've written for my site, and create a standalone page (posts.html) using these variables.
Here's my current version:
<!DOCTYPE html>
<html lang="en">
<body>
<main>
{% for post in site.posts %}
{{post.title}};{{post.date}},
{%endfor%}
</main>
</body>
</html>
If I include this at the root of my site, the command bundle exec jekyll build will build posts.html to my _site directory, but does not compile the variables into readable text. It outputs it in plaintext.
I've attempted to hook into the existing build cycle by moving the posts.html file to the _includes directory, and referencing it at the bottom of blog.html.
This does generate the HTML, but as part of the index.html like so:
... Additional markup here
</main>
<section id="category-modal-bg"></section>
<section id="category-modal">
<h1 id="category-modal-title"></h1>
<section id="category-modal-content"></section>
</section>
<!DOCTYPE html>
<html lang="en">
<body>
<main>
MyPostName;MyPostDate,
</main>
</body>
</html>
This makes sense as the layouts/posts.html file is an include, so building the markup where the include exists is working as expected.
I'm trying to compile the posts.html file as a standalone, navigatable file that will sit alongside my _site/index.html. If I need to copy this file across as part of my CI/CD pipeline thats fine too.
Is this possible?
Add an empty front matter before posts.html to let Jekyll process your file. (and move back posts.html)
---
---
<!DOCTYPE html>
<html lang="en">
<body>
<main>
{% for post in site.posts %}
{{post.title}};{{post.date}},
{% endfor %}
</main>
</body>
</html>
Any files with front matter are subject to processing. For each of these files, Jekyll makes a variety of data available via Liquid. (Variables | Jekyll Doc)
You must include front matter on the page for Jekyll to process any Liquid tags on it. (Front Matter | Jekyll Doc)
However in most cases, this is better.
---
layout: default
---
{% for post in site.posts %}
{{post.title}};{{post.date}},
{% endfor %}
By using a layout, you don't have to write <head> or <footer> again and again and again. Layouts also makes it easier to change <head>, etc. (let's say, you want to add Google Analytics someday.)
Besides, I think this may help you, though irrelevant to the question's title.
---
layout: default
---
<ol>
{% for p in site.posts %}
<li>{{ p.title }} — {{ p.date }}</li>
{% endfor %}
</ol>
Comprehensive version: Pagination | Jekyll doc
Related
I'm using Jekyll to build a static site for my blog site. Jekyll uses the liquid template engine.
To reference posts (blog posts) in the _posts directory, the code in the index.html is something like this
<ul class="posts">
{% for post in site.posts %}
<!-- do stuff here -->
<div class="container">
<h4 class="card-title"><b>{{ post.title }}</b></h4>
<p class="card-author">{{ post.author }}</p>
</div>
{% endif %}
</ul>
Sample markdown file (.md) in _posts:
---
layout: default
title: "Another Blog Post!"
date: 2021-08-09 00:00:00
cover_image: "https://raw.githubusercontent.com/sharmaabhishekk/sharmaabhishekk.github.io/master/images/cover.png"
categories: main
tag: "advanced"
author: "Abhishek Sharma"
---
Hi this is a blog post!
Jekyll offers powerful support for code snippets:
{% highlight ruby %}
def print_hi(name)
puts "Hi, #{name}"
end
print_hi('Tom')
#=> prints 'Hi, Tom' to STDOUT.
{% endhighlight %}
For each of the markdown files in my _posts directory, it iterates over it and displays it appropriately. More importantly, I can use the post.<attribute> way to refer to variables I set (post.title, post.author) in the markdown file.
However, I'd like to write my posts in HTML and not markdown. I want to know how can I still
how to iterate over the .html files in my _posts directory?
how to define these values in my html file?
how can the template engine parse through and read those variables?
For 2.), I settled on a way to use meta tags to write those values. I'm not sure if that's best practice but this is what I'm doing.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Site Title</title>
<meta name="author" content="Abhishek Sharma">
<meta name="title" content="Blog Post 1">
<meta name="date" content="10-08-2021">
</head>
But then I'm unsure how to reference these meta tag name and content pairs in my index.html liquid template.
I'd appreciate any help with this. Thank you!
You can use HTML files as post or collection items in Jekyll by default:
Rename _posts/2020-01-01-example.md to _posts/2020-01-01-example.html
Change the content to HTML (keep the front matter the same)
You'll iterate over them the same way (with site.posts), and you'll be able to access the front matter as you were.
Here's what your example file would look like (the DOCTYPE and other tags you reference are in your default layout):
---
layout: default
title: "Another Blog Post!"
date: 2021-08-09 00:00:00
cover_image: "https://raw.githubusercontent.com/sharmaabhishekk/sharmaabhishekk.github.io/master/images/cover.png"
categories: main
tag: "advanced"
author: "Abhishek Sharma"
---
<p>Hi this is a blog post!</p>
<p>Jekyll offers powerful support for code snippets:</p>
{% highlight ruby %}
def print_hi(name)
puts "Hi, #{name}"
end
print_hi('Tom')
#=> prints 'Hi, Tom' to STDOUT.
{% endhighlight %}
I started a new project in symfony. I'm very new to it, but I followed all the instructions from symfony's documentation for the installation:
/* assets/styles/app.css */
body {
background-color: rgb(177, 44, 44);
}
h1{
color: red;
}
h2{
color:purple;
border: 1px solid black;
}
{% extends 'base.html.twig' %}
{% block body %}
<h1> Bienvenue à tous </h1>
<h2> Bienvenue 2 </h2>
{% endblock %}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>{% block title %}Welcome!{% endblock %}</title>
{# Run `composer require symfony/webpack-encore-bundle`
and uncomment the following Encore helpers to start using Symfony UX #}
<link rel="stylesheet" href="assets\styles\app.css" type="text/css">
{% block stylesheets %}
{#{{ encore_entry_link_tags('app') }}#}
{% endblock %}
{% block javascripts %}
{#{{ encore_entry_script_tags('app') }}#}
{% endblock %}
</head>
<body>
<div class="container">
{% block body %}{% endblock %}
</div>
</body>
</html>
[enter image description here][1] set up. I downloaded webpack-encore-bundle package with yarn package manager. I think that my () is well placed, but my html file can't find the path to my css.
here are my files
[1]: https://i.stack.imgur.com/RA9FJ.png
my network browser console tell me this "net::ERR_ABORTED 404 (Not Found)"
With Webpack Encore
You should not write your <link>-tag yourself and instead use the commented encore_entry_link_tags instead. The encore_entry_link_tags will make sure it points to the file generated by Webpack Encore (after calling yarn encore dev for example).
When you use Webpack Encore use the webpack.config.yaml to point to your CSS in assets using addEntry('app', ...file..) (or possibly addStyleEntry, but addEntry should be fine). Webpack Encore takes the file under assets/styles/app.css and then puts it in public/ by default public/build. Depending on your configuration it might be, that your file name will not stay the same during that process. The good thing is Webpack Encore usually takes care of everything for you. (If not feel free to open a question for that).
See also: https://symfony.com/doc/current/frontend/encore/simple-example.html
When not using Webpack Encore
You should use forward slashes, e.g. assets/styles/app.css. If you don't use Webpack Encore then you should make sure that you have the file in public/assets/styles/app.css to make it accessible for your browser. You should also wrap this into another helper function called asset. In other words it should look something like (assuming the path is correct):
<link rel="stylesheet" href="{{ path('assets/styles/app.css') }}" type="text/css">
What this will do is make sure that your path is relative to the document root (your public/-directory) instead of relative to the url. This is important, because otherwise your path will not have the same result depending on whether you are for example on https:/example.com vs. https://example.com/blog, because it will look for your css in different places (either public/assets/styles/app.css or public/blog/assets/styles/app.css).
I want to create a Home page through which I could go to the other pages that I have created. Suppose I have a home page in which I have two options:
Now, from this home page by click onto the My work option I want to go to another page where I have the information related to my work, how can I do so?
My home page HTML is:
{% extends 'base.html' %}
{% block content %} <h1>Home Page</h1>
<ul>
<li>My Achievements</li>
<li> My Work</li> </ul>
{% endblock %}
The base.html:
<!DOCTYPE html> <html>
<head> </head>
<body>
{% block content %}
{% endblock %}
</body> </html>
I'd suggest taking a look at one of a number of tutorials for getting started with web development using Django.
https://docs.djangoproject.com/en/2.2/intro/tutorial01/
or
https://developer.mozilla.org/en-US/docs/Learn/Server-side/Django/skeleton_website These should help you more deeply understand what you're asking as a question, and the technologies you're using. I'd also recommend browsing this link to learn a bit more about HTML itself and the various tags usable in it.
To more directly answer your question, the <a> tag mentioned by Abhijith is what's used to create a reference between pages.
I've created a new Jekyll page, including the appropriate YAML Front Matter info at the top. My problem is that the page is being rendered without any styles. Upon inspection I see the head tag is empty so the CSS isn't linking. I'm sure I'm missing something painfully obvious but I'm stumped. I see that the style sheet is linked to the index page, just not my new page and I don't know what I'm missing to include the head data that links to my style sheet. Here's what I have in my new page.
---
layout: default
title: New Site
---
<div>
<div>
<h2>
Our Sweet Test Page
</h2>
<section>
<article class="dope-page">
<h1>Test Headline</h1>
</article>
</section>
</div>
</div>
This is exactly what happens when your template is not loaded. Is there a default.html file in your _layouts directory with a link to the stylesheet?
In my point of view, Jekyll render the page alongside index.html using layout parameter and find the layout in the _layouts folder. In your case, you use layout: default so you should check the _layouts/default.html file.
The default.html file generated by jekyll new your_awesome_site should look like below:
<!DOCTYPE html>
<html>
{% include head.html %}
<body>
{% include header.html %}
<div class="page-content">
<div class="wrapper">
{{ content }}
</div>
</div>
{% include footer.html %}
</body>
</html>
And the css files are in _includes/head.html.
In my posts, I sometimes include the same HTML pattern.
To do it so, I created pattern.html in _includes/ and include it in my posts with :
{% include pattern.html %}
I would like to add a CSS file (or any other code) in my header if, and only if, pattern.html as been used in my post. To put it in pseudo-code, I would like to get the following layouts/default.html:
<!doctype html>
<html>
<head>
{% if pattern.html is included in the post %} code here {% endif %}
</head>
<body>
{{ content }}
</body>
</html>
I already tried to assign a variable in pattern.html and to test it in my layout, but this assignement occurs too late: the layout is already processed. I know I can pass a variable through YALM, but my objective is to get rid of it. I would prefer not to use plugins to do this.
It seems asking the question helped me to answer it!
You can use the Liquid contains in order to look for a pattern in your post.
For example, if the included pattern.html contains a particular piece of code (<!--pattern--> for instance, or any particular HTML), you can use in your head:
<!doctype html>
<html>
<head>
{% if content contains "<!--pattern-->" %} code here {% endif %}
</head>
<body>
{{ content }}
</body>
</html>
This can be used for any HTML pattern. For example, if you want to call the CSS file producing syntaxic coloration only if there is code in the page, use:
<!doctype html>
<html>
<head>
{% if content contains "<code>" %}
<link rel="stylesheet" href="code.css">
{% endif %}
</head>
<body>
{{ content }}
</body>
</html>