Generate Jekyll Liquid content without including it (just from JQuery load function)

Question

Well, I'm trying to doing $('element').load() call. Because, I want to load content only on desktops and tablets, not in mobile. So to avoid data redundancy I'm doing the following (after my $(document).ready(func...)):

  $('section[data-showif="only-sm"]').each(function(index) {
     if($(window).width() > 992)
         $(this).load("/html/" + $(this).data("htmlinclude") + ".html");
  });

I have a section with the following data:

<section id="github-cards" data-showif="only-sm" data-htmlinclude="github-cards-content">
</section>

And then, in my html/github-cards-content.html file I have this:

<div class="container gitcards">
    <div class="row">
        {% for repo in site.data.repos %}
            <div class="col-md-4">
                <div class="github-card" data-github="{{ repo }}" data-theme="default"></div>
            </div>
        {% endfor %}
    </div>
</div>

This is not important, but I'm using Github Cards to display my projects.

And this is my yml file under: _data/repos.yml:

- "uta-org/QuickFork"
- "uta-org/ZWSetup"
- "uta-org/uzLib.Lite"

This work perfectly if I only just put the contents from github-cards-content.html into my section. But if I do what I explained, the Liquid code is shown (I want to avoid it).

I could imagine that I can't load liquid templates/content without calling {% include file... %}, but I want to know if there is any workaround for this.

EDIT:

This what a guy said:

Liquid is rendered server-side so you will not be able to render liquid after the page loads using jquery. You can circumvent this issue by inserting whatever code resides in 'liquidcode.html' from the very beginning, but hiding it by adding a class to the div with display set to none. You can then remove that class when the user clicks on "Click".

https://stackoverflow.com/a/44398827/3286975

I could imagine something like that. But is there any plugin that makes server to render without sending data to the client until needed? (I need this because in mobile I need to avoid as less as possible data to be sended to the client, because of roaming)

Aaron Sarnat · Answer 1 · 2019-06-03T04:57:32.480

I'm not 100% sure I understand what you're having trouble with. It would be helpful to see examples of the issue you pointed out, as it is ambiguous:

This work perfectly if I only just put the contents from github-cards-content.html into my section. But if I do what I explained, the Liquid code is shown (I want to avoid it).

That said, it might be helpful to point out that Jekyll will parse liquid syntax in any file that has a front-matter block at the top:

---
---

// Some code...

This includes Javascript files as well as HTML, CSS, etc. If you have those hyphens at the top, you can add dynamic template logic via liquid syntax.

It should also be pointed out that Jekyll is a static site generator. That means that it does not serve real-time dynamic views the way PHP or other scripting languages do. Once the static assets are generated and served, there is no way to execute additional logic via liquid, as at that point you're in static HTML land.

Generate Jekyll Liquid content without including it (just from JQuery load function)

1 Answers1