Why my jekyll site on github not work with mathjax? - github

I start to build a jekyll site on github following this BLOG.
OK it works.
I would like to add some math stuffs in my blog, I add a "mathjax.html" in "include folder"
<script type="text/x-mathjax-config">
MathJax.Hub.Config({
TeX: {
equationNumbers: {
autoNumber: "AMS"
}
},
tex2jax: {
inlineMath: [ ['$','$'],
['\(', '\)'] ],
displayMath: [
['$$','$$'] ],
processEscapes:true,
}
});
and then include this file in Layouts files(default.html page.html post.html)
<div class="wrapper-footer">
<div class="container">
<footer class="footer">
{% include svg-icons.html %}
</footer>
</div>
</div>
{% include analytics.html %}
</body>
</html>
{% include mathjax.html %}
default.html
---
layout: default
---
{% include mathjax.html %}
<article class="page">
<h1>{{ page.title }}</h1>
<div class="entry">
{{ content }}
</div>
</article>
page.html
---
layout: default
---
<article class="post">
<h1>{{ page.title }}</h1>
<div class="entry">
{{ content }}
</div>
<div class="date">
Written on {{ page.date | date: "%B %e, %Y" }}
</div>
{% include disqus.html %}
</article>
{% include mathjax.html %}
post.html
and add this line in post file
$$ sin(x^2) $$
As a result ,the page show nothing ...
what 's wrong with it?

Related

Sub-navigation in Grav CMS

I want to make a subnav for my Grav Theme. I already saw a question on this topic:
GRAV subnavigation
{% block navigation %}
{% macro loop(page) %}
{% for p in page.children %}
{% if p.visible %}
{% set active_page = (p.active or p.activeChild) ? 'active' : '' %}
<div>
<a href="{{ p.url }}" class="btn btn-nav" role="button">
{{ p.menu }}
</a>
{% if p.children.count > 0 %}
<div class="dropdown">
<a href="{{ p.url }}" class="btn btn-nav dropdown-toggle" role="button" id="dropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
{{ p.menu }}
<span class="icon icon--bottom"></span>
</a>
<div class="dropdown-menu" aria-labelledby="dropdownMenulink" x-placement="bottom-start">
{{ _self.loop(p) }}
</div>
</div>
{% endif %}
</div>
{% endif %}
{% endfor %}
{% endmacro %}
{% endblock %}
<div class="topics" style="display: flex;">
{{ _self.loop(pages) }}
</div>
The problem I ran into is that with my code the pages get listed two times in the navigation and that's because of the a-tag in the dropdown div.
Is there a way that I can have the a-tag in the dropdown with all the information I wrote in my code? And that it only appears once in the navigation.
Thanks for your answers!
{% block navigation %}
{% macro loop(page) %}
{% for p in page.children %}
{% if p.visible %}
{% set active_page = (p.active or p.activeChild) ? 'active' : '' %}
<div>
{% if p.children.count > 0 %}
<div class="dropdown">
<a href="{{ p.url }}" class="btn btn-nav dropdown-toggle" role="button" id="dropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
{{ p.menu }}
<span class="icon icon--bottom"></span>
</a>
<div class="dropdown-menu" aria-labelledby="dropdownMenulink" x-placement="bottom-start">
{{ _self.loop(p) }}
</div>
</div>
{% else %}
<a href="{{ p.url }}" class="btn btn-nav" role="button">
{{ p.menu }}
</a>
{% endif %}
</div>
{% endif %}
{% endfor %}
{% endmacro %}
{% endblock %}
<div class="topics" style="display: flex;">
{{ _self.loop(pages) }}
</div>
This is the code I used instead of what I wrote in my question

How to close newsletter popup automatically after signup - Shopify

