FAQ section in Contact page
This commit is contained in:
parent
c437734701
commit
c2b69bb41a
@ -127,3 +127,7 @@ Fill in the meta information :
|
|||||||
1. `name:` the brand name of the partner
|
1. `name:` the brand name of the partner
|
||||||
2. `thumbnail:` the partner brand logo, make sure to place it in the `images/partner/`folder
|
2. `thumbnail:` the partner brand logo, make sure to place it in the `images/partner/`folder
|
||||||
3. `url:` the partner website
|
3. `url:` the partner website
|
||||||
|
|
||||||
|
### FAQ section
|
||||||
|
|
||||||
|
Edit `_data/faq.json` file to add a new Q/A couple object. Plain html e.g. `<br>` or `<a href="">link</a>` is supported
|
||||||
|
14
src/_data/faq.json
Normal file
14
src/_data/faq.json
Normal file
@ -0,0 +1,14 @@
|
|||||||
|
{
|
||||||
|
"items": [{
|
||||||
|
"q": "Question 1 ?",
|
||||||
|
"a": "Réponse 1. <br> Avec retour à la ligne"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"q": "Question 2 ?",
|
||||||
|
"a": "Réponse 2 avec une url : https://www.astrolabe.coop/nous-rejoindre/"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"q": "Question 3 ?",
|
||||||
|
"a": "Réponse 3 avec un <a href=\"/comprendre-la-cae/\">lien</a>"
|
||||||
|
}]
|
||||||
|
}
|
@ -26,8 +26,8 @@
|
|||||||
"external": false
|
"external": false
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"text": "Nous contacter",
|
"text": "FAQ / Nous contacter",
|
||||||
"url": "#contact-form",
|
"url": "/faq+contact/",
|
||||||
"external": false
|
"external": false
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
|
@ -1,17 +1,9 @@
|
|||||||
{% extends 'layouts/base.njk' %}
|
{% extends 'layouts/base.njk' %}
|
||||||
|
|
||||||
{# Intro content #}
|
|
||||||
{% set introHeading = title %}
|
|
||||||
|
|
||||||
{% block content %}
|
{% block content %}
|
||||||
<main id="main-content" tabindex="-1">
|
<main id="main-content" tabindex="-1">
|
||||||
<article class="[ post ] [ h-entry ]">
|
{% include "partials/components/faq.njk" %}
|
||||||
{% include "partials/components/intro.njk" %}
|
|
||||||
<div class="[ post__body ] [ inner-wrapper ] [ leading-loose pad-top-900 pad-bottom-900 text-500 ] [ sf-flow ] [ e-content ]">
|
|
||||||
{{ content | safe }}
|
|
||||||
{% include "partials/components/contact-form.njk" %}
|
{% include "partials/components/contact-form.njk" %}
|
||||||
</div>
|
|
||||||
</article>
|
|
||||||
</main>
|
</main>
|
||||||
{% endblock %}
|
{% endblock %}
|
||||||
|
|
||||||
|
24
src/_includes/partials/components/faq.njk
Normal file
24
src/_includes/partials/components/faq.njk
Normal file
@ -0,0 +1,24 @@
|
|||||||
|
<section class="[ faq ]">
|
||||||
|
{% if faq.items %}
|
||||||
|
<div class="[ inner-wrapper ]">
|
||||||
|
<h1 class="faq__heading">{{ faqHeading }}</h1>
|
||||||
|
{{ content | safe }}
|
||||||
|
<div class="accordion accordion-flush" id="accordionFlushExample">
|
||||||
|
{% for item in faq.items %}
|
||||||
|
<div class="accordion-item">
|
||||||
|
<h3 class="accordion-header" id="flush-heading{{ loop.index }}">
|
||||||
|
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#flush-collapse{{ loop.index }}" aria-expanded="false" aria-controls="flush-collapse{{ loop.index }}">
|
||||||
|
{{ item.q }}
|
||||||
|
</button>
|
||||||
|
</h3>
|
||||||
|
<div id="flush-collapse{{ loop.index }}" class="accordion-collapse collapse" aria-labelledby="flush-heading{{ loop.index }}" data-bs-parent="#accordionFlushExample">
|
||||||
|
<div class="accordion-body">
|
||||||
|
{{ item.a | urlize | safe }}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
{% endfor %}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
{% endif %}
|
||||||
|
</section>
|
@ -1,10 +0,0 @@
|
|||||||
---
|
|
||||||
title: 'Contact'
|
|
||||||
permalink: '/contact/index.html'
|
|
||||||
layout: 'layouts/contact.njk'
|
|
||||||
eleventyExcludeFromCollections: true
|
|
||||||
---
|
|
||||||
|
|
||||||
You can have a contact page which uses a basic form. The [code with the form fields lives here](https://github.com/hankchizljaw/hylia/blob/master/src/_includes/layouts/contact.njk).
|
|
||||||
|
|
||||||
To delete the contact form for this site, delete this page in the CMS or at `src/pages/contact.md`. You probably will also want to delete `src/pages/thank-you.md`.
|
|
9
src/pages/faq-contact.md
Normal file
9
src/pages/faq-contact.md
Normal file
@ -0,0 +1,9 @@
|
|||||||
|
---
|
||||||
|
title: 'FAQ / Contact'
|
||||||
|
permalink: '/faq+contact/index.html'
|
||||||
|
layout: 'layouts/contact.njk'
|
||||||
|
eleventyExcludeFromCollections: true
|
||||||
|
faqHeading: 'Foire Aux Questions'
|
||||||
|
---
|
||||||
|
|
||||||
|
[A REFORMULER ?] Avant de nous contacter, peut-être avons déjà réponse à certaines de vos questions ?
|
30
src/scss/components/_faq.scss
Normal file
30
src/scss/components/_faq.scss
Normal file
@ -0,0 +1,30 @@
|
|||||||
|
.faq {
|
||||||
|
&__heading {
|
||||||
|
margin: 8rem 0 4rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.accordion {
|
||||||
|
margin-top: 2rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.accordion-button {
|
||||||
|
font-size: 1.25rem;
|
||||||
|
font-weight: 600;
|
||||||
|
padding: 1rem 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.accordion-button:not(.collapsed) {
|
||||||
|
color: var(--color-text);
|
||||||
|
background-color: var(--color-white);
|
||||||
|
box-shadow: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.accordion-button:focus {
|
||||||
|
border: 0;
|
||||||
|
box-shadow: 0 0 0 1px var(--color-text);
|
||||||
|
}
|
||||||
|
|
||||||
|
.accordion-button:not(.collapsed)::after {
|
||||||
|
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23212529'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
|
||||||
|
}
|
||||||
|
}
|
@ -151,13 +151,13 @@
|
|||||||
|
|
||||||
&::after {
|
&::after {
|
||||||
content: '';
|
content: '';
|
||||||
background-image: url("data:image/svg+xml,%3Csvg width='16' height='10' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M14.364 1.636L8 8 1.636 1.636' stroke='%23111' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
|
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23212529'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
|
||||||
background-repeat: no-repeat;
|
background-repeat: no-repeat;
|
||||||
width: 1rem;
|
width: 1.25rem;
|
||||||
height: .625rem;
|
height: 1.25rem;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
right: 0;
|
right: 0;
|
||||||
top: calc(50% - .3125rem);
|
top: calc(50% - .625rem);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -60,6 +60,7 @@ img {
|
|||||||
|
|
||||||
// Components
|
// Components
|
||||||
@import 'components/button';
|
@import 'components/button';
|
||||||
|
@import 'components/faq';
|
||||||
@import 'components/form';
|
@import 'components/form';
|
||||||
@import 'components/heading-permalink';
|
@import 'components/heading-permalink';
|
||||||
@import 'components/intro';
|
@import 'components/intro';
|
||||||
|
Loading…
Reference in New Issue
Block a user