I am using Github Pages and Jekyll to serve Plotly interactive plots. At the moment, for each of the plots, I have Plotly generate the html and save it to _includes in my root directory. To display the plots, I've modified the home.html layout in _layouts to consist of only {% include filename.html %} statements and index.md to be blank. This does what I want it to do (see image 1) but is somewhat clunky.
So, I've been trying to modify home.html with <head> and <title> and <body> sections, and then placing my {% include filename.html %} statements into the body of index.md. However, when home.html fills {{ content }} from index.md my plots all of a sudden become compressed in size (see image 2).
Is there some way to have the contents from {% include filename.html %} statements fill the whole page, as was the case when I had {% include filename.html %} statements in home.html?
Thanks!
Related
I have a page called blog.md which has some code like this.
permalink: /blog/
layout: collection
collection: blog
entries_layout: grid
classes: wide
Then I have a folder called _blog, with a number of .md files in.
Is there anyway I can add another level of order here and instead of displaying all the _blog .md files on the blog.md page.. I want to add two folders/lists which contain certain .md files.
Any ideas? Thanks
This should work by adding the path to your for loop. For example, let's assume you have a directory in your _blog directory called "orange." So your file path would be _blog/orange. To loop through only the files in the orange directory you could do this:
{% for post in site.blog.orange %}
{{ post.do-stuff }}
{% endfor %}
On a side note, Jekyll is going to look for blog posts in the _posts directory. I assume this _blog directory is a collection, but creating a "blog" collection will make things confusing if anyone else ever needs to touch this codebase.
I am using Jekyll to make a personal website. I downloaded a Bootstrap template and started changing details around. I changed the config.yml file as well as the index.html file.
When I write bundle exec jekyll serve into the command line, the server starts running and I can see a demo of what my website will look like once it is being hosted online.
The changes I made to the config.yml file persist, but those I made to the index.html file do not. When I look at the index.html file, every single change I made is reverted back to the original. It's almost like the index.html gets regenerated to a default version whenever I run the server.
The same thing happens when I try to change the default image files within the project. The new images that I placed in the img folder get deleted and the old ones that I removed get regenerated.
I googled around but found no helpful answer (deleting my browser cache does not solve the issue). Anyone know what's going on?
Edit: I should add a piece of information that may be the cause of this issue. I have two index.html files in my website. One of them is in the root folder and it simply redirects to "layout: default". The other one is in the _site folder. The latter is the one I tried to change to no avail.
Default file:
<!DOCTYPE html>
<html>
{% include head.html %}
<body id="page-top" class="index">
{% include nav.html %}
{% include header.html %}
{% include portfolio_grid.html %}
{% include about.html %}
{% if site.contact == "static" %}
{% include contact_static.html %}
{% elsif site.contact == "disqus" %}
{% include contact_disqus.html %}
{% else %}
{% include contact.html %}
{% endif %}
{% include footer.html %}
{% include modals.html %}
{% include js.html %}
</body>
</html>
Every time jekyll serve or jekyll build is executed, the default behaviour is to regenerate all your site into the _site folder.
To make changes to your index.html root file, you need to edit the one outside the _site folder (probably named /index.md or /index.html) because the content of_site` are built in each run.
I have a static html file with animations and different html5 tags. Is it possible to include this file (will all resources, images, js) in a jekyl blog post/page. More specifically, from .md file can I use include tag to use my static html5 file. I am very new to both jekyl, markdown. thnx
An HTML file can be included in Jekyll like this:
{% include note.html %}
And it will load the file located at _includes/note.html. Or you can use relative directories to the one that is calling the include, for example, consider having index.md and we want to include another html file inside it called note.html:
Folder structure:
.
├── note.html
└── index.md
Then in index.md:
---
title: example
---
{% include_relative note.html %}
And when you access index.md it will display the content of note.html.
Markdown doesn't allow all html tags, you can take a look here to see which html tags are allowed and how to type them in markdown
for animations if you can wrap your animation in a gif then you can use it in markdown like so
and if you want to add a still image like so
As far as I gather, Jekyll parses an included page through the templating stage if and only if it finds a YAML header / front matter. Otherwise it just copies it. Is there a way to force Jekyll to parse an included file without a front matter?
The rule of thumb is that Jekyll will not parse files without front matter.
However... there is a work-around. You can create an index.html file in the _includes directory without front matter. The Liquid in this file will be interpreted by Jekyll. You can render this include anywhere using:
{% include index.html %}
This solution is perfect for rendering HTML pages within a Jekyll context (without having the front matter requirement), especially when you want to reuse them. This could be useful for rendering a preview AND showing the code in a code block on another page. The include could be written in a layout file or in an index.md file.
Note that the included filename can be a variable (https://jekyllrb.com/docs/includes/):
{% if page.my_variable %}
{% include {{ page.my_variable }} %}
{% endif %}
Also note that if you want to show Liquid examples in this code, you should use:
{% raw %} ... Liquid example ... {% endraw %}
If you want a solution work-around for your specific situation, you should share your repository and explain your use case.
I am trying include a certain markdown file that is in the root directory into another file that is in a sub-directory.
I tried many different syntaxes:
{% include_relative ../root/file %}
{% include_relative /../root/file %}
{% include_relative ./../root/file %}
{% include_relative /./../root/file %}
(and others)
Is there any way to go back to parent directories in Jekyll using Liquid Tags?
From jekyll documentation.
For example, if _posts/2014-09-03-my-file.markdown uses the
include_relative tag, the included file must be within the _posts
directory, or one of its subdirectories. You cannot include files in
other locations.