By default, Jekyll uses *.html, however, the program I use (Sublime Text 3) has an a package that adds Liquid syntax support but it will only auto detect and do the code suggestions if the file has the extension *.liquid. The other problem is, Jekyll is looking for default.html as well as the other layouts. How do I make Jekyll look for *.liquid files instead like default.liquid?
In the bottom right hand corner of sublime it will have the name of the filetype being used, for example 'HTML'. If you click this you can change it to liquid.
What worked for me is to rename files to *.liquid.html and then
update the front-matter to use the new name, e.g.,
Including abc.liquid.html in default.liquid.html
=== default.liquid.html ===
---
---
{% include file.liquid.html %}
Using layout default.liquid.html in a Blog Post
---
layout: default.liquid
title: "My post title"
date: 2021-01-24 19:00
---
Related
I am using GitHub pages to publish files from a project. These files are Java source code files, which I have been able to add as static files into Jekyll as a collection. I would need to apply a layout to these files for, e.g., code formatting. I am unable to do this.
My static source code files are in a collection defined in _config.yml:
collections_dir: material
collections:
cse-solutions:
output: true
This part of my site works fine: .java-files under material/_cse-solutions appear on the static site into /cse-solutions.
However, I would need to include a title and code formatting. For this I am trying to apply a layout to these static files. My current effort is the following. First, in _config.yml I set
defaults:
- scope:
path: ""
type: "cse-solutions"
values:
layout: java-code
Then I have a file _layouts/java-code.html with contents, for simplicity at this point
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Test title </title>
</head>
<body>
<h1> Test code page heading </h1>
{{ content }}
</body>
</html>
However, this layout has no effect on the .java files on the site. To be honest, if the layout were effective, I do not know whether the output would even have .java-suffix. Still, I can not find any corresponding .html-pages on the site either.
Can this be done? If it can, what am I doing wrong?
EDIT: I suspect Jekyll just ignores layout for static files. Using jsonify from Liquid I can actually print the value of this collection, and there I can see that the system has correctly set, for these static files:
”layout”:”java_code”
But there is absolutely no effect in the formatting of these files.
(The underscore, that is, java_code instead of java-code is not an error here, because I noticed that some parts of Jekyll do not like dashes in identifiers, so I changed dashes to underscores everywhere. I think Ruby does not allow dashes in identifiers.)
I think you may be over complicating things a bit. If I understand correctly, you are trying to simply display the actual source code on your page correct? For example you would like your code to look like:
class HelloWorld
{
public static void main(String args[])
{
System.out.println("Hello, World");
}
}
If this is the case, you can simply save the written source code as a markdown file (.md) and let the kramdown mardkown converter handle displaying it correctly. To do this you need to make sure that you have the following in your _config.yml file:
kramdown:
# Use GitHub flavored markdown, including triple backtick fenced code blocks
input: GFM
# Jekyll 3 and GitHub Pages now only support rouge for syntax highlighting
syntax_highlighter: rouge
This will make sure kramdown is enabled and will use rouge for syntax highlighting if you would like.
Then for each page you want, simply create a pagename.md file and add at least the following front matter at the very top of the page:
---
layout: java-code
title: "Here is my source code page"
---
This tells jekyll to use the "java-code" layout you already made and to define the title for the page as whatever you put in the quotes. After the front matter, simply copy your source code into a code block for markdown. It is very simple, all you need to do is have a line with ``` before and after you code. You can optionally have the first line be ```java to tell rouge to highlight for java syntax to make it easier to read.
You can put any markdown text outside of the code block that you would like as well. That means you can have a description of the code, or even break the code into segments with text descriptions before each part.
To put it all together you file should look something like:
---
layout: java-code
title: "Here is my source code page"
---
Here is my simple "Hello, world" program:
```java
class HelloWorld
{
public static void main(String args[])
{
System.out.println("Hello, World");
}
}
```
Check out the docs page for posts on jekyll's website for more info, and if you are unfamiliar with markdown there are tons of guides on writing with it if you do a quick google search (its how stackoverflow answers are formatted!).
i'm kinda new to jekyll. in my project i have few .md files(each file relate to a portfolio project). some of those need to generate separate .html files when built(which jekyll already does). but i want to exclude some files from being creating separate html files.
But the important thing is, even though i want to exclude those .md files from creating seperate .html files i still want to use the front matter of those files.(as i'm using a for loop to generate a list of all the portfolio projects)
i tryied adding those .md files to the _config.yml under exclude. but that will stop parsing the front matter as well.
is there a way in jekyll which i can achieve this.
edit:
project1.md
---
title: project1
display: true
category: portfolioProjects
---
This is a test content
project2.md
---
title: project2
display: false
category: portfolioProjects
---
if i have 2 files like above, i would like to render project1.md as a .html file(as it has a content to be shown in a page) and not generate project2.md as a separate file.But i still want to access front matters of both files to make a list of projects like,
{% for project in site.projects %}
{{project.title}}
{% endfor %}
I believe i can use 2 types of collections and set output to true
for one type of collection and false to other type of collection.
But I'm wondering whether there is a much cleaner way like conditionally setting output to true or false depending on a front matter value.
eg. output : (display)? true : false
A very basic question.
I can not find out how to refer or cite a post in a page.
If this is my post
---
layout: post
title: "Serve Jekyll Websites with servr and knitr"
categories: [jekyll, rstats]
tags: [knitr, servr, httpuv, websocket]
---
The R package [**servr**](https://github.com/yihui/servr) can be used to set up an HTTP server to serve files under a directory.
How I am suppose to cite it in my page
---
layout: page
title: About
permalink: /about/
---
You can find out more info in this post
Could you help me out ?
You can do this 2 ways:
Copy-pasting the link generated for your post as a link to it.
[Check Out My Post!](www.example.com/posts/2015-10-1-name-of-post/)
This definitely works, but will break/fail when you decide to change link style, or have another permalink, or when you change file names.
The smarter way: Jekyll's built in post_url
Jekyll has a built in function that allows you to internally link or cite back to posts on your website. Here is the documentation for it, but I will explain the syntax and usage as well.
Assuming you want to link to a Jekyll post with the filename of 2015-07-17-jekyll-servr-tutorial.md which is located in the _posts folder, the syntax for this would be:
{% post_url 2015-07-17-jekyll-servr-tutorial %}
{% post_url /tutorials/2015-07-17-jekyll-servr-tutorial %} if you have your posts organized in a subdirectory called tutorials
The R Package [servr]({% post_url 2015-07-17-jekyll-servr-tutorial %}) if you want to make hyperlinks.
There is no need to include the file extension name when using this liquid tag function.
Here is additional information and a tutorial on how to use Jekyll post-links that you might find useful as well.
currently I'm working on static website, so I'm using jekyll to generate it. To have a nice structure and fancy URLs, I use permalinks.
permalink: /impressum/
So for example the impressum.html is rendered to impressum/index.html. And in my HTML i can simply link to that file with
<a href="/impressum">
That works for me very well. But you know, I'm a programmer. What if I want for example to change the URL to /imprint/? Well, I can change the permalink without any problems. But what's about all the other links on the site? Yeah, sure, I can use the search & replace function of my editor to change the linked URLs and check the whole site with a site checker for broken links, but that's not the fancy way I want to go. That's why I tried to create some kind of global variables with the permalink.
_config.yml:
lnk_impressum: /impressum/
impressum.html
---
layout: layout
title: Your New Jekyll Site
permalink: {{ site.lnk_impressum }}
---
But that does not work. I get this error:
Generating... error: no implicit conversion of Hash into String. Use --trace to view backtrace
So what's wrong or is there a better way?
It doesn't seem to be possible to place Liquid tags inside the YAML Frontmatter or _config files, per this SO answer.
Something else you could try is based on the approach used by the documentation pages for Bootstrap, which uses a Page Variable they call slug that provides a unique, unchanging reference to each page.
For instance, if you'd like to place a link to your impressum.html page (for which the permalink could change), you can place this code on another page, such as index.html:
{% for mypage in site.pages %}
{% if mypage.slug == 'impressum' %}
Link to Impressum page
{% endif %}
{% endfor %}
Then, in the YAML frontmatter for each of your pages, place code similar to the following:
---
slug: impressum
permalink: /my-permalink-to-impressum/
---
To change your permalinks in the future, you would just make the change to the Page Variable permalink in each page. The URLs referenced in your other pages would be automatically updated by Jekyll, as long as the slug variable remains unchanged.
I would like to use Jekyll to create a site. not a blog. Is there a way to avoid to have the creation date specified in the url and in the page's file name?
I think that the idea behind Jekyll is brilliant, but it seems too tied to blog generation content while it could be useful also in a more general use case.
In the _config file you can change the permalink to anything you like, for example mine is
permalink: /blog/:title
As for the date you can choose your own date using the YAML front matter, again in mine i have
title: example
date: you can pick what ever date you want
What the docs say:
You configure permalinks in your _config.yml file like this:
permalink: /:categories/:year/:month/:day/:title.html
If you don’t specify any permalink setting, Jekyll uses the above pattern as the default. The permalink can also be set using a built-in permalink style:
permalink: date
Although you can specify a custom permalink pattern using template variables, Jekyll also provides the following built-in styles for convenience.
date = /:categories/:year/:month/:day/:title.html
pretty = /:categories/:year/:month/:day/:title/
ordinal = /:categories/:year/:y_day/:title.html
none = /:categories/:title.html
Source: https://jekyllrb.com/docs/permalinks/
This is the basic setting I use:
permalink: pretty
This sets pages to the pretty permalink style. Thus '/contact.md' will become '/contact/'.
How I use it for blog posts:
permalink: /blog/:title/
This makes sure the path contains the (sluggified) title.
How I use it for collections:
permalink: /desiredpath/:name/
This makes sure the path contains the filename.
If you aren't producing blog pages, you can create files in the directory structure mapping to certain URLs. Running on localhost, if your directory has the structure
- _layouts/
- config.yml
- index.html
- some_other_page.html
- some_directory/
- index.html
- some_sub_page.html
You'll have content at the following locations after jekyll has processed the files:
0.0.0.0:4000 (index.html)
0.0.0.0:4000/some_other_page.html (some_other_page.html)
0.0.0.0:4000/some_directory (some_directory/index.html)
0.0.0.0:4000/some_directory/some_sub_page.html (some_directory/some_sub_page.html)
You can also use the permalink attribute on each post to set one manually, or set a different default in config.yml Permalinks only have a small subset of variables available to use and need to be defined in every single file you want to put in a non-standard location.
This directory structure will automatically categorize your posts too. So you can have:
- some_category (defined in the yaml front matter or the _config.yml
- index.html
- _posts/
- some_post.md
- some_other_post.md
And posts will automatically have the category 'some category', and index.html will appear at 0.0.0.0:4000/some-category, with the default permalink format. The category variable is available as :category in the permalink format string.
I came across this old question while looking for a way to organize jekyll pages in a _pages directory, similarly to _posts. then access this pages without displaying the whole path in the url.
The approach that worked better for me, is to use jekyll collections as follows:
1 - Add a pages collection in _config.yml :
collections:
pages:
output: true
permalink: /:path/
2 - create a new directory named _pages (it should have the same collection name, prefixed by _)
3 - add the pages in the _pages folder, as .md or .html files starting with YAML Front Matter.
eg. /_pages/about.md will looks like:
---
layout: page
---
<!-- about page content -->
after building that, the URL of the about page will be <your-web-site>/about .
Alternatively, to display a collection name, you have to define its permalink as:
permalink: /:collection/:path/