Oshiage

Présentation

Oshiage est un squelette éditorial sous Bootstrap4.
Il a été conçu pour les sites contenant peu d’images.

  • La page d’accueil est au format « onepage » avec plusieurs blocs
  • La page d’article est concu pour être très lisible et permettre une navigation transversale en naviguant avec les articles voisins ou des articles suggérés.

Ce squelette est idéal pour de petits sites d’associations, de particuliers, d’entreprises.
Le squelette se débrouille aussi bien sur les smartphones.

Aperçu

Page d’accueil

Page article

Exemple de site basé sur Oshiage
https://www.babalex.org/

Installation

A l’installation, le plugin crée aussi

  • un champs extra pour gérer les tris des rubriques

Les plugins Favicon, Fulltext, Court-circuit 2 peuvent être installés en complément.

Lorsque votre site passe en production, il est recommandé d’activer la compression des fichiers javascript et CSS pour avoir un site rapide à charger.

Configuration

Le squelette est configurable

Choix des contenus et des couleurs

Lien vers la page démo

Pour ajouter un logo, il suffit d’ajouter un logo de site dans le menu « configuration > identité du site » (?exec=configurer_identite).
Il est conseillé d’utiliser un logo en format SVG.

Ce logo sera affiché en haut du site et dans le pied de page.

Configurer votre menu

Le menu est simplifié (pas de sous-menu) volontairement pour privilégier une navigation en déroulant la page d’accueil

Dans le menu de configuration renseigner les champs

qui correspondent aux zones suivantes

Configurer votre pied de page

Dans le menu de configuration renseigner les champs

qui correspondent aux zones suivantes

Page d’accueil

La page d’accueil est composée de 6 zones.

Zone 1 : Rubrique de présentation

Descriptif : On affiche la rubrique sélectionnée (titre long, titre et texte)

Zone 2 : Rubrique « actualités »

Descriptif : On affiche la rubrique sélectionnée . Les cartes correspondent aux 4 derniers articles publiés par date dans la branche

Zone 3 : Rubrique « formation »

Descriptif : On affiche la rubrique sélectionnée . Les cartes correspondent aux sous-rubriques de la rubrique sélectionnée

Zone 4 : Rubrique « ressources »

Descriptif : On affiche la rubrique sélectionnée . Les cartes correspondent aux 4 derniers articles publiés par date dans la branche

Zone 5 : Article « nous soutenir »

Descriptif : On affiche le titre et le chapeau de l’article sélectionné.

Zone 6 : Article « partenaires »

Descriptif : On affiche le texte de l’article sélectionné.

Astuce Pour avoir l’effet des logos en monochrome qui passent en couleur en rollover, on pourra utiliser le balisage HTML/CSS suivant dans le corps de l’article sélectionné

