La documentation est en cours de rédaction.
Si vous souhaitez apporter des compléments, vous pouvez contribuer sur le dépôt git, soit en ouvrant une « issue » décrivant les modifications, soit en proposant une « merge request ».

Prise en main

Gestion des images

Images globales

Le dossier /images contient l’ensemble des images communes à tout le site.

Il sert de référence pour les modules et notament le module images-collage ce qui permet d’éviter d’avoir à saisir l’ensemble du chemin d’accès aux images ; le nom du fichier seul suffit.

Dans d’autres contextes il faudra utiliser la syntaxe markdown

![](/images/une-image.jpg)

L’adresse de l’image sera du genre :

https://demo.frama.site/user/pages/images/une-image.jpg

Pour uploader une image, il suffit de la glisser-déposer (ou de cliquer pour ouvrir l’explorateur de fichiers) avec la souris dans le cadre gris « Medias de la page ».

Images relatives

Pour les pages et articles, il est possible d’ajouter des images directement liées au contenu de l’article. Pour pouvoir uploader les fichiers, il faut que l’article ou la page ait déjà été engegistré (sans nécéssairement le publier).

La première image ajoutée sert systématiqument d’image « à la une » pour les articles de blog.

Pour ajouter une image dans le corps du texte, passez simplement la souris sur l’image et cliquez sur le bouton à sa droite. Un code markdown de ce genre devrait être inséré :

![](une-image.jpg)

Quand l’article sera publié l’adresse de l’image sera du genre :

https://demo.frama.site/user/pages/01.page/article/une-image.jpg

Modifier l’image d’entête

Voici ci-dessous une vidéo illustrant comment, par exemple, modifier l’image d’entête sur une page avec une « navbar interne ».
L’entête est défini dans le module « header ».
L’image par défaut bg_home.jpg est une « image globale ». qui se trouve donc dans le dossier /images.

Redimensionner une image

Grav permet de redimensionner les images au cas par cas, il suffit pour ça d’ajouter ?cropResize=<largeur>,<hauteur> après le nom du fichier :

![](une-image.jpg?cropResize=640,360)

Mais vous pouvez aussi bien garder l’image originale et lui ajouter la classe CSS img-responsive pour que sa taille s’adapte selon la résolution d’écran de vos visiteurs :

![](une-image.jpg) {.img-responsive}

Ajouter un élément sonore

Pour ajouter un lecteur audio, vous devez :

  1. Déposer votre fichier dans la zone prévue à cet effet (Déposez vos fichiers ici ou cliquez dans cette zone en bas de votre page)
  2. Cliquer sur l'icône Vue : le fichier s'ouvrira dans un nouvel onglet vue média
  3. Récupérer l'adresse du média (https://votre-site.frama.site/user/pages/04-page/Bazingscratch.mp3)
  4. Revenir sur l'onglet de l'édition de votre site
  5. Mettre dans votre contenu :
    <audio controls>
    <source src="https://votre-site.frama.site/user/pages/04-page/Bazingscratch.mp3">
    </audio>
    
  6. Enregistrer

Vous obtiendrez un lecteur comme ci-dessous :

lecteur audio

Ajouter une vidéo

Pour ajouter une vidéo venant d'un site comme youtube, dailymotion, viméo etc… Vous devez utiliser le code d'intégration d'une vidéo pour la mettre sur votre site.

Peertube

Si je veux intégrer la vidéo Contributopia : Peut-on faire du libre sans vision politique ? — Pierre-Yves Gosset présente sur Framatube, je dois :

  • cliquer sur Partager
  • copier la ligne sous Intégration ; dans notre exemple :

    <iframe width="560" height="315" sandbox="allow-same-origin allow-scripts" src="https://framatube.org/videos/embed/7e261f9e-242c-4100-a0bd-268dab321114" frameborder="0" allowfullscreen></iframe>
    
  • coller la ligne ci-dessus dans le contenu de votre site

  • enregistrer

Youtube

Si je veux intégrer la vidéo PeerTube : préparer l'alternative à Youtube - HS - Monsieur Bidouille de Youtube, je dois :

  • cliquer sur Partager
  • cliquer sur Intégrer
  • copier le code ; dans notre exemple :

    <iframe width="560" height="315" src="https://www.youtube.com/embed/ouvTudXsNtM" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
    
  • coller ce code dans le contenu de votre site

  • enregistrer

Utilisation des templates

Créer un second blog

Le logiciel utilisé pour les blogs Framasite (http://getgrav.org/) n'étant pas prévu, à la base, pour accueillir deux systèmes de blog sur un même site, vous devez "ruser" en éditant en mode expert votre page.

Commencez par créer une page avec le template Blog :

Ajouter une page blog

En passant en mode expert, vous n'aurez pas tous les éléments d'un template blog :

grav édition en mode expert

Il faudra ajouter sous title (voir 2) le bloc suivant, en modifiant les deux champs Mon second blog ! par la description voulue et slug par la valeur de Nom du dossier ci-dessus - ici second-blog :

metadata:
    description: 'Mon second blog !'
slug: second-blog
content:
    items: '@self.children'
    order:
        by: date
        dir: desc
    limit: 5
    pagination: true
feed:
    description: 'Mon second blog !'
    limit: 10
pagination: true

En cliquant sur Enregistrer vous aurez alors un second blog sur lequel mettre des articles dans l'ordre chronologique.

Vous pourrez alors ajouter une page avec comme page parente celle que vous venez de créer (ici Second blog) :

cration d'une page blog pour le second blog

Personnalisation du site

La barre de navigation et le pied de page

Excepté pour les page_navbar_interne, la barre de navigation et le pied de page sont définis dans la page common.

Lorsque vous modifiez cette page, il est important de bien faire attention que les shortcodes soient correctement fermés.
S’il manque une balise de fermeture, le site ainsi que l’espace admin riquent d’être complètement cassés.

Le menu principal contient la liste des pages de premier niveau.

Le titre « Framasite » est défini dans l’attribut brand_text. Les icônes de réseau sociaux en haut à droite correspondent aux shortcodes [g-link] dont la syntaxe est décrite dans les composants de base.

Voici une vidéo illustrant comment personnaliser tout ça :

Ajouter des styles

Pour personnaliser l’apparence du site, il faut utiliser une feuille de style CSS.

Rendez-vous dans Plugins > CustomCSS et collez dans le champ Inline CSS votre feuille de style.

Illustration en vidéo avec un thème noir/orange dont la feuille de style est celle-ci.

Un jeu de thème vous est également proposé en dessous de la zone de texte.
En cliquant sur le bouton Utiliser, le champ sera rempli avec la feuille de style adéquate.

Ajouter des formules mathématiques

Vous avez la possibilité d’insérer des formules mathématiques écrites en LATEX. Il faut pour cela les encadrer de ce code HTML :

<p class="mathjax mathjax--block">…</p>

Exemples :

<p class="mathjax mathjax--block">
$$
\begin{align}
  g_{\mu \nu} & = [S1] \times \operatorname{diag}(-1,+1,+1,+1) \\[6pt]
  {R^\mu}_{\alpha \beta \gamma} & = [S2] \times (\Gamma^\mu_{\alpha \gamma,\beta}-\Gamma^\mu_{\alpha \beta,\gamma}+\Gamma^\mu_{\sigma \beta}\Gamma^\sigma_{\gamma \alpha}-\Gamma^\mu_{\sigma \gamma}\Gamma^\sigma_{\beta \alpha}) \\[6pt]
  G_{\mu \nu} & = [S3] \times {8 \pi G \over c^4} T_{\mu \nu}
\end{align}
$$
</p>

<p class="mathjax mathjax--block">
$$
R_{\mu \nu}=[S2]\times [S3] \times {R^\alpha}_{\mu\alpha\nu}
$$
</p>

Gestion des permissions

Créer une page privée

Vous avez la possibilité de créer une page qui ne sera visible que par les personnes voulues. Par exemple, pour n'afficher une page qu'à un utilisateur connecté, vous devez :

Toute personne non connectée verra une demande de connexion à la page. Une personne se connectant pourra voir son contenu.

Aperçu du mode expert de grav

Administration

Gestion des utilisateurs

Vous pouvez ajouter des utilisateurs à votre site : soit en tant que simple utilisateur avec des droits limités, ou en tant qu'admin.

Pour ce faire, voir la page Prise en main de Framasite / Administration.

results matching ""

    No results matching ""