tutorial v1

This commit is contained in:
Elo1L 2024-03-14 19:01:23 +01:00
parent aa606d0c0c
commit 641a7b6061
8 changed files with 99 additions and 1 deletions

View file

@ -0,0 +1,3 @@
.measure-wide{
max-width: 60em;
}

View file

@ -2,6 +2,7 @@
background_color_class = "bg-red"
site_logo = "assets/uploads/1846959.jpg"
favicon = "assets/uploads/Palette.png"
custom_css = ["override.css"]
[[params.ananke_socials]]
name = "facebook"

View file

@ -72,6 +72,8 @@ collections:
- name: settings
label: 'Configuration'
icon: settingsPage
editor:
preview: false
files:
- label: 'Configuration du thème'
name: theme settings

View file

@ -146,8 +146,100 @@ CMS.registerIcon('postPage', () => post2SVG);
CMS.registerIcon('helpPage', () => helpSVG);
CMS.registerIcon('palette', () => paletteSVG);
function htmlToH(text) {
const parser = new DOMParser();
const doc = parser.parseFromString(text, 'text/html');
const element = doc.body.firstChild;
function parseNode(node) {
if (node.nodeType === Node.TEXT_NODE) {
return node.textContent;
} else if (node.nodeName == 'IMG') {
const props = {};
// Récupérer les attributs HTML en tant que propriétés
for (const attr of node.attributes) {
props[attr.name] = attr.value;
}
return h('img', props);
} else if (node.nodeType === Node.ELEMENT_NODE) {
const props = {};
// Récupérer les attributs HTML en tant que propriétés
for (const attr of node.attributes) {
const parties = attr.value.trim().split(";").filter(Boolean);
for (const part of parties) {
if (props[attr.name] == undefined) {
props[attr.name] = {};
}
const kv = part.split(":");
const k = kv[0].trim();
const v = kv[1].trim();
props[attr.name][k] = v;
}
}
// Ajouter les styles CSS aux propriétés
if (props.style == undefined) {
props.style = {};
}
const children = Array.from(node.childNodes).map(parseNode);
return h(node.tagName.toLowerCase(), props, ...children);
}
}
return parseNode(element);
}
const TutorialPage = () => {
return h('div', {}, 'TODO tutoriel!');
const htmlTutorial = `
<pre>
<pre style="font-size: 40px;">
Bienvenue au tutoriel dutilisation de Palette !
</pre>
Palette vous permet de modifier et personnaliser facilement vos sites. Voici les différentes catégories disponibles dans linterface :
<img src="tutorial/liste.png" alt="Différentes catégories disponibles">
<strong> Page principale :</strong> Vous pouvez choisir le contenu de la page daccueil de votre site
<strong> Pages de sites :</strong> Vous pouvez créer et éditer des pages supplémentaires à ajouter à votre site
<strong> Configuration :</strong> Vous pouvez personnaliser laspect global (thème) du site ainsi que les menus
<strong> Tutoriel :</strong> Vous y êtes (;
<strong> Media :</strong> Vous pouvez ajouter, supprimer et naviguer dans les images que vous pouvez ensuite intégrer dans lédition de contenu de vos pages ainsi que dans les configurations.
<hr>
<pre style="font-size: 30px; text-decoration: underline">Edition de page :</pre>
Lorsque vous éditez une page vous pouvez éditer :
<img src="tutorial/editeur.png" alt="Edition">
<strong> Titre :</strong> Nom de la page
<strong> Description :</strong> Courte description de la page
<strong> Image de couverture :</strong> Image de bannière de la page
<strong> Corps :</strong> Vous pouvez renseigner du texte, images, liens, citations pour le contenu de votre page
<strong style="color: yellow; font-size: 25px;">Noubliez pas de cliquer sur le bouton Publier en haut à droite lorsque vous avez terminé</strong>
<hr>
<pre style="font-size: 30px; text-decoration: underline">Configuration :</pre>
Vous pouvez personnaliser le thème:
<img src="tutorial/theme.png" alt="Gestion du theme">
<strong>Logo du site :</strong>Le logo du site dans le coin supérieur gauche du site
<strong>Favicon :</strong>Le logo du site (favicon) qui apparaitra dans les onglets du navigateur
<strong>Couleur du fond :</strong>La couleur de fond du site
<strong>Réseaux sociaux :</strong>Des liens vers des réseaux sociaux
Vous pouvez personnaliser les menus:
<img src="tutorial/menus.png" alt="Gestion des menus">
Les menus permettent de naviguer entre les différentes pages que vous avez créé. Pour créer un lien vers une page que vous avez créé, ajouter une Section :
<strong>Nom dans le menu :</strong> Le nom que vous voulez qui soit affiché
<strong>Page référencée :</strong> Indiquez /pages/&lt;le nom de la page créée&gt; (par exemple : /pages/contactez-nous) [Pour la page d'accueil, renseignez uniquement / (comme sur l'image précédente)]
<strong>Poids :</strong> Est la place que prend le nom du menu dans la page (par défaut vous pouvez le laisser à 1)
<strong style="color: yellow; font-size: 25px;">Noubliez pas de cliquer sur le bouton Publier en haut à droite lorsque vous avez terminé</strong>
</pre>`
return htmlToH(htmlTutorial);
};
CMS.registerAdditionalLink({

Binary file not shown.

After

Width:  |  Height:  |  Size: 170 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 20 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 44 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 57 KiB