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
Related
I have a couple of html files in my django project including a base.html file, navbar.html, footer.html, etc. I have included the navbar and footer files in the base file and extended the base file to a home.html file which happens to be my main page. I recently created a courses.html file and would like this page to also be in the main page. I understand I can include it like I did with navbar and footer, but that would mean the courses.html file will be shown everywhere the base file has been extended to, and I don't want this. How can I do this?
If you include courses.html only in home.html then it will be seen only in view that home.html is a template in.
Anything you include in base.html will be seen at every page which uses {% extends 'base.html' %}.
I'm hosting a personal site using GitHub Pages.
I'd like to reduce HTML code duplication by taking advantage of GitHub's builtin Jekyll templating functionality. For instance, putting footer.html into a /_includes directory for reuse on every future page.
I also happen to enjoy organising my files, so I put my 'real' index.html inside a /html sub-directory, along with all my other html files. GitHub pages doesn't like this, so I have used a dummy index.html in the root directory so that the site will be loaded by GitHub.
Whenever I use:
---
---
at the top of a .html file within my /html directory, they rather strangely get rendered as text at the top. In fact, so do my {% includes foo.html %} calls.
Why is this happening?
If you are using the 'dummy' index.html workaround, you will also need to enable Liquid in the root there by placing:
---
---
at the top of your dummy index.html:
index.html (dummy) <- double '---' here
html/
├─ index.html
├─ foo.html <- double '---' here to use {% includes bah.html %}
_includes/
├─ bah.html
This question helped the penny drop.
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'm using Jekyll to make a site that makes frequent use of kramdown's attribute list definitions. However the only way I can make this work right now is to include all of the definitions in every page e.g.
{:def1: ...}
{:def2: ...}
{:def3: ...}
This seems really smelly to me since if I want to change a definition, I need to do so in every single page. Ugh.
Is it possible to put these definitions somewhere where they will be included in every page? I tried putting them in a layout but it seems that Jekyll won't parse markdown in layouts.
I'm also open to alternatives to ALDs if this is not the right way to go about things.
If you want to add definitions to your posts, you can also create an .md file in your _includes folder with definitions like:
*[def1]: ...
*[def2]: ...
And then you can add this file to every post using {% include definitions.md %}.
It shouldn't be in the _layouts folder. Try keeping it in the _includes folder and then include it with this tag {% include definitions.html %}
Recently I've been working on a project in Django that uses a site-wide CSS layout, so I decided that each template (in this case a template in /projects/index.html) used would extend a base file containing the header, footer, javascript, etc. called base.html.
The problem is that my directory structure looks like so:
.
├── static
│ └── base.html
├── templates
│ └── projects
│ └── index.html
And, as you can see the base file I want to extend is in a higher directory than that of the index.html file. Normally, I would use a relative path and use the following code at the top of the index file: {% extends "../base.html" %} or simply use an absolute path to the file (if necessary)
It seems, however, that by using either of these methods, whatever is inside the quotes for extends simply gets appended onto the current path, and my call to the upper directory with .. gets ignored entirely.
That is, if the current path is, for example, /project/templates/projects and I use {% extends "/project/static/base.html" %}, that will be appended to the current path, causing the system to look for /project/templates/projects/project/static/base.html, which, of course, doesn't exist. After researching I came across an article that said the blocking of relative paths is intentional for security purposes, but it leaves me with no way to access any file outside the current working directory.
I figured this had to be an extremely common setup when building a website, and so there must be some sort of way to interact with multiple templates that I'm just not aware of yet. If anyone has any information on that, it would be much appreciated.
Your base.html should be residing in a templates directory and not in the static directory.
This is because you define where django searches for templates using the TEMPLATE_DIRS in your settings.py file. Here, I give an example which computes your TEMPLATE_DIRS value dynamically.
import os
TEMPLATE_DIRS = (
os.path.join(os.path.dirname(__file__), '..', 'templates'),
)
In additional, you need to be aware that django depends on another setting called TEMPLATE_LOADERS to determine the priority in which it loads up your html files/templates, while searching through your templates directories.
TEMPLATE_LOADERS = (
'django.template.loaders.filesystem.Loader',
'django.template.loaders.app_directories.Loader',
# 'django.template.loaders.eggs.Loader',
)
Once your base.html is located in your templates directory, all you need to do in your html files is to write:-
{% extends "base.html" %}
and you would extend correctly
All of your html templates should live under the templates directory (including your base.html). The location of this folder is set using the TEMPLATE_DIRECTORY settings in your settings.py. The static folder is solely for css, js, etc.
When inheriting from another template using the extends tag, the path you give is always relative to your template directory, not project.