I am building a hugo blog site and I have some front matter that I would like to get rendered in the layouts. When I view the results on my localhost:1313, I can see the front matter being populated, but when I host the site on Netlify, the front matter and partial files won't render.
I'm not sure what else to do. I've cleared the console of any errors, made sure my content files match the layout files etc.
Any help?
Here is the link to the live netlify site: https://stoic-meninsky-a5758a.netlify.app/
Here is my directory structure:
-content
-about
-_index.md
-blog
-_index.md
-post-1.md
-_index.md
-layouts
-_default
-baseOf.html
-about
-section.html
-blog
-section.html
-single.html
_index.html
This is a sample file that is pulled from one of my content markdown files:
---
title: "The Herman Show | Blog"
linktitle: "Blog"
draft: true
newsletter: "This is the newsletter"
---
This is how I call the front matter: <p>{{ .Params.newsletter }}</p>
This is how I loop over the section pages to get a navbar
{{ range .Site.Sections }}
<li>{{ .LinkTitle }}</li>
{{ end }}
Make sure your markdown files in the content directory are marked to: drafts:false
Related
I have two very similar sections on a jekyll website.
The displayed content change for only some words or resources.
I handle this using 3 files:
One markdown content without Front Matter. This file content the text with if conditions:
# Mardown Content
Here is more info about:
{% if page.section == 'sectionA' %}
[Something About Setion A](/sectionA/something)
{% elsif page.section == "sectionB" %}
[Something About Setion B](/sectionB/somethingelse)
{% endif %}
Two markdown files with front matter including the content
---
layout: myTemplate
section: sectionA/B
title: something
---
{% include content.md %}
I used to have those 3 files in the same directory using {% include_relative content.md %}. This way seems better because the files were in the same directory and the _include folder do not mix up content and html templates.
But my config of jekyll builds also a page for the content file displaying an html page.
Is there a way to prevent serving this html content?
Do you know a better way to handle this?
In _config.yml add :
exclude:
- content.md
This will instruct Jekyll not to process content.md.
Note : I don't get why you cannot put content.md in the _includes folder.
This is my personal GH Pages site.
I have this set in my /_config.yml:
theme: jekyll-theme-cayman
title: iBug # GitHub
description: The small personal site for iBug
Now it shows a big title iBug # GitHub and a tagline on every page GH Pages generates. I want to set overrides for specific pages. I tried
---
title: Blog index
---
in /blog/index.html, but it doesn't work. It only changes the HTML title of the page (browser title bar), but not the "title" in the big block on the top of the page.
How do I set an override title for a single page?
Update: I have since submitted a pull request to change this in the theme, and the answer below is no longer necessary since it's already been applied when you use the theme as of now. All you need to do is to specify the title override in the front matter:
---
title: My custom title
---
To specify another title, you need to change the layout file.
Copy the default layout and place it in <GitHub repo>/_layouts/default.html, and change line 16 to this:
<h1 class="project-name">{{ page.title | default: site.title }}</h1>
Then Jekyll will respect the title set in the front matter, and place it there.
This is just the way this theme is implemented, if you check the default layout for Cayman theme on line 14 you can see what exact variable it is using.
<h1 class="project-name">{{ site.title | default: site.github.repository_name }}</h1>
Hope that helps!
My approach is using javascript as follows.
<script>
document.getElementsByClassName("project-name").item(0).innerText = "{{ page.title }}";
</script>
You can write a html file in _includes dir and use {% include your_file.html %}.
I'm creating a website using Jekyll.
so far I have four pages which are created automatically from four md files which md files are in the root of the project.
index.md
about.md
login.md
register.md
Here is the content inside my login.md file
---
layout: layout-default
title: some login title
permalink: /login
theme: secondary-theme
nav:
menu-items:
- type: text
text: Don't have an account?
- type: link
text: SIGN UP
class: button
linkPath: /register
sections:
- type: 3
class: form-section
header-line-2: Login Section!
form:
api: http://127.0.0.1:8080/login
submit-text: LOG IN
form-controls:
- label-text: EMAIL ADDRESS
input-type: email
input-placeholder: Enter your email
input-name: email
- label-text: PASSWORD
label-link-text: Forgot password?
label-link-path: #
input-type: password
input-placeholder: Enter your password
input-name: password
---
What i do is iterating the sections and applying html attribute values depending on the variables inside each section. That way i can have as many sections rendered as i want on one page. And they can also be different depending on the classes and content i put in the md file.
The problem is that if the project gets too complicated with different styles for sections and so on. I would like to separate each section content. It would be nice if i could make a folder lets say login/sections folder
and then put md files inside and then inside login.md file include these section md files. This way the code would be much more organized.
Is there way to do that, and is my approach actually good.
Jekyll provides the ability to include files into another files. The magic directory for this is _includes. Example:
If you create a file named _includes/sections/s1.html, you can include that into any other file with the following tag:
{% include sections/s1.html %}
This approach works for:
including HTML file into HTML
including HTML file into Markdown (since Markdown can contain HTML code)
including Markdown into Markdown
If you want to include a Markdown file into a HTML, you have to use some trick:
{% capture m %}{% include sections/s1.md %}{% endcapture %}
{{ m | markdownify }}
I want to create an archive for old blog posts on my jekyll site. Previously, my structure was serving the contents of _posts on my website homepage, index.html. After reading the collections documentation and a few tutorials online, I have added a collection folder _archive to my structure and a test file inside called test-file.markdown.
However, the url mysite.com/archive/test-file fully regenerates my main index.html, not the collection contents.
Structure:
_archive
index.html
test-file.markdown
_includes
about.html
head.html
... other stuff ...
_layouts
default.html
_posts
post1.markdown
post2.markdown
... other stuff ...
css
img
js
_config.yaml
... other stuff ...
test-file.markdown
---
layout: default
title: test
---
_config.yml
# Site settings
title: test
email: test#test.com
url: http://www.test.com
# Color settings (hex-codes without the leading hash-tag)
color:
primary: ffffff #80B3FF
primary-rgb: "24,288,156" #"128,179,255"
secondary: 2c3e50 #FD6E8A
secondary-dark: 233140 #A2122F
third: 979797
collections:
archive:
output: true
permalink: /archive/:path/
# Build settings
markdown: kramdown
permalink: pretty
mysite.com/archive/index.html
---
---
{% for p in site.archive %}
{{ p}}
{{ p.title }}
{% endfor %}
This re-renders the main index.html, not the contents of test-file.markdown.
How can I properly render the contents of _archive at mysite.com/archive/?
EDIT: added --- to index.html
Did you add the:
---
---
{% for p in site.archive %}
{{ p}}
{{ p.title }}
{% endfor %}
on the top of the index.html file? If it's missing it won't run any content within in that file through jekyll's templating engine.
It's hard to tell what your problem really is without seeing the whole site. Provide a repo URL if possible.
If the contents of /index.html are appearing in the /_archive/test-file.markdown output, the post loop is probably in the default layout file, since both of the files share that layout. The solution here would be to move the relevant content into /index.html.
I believe that your /_archive/index.html is not being output. Move /_archive/index.html to /archive.html. Jekyll doesn't process pages inside of the _archive folder because it starts with an underscore.
You'd then have these files output with your current config:
/archive/index.html
/archive/test-file/index.html
In my opinion, you should keep posts as posts, whether they are archived or not. You would then keep the URLs when posts are archived rather than having to set 301s or losing them to the great void.
To do this, add front matter to your archived posts:
---
archived: true
---
And your current posts (you could use defaults to save repetition):
---
archived: false
---
Exclude the archived posts in your main post loop:
{% assign posts = site.posts | where: "archived", false %}
Exclude the current posts on your archive page:
{% assign archived_posts = site.posts | where: "archived", true %}
I have built a website based on the Jekyll code for the website for Apache Buildr. The Buildr website automatically generates a table of contents for each page based on the headers in the textile format files.
For example, you write a page using textile marking out the headings like so . .
h2(#why). Why are we doing this?
BLah blah balh etc ..
h2(#something). Some other header
BLah blah balh etc ..
Then in the default HTML you have some code that pipes the content into something called toc and then you put the contents afterward. For example ...
<div id='content'>
<h1 id='{{ page.title | downcase | replace(' ', '_') }}'>{{ page.title }}</h1>
{{ content | toc }}
{{ content }}
</div>
On the Apache site they get the desired results (the toc is shown followed by the contents). However, on my site, the contents are rendered twice. No table of contents is generated.
Furthermore, if I clone the Apache Buildr project directly from github and run jekyll --server in the doc folder of that project, then no table of contents is generated either.
What am I missing?
I emailed the Buildr developer mailing list and someone told me to look here for inspiration. Turns out that the relevant code snippet is ...
module TocFilter
def toc(input)
output = "<ol class=\"toc\">"
input.scan(/<(h2)(?:>|\s+(.*?)>)([^<]*)<\/\1\s*>/mi).each do |entry|
id = (entry[1][/^id=(['"])(.*)\1$/, 2] rescue nil)
title = entry[2].gsub(/<(\w*).*?>(.*?)<\/\1\s*>/m, '\2').strip
if id
output << %{<li>#{title}</li>}
else
output << %{<li>#{title}</li>}
end
end
output << '</ol>'
output
end
end
Liquid::Template.register_filter(TocFilter)
Make a folder in the source folder of your site called _plugins and then paste this code into a file called TocFilter.rb within that folder.
It works!!
Where is toc defined? It isn't listed as one of the standard liquid filters or jekyll extensions, so likely you are missing a plugin.
I've used ghiculescu's JS TOC on my Jekyll powered Github blog. It works very well.
Example.
jekyll-toc plugin does this for you out of the box.
Add the following to your GemFile
gem 'jekyll-toc'
Add the following to your _config.yml
plugins:
- jekyll-toc
Add the following liquid tag where you want the TOC to be generated.
{{ content | toc_only }}
And finally set toc: true in your post's front-matter.
I added this value as a default in my _config.yml so that TOC is applied to all my posts by default.