Jekyll Styles not rendering either on localhost:4000 or my Github, anyone to advise? - styles

I'm using trying Jekyll Bootstrap for my blog. I've been coding with Ruby and RoR for a while. I managed to host my app on Github Pages (https://mukunzichild.github.io). However as you can see, CSS styles (Bootstrap 3) are not rendering.
I've searched on google but came up with nothing. Some people have had problems with Jekyl styles with version 3, but it was not like mine.
I even cloned the Jekyll bootstrap repo, and it only fires HTML when I run it locally. I haven't changed anything in the default files.
Let me know if there is anything I'm missing here.

It's A Jekyll Bootstrap problem (see issue here).
You can resolve this by changing bugged code in your _includes/JB/setup by former code :
{% capture jbcache %}
<!--
- Dynamically set liquid variables for working with URLs/paths
-->
{% include JB/is_production %}
{% if site.JB.setup.provider == "custom" %}
{% include custom/setup %}
{% else %}
{% if is_production and site.JB.BASE_PATH and site.JB.BASE_PATH != '' %}
{% assign BASE_PATH = site.JB.BASE_PATH %}
{% assign HOME_PATH = site.JB.BASE_PATH %}
{% else %}
{% assign BASE_PATH = nil %}
{% assign HOME_PATH = "/" %}
{% endif %}
{% if site.JB.ASSET_PATH %}
{% assign ASSET_PATH = site.JB.ASSET_PATH %}
{% else %}
{% capture ASSET_PATH %}{{ BASE_PATH }}/assets/themes/{{ page.theme.name }}{% endcapture %}
{% endif %}
{% endif %}
{% endcapture %}{% assign jbcache = nil %}

Related

include into if with nunjucks in nodejs

I working on user's system with nodejs.
I used express and nunjucks.
I trying to render a template when the user logged to the site and anoter template when the user logoff.
{% if isLoging %}
{% include "toolbar_guest.html" %}
{% else %}
{% include "toolbar_guest.html" %}
{% endif %}
but its not working...
if I try this:
{% if isLoging %}
connected
{% else %}
not connected!
{% endif %}
its work..
{% include 'toolbar_user.html' if isLogging else 'toolbar_guest.html' %}

Twig embed and variable scope

I'm running into some problems when nesting twig embeds, more particularly when both embeds have the same variable defined.
An example: a simple code excerpt from a form layout with a fieldset, some rows and input elements (removed some variables for clarity):
{% embed 'components/frmGroup' with {'id':'myFieldset'} %}
{% block main %}
{% embed 'components/frmRow' with {'id':'mySpecialFormRow'} %}
{% block main %}
{% include 'components/inpText' %}
...
{% endblock %}
{% endembed %}
{% embed 'components/frmRow' %}
{% block main %}
{% include 'components/inpText' %}
...
{% endblock %}
{% endembed %}
{% endblock %}
{% endembed %}
As you can see, both frmGroup (fieldset) and frmRow (row) components can take a variable id. The first frmRow embed is fine since it defines its own id, the problem arises with the second frmRow which doesn't need a specific id (and so doesn't define one). But when I look at the outputted html code, I see the formrow carries #myFieldset, the id set on the frmGroup embed. Not what I wanted to accomplish :)
I've tried toying with the "only" keyword but that gave me some very weird results. I could use different variable names (frmGroupId and frmRowId) but that feels lame (and creates clutter), I could also explicitly define and empty id on the second frmRow, but then I have to remember what variables to define on what nested embeds, which isn't pretty either.
So how do I solve this (and can it be solved in Twig)?
I tried your example and I have perfectly normal results:
{% set id = "1" %}
{# id is 1 #}
{% embed "_test.html.twig" with { id: "2"} only %}
{# id is 2 for the scope #}
{% block main %}
{% embed "_test.html.twig" with { id: "3"} %}
{# id is 3 for the scope #}
{% endembed %}
{% embed "_test.html.twig" %}
{# id value is still 2 #}
{% endembed %}
{% endblock %}
{% endembed %}
{% embed "#_test.html.twig" %}
{# id value is 1 #}
{% endembed %}
With _test.html.twig:
{% block main %}
{{ id|default('null') }}
{% endblock %}
It returns
3 2 1
The only think i can think of it for you to use temporary variable:
{% embed "#InddigoMain/_test.html.twig" with { id: "2"} %}
{% block main %}
{% embed "#InddigoMain/_test.html.twig" with { id: "3"} %}
{% endembed %}
{% set temp = id %}
{% set id = null %}
{% embed "#InddigoMain/_test.html.twig" %}
{% endembed %}
{% set id = temp %}
{% endblock %}
{% endembed %}
{% embed "#InddigoMain/_test.html.twig" %}
{% endembed %}
It returns
3 null 1
I have go throught the twig bundle and I don't think it exist.

Pass include path from variable with Twig?

I need to include child-1.twig and child-2.twig in component.twig, and include component.twig in page.twig.
In my page.twig:
{% set items = [
'{% include "child-1.twig" %}',
'{% include "child-2.twig" %}'
] %}
{% include "component.twig" with items %}
In component.twig:
<div class="component">
{% for item in items %}
{{ item }}
{% endfor %}
</div>
The complexity comes from the fact that I cant modify component.twig, only page.twig. My code above would work if {% include "child-1.twig" %} and {% include "child-2.twig" %} were rendered but instead they are printed onto the page as a string of text.
Can I do something similar to my approach but make the child include actually run?
Can I suggest you add an empty block in that file (component.twig)
{% block includes %}{% endblock %}
Then you will be able to do this:
{% embed "component.twig" with items %}
{% block includes %}
{% include "child-1.twig" %}
{% include "child-2.twig" %}
{% endblock %}
{% endembed %}

Navigation link works on mobile but not on desktop

i have this website http://sds-test.nowcommu.myhostpoint.ch/de (please use the "de" at the end) and the last link of the navigation "RECHENZENTRUM" does not works on desktop but works on mobile. How can i solve it? This is the twig code:
{% extends 'partials/base.html.twig' %}
{% set show_onpage_menu = header.onpage_menu == true or header.onpage_menu is null %}
{% macro pageLinkName(text) %}{{ text|lower|replace({' ':'_'}) }}{% endmacro %}
{% block javascripts %}
{% if show_onpage_menu %}
{% do assets.add('theme://js/singlePageNav.min.js') %}
{% endif %}
{{ parent() }}
{% endblock %}
{% block bottom %}
{{ parent() }}
{% if show_onpage_menu %}
<script>
// singlePageNav initialization & configuration
$('#navbar').singlePageNav({
offset: $('#header').outerHeight(),
filter: ':not(.external)',
updateHash: true,
currentClass: 'active'
});
</script>
{% endif %}
{% endblock %}
{% block header_navigation %}
{% if show_onpage_menu %}
<ul class="navigation">
{% for module in page.collection() %}
{% set current_module = (module.active or module.activeChild) ? 'active' : '' %}
<li class="{{ current_module }}">{{ module.menu }}</li>
{% endfor %}
{% set datacenter_page = page.find('/services/datacenter') %}
<li>{{ datacenter_page.menu() }}</li>
</ul>
{% else %}
{{ parent() }}
{% endif %}
{% endblock %}
{% block content %}
{{ page.content }}
{% for module in page.collection() %}
<div id="{{ _self.pageLinkName(module.menu) }}"></div>
{{ module.content }}
{% endfor %}
{% endblock %}
The 'rechenzentrum' link is rendered correctly, and copying the link location via right click gives a correct URL that opens a seemingly correct page. So the template rendering is fine.
The link has two onclick handlers attached to it, though. Probably one of them fails and thus prevents navigation. (The JS is minified so I did not try to debug it.)

Dynamic block name in TWIG

I need to add multiple blocks in my template, every with different name.
{% for item from items %}
{% block item.name %}sometext{% endblock %}
{% endfor %}
But I get error. How can I do this ?
In
Dynamic block names are not possible with Twig. There has been a discussion about it over at GitHub.
You can load blocks dynamically using the block function.
{% for item in items %}
{{ block( item.name )|raw }}
{% endfor %}
Twig documentation for the block function
If I understood the question correctly, you can do this (use parent context):
parent.html.twig
{% for item from items %}
{% set currentLoopItemName = item.name %}
{% block item_loop %}sometext{% endblock %}
{% endfor %}
override.html.twig
{% extends "base.html" %}
{% block item_loop %}
{% if item.name == 'custom' %}
// do something
{% else %}
{{ parent() }}
{% endif %}
{% endblock %}
I was attempting to do the same thing and found a solution using the template_from_string function.
_items.html.twig
{% for item in items %}
{{ '{% block ' ~ item.name ~ ' %}'}}
sometext
{{ '{% endblock %}' }}
{% endfor %}
enter code here
page.html.twig
{% embed template_from_string(include('_items.html.twig')) %}
{% block someItemName %} someDifferentText {% endblock %}
{% endembed %}
What's happening is the block tags are initially being created as text. Then we use the include function to get the rendered content of _items, as a string. Finally, we convert that string to a working template (which we can embed or extend).
This works because the template_from_string function will create and compile a template at runtime, where as normally twig is compiled before hand and unchanged at runtime.

Resources