Is there a way to include custom css tags in a jekyll site while using markdown for the entry files; for example, when I want to highlight a certain paragraph?
Markdown nor YAML FrontMatter have this built in. But you can make it yourself.
Say, you have foo.css that you want to include on certain posts.
In _posts/2013-02-03-higligting-foo.markdown:
---
css: foo
title: "Drupal Imagecache security vulnarability with DDOS attack explained"
tags: [drupal, imagecache, security, ddos]
---
Then, in _layouts/default.html:
{% if post && post.css %}
<link rel='stylesheet' type='text/css' href='public/assets/{{ post.css }}.css' />
{% endif %}
If a post is shown, and the post has a variable defined, css, then use that to include the css file with the name. Note that this does not test wether the filename is correct, whether the css-file exists and so on.
If you mean can you give a particular paragraph in your Markdown document a specific class, you technically can, by just typing the paragraph tag the way you want it:
My **first** paragraph
<p class="mySpecialClass">My **second** paragraph</p>
My **third** paragraph
and Markdown will pass your p tag through to the resulting HTML.
However, Markdown gives up on parsing content inside tags you type yourself, so your paragraph's content won't be treated as Markdown — e.g. the word **second** in that paragraph won't show up as bold.
I switched to Textile for Jekyll posts because of this behaviour.
Good luck!
you should be able to put html tags in your markdown document, and it should parse them no problem. for example:
#This
is a paragraph <span style="background-color:yellow">with highlighting</span>
Related
and pardon what might be a repeat question, the solutions to the others didn't solve my problem. I'm working on a Hugo site and attempting to embed an iframe. The element shows but the I get the message 'This content is blocked. Contact the site owner to fix the issue.' when it loads, so no one can see the content.
Here is my .md information
+++
title = "Resources"
description = "Hugo, the world's fastest framework for building websites"
date = "2019-02-28"
aliases = ["about-us", "about-hugo", "contact"]
author = "Hugo Authors"
+++
<iframe src="//docs.google.com/spreadsheets...."></iframe>
I've also updated my config.toml file by adding the following:
[markup.goldmark.renderer]
unsafe = true
I'm not sure what I'm missing. Please let me know if you need more information about what I've done. I've tried shortcode as well but that doesn't render anything at all (I'm still new to shortcodes which is why I am embedding the iframe).
Thank you for your time and consideration.
For those who just want to embed an iframe into a Hugo site, like the question title says:
In the examples below, the content between --- is called front matter and it is in YAML syntax. You can add here your own structured data or use predefined Hugo's front matter fields. The rest of the file (below the second ---) is a standard Markdown syntax formatted content.
You don't need to use the YAML syntax in your front matter. Also TOML and JSON formats are supported by Hugo (see docs)
Solution 1: direct HTML in the content
You can add the HTML code itself to the Markdown content (like T.J.'s .md file example in the question). Hugo's markdown engine will then render the iframe as it is.
---
title: "Your title"
description: "Your description, you can add more fields below of course..."
---
<iframe src="https://example.com/"></iframe>
Solution 2: custom shortcode
You can implement your own shortcode which can be useful when using some kind of CMS or in a case when you want to style the iframe somehow.
<!-- layouts/shortcodes/iframe.html -->
<iframe src="{{ .Get 0 }}"></iframe>
You can then add iframes to your content in markdown files like this:
---
title: "Your title"
description: "Your description, you can add more fields below of course..."
---
{{< iframe https://example.com/ >}}
Shortcodes allow you also to create named attributes so you would use the shortcode like {{< iframe url="https://example.com/" >}}. The benefit of this solution is that you are free to set up the HTML code that will be rendered when using the iframe shortcode. For more information, see the shortcode docs.
Solution 3: using the front matter
If you build your page from predefined blocks or components or the page is a very simple one where you for example don't use the markdown content but just the front matter fields, you can be interested in this solution which is basically just using the front matter for storing the iframe's URL or other settings you want to use during the HTML rendering.
---
title: "Your title"
description: "Your description, you can add more fields below of course..."
iframe: "https://example.com/"
---
In your layout file, you will get this piece of information by using {{ .Params.iframe }}.
Is it possible to set the initial page in blogdown? Instead of the default one that shows the posts I would like to have a custom one. I want to have my own index.html (the root one).
Thanks.
Assuming you are using Lithium - A simple responsive Hugo theme, one possible way to do this is the following.
1] Copy layouts/_default/list.html to a new layout file named layouts/_default/home.html
2] Edit layouts/_default/home.html so it contains this:
{{ partial "header.html" . }}
<main class="content" role="main">
<h1>
My heading
</h1>
<p>
My paragraph
</p>
</main>
{{ partial "footer.html" . }}
Your home page will now contain "My heading" and "My paragraph," along with the Lithium header and footer. If you do not want to use the Lithium header and/or footer, remove those partial calls from home.html.[*] There's a lot more that you can do with Hugo layout files, which you can learn about in my Hugo tutorial in the section 15. Explore the layouts directory and at gohugo.io's Category: templates.
I hope this is enough to get you started with Hugo layout files.
[*] If you remove the header partial, you need to put something like <!doctype html><title>a</title> at the top. More about this is in What's a valid HTML5 document? - Stack Overflow
I have a DocFX site with a number of pages. I would like to include tags at the top of each page via custom template, and I'd like for authors to be able to add tags in the YAML frontmatter, e.g.:
---
title: My Page Title
tags: tag1;tag2;tag3
---
I would then like to be able to access those tags as some sort of array and process them when generating the HTML output.
I've read the docs here which suggests that I can add a schema.json file somewhere and this will automatically detect items in the schema. What I can't work out is how to access the YAML frontmatter in my template when generating the output.
If I need to write a custom .NET plugin to do this then that isn't an issue, but I believe I should be able to access these properties in the template somehow.
Any guidance at all would be very gratefully-received!
I managed to eventually work this out.
In my custom template I have a conceptual.html.primary.tmpl file which provides access to the frontmatter:
<div id="tags">
{{#tags}}{{tags}}{{/tags}}
</div>
Obviously I now need to process the tags, but I now get HTML produced as expected from my .md files:
<div id="tags">
tag1;tag2;tag3
</div>
I have this static page built with Jekyll and host with GitHub Pages (repo), and I wanted to track it with Google Analytics.
I was following this tutorial.
But I've reached the step where it says:
Finally, open _includes/head.html and add the following code just before the end tag.
And actually my theme has no _include/head.html file!
So my question is, if I create a file called _include/head.html should it be automatically included in every page built by Jekyll? (I tried creating such a file and adding a placeholder image to see if that worked but it didn't)
The code that follows that quote should be included in every html page built by Jekyll, right? Like, that is what I want for it to work, no? So if I put it in footer.html instead it should work?
If you create that file, as the tutorial suggests, then you can use it everywhere, (in your layout for example) so every time you include it, it gets rendered.
Create the file _includes/head.html with the analytics content.
Then in your layout include it where you want it to appear like:
{% include head.html %}
Then you can place all your code that goes in your head there, so you have a cleaner layout
side note
I prefer to have the analytics code following Google recommendation immediately after the opening <body> tag. So my default layout looks like:
<!DOCTYPE html>
<html>
{% include head.html %}
<body>
{% include ganalytics.html %}
{% include header.html %}
{{ content }}
{% include footer.html %}
</body>
</html>
and _includes/ganalytics.html just contain the analytics code.
Simple add analytics marker in _layouts/default.html head tag. No need to add a head include.
I've been playing around with a theme for a ghost blog (ghost.org). It uses handlebars for its templates and I've been looking at existing ones to see what is possible and what isn't.
I have come across {{!< default}}. default is the name of a template.
What does !< mean?
If you look in the index.hbs file of the default theme you'll find this comment:
{{! The comment above "< default" means - insert everything in this file into
the {body} of the default.hbs template, which contains our header/footer. }}
It simply tells the page which parent template it should be inserted into
According to official page section about comments, {{! }} is used to mark a template comment. So, basically < default - just a comment which is simply being ignored.
EDIT:
Also in mustache man page it's clearly stated:
Comments begin with a bang and are ignored.
So, I presume, it's safe to say, that if tag starts with !, it's not going to be rendered.