Including HTML inside Jekyll tag - html

Instead of writing out {% include link_to.html i=5 text="hello world" %} all the time, I've written a custom tag that allows me to do {% link_to 5 hello world %}. It finds the page with data i equal to 5 and creates a link to it.
But it feels clunky to generate HTML strings from inside the tag code, and it is awkward to write complicated code logic inside the HTML include code. So is there a way to have the tag definition do the heavy lifting of finding the relevant page to link to, and have it pass on what it found to link_to.html to render? Sort of like the controller passing information on to the view in Rails.

javascript.accessObject(ObjectName, Location).reason(NumberOfColumns);
API.Go.javascript.Obj = new Runtime(4); // how many seconds we want the page to take when loading.

Related

Markdown/html not parsing correctly in eleventy from frontmatter generated by Netlify CMS

I've been stuck on this for an embarrassingly long time. I have two inputs that aren't displaying correctly, a markdown widget and the list widget. They both appear as one long string. I thought I needed to add a markdown parser for the former at least so I'm using markdown-it in a manner similar to this:
https://github.com/11ty/eleventy/issues/236
It is adding paragraph breaks where they should be but they show up on the page as p tags. I thought this was because I already had the parsed text nested between p tags but if I delete those nothing shows up at all. When I look at the html file created by eleventy, the tags show up as "&lt ;p&gt ;" (without the spaces) which it seems the browser isn't reading correctly when trying to interpret the html. I'm using nunjucks for templating if that matters. My .eleventy.js file looks like this currently. What am I missing? Also the markdown filter seems to only want to take a string so I'm not sure where to even begin with the list.
By default, Nunjucks HTML-escapes all variables when outputting templates. This is what you want most of the time, unless you're trying to render HTML input.
You might want to try using the safe filter after your markdownify filter.
{{ markdownContent | markdownify | safe }}

Can I generate a references index/ book index from markdown to html (ideally in a static site)?

For an academic project, I would like to make an index. You know, that boring list of words that indicates in which pages every word listed is. This : https://www.pdfindexgenerator.com/what-is-a-book-index/. But for a website.
My goal is, let's say, from Markdown, to generate HTML pages. I would love to do this with a static site, because the content won't evolve every day, and it appears to me that I'd have to parse all the content anyway. Maybe the solution is just using a wiki.
Here's how I would have done it : you write a bunch of text into page.md, inside this text you identify a [word] that you want to see in your index with a specific markup. And then you mention this same [word] with the same markup into otherpage.md.
Then, the generator extracts all the marked words, makes a list, and generates a page with the links to all the references to each marked word.
Word:
page.html
otherpage.html
A reference index. Yay.
What I want is like a simpler version of LaTeX's MakeIndex. Like, closer to this https://wordpress.org/plugins/lexicographer/, but not for definitions, only for internal references.
Pandoc seems to not be supporting indices, maybe because MakeIndex is very complex (but indices are actually, so well, that's fair play) or just because it's made for page numbers and not html links.
So :
I know indices are actually complicated stuff. It's impossible to fully
automatize. My only goal here is to be able to tag the words as I
write and having some computer help to make the listing at the end and render a neat HTML page
with all the links because this part is really boring (like MakeIndex does). But maybe just this
part is impossible and I'd be fine with this.
Is this already implemented somewhere, if it's not impossible? There is plenty of static sites and wikis and stuff, maybe someone thought about it before me, as indices are academic stuff used for CENTURIES. Maybe there's a plugin or a piece of software I just don't know.
I would appreciate just pointers to know where to go to do this if its doable. There is a start here How to generate (book) indexes? but it's too little for me to understand what to do next.
Thanks a lot <3
Using Pelican you can use tags that way.
You can add the following to your index.html template to loop through existing tags :
{% if tags %}
{% for tag, articles in tags %}
{{tag }} :
<ul>
{%for article in articles%}
<li>{{ article.title }}</li>
{% endfor %}
</ul>
{% endfor %}
{% endif %}
Then you will get the following result :
You can't directly tag your text the way you showed though. You'll have to add the tag line in your article's headings :
Title: mytitle
Date: 2020-05-19
Tags: firsttag, othertag
...
You can add this to your index.html template or to tags.html, as you see fit.

Unable to render variable in django template that contains HTML

I'm passing down a variable to a django template that contains an html. For example <strong>example</strong>. I mark this string as mark_safe() before storing it in my variable.
When I load it into the template and load the page in my browser it shows the html as plain text, <strong>example</strong>.
If I look at it in the chrome console the only thing that is different is that the text is surround with parenthesis. So it would look like this, "<strong>example</strong>"
Like I said I've read through all the other stackoverflow posts and marked the variables using the {% autoescape off %} tags and I've tried 'safe' tag. These will remove the escaping, but the HTML still doesn't render. Below is the actual html unescaped. I'm wondering if it's the space in front of it?
<p>Modern Comics That Are Valuable But Often Overlooked and Should Be Sought Out In Dollar Bins and In Your Own Collection</p>
<p><strong><em>Its Like Having $-Ray Vision</em></strong></p>
Thanks for the help.
The escaped string first needs to be parsed to HTML. Then you can unescape that string and pass it down and it will be rendered correctly.
import html.parser
html_parser = html.parser.HTMLParser()
description = html_parser.unescape(category.description)

How to tune layout for a particular page/post in Jekyll?

I would like to make some changes in Jekyll's layout. Changes are small and different. For example, linking an additional CSS or JavaScript file. Or adding some info in header. Or tuning page title.
Important that these changes depend on a page/post.
Since changes are small and diverse, creating a special layout for each of them seems to be too expensive.
I tried to create my own solution but run into impossibility to use variables in including instructions.
Has anyone solved something similar? For example, linking a special CSS to a particular post?
You can use YAML front matter to tune anything you want for any post/page. Any info you provide there would be accessible through in layouts and includes under page variable or under specific post in any list of them.
This sounds like a solution for your case: you could use YAML front matter like this:
---
extra_css:
- foo.css
- dir/bar.css
- /s/baz.css
---
And then use this in your layout's header like this:
{% for css_name in page.extra_css %}
<link rel="stylesheet" href="{{ css_name }}">
{% endfor %}
In such way you could add any logic based on what data you provide with a post in YAML front matter.
If you'd like to abstract some of those logic to modules, you can use a hack around the includes, assigning a variable before that include and then using it inside. Here is a link with a description how it's made in Jekyll Bootstrap project (btw, the site for it have a lot of nice info on Jekyll).
And, yes, Jekyll don't allow the use of variables in includes, so if you'd like to include something conditionally, you would need a list of all available includes somewhere and then create all the conditions for inserting one or another when you'll need them.
Another solution is to divide everything in layout to includes, and make layouts with different levels of complexity — this way you could set any of those basic layouts for post and then write any extra code with includes of any blocks you'll need from the basic layouts, so you post could look like this:
---
layout: custom
---
<aside class="sidebar">
{% include comments.html %}
{% include sidebar.html %}
</aside>
<div class="content" role="main">
Foo bar baz
</div>
There you could use a custom layout that don't include a basic layout for page and don't include the sidebar and comments, so you could per-post decide what level of layout you want and then redefine anything that needed to be redefined.
Also, if you'll need to tweak different places but with an unknown content, you could use YAML front matter with blocks, like
extra_head: |
<style>
* {background: red}
</style>
then you could call such variable from head: {{ page.extra_head }} and get any content you placed there. However, you can't use any liquid tags inside YAML, but you could then use any YAML tags on such variables, so you could markdownify them or replace any strings inside with anything else by simple replace filter.
And if nothing of those fit you, then Jekyll won't fit you — as I wrote in a comment, Jekyll is just a blog engine and you shouldn't wait it to be complex as XSLT.
I have ever tried to create an independent page in the jekyll-bootstrap static site. For example my_cv.html which needs independent css style. Instead of create a new github repository with gh-pages (sorry GitHub), I just simply fill all the final html contents into the a post my_cv.md since markdown format is actually compatible with html I think, and luckily it works.

How do I reuse HTML snippets in a django view

I am working on a django project (my first), and in one of my views, I have a sophisticated html snippet with JS weaved within it. I would like to reuse this "component" somewhere else in the same view. Is there a way of achieving this? Please let me know if this design is faulty to begin with?
Use the {% include '/my/common/template.html' %} templatetag.
Loads a template and renders it with
the current context. This is a way of
"including" other templates within a
template.
The template name can either be a
variable or a hard-coded (quoted)
string, in either single or double
quotes.
I know it's an old one but maybe someone is gonna have use of this answer.
There's also the inclusion tag. It's like the include tag, only you can pass it arguments and process it as a seperate template.
Put this in my_app/templatetags/my_templatetags.py:
#register.inclusion_tag('my_snippet.html')
def my_snippet(url, title):
return {'url': url, 'title': title}
and then my_snippet.html can be:
{{ title }}
then, to use this snippet in your templates:
{% load my_templatetags %}
{% my_snippet "/homepage/" "Homepage" %}
More info:
https://docs.djangoproject.com/en/dev/howto/custom-template-tags/#howto-custom-template-tags-inclusion-tags
Not sure, if you like to reuse your HTML in different templates (rendered by different views). If so, look into Django's template inheritance mechanism:
The most powerful -- and thus the most complex -- part of Django's template engine is template inheritance. Template inheritance allows you to build a base "skeleton" template that contains all the common elements of your site and defines blocks that child templates can override.
You should try Django custom template tags. This way you will keep your snippets in an external file and then call them easily by something like {{ your_custom_tag }}. It's a very convenient method for working with reusable chunks of xhtml markup. You can even use arguments with these custom tags, something like {{ your_custom_tag|image:"logo.png" }}.
You can learn more about custom tags here.