How to reference HTML meta tags in a template engine?

user_10949324 0
Viewed 93

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

  1. how to iterate over the .html files in my _posts directory?
  2. how to define these values in my html file?
  3. 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!

static-site jekyll liquid markdown html
1 Answers

You can use HTML files as post or collection items in Jekyll by default:

  1. Rename _posts/2020-01-01-example.md to _posts/2020-01-01-example.html
  2. 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 %}
user_54775610
Related