I am not a programming expert so bear with me.
I have put up a shopify site with the template Icon-Christian. It comes with newsletter popup. The thing is that after signing up, the popup window doesn't close automatically. How can I edit the code?
{% if settings.popup %}
<script type="text/javascript">
if($(window).width() > 500){
// Fancybox Join our mailing list popup
$(document).ready(function(){
var check_cookie = $.cookie('mailing_list_delay_popup');
if(check_cookie == null){
$.cookie('mailing_list_delay_popup', 'expires_seven_days', { expires: 7 });
//fire your fancybox here
setTimeout(function(){
$.fancybox({
href: "#subscribe_popup"
});
}, 3000);
}
});
};
</script>
{% endif %}
<div style="display:none">
<div id="subscribe_popup" class="row">
{% if settings.email_popup_image %}
<div class="left fifty">
<img src="{{ 'popup-image.jpg' | asset_url }}">
</div>
{% endif %}
<div class="right fifty">
<h3>{{ 'layout.homepage.mailing_list_join' | t }}</h3>
<p>{{ 'layout.homepage.mailing_list_text' | t }}</p>
<!-- BEGIN #subs-container -->
<div id="subs-container" class="clearfix">
<div id="mc_embed_signup">
<form action="{{ settings.mailchimp }}" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank">
<input value="" name="EMAIL" class="email" id="mce-EMAIL" placeholder="{{ 'general.newsletter_form.newsletter_email' | t }}" required="" type="email">
<input value="{{ 'general.newsletter_form.submit' | t }}" name="subscribe" id="mc-embedded-subscribe" class="button" type="submit">
</form>
</div>
</div>
<div class="clear"></div>
<ul id="footer-icons">
{% if settings.show_facebook %}<li><i class="icon-facebook icon-2x"></i></li>{% endif %}
{% if settings.show_twitter %}<li><i class="icon-twitter icon-2x"></i></li>{% endif %}
{% if settings.show_pinterest %}<li><i class="icon-pinterest icon-2x"></i></li>{% endif %}
{% if settings.show_tumblr %}<li><i class="icon-tumblr icon-2x"></i></li>{% endif %}
{% if settings.show_youtube %}<li><i class="icon-youtube icon-2x"></i></li>{% endif %}
{% if settings.show_googleplus %}<li><i class="icon-google-plus icon-2x"></i></li>{% endif %}
{% if settings.show_instagram %}<li><i class="icon-instagram icon-2x"></i></li>{% endif %}
</ul>
</div>
</div>
</div>

Create form in popup in Shopify (callback function)

