Jekyll use the JS variable for IF condition

Question

I'm creating a website right now in Jekyll.

I want to make a page where the content will change according to GET variables.

I've got different links as follow :

<a href="/oneBenchmark?logic=k&problem=cnf"><i class="fa fa-link"></i></a>

<a href="/oneBenchmark?logic=t&problem=cnf"><i class="fa fa-link"></i></a>

I've got also the page oneBenchmark.html as follow :

---
layout: page
permalink: /oneBenchmark/
---

<script>
    var splitUrl = function() {

        var vars = [], hash;
        var url = document.URL.split('?')[0];
        var p = document.URL.split('?')[1];
            if(p != undefined){
                p = p.split('&');
                for(var i = 0; i < p.length; i++){
                    hash = p[i].split('=');
                    vars.push(hash[1]);
                    vars[hash[0]] = hash[1];
                }
            }
            vars['url'] = url;
            return vars;
    };

    var url = splitUrl();

    var logic   = url[0];
    var problem = url[1];

    console.log(logic);
    console.log(problem);
</script>

{% for bench in site.benchmarks %}
    {% if bench.logic == logic %} 
        {% if bench.problem == problem %}           
            {{bench.content}}
        {% endif %}         
    {% endif %}
{% endfor %}

The little Javascript code gives me 2 variables "logic" and "problem" which contain the value in the URL.

I would like in the IF of Jekyll, to use my JavaScript variables in order to check which content I should display.

Unfortunately, I have no idea how to call my JavaScript variables in this IF nor how to achieve this goal differently :/

Thanks in advance for your help !

Answer 1

Jekyll is a static site generator and you want to use it to generate a dynamic content. You are missing the purpose of using Jekyll. I think it's a bad idea with emphases on bad!

Jekyll creates the content up a head this mean that once you get to your page it's already created because it's a static generator and it can't create content on the fly!.

Even if you filter your way using javaScript you have no way of asking Jekyll for a specific data and re-generate that data as a new page content. As I see it your only option is to generate the whole data to the page as content using Jekyll and then use javaScript to hide/show the relevant content.

As I previously said I don't recommend using Jekyll that way and it won't scale on the long run. This also lead's to a very bad user experience:

• Scenario 1: User wait's for the page to render itself while seeing content appears and disappears from the screen - not knowing when the page is finally ready with the correct content.

• Scenario 2: hide the entire content and present a message to the user "please wait content loading..." User may end up waiting for a long time for the process to end and then get the correct page content).

I think you need to re-check all of your site requirements and choose the correct technology to implement it. Maybe Jekyll isn't exactly what you need.

jekyll javascript liquid