Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Can I add blocks or variables to markdown content to render into layout sections #685

Open
KyleMit opened this issue Sep 6, 2019 · 5 comments

Comments

@KyleMit
Copy link

commented Sep 6, 2019

My goal is to do something like this:

Template Sections

I've tried two different approaches for getting there so far (but both fall short)

A) Using set

Setting a styleSection variable inside my markdown file like this:

---
title
---

## My Content 

{% set styleSection %}
<style> body { background: red; } </style>
{% endset %}

And then outputting the variable in the layout like this:

<html lang="en">
<head>
    {{ styleSection | cssmin | safe }}
</head>
<body >
    {{ content | safe }}
</body>
</html>

However, the variable seems local to the markdown scope, so it's not available to the layout page

B) Using block

So the layout template looks like this:

<html lang="en">
<head>
    {% block styleSection %}
    <!-- placeholder -->
    {% endblock %}
</head>
<body >
    {{ content | safe }}
</body>
</html>

And the markdown file attempts to override that block placeholder

---
title
---

## My Content 

{% block styleSection %}
<style> body { background: red; } </style>
{% endblock %}

However, I believe this only works with template inheritance, which I'm not sure how to specify within a markdown file

Any ideas / suggested approaches to how to do this?

The easy workaround is too just keep the <style> and <script> tags inline. I have HTML enabled inside of markdown, and it doesn't really matter to the dom where those things show up, and . I'm just trying to prevent FOUC by rendering styles early and deferring optional JS to the bottom to make sure it loads last (any potentially has access to other scripts that have run if need be)

@KyleMit KyleMit added the education label Sep 6, 2019
@mirisuzanne

This comment has been minimized.

Copy link

commented Sep 6, 2019

As far as I know you can't do it in a markdown-parsed file, but you could have the file parse as nunjucks, and then add a "paired shortcode" for markdown rendering:

  eleventyConfig.addPairedShortcode("markdown", (content, inline = null) => {
    return inline
      ? markdownIt.renderInline(content)
      : markdownIt.render(content);
  });
{% markdown %}
# I can write *markdown* in this paired shortcode…
{% endmarkdown %}
@KyleMit

This comment has been minimized.

Copy link
Author

commented Sep 10, 2019

@mirisuzanne , thanks, that probably looks like the best strategy.

For whatever reason, I have an easier time picturing a little bit of html in my markdown than a adding some markdown to my html, especially for content heavy pages. Plus, I really like the authoring support I get from having the .md extension in terms of syntax highlighting, native readability, shortcuts, and static previews.

Thank you so much for the suggestion - If I really have a strong perf use case for ordering markup, I'll probably need to go that route

@mirisuzanne

This comment has been minimized.

Copy link

commented Sep 10, 2019

Yeah, I’m with you. The other solution I’ve used is to put more things into my YAML - both html and markdown - so I can retain the MD highlighting on the page, and render those yaml blocks wherever I need in the template. Looking at your diagram above, that’s probably where I would put extra CSS and JS.

@KyleMit

This comment has been minimized.

Copy link
Author

commented Sep 10, 2019

Hmm... yeah, in the scripts case, I'm actually authoring it externally and just pulling in the <script src="..."> for that page, so adding that to the yaml wouldn't be too bad:

---
title: How To Cat
stylePath: /_includes/scripts/posts/how-to-cat.css
scriptPath: /_includes/scripts/posts/how-to-cat.js
---

Then it would be pretty easy to maintain a nice authoring experience for JS/CSS and pull in into the rendered page wherever you want

@Ryuno-Ki

This comment has been minimized.

Copy link
Contributor

commented Oct 8, 2019

Your last solution is actually quite close to what I use. But instead of a single value I have an Array there.
This way I can declare a list of dependencies.
In the template I check whether the key is set and if so iterate over its content.
You could define another key for inlined dependency if you want to modify the critical path.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
3 participants
You can’t perform that action at this time.