I added form to button (in left top in header) https://en.partizanstore.eu/
I checked form in page and it works, but when I added form to snippet and to button, it dont work, dont send letter.
Can anybody help?
And by the way, can I create form anywhere, except on pages?
{% capture contact_form %}
<div class="contact">
{% form 'contact', class: 'contact__form' %}
{% if form.posted_successfully? %}
<div class="alert alert--success">
<span class="alert-title">{{ 'contact.form.successfully_sent' | t }}</span>
</div>
{% endif %}
{% if form.errors %}
<div class="alert alert--error">
<span class="alert__title">{{ 'general.forms.errors' | t }}</span>
{% include 'form_errors' %}
</div>
{% endif %}
<div class="form__control">
<label class="form__label" for="contact__name">{{ [ 'contact.form.name' | t }}</label>
<input type="text" id="contact__name" name="contact[name]">
</div>
<div class="form__control">
<label class="form__label" for="contact__phone">{{ 'contact.form.phone' | t }}</label>
<input type="text" id="contact__phone" name="contact[phone]">
</div>
<input type="submit" class="button button--primary" value="{{ 'contact.form.submit' | t }}">
{% endform %}
</div>
{% endcapture %}

Symfony2 override collection_widget twice in the same template

I have a contacts form with two collections: functions and comments.
The comments collection is very standard and doesn't require any tweaks (just text field and file upload).
But the functions requires to override collection-item because I render each function in a tab.
My issue is that when I customize collection_item widget for the functions, it also tries to apply to the prototype of the comments collection. It fails as the fields are obviously different.
How can I manage that by for example forcing the comments collection to use the standard collection_item widget? Or maybe by passing a variable to the collection_widget block so that it behaves differently depending if it applies to functions or comments...
--EDIT: add twig templates--
Here is my main edit form :
{% extends 'contactsBundle:templates:edit.html.twig' %}
{% form_theme edit_form 'contactsBundle:forms:fonctions.html.twig' %}
{% block form_body -%}
<div class="row">
<div class="col-md-5">
{{ form_row(edit_form.prefix) }}
{{ form_row(edit_form.nom) }}
{{ form_row(edit_form.prenom) }}
</div>
<div class="col-md-5 col-md-offset-2">
{{ form_row(edit_form.referent) }}
{{ form_row(edit_form.groupe) }}
</div>
</div>
{{ form_label(edit_form.fonctions) }}
{{ form_errors(edit_form.fonctions, {attr: {class: 'fonctions-label'}}) }}
{{ form_widget(edit_form.fonctions, {attr: {class: 'fonctions-widget'}}) }}
<ul class="nav nav-tabs">
</ul>
<div class="tab-content">
{% for fonction in edit_form.fonctions %}
{% include 'contactsBundle:forms:fonctions-prototype.html.twig' with {form: fonction.vars.form, index: loop.index} %}
{% endfor %}
</div>
<div class="row">
<div id="commentaire_prototype">
data-prototype="{{ form_widget(edit_form.commentaires.vars.prototype) | e }}"
</div>
{% for commentaire in edit_form.commentaires %}
{{ form_row(commentaires.commentaire) }}
{{ form_row(commentaires.docFile) }}
{% endfor %}
</div>
{% endblock form_body %}
{% block body_end_before_js %}
{{ parent() }}
<script src="{{ asset('bundles/mopabootstrap/js/mopabootstrap-collection.js') }}"></script>
<script src="{{ asset('bundles/contacts/js/forms.js') }}"></script>
{% endblock body_end_before_js %}
Here is my customized collection_widget
{% extends 'contactsBundle:templates:edit.html.twig' %}
{% form_theme edit_form 'contactsBundle:forms:fonctions.html.twig' %}
{% block form_body -%}
<div class="row">
<div class="col-md-5">
{{ form_row(edit_form.prefix) }}
{{ form_row(edit_form.nom) }}
{{ form_row(edit_form.prenom) }}
</div>
<div class="col-md-5 col-md-offset-2">
{{ form_row(edit_form.referent) }}
{{ form_row(edit_form.groupe) }}
</div>
</div>
{{ form_label(edit_form.fonctions) }}
{{ form_errors(edit_form.fonctions, {attr: {class: 'fonctions-label'}}) }}
{{ form_widget(edit_form.fonctions, {attr: {class: 'fonctions-widget'}}) }}
<ul class="nav nav-tabs">
</ul>
<div class="tab-content">
{% for fonction in edit_form.fonctions %}
{% include 'contactsBundle:forms:fonctions-prototype.html.twig' with {form: fonction.vars.form, index: loop.index} %}
{% endfor %}
</div>
<div class="row">
<div id="commentaire_prototype">
{#data-prototype="{{ form_widget(edit_form.commentaires.vars.prototype) | e }}"#}
</div>
{#{{ form_row(edit_form.commentaires) }}#}
{% for commentaire in edit_form.commentaires %}
{{ form_row(commentaires.commentaire) }}
{{ form_row(commentaires.docFile) }}
{% endfor %}
</div>
{% endblock form_body %}
{% block body_end_before_js %}
{{ parent() }}
<script src="{{ asset('bundles/mopabootstrap/js/mopabootstrap-collection.js') }}"></script>
<script src="{{ asset('bundles/contacts/js/forms.js') }}"></script>
{% endblock body_end_before_js %}
And here is my fonctions.prototype.html.twig:
{% if index is not defined %}
{% set index = "__name__" %}
{% endif %}
<div class="collection-item tab-pane" id="{{ index }}">
<div class="row">
<div class="col-md-5">
{{ form_row(form.fonction, {'attr': {'class': 'fonction'} } ) }}
{{ form_row(form.titre) }}
{{ form_row(form.entite, {'attr': {'class': 'entite'} }) }}
{#Todo Add entity address#}
</div>
<div class="col-md-5 col-md-offset-2">
{% if index is defined %}
<div class="form-group">
<a class="btn btn-xs btn-danger coll-del" href="#">
<span class="glyphicon glyphicon-trash"></span>
Supprimer cette Fonction
</a>
</div>
{% else %}
<div class="form-group">
<a class="btn btn-xs btn-danger coll-del" data-collection-remove-btn=".curuba_contactsbundle_contacts_fonction___name___form_group" href="#">
<span class="glyphicon glyphicon-trash"></span>
Supprimer cette Fonction
</a>
</div>
{% endif %}
</div>
</div>
<div class="row">
<div class="col-md-5">
<h4>Contact Professionel</h4>
{{ form_row(form.persoFixe) }}
{{ form_row(form.persoMobile) }}
{{ form_row(form.persoFax) }}
{{ form_row(form.persoMail) }}
</div>
<div class="col-md-5 col-md-offset-2">
<h4>Secrétariat</h4>
{{ form_row(form.assFixe) }}
{{ form_row(form.assMobile) }}
{{ form_row(form.assFax) }}
{{ form_row(form.assMail) }}
</div>
</div>
</div>
Source: http://symfony.com/doc/current/cookbook/form/create_custom_field_type.html
I would go on about this as follows:
Create two form types (Bundle\Form\Type\FunctionType and Bundle\Form\Type\CommentType)
Note down the return value of getName() for each and register your new form types as services, for the following I assume curuba_comment and curuba_function:
#services.yml
services:
bundle.form.type.function:
class: Bundle\Form\Type\FunctionType
tags:
- { name: form.type, alias: curuba_function }
bundle.form.type.comment:
class: Bundle\Form\Type\CommentType
tags:
- { name: form.type, alias: curuba_comment }
Now in your form theme you can add the blocks curuba_comment_widget and curubu_function_widget in which you can call other blocks, e.g. collection_widget.
Then in your Forms Form type do ->add('somefield', 'comment')
Here is how I managed it in a simple way thanks to this post:
symfony2 multiple nested forms prototype
First I change the prototype_name for each collection :
$builder
->add('prefix')
->add('nom')
->add('prenom')
->add('referent')
->add('groupe')
->add('fonctions', 'collection', array(
'type' => new fonctionsType(),
'allow_add' => true,
'allow_delete' => true,
'by_reference' => false,
'label' => 'Fonctions',
'label_attr' => array('class'=>'sub-form-label'),
'prototype_name'=> '__fon_prot__'
))
->add('commentaires', 'collection', array(
'type' => new commentairesType(),
'allow_add' => true,
'allow_delete' => true,
'by_reference' => false,
'label' => 'Commentaires',
'prototype' => true,
'prototype_name'=> '__com_prot__'
))
->add('submit', 'submit', array('label' => 'Enregistrer', 'attr' => array('class' => 'btn btn-lg btn-success')))
Then I add an if statment in my collection_widget :
{% if prototype.vars.name == '__fon_prot__' %}
{% set prototype_markup = include('contactsBundle:forms:fonctions-prototype.html.twig', { 'form': form.vars.form.vars.prototype }) %}
{% else %}
{% set prototype_markup = form_row(prototype) %}
{% endif %}
And that's it.

Bootstrap 3: formatted checkboxes with Symfony & Twig

How to create a formatted group of checkboxes as described in the Bootstrap documentation using the Symfony Form Factory and Twig?
Using something like
<div class="row">
<div class="col-lg-4">
{{ form_label(form.sample) }}
</div>
<div class="col-lg-8">
{{ form_widget(form.sample) }}
</div>
</div>
will not result in the needed output:
a) each checkbox within a Bootstrap 3 structure like:
<div class="radio">
<label>
<input type="radio" ... />Option one
</label>
</div>
b) in addition the ability to output the checkboxes in two or more columns if needed:
<div class="row">
<div class="col-lg-6 col-md-6">
<div class="radio"> ... </div>
</div>
<div class="col-lg-6 col-md-6">
<div class="radio"> ... </div>
</div>
</div>
The proper way to do this is to create your own form theme. I will not write the whole thing here, but what matters to you are those:
{% block choice_widget_expanded %}
{% spaceless %}
<div {{ block('widget_container_attributes') }} class="my-form-choices">
{% for child in form %}
{{ form_widget(child) }}
{% endfor %}
</div>
{% endspaceless %}
{% endblock choice_widget_expanded %}
{% block checkbox_widget %}
{% spaceless %}
<div class="checkbox">
<label for="{{ id }}"><input type="checkbox" {{ block('widget_attributes') }}{% if value is defined %} value="{{ value }}"{% endif %}{% if checked %} checked="checked"{% endif %} />{{ label|trans({}, translation_domain) }}</label>
</div>
{% endspaceless %}
{% endblock checkbox_widget %}
I removed the label rendering from the choice_widget_expanded so I could have the checkbox inside the label tag, just like what you have in your solution. But you can basically do whatever you want in your form theme. You can also overwrite radio_widget if you want to.
If you look closely at the div around the checkboxes, I gave it the class "my-form-choices". You could give it the classes you want. It could be "col-lg-8", like you have, but for me, it makes more sense to have a generic class name, and then use mixins in your own less file. Your less file would look like this:
#import '../../../../../../vendor/twitter/bootstrap/less/bootstrap.less';
.my-form-row {
.make-row();
}
.my-form-choices {
.make-lg-column(8);
}
.my-form-row-label {
.make-lg-column(4);
}
But that's up to you. You don't have to do this if you don't want to. Finally, you use your theme by starting the twig for your page like this:
{% extends 'MyOwnBundle::layout.html.twig' %}
{% form_theme form 'MyOwnBundle:Component:formtype.html.twig' %}
And you display the row simply like that (the field I used in my test is availability, yours is sample):
{{ form_row(form.availability) }}
I've tried that (with Symfony 2.4), and it works. The output is something like that:
<div class="my-form-row">
<div class="my-form-row-label">
<label class="required">Availability</label>
</div>
<div class="my-form-choices" id="myown_website_contactmessage_availability">
<div class="checkbox">
<label for="myown_website_contactmessage_availability_0">
<input type="checkbox" value="morning" name="myown_website_contactmessage[availability][]" id="myown_website_contactmessage_availability_0">
Morning
</label>
</div>
<div class="checkbox">
<label for="myown_website_contactmessage_availability_1">
<input type="checkbox" value="afternoon" name="myown_website_contactmessage[availability][]" id="myown_website_contactmessage_availability_1">
Afternoon
</label>
</div>
<div class="checkbox">
<label for="myown_website_contactmessage_availability_2">
<input type="checkbox" value="evening" name="myown_website_contactmessage[availability][]" id="myown_website_contactmessage_availability_2">
Evening
</label>
</div>
</div>
</div>
Also notice that I do not have sub-rows, like you have in your solution. In fact, your solution goes beyond the question you were asking in the first place.
EDIT: here's a solution for having multiple columns
To have multiple columns, here is a quick solution. First, the form theme could be something like this:
{% block choice_widget_expanded %}
{% spaceless %}
<div class="my-form-choices-container">
<div {{ block('widget_container_attributes') }} class="my-form-choices">
{% for child in form %}
{{ form_widget(child) }}
{% endfor %}
</div>
</div>
{% endspaceless %}
{% endblock choice_widget_expanded %}
{% block checkbox_widget %}
{% spaceless %}
<div class="my-form-choice">
<div class="checkbox">
<label for="{{ id }}"><input type="checkbox" {{ block('widget_attributes') }}{% if value is defined %} value="{{ value }}"{% endif %}{% if checked %} checked="checked"{% endif %} />{{ label|trans({}, translation_domain) }}</label>
</div>
</div>
{% endspaceless %}
{% endblock checkbox_widget %}
And then your less file would look like this:
#import '../../../../../../vendor/twitter/bootstrap/less/bootstrap.less';
.my-form-row {
.make-row();
}
.my-form-row-label {
.make-lg-column(4);
}
.my-form-choices-container {
.make-lg-column(8);
}
.my-form-choices {
.make-row();
}
.my-form-choice {
.make-md-column(6);
}
In this solution, you change the number of columns by changing the size of the columns. The cells should stack neatly. In this case, it is better to compile less (I won't explain that here). I have tried this solution, and it works well. The advantage of using less in this case, is that you can use the same form theme on multiple pages, and change the number of columns just by having a different "less" file for each of your pages.
You need to access to the form vars which contain the information about the checkboxes:
form.sample.vars.form.children
now you can loop through the checkboxes and access the values:
{% for children in form.sample.vars.form.children %}
<div class="checkbox>
<label>
<input type="checkbox" name="{{ children.vars.full_name }}" id="{{ children.vars.id }}" value="{{ children.vars.value }}"{% if children.vars.data %} checked="checked"{% endif %} />
{% if children.vars.label is defined %}
{{ children.vars.label|trans }}
{% else %}
{{ children.vars.value|capitalize|trans }}
{% endif %}
</label>
</div>
{% endfor %}
I place this code in a Twig template and add some logic to create rows with variable columns, so it look like this:
{% set cols = columns|default(1) %}
{% set i = 1 %}
{% for children in childrens %}
{% if i == 1 %}<div class="row">{% endif %}
<div class="col-lg-{{ 12/cols }} col-md-{{ 12/cols }}">
<div class="checkbox {{ class|default('') }}">
<label>
<input type="checkbox" name="{{ children.vars.full_name }}" id="{{ children.vars.id }}" value="{{ children.vars.value }}"{% if children.vars.data %} checked="checked"{% endif %} />
{% if children.vars.label is defined %}
{{ children.vars.label|trans }}
{% else %}
{{ children.vars.value|capitalize|trans }}
{% endif %}
</label>
</div>
</div>
{% set i = i+1 %}
{% if i > cols %}
</div>
{% set i = 1 %}
{% endif %}
{% endfor %}
{% if i != 1 %}</div>{% endif %}
now you can include this checkbox template where you need it:
<div class="row">
<div class="col-lg-4">
{{ form_label(form.sample) }}
</div>
<div class="col-lg-8">
{% include 'checkbox.twig' with {childrens:form.sample.vars.form.children, columns:2} only %}
</div>
</div>
the example above will return well formatted Bootstrap 3 output with checkboxes in two columns like this:
<div class="row">
<div class="col-lg-4">
<label class="required">Veranstalter</label>
</div>
<div class="col-lg-8">
<div class="row">
<div class="col-lg-6 col-md-6">
<div class="checkbox ">
<label><input type="checkbox" name="form[sample][]" id="form_sample_0" value="DUMMY">Dummy</label>
</div>
</div>
<div class="col-lg-6 col-md-6">
<div class="checkbox ">
<label><input type="checkbox" name="form[sample][]" id="form_sample_1" value="DUMMY_1">Dummy 1</label>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-6 col-md-6">
<div class="checkbox ">
<label><input type="checkbox" name="form[sample][]" id="form_sample_2" value="DUMMY_2">Dummy 2</label>
</div>
</div>
</div>
It's easy to use and will also work for radio buttons - just replace the class "checkbox" with "radio".
Ran into this issue today and thought I'd share my solution. I already had a form input override file, but didn't like what I found elsewhere. So wrote a form_label block override like so.
{% block form_label -%}
{% if label is not sameas(false) -%}
{% if not compound -%}
{% set label_attr = label_attr|merge({'for': id}) %}
{%- endif %}
{% if required -%}
{% set label_attr = label_attr|merge({'class': (label_attr.class|default('') ~ ' required')|trim}) %}
{%- endif %}
{% if label is empty -%}
{% set label = name|humanize %}
{%- endif -%}
<label{% for attrname, attrvalue in label_attr %} {{ attrname }}="{{ attrvalue }}"{% endfor %}>{% if 'checkbox' in block_prefixes %}{{ form_widget(form) }}{% endif %}{{ label|trans({}, translation_domain) }}</label>
{%- endif %}
{%- endblock form_label %}
Then the form_row block like so:
{% block form_row %}
{% spaceless %}
{% if 'checkbox' not in block_prefixes %}
<div class="form-group">
{{ form_label(form) }}
{{ form_errors(form) }}
{% if 'datetime' not in block_prefixes %}
{{ form_widget(form, { 'attr': {'class': 'form-control'} }) }}
{% else %}
{{ form_widget(form) }}
{% endif %}
</div>
{% else %}
{% import _self as forms %}
<div class="checkbox">
{{ form_label(form) }}
</div>
{% endif %}
{% endspaceless %}
{% endblock %}
I choose this method because it allowed me to continue to use the basic form(form) method in templates. Hope this helps you.
If you're looking for the simple version of this answer (ie you've already applied the bootstrap_3_layout theme to your form and just want to apply custom label text)
{{ form_widget( form.field, { 'label': 'Custom Label Text' } ) }}