I am new to Jekyll. I have a post with the following yml front matter:
---
layout: images-grid
title: Grid Sample
image: "/imgs/image1.jpg"
---
I would like to create .rb plugin that identifies all the posts with "layout = images-grid" and adds the height and the width of the image as a yaml metadata so the height and the width will be available to the liquid templates.
Is there any way to do this?
could you not do something like this in your file?
{% if page.layout == images-grid %}
// do something
<img src="{{image}}" class="image-class"/>
{% endif %}
I'm looking for something similar (well not really similar, but the goal is the same, use a plugin to edit the front-matter of a post or posts).
So far the only option that I've found is to actually use the ruby File class to open and edit the file. So something like:
fileHandler = File.open("2013-11-23-post-title.html", "w+")
and then read in lines, editing/adding your new content to the front matter as necessary, i.e.:
fileHandler.puts "height: 480px\n width: 640px"
It would be nicer/ideal if the front-matter was available for manipulation as an attribute of the page or post object, but I don't think it is. I'm going to check the project page on github to see if there is already a feature request open for that.
Related
I'm really excited to see that we can apply a block assignment for set through Nunjucks. What would be the correct way to allow HTML to be passed through this approach?
I want to do the following from my initial nunjucks file:
{% set demoSetBlock %}
<div class="mClass">
<p>a header value in a nunjucks set block</p>
</div>
{% endset %}
I then want to call it into my nunjucks template like so...
{{demoSetBlock}}
but...it's printing out the content along with the HTML markup on the web page, just like this...
<div class="mClass"> <p>a header value in a nunjucks set block</p> </div>
How can we render this so that it shows it as...
a header value in a nunjucks set block
Not sure if this is the official way of resolving the situation, but what appears to be working for me now is using |safe as an attribute when the set block is called, like so:
{{demoSetBlock|safe}}
as a result, my HTML is perfectly rendered on the browser.
This is helpful in cases
when I don't want to depend on macros.
when I want to depend on set as an instrumental component for defining and passing data through various parts of my templates.
where I have other include files (i.e. _include-header.njk, _include-footer.njk) that are directly attached to my main template file. I could then use set block for one of these files.
On the main page of every repository in GitHub or BitBucket it shows the Readme.md in a very pretty format.
Is there a way to make the same thing with ruby? I have already found some gems like Redcarpet, but it never looks pretty. I've followed this instructions for Redcarpet.
Edit:
After I tried Github's markup ruby gem, the same thing is happening.
What is shown is this:
And what I want is this:
And I'm sure it's not only css missing, because after 3 backquotes (```) I write the syntax like json or bash and in the first image it is written.
Edit2:
This code here:
renderer = Redcarpet::Render::HTML.new(prettify: true)
markdown = Redcarpet::Markdown.new(renderer, fenced_code_blocks: true)
html = markdown.render(source_text)
'<script src="https://cdn.rawgit.com/google/code-prettify/master/loader/run_prettify.js"></script>'+html
Generated this:
Github provides its own ruby gem to do so: https://github.com/github/markup.
You just need to install the right dependencies and you're good to go.
You need to enable a few nonstandard features.
Fenced code blocks
Fenced code blocks are nonstandard and are not enabled by default on most Markdown parsers (some older ones don't support them at all). According to Redcarpet's docs, you want to enable the fenced_code_blocks extension:
:fenced_code_blocks: parse fenced code blocks, PHP-Markdown style. Blocks delimited with 3 or more ~ or backticks will be considered as code, without the need to be indented. An optional language name may be added at the end of the opening fence for the code block.
Syntax Highlighting
Most Markdown parsers to not do syntax highlighting of code blocks. And those that do always do it as an option. Even then, you will still need to provide your own CSS styles to have the code blocks styled properly. As it turns out, Redcarpet does include support for a prettify option to the HTML renderer:
:prettify: add prettyprint classes to <code> tags for google-code-prettify.
You will need to get the Javascript and CSS from the google-code-prettify project to include in your pages.
Solution
In the end you'll need something like this:
renderer = Redcarpet::Render::HTML.new(prettify: true)
markdown = Redcarpet::Markdown.new(renderer, fenced_code_blocks: true)
html = markdown.render(source_text)
As #yoones said Github shares their way to do it but to be more precise they use the gem "commonmarker" for markdown. Though as far as I can tell this thing does not give the full formatted HTML file but only a piece that you insert into <body>. So you can do it like I did:
require "commonmarker"
puts <<~HEREDOC
<!DOCTYPE html>
<html>
<head>
<style>#{File.read "markdown.css"}</style>
</head>
<body class="markdown-body Box-body">
#{CommonMarker.render_html ARGF.read, %i{ DEFAULT UNSAFE }, %i{ table }}
</body>
</html>
HEREDOC
Where did I get the markdown.css? I just stole the CSS files from an arbitrary Github page with README rendered and applied UNCSS to it -- resulted in a 26kb file, you can find it in the same repo I just linked.
Why the table and UNSAFE? I need this to render an index.html for Github Pages because their markdown renderer can't newlines within table cells, etc. so instead of asking it to render my README.md I make the index.html myself.
On my blog that is powered by GitHub Pages, I'm trying to make it easy to include code snippets in my blog posts. For this, I have created code-snippet.html in the _includes-directory:
<pre><code>{% include {{include.file}} %}</code></pre>
To include a code snippet in a blog post, I use the following code:
Code snippet: {% include code-snippet.html file="snippets/MyPost/MySnippet.cs" %}
However, the content of the file _includes/snippets/MyPost/MySnippet.cs does not get included. If I output {{include.file}} in code-snippet.html I can see that the parameter is passed in correctly, but if I try to include it, I get nothing.
That's a good question. Here is my two cents.
Here, I took the example of your _posts/2012-11-16-idisposable.html post.
Storing code snippets
As code is part of the post's content I logically move it to the _posts folder. Storing it in the _includes folder is not so good as this is a template folder.
Let's copy the idisposable/TryFinallyDispose.cs.html from _includes/code-snippets to _posts/_code or anything you want.
As the code is stored in an underscored folder (_code), it will not be processed as is by Jekyll. We will just 'include' it in our posts.
Note : code snippet can be saved as code.cs
As we will use highligting from Jekyll dependancies (see below), we just rework code snippet by, removing <pre> and <code>.
It becomes :
var x = new X(); // X is a class that implements IDisposable
try
{
// do something with x
}
finally
{
x.Dispose();
}
Displaying code
Jekyll offers various ways to highlight code (markdown, pygments, rouge, ..). Here I demonstrate the pygments way, but it's up to you to explore other solutions.
The base template will be (_includes/code-snippet-csharp.html):
{% capture filePath %}_code/{{include.file}}{% endcapture %}
{% highlight csharp %}
{% include_relative {{filePath}} %}
{% endhighlight %}
note: one drawback here, in the {% highlight csharp %}, code name is hardcoded. I found no way to pass the language to the highlight tag as a variable. If you want to use multiple languages, you'll need to duplicate the include template as code-snippet-csharp.html, code-snippet-js.html, ...
Styling code
In order to beautify our code, we need an extra css file. The basic one is here, but there is many more.
Style is saved as assets/syntax.css and included in _layouts/default.hmtl :
<link rel="stylesheet" href="{{site.baseUrl}}assets/syntax.css">
And it can also be included in your sass process.
Including code in posts
We now just have to call our code in _posts/2012-11-16-idisposable.html.
{% include code-snippets/idisposable/TryFinallyDispose.cs.html %}
Is replaced by :
{% include code-snippet-csharp.html file="idisposable/TryFinallyDispose.cs.html" %}
Result
Better content structure and a nicely highlighted code !
You can include code like this
~~~
{% include snippets/MyPost/MySnippet.cs %}
~~~
So I finally got a blog going on gh-pages branch in a github repository using jekyll, and the theme lanyon. I love it. But something still bothers me.
On pages, the 'link' at the top of the article seems to default to a url I haven't really specified. This is what the top of my [YYYY-MM-DD-NAME].md files looks like...
---
layout: post
title: Page Name Here
---
Now, it renders okay, but Page Name Here shows up at the top, and is clickable, but I cannot figure out where to set the base url that it goes to. As it renders now, it does ...
[site root]/[page full filename]
but it should be ...
[site root]/[repo name]/[page full filename]
And I'm not clear on which variable in _config.yml I need to set to make this work right. Any suggestions?
As you're using Jekyll Bootstrap a post url tag is like this :
{{ post.title }}
You could also work with creating a url variable in _config.yml
url: www.website.com
and then creating a layout for posts with.
{{ post.title }}
I'm trying to change the style of a blog post (for instance change the title color), based on the labels associated to the post.
I'm a bit new to the templating, so I though I would be going to add a class with the label in the title <h3> element, and then add my CSS rules.
So I found this which would generate a proper list of labels separated by a space:
<b:loop values='data:post.labels' var='label'><data:label.name/> </b:loop>
However, it seems the validator does not let me add this inside the class attribute as follow:
<h3 class='post-title entry-title <b:loop values="data:post.labels" var="label"><data:label.name/> </b:loop>'>
From there, I found half the solution. Apparently, I should use expr:class instead of class as follow:
<h3 expr:class='"post-title entry-title " + data:list_of_labels'>
So now:
- How can I build this variable data:list_of_labels? (basically how to set a variable)
- Is there a full description of the template syntax somewhere?
- Is there another way to go around this?
Thanks,
JB
This should do it. Using XML entities allows you bypass the XML validation and move the Blogger functions to where you need them. Longer explanation here: http://www.karlhorky.com/2012/06/add-blogger-labels-to-post-as-css.html
<div class="post<b:if cond="data:post.labels"><b:loop values="data:post.labels" var="label"> <data:label.name></data:label.name></b:loop></b:if>">
<data:post.body>
</div>
There is no way to set variables in the blogger data xml, however you can set variables using javascript.
There are many pages on the blogger data xml. Google is your friend. For example this one.
You are on the right track: do a loop, use javascript to check for the combinations you want, change the style properties or load a css file dynamically.