Macro in Liquid Template language - ruby

I'm using Jekyll, which uses the Liquid Template language. I've used Jinja templating in the past, and it has the concept of a macro (just a named function). Does Liquid have something which provides equivalent functionality? If not, is there some Jekyll plugin which will extend Liquid to provide it?

You can create includes that accept parameters. It's not quite a macro but it's what I've used successfully on GitHub Pages.
More details and tips for managing includes and using parameters can be found in the Jekyll documentation.
Here's an example:
_includes/email_link.html
<a href="mailto:{{ include.user.email_address }}"
title="Email {{ include.user.name }}">
<i class="fa fa-fw fa-envelope"></i>
</a>
about.md
---
layout: page
title: About
---
{% include email_link.html user=site.users.erik %}
_config.yml
users:
erik:
name: Erik
email_address: erik.gillespie#wizbang.com

This is exactly what Jekyll tags plugins are made for.

Related

Use glyphicons or fontawesome icons within rich text

Is there an easy way to use glyphicons or fontawesome icons within the rich text?
Please have a look at the following CKEditor plugin I post here as an illustration of the question. https://www.michaeljanea.com/ckeditor/bootstrap-glyphicon
I failed to find a similar plugin for Wagtail.
A functional solution though having a sub-quality UX is to use raw HTML editing. Google provides few URLs on HTML editing within Hallo.js in Wagtail CMS. The most useful are as follows:
docs. http://docs.wagtail.io/en/latest/reference/hooks.html
example. https://git.sinnwerkstatt.com/cosinnus/cosinnus-core/blob/2989a6844733c732c7ca24c13cbcd30a0dc7f99d/cosinnus/wagtail_hooks.py
After implementing the hook, it is possible to add glyphicons (and fontawesome), e.g. by adding
<ul class="fa-ul">
<li><i class="glyphicon glyphicon-user"></i>User icon</li>
<li><i class="glyphicon glyphicon-home"></i>Home icon</li>
</ul>

{{ template:body }} adding the page title

Not sure if this a PyroCMS 2.2.3 bug, but everytime I use {{ template:body }} on my default.html seems that it always add this <h2>Page Title Here</h2>. I already checked on the admin via "Content > Pages > Page types > Edit > Page Content" and I don't see any tags that I placed in there. How can I get rid of it?
This is not a bug. This is how it works. From v2.2 they have changed the page layouts and it works like this.
Your template files control the main layout of the page (default.php, etc)
Then at the Pages, you can make use of "page types", each page type can use any of your template files to replace it's contents with {{ template:body }}
Now, you can write down your page layout via admin panel Pages -> Page types-> Edit -> Layout tab which as default there is a h2 tag for title there.
<h2>{{ page:title }}</h2>
{{ body }}
This gives you the flexibility to use any kind of custom field for any of your page types.
So, simply edit the layout of the page type you are using and manage how you want to arrange contents via your *page layout*s.
I hope I could make it clear for you :)

Accessing PyroCMS Module inside Custom Theme

I have designed a custom theme and I need to be able to load a module I have made into my default.html page. I have written the following so far:
<div id="outer-content">
<div id="content">
{{ template:body }}
</div>
</div>
What do I replace {{ template:body }} with in order to display a custom module?
Maybe this will help.
In your theme, save your default.html file with the same name as your module. For example, you can create a custom layout file for the blog and save it as blog.html. When the module gets called it uses the layout file with the same name as your module.
If thats not an answer for you try posting on the PyroCMS Modules forum.

Generate sitemap in Jekyll without plugin

I just shifted my entire blog from WordPress to Jekyll. There are still some pieces that need fixing here and there, but I am facing this problem at the moment. I am unable to generate sitemaps in Jekyll. I saw that there are a couple of plugins which can do the work for me.
Information on the site:
Site hosted via Github pages
Entire site handcoded - not using JB or Octopress
It would be great if you I could get some pointers towards how to do the required.
Note: This question is not the same as it's predecessors. I am not looking for options which use _site.
As explained by John Day in this article, you can create a sitemap.xml file in the site's root with this content:
---
layout: nil
title : "Sitemap"
sitemap_exclude: y
---
<?xml version="1.0" encoding="UTF-8"?>
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
{% for post in site.posts %}
<url>
<loc>{{site.production_url}}{{ post.url | remove: 'index.html' }}</loc>
</url>
{% endfor %}
{% for page in site.pages %}
{% if page.sitemap_exclude != 'y' %}
<url>
<loc>{{site.production_url}}{{ page.url | remove: 'index.html' }}</loc>
</url>
{% endif %}
{% endfor %}
</urlset>
In _config.yml, define a variable named production_url with the site's full base URL (e.g. http://example.com).
If you want to exclude any links from the sitemap, include sitemap_exclude: y in the front matter of the page or post.
For a more advanced example refer to this article: Building a Better Sitemap.xml with Jekyll.
You could create a new file in your site root called 'sitemap.xml', and within that page use liquid tags to iterate over all pages and posts extracting the necessary data. Seems like that would do the job pretty easily, assuming that you just want to generate a page which lists every page on the site in an xml format that conforms to the appropriate standard.
Just came across this because my site is hosted on github-pages.
It seems github pages now supports this.
Just had to add to _config.yml:
gems:
- jekyll-sitemap
(You can optionally add to your Gemfile, but mine was already included via dependency)
(fun fact: jekyll-redirect-from is also supported by github pages)
You can not automagically generate a full sitemap in jekyll without using plugins.
What you could do is make your own ruby (or else) script that generates a sitemap as JSON data and then insert it in your config.yml. From there you could access that data from jekyll and display it.
But there is no built-in way to do that just with jekyll.

Configuring Jekyll for github PROJECT pages

I am at my wits end here. I've been trying to look at all other example github project pages I could find and even the blogs but none exhibit the problems I am getting. First, I am trying to create a project page for my repo. I did this by following the usual tutorials, creating a gh-pages branch in my project repo and pushing.
I managed to do these and template my files. I even managed to use HAML and SASS(they still both get converted to html/css and that's what I push to the repo so no problem there). I just think that I am configuring my jekyll wrong. First, I don't see any configurations in other people's pages that use baseurl or url on config.yml.
The problem with mine is when looping through my posts:
{% for post in site.posts %}
{{ post.title }}
{% endfor %}
It always generates the href as href="/post-title"
my _config.yml btw only has this:
permalink: /exercises/:title
The problem with this when I click the link, it always points to http://corroded.github.com/exercises/title-here when it should actually be http://corroded.github.com/projectname/exercises/title-here
I have actually tried hard coding the path by doing:
<a href="http://corroded.github.com{{ post.url }}"> and this works. It goes to the post BUT it shows it as plain text and not as the generated html. I know I am missing something very simple here but I can't seem to find it and I've been wrestling with this the whole weekend.
Oh and I forgot to add: doing this in my localhost, I can access everything at:
http://localhost:4000/ and clicking on links will get me to http://localhost:4000/exercises/title-here and IT WORKS. So I have a pretty good guess that it has something to do with the configuration.
EDIT: This answer has been added to the Jekyll documentation at http://jekyllrb.com/docs/github-pages/.
I finally figured out the trick, if you're looking for a solution with the standard URL for GitHub Pages (username.github.io/project-name/). Here's what to do:
In _config.yml, set the baseurl option to /project-name -- note the leading slash and the absence of a trailing slash.
Now you'll need to change the way you do links in your templates and posts, in the following two ways:
When referencing JS or CSS files, do it like this: {{ site.baseurl }}/path/to/css.css -- note the slash immediately following the variable (just before "path").
When doing permalinks or internal links, do it like this: {{ site.baseurl }}{{ post.url }} -- note that there is no slash between the two variables.
Finally, if you'd like to preview your site before committing/deploying using jekyll serve, be sure to pass an empty string to the --baseurl option, so that you can view everything at localhost:4000 normally (without /project-name getting in there to muck everything up): jekyll serve --baseurl ''
This way you can preview your site locally from the site root on localhost, but when GitHub generates your pages from the gh-pages branch all the URLs will start with /project-name and resolve properly.
More conversation about this problem on issue #332.
When you have a slash at the front of your permalink, it means that all URLs should be relative to the site root. This is the reason that it's going to http://corroded.github.com/exercises/title-here instead of http://corroded.github.com/projectname/exercises/title-here. Try it without the first slash:
permalink: exercises/:title
The same thing goes for any URLs you create with HTML. If you have:
<a href="/about">
it will always go to the root of the domain (e.g. http://corroded.github.com/about). If you're project is called 'projectname', you can use HTML like
<a href="/projectname/about">
to link directly to pages (e.g. http://corroded.github.com/projectname/about).
Of course, you can also use relative URLs (i.e. URLs without a leading slash) as well. You just have to be aware of where you are in the directory tree.

Resources