<div class="partenaires">
  <div class="partenaire">[<doc30>->https://www.lien-un.org/]</div>
  <div class="partenaire">[<doc32>->>https://www.lien-deux.org]</div>
</div>

Classement des rubriques

Sur chaque rubrique, vous pouvez choisir l’ordre des affichages des articles qui y figurent

Personnaliser Oshiage

Ajouter une feuille de style personnalisée
Vous pouvez ajouter votre feuilles de style personnelle.
Cette feuille de style devra s’appeler css/perso.css.
Il est recommandé de la déposer dans le répertoire squelettes/

Surcharger d’autres blocs
Plus généralement, vous pouvez surcharger tous les les éléments du squelette en ajoutant votre copie modifiée dans le répertoire squelettes/. Vous pouvez aussi ajouter des déclinaisons spéciales pour une rubrique donnée, par exemple squelettes/rubrique-45.html

Remarques

Le squelette est sur le git communautaire.
N’hésitez pas à contribuer en conservant à l’esprit de laisser le squelette aussi générique que possible.

Discussion

3 discussions

  • 3

    Bonjour,
    Ce squelette me plait bien, il est clean et facilement adaptable.

    J’ai tenté une modif du code de la page rubrique.html car il y a un ’]’ qui semble superflu
    <INCLURE{fond=inc/rubrique, ajax, env} />]
    et qui s’affiche sur le site public. Je ne suis pas une pro de git donc je ne sais pas si j’ai bien ajouté la proposition de modification sur
    https://git.spip.net/spip-contrib-squelettes/oshiage/compare/master...lemotjuste-patch-1

    Et sinon je n’arrive pas à régler un problème avec le menu du plugin « minibando » : les entrées de niveaux 2 ne sont pas cliquables une fois Oshiage activé.

    Merci pour le partage de ce squelette.

    dd

    • Hello DD

      Merci d’avoir cette coquille, j’ai intégré ton patch.

      Merci pour cette relecture attentive

    • Bonjour,
      Merci pour le retour.

      Pour le menu d’admin j’ai trouvé : supprimer dans style.css :

      /* admin a gauche */ .spip-admin-bloc, .spip-admin-float {         left: 2%; /* pour pouvoir cliquer dessous notamment le menu ... */ .spip-admin-float {         pointer-events: none; } .spip-admin-float a {         pointer-events: auto; } .bugajaxie {         display: none; }
      Je ne sais pas si c’était voulu de le surcharger là pour ce squelette..

      dd

    • oui c’est fait exprès pour placer le menu admin SPIP (boutons spip) à gauche plutôt qu’à droite où l’on trouve des choses utiles comme le moteur de recherche

    Répondre à ce message

  • 3

    Bonjour,

    je voudrais utiliser ce squelette toutefois il me demande lors de l’installation :que je realise a la mano
    le plugin Font Awesome

    mais lequel ?

    celui ci : Font Awesome 5
    ou celui la : Font Awesome

    les deux permettent d’activer le squelette mais les deux provoque une erreur d’affichage

    Font Awesome 5
    j’ai en haut a droite search,"search

    Font Awesome
    affiche la ligne : Erreur d’exécution ........... /plugins/oshiage/inc/header.html

    • Le plugin fontawesome est bien défini dans le paquet du plugin
      il s’agit de « fontawesome »
      https://plugins.spip.net/fontawesome.html?compatible_spip=4.2

      Il faut la version fontawesome 1.0.5. compatible SPIP 4.2
      Je viens de tester, cela ne soulève pas d’erreur sous SPIP 4.2.6 & PHP 7.4 / 8.0

      A priori, si tu actives le oshiage, tout devrait se charger sans avoir rien à faire.

    • ok j’avais pas penser à allez regarder le paquet.xml

      malheureusement je peu pas activer

      le oshiage, tout devrait se charger sans avoir rien à faire.

      car je suis sur une sous mutualisation spip (une mutu dans une mutu)
      et donc je dois installer les plugins par FTP

      ok avec Font Awesome 1.0.5 , c’est impec
      http://apicultural.naalrost.fr/

      YAPLUKA
      merci

    • je sais pas si mon precedent message est passé

      mais ça roule , merci

      http://apicultural.naalrost.fr/

    Répondre à ce message

  • 4

    Bonjour erational et Hélène ! Merci pour ce très beau squelette pour SPIP. Je voudrais savoir comment faire pour apparaitre les belles images géométriques qui appariassent sur le site BABALEX. Merci !

    Répondre à ce message

Ajouter un commentaire

Avant de faire part d’un problème sur un plugin X, merci de lire ce qui suit :

  • Désactiver tous les plugins que vous ne voulez pas tester afin de vous assurer que le bug vient bien du plugin X. Cela vous évitera d’écrire sur le forum d’une contribution qui n’est finalement pas en cause.
  • Cherchez et notez les numéros de version de tout ce qui est en place au moment du test :
    • version de SPIP, en bas de la partie privée
    • version du plugin testé et des éventuels plugins nécessités
    • version de PHP (exec=info en partie privée)
    • version de MySQL / SQLite
  • Si votre problème concerne la partie publique de votre site, donnez une URL où le bug est visible, pour que les gens puissent voir par eux-mêmes.
  • En cas de page blanche, merci d’activer l’affichage des erreurs, et d’indiquer ensuite l’erreur qui apparaît.

Merci d’avance pour les personnes qui vous aideront !

Par ailleurs, n’oubliez pas que les contributeurs et contributrices ont une vie en dehors de SPIP.

Qui êtes-vous ?
[Se connecter]

Pour afficher votre trombine avec votre message, enregistrez-la d’abord sur gravatar.com (gratuit et indolore) et n’oubliez pas d’indiquer votre adresse e-mail ici.

Ajoutez votre commentaire ici

Ce champ accepte les raccourcis SPIP {{gras}} {italique} -*liste [texte->url] <quote> <code> et le code HTML <q> <del> <ins>. Pour créer des paragraphes, laissez simplement des lignes vides.

Ajouter un document

Suivre les commentaires : RSS 2.0 | Atom