Silverstripe

SilverstripeSilverstripe est le CMS (Content Management System) utilisé par AideDD pour publier du contenu en ligne. Moins connu que les deux poids lourds Joomla (que j'ai essayé comme première option de CMS et qui ne m'a pas convaincu) et Dupral - je laisse Wordpress de côté car il me semble encore et toujours plus axé blog qu'autre chose - il faisait néanmoins partie des CMS en vogue en 2013, lorsque le site a été relancé. Techniquement, l'outil est développé en Php orienté objet par une équipe néo-zélandaise.

La communauté française de Silverstripe ne semble cependant pas encore très active, c'est pourquoi je vais partager ici les petites modifications et personnalisations que j'ai apporté au programme de base (version 5). En espérant que ça puisse aider certaines personnes qui débuteraient avec ce CMS.

Installation

Avant toute chose, j'ai essayé plusieurs fois d'installer SS4 avec Softaculous sur CPanel, sans succès. Avec FTP ça n'a pas non plus marché. La seule manière d'installer correctement Silverstripe semble donc être celle recommandée sur leur site, via composer.

composer create-project silverstripe/installer SS4

Ensuite, éditez .env pour renseigner le nom de votre base, le user et le password de la base, ainsi que l'email de login et le password.

SS_DATABASE_CLASS="MySQLDatabase"
SS_DATABASE_NAME=""
SS_DATABASE_SERVER="localhost"
SS_DATABASE_USERNAME=""
SS_DATABASE_PASSWORD=""
SS_DEFAULT_ADMIN_USERNAME=""
SS_DEFAULT_ADMIN_PASSWORD=""
SS_ENVIRONMENT_TYPE=""

Et dans SS4 :

vendor/bin/sake dev/build

Puis déplacer tous les fichiers du répertoire SS4 à la racine du site.

.htaccess

Les redirections doivent être placées dans le .htaccess à la racine du site, avant la redirection de Silverstripe. Par exemple :

Redirect 301 "/intro" "https://www.aidedd.org/dnd-5"

RewriteEngine On
# Redirect non www to www
RewriteCond %{HTTP_HOST} ^aidedd\.org$ [NC]
RewriteRule ^(.*)$ https://www.aidedd.org/$1 [R=301,L]
# Redirect non https to https
RewriteCond %{HTTPS} off
RewriteRule ^(.*)$ https://%{HTTP_HOST}%{REQUEST_URI} [R=301,L]

RewriteRule ^(.*)$ public/$1

Arborescence

J'ai opté pour l'arborescence suggérée dans les leçons de Silverstripe.

app
-- src
-- templates
public
-- assets
-- css
-- images
-- javascript
-- webfonts
silverstripe-cache
vendor

Puis modifier app/_config/theme.yml en conséquences.

----
Name: mytheme
---
SilverStripe\View\SSViewer:
  themes:
    - '$public'
    - '$default'

Langue

Pensez à modifier la langue de votre site pour la balise html lang. Dans app/_config.php ajouter :

use SilverStripe\i18n\i18n;
i18n::set_locale('fr_FR');

Titre des pages

Silverstripe ajoute le nom du site au titre html de chaque page, mais cela ne me semble pas très judicieux au niveau SEO. Dans mon cas, le site s’appelle "AideDD" mais je préfère ajouter "D&D 5" que le nom du site après le nom de la page. Modifiez le template "templates/Page.ss" comme suit.

Nouveaux types de pages

Créer un nouveau type de page est expliqué clairement dans les tutoriels, mais il est moins facile de trouver l'info sur comment ajouter le texte de description des nouveaux types de page et changer l'icône. Si vous avez par exemple un template homepage.ss, il suffit de modifier la classe comme suit dans "app/src/homepage.php". La liste des icônes est disponible ici.

class homepage extends Page {
   private static $icon_home = 'font-icon-p-home';
   private static $description = "Texte de description du type de page";
}

Modifier les Breadcrumbs

Pour modifier les breadcrumbs afin que Google les reconnaisse, éditez le fichier "vendor/silverstripe/ cms/templates/ BreadcrumbsTemplate.ss" comme indiqué si vous souhaitez utiliser les balises ‹ol> et ‹li> par exemple.

Puis modifier le fichier "public/css/layout.css" pour y ajouter quelque chose du style :

#Breadcrumbs ol {list-style-type: none;}
#Breadcrumbs ol li {display: inline; color: #999;}
#Breadcrumbs ol li+li:before {content: "\203A"}

Customiser la barre d'édition

Dans app/_config.php vous pouvez facilement ajouter ou retirer des boutons. Exemple :

use SilverStripe\Forms\HTMLEditor\HTMLEditorConfig;

HtmlEditorConfig::get('cms')->enablePlugins('hr');
HtmlEditorConfig::get('cms')->enablePlugins('charmap');
HtmlEditorConfig::get('cms')->insertButtonsAfter('underline', 'strikethrough');
HtmlEditorConfig::get('cms')->insertButtonsAfter('indent', 'hr');
HtmlEditorConfig::get('cms')->insertButtonsAfter('hr', 'charmap');
HtmlEditorConfig::get('cms')->removeButtons('ssembed');

Ensuite, pour ajouter de vos propres styles, toujours dans app/_config.php :

$style_formats = [
['title' => 'Nom du style 1', 'selector' => 'div, p', 'classes' => 'style1' ],
['title' => 'Nom du style 2', 'selector' => 'div, p', 'classes' => 'style2' ]
];
HtmlEditorConfig::get('cms')->addButtonsToLine(2, 'styleselect');
HtmlEditorConfig::get('cms')->setOptions([ 'importcss_append' => true, 'importcss_selector_filter' => 'fake', 'style_formats' => $style_formats]);

Style des images

Pour modifier les alignements par défaut des images.

Dans "vendor/silverstripe/asset-admin/ code/Forms/ ImageFormFactory.php", modifier :

$alignments = [
'leftlite' => _t('SilverStripe\\AssetAdmin\\Controller\\AssetAdmin.AlignmentLeftAlone', 'Left'),
'left' => _t('SilverStripe\\AssetAdmin\\Controller\\AssetAdmin.AlignmentLeft', 'Left'),
'centerlite' => _t('SilverStripe\\AssetAdmin\\Controller\\AssetAdmin.AlignmentCenterAlone', 'Center'),
'center' => _t('SilverStripe\\AssetAdmin\\Controller\\AssetAdmin.AlignmentCenter', 'Center'),
'rightlite' => _t('SilverStripe\\AssetAdmin\\Controller\\AssetAdmin.AlignmentRightAlone', 'Right'),
'right' => _t('SilverStripe\\AssetAdmin\\Controller\\AssetAdmin.AlignmentRight', 'Right'),
];

Dans "vendor/silverstripe/asset-admin/ lang/fr.yml", modifier :

 AlignmentLeft: 'Gauche +cadre'
AlignmentLeftAlone: 'Gauche'
AlignmentCenter: 'Centré +cadre'
AlignmentCenterAlone: 'Centré'
AlignmentRight: 'Droite +cadre'
AlignmentRightAlone: 'Droite'

Dans "vendor/silverstripe/asset-admin/ client/dist/ styles/bundle.css", modifier :

.insert-embed-modal__placement .form-check .option-val--leftlite+span:before{background-position-y:-252px}
.insert-embed-modal__placement .form-check .option-val--leftlite.checked+span:before{background-position-y:-216px}
.insert-embed-modal__placement .form-check .option-val--left+span:before{background-position-y:-252px}
.insert-embed-modal__placement .form-check .option-val--left.checked+span:before{background-position-y:-216px}

.insert-embed-modal__placement .form-check .option-val--centerlite+span:before{background-position-y:-108px}
.insert-embed-modal__placement .form-check .option-val--centerlite.checked+span:before{background-position-y:-72px}
.insert-embed-modal__placement .form-check .option-val--center+span:before{background-position-y:-108px}
.insert-embed-modal__placement .form-check .option-val--center.checked+span:before{background-position-y:-72px}

.insert-embed-modal__placement .form-check .option-val--rightlite+span:before{background-position-y:-324px}
.insert-embed-modal__placement .form-check .option-val--rightlite.checked+span:before{background-position-y:-288px}
.insert-embed-modal__placement .form-check .option-val--right+span:before{background-position-y:-324px}
.insert-embed-modal__placement .form-check .option-val--right.checked+span:before{background-position-y:-288px}

Codes HTML

Par défaut plusieurs écritures HTML sont bloquées par Silverstripe. Pour permettre de nouveaux codes HTML, ajoutez les lignes suivantes à la fin de votre fichier "app/_config.php".

HtmlEditorConfig::get('cms')->setOption(
'extended_valid_elements',
'ol[start|type],i[class|title]'
);

Menu admin

Pour ajouter un nouveau menu dans le panneau Settings de l'admin, modifiez les lignes suivantes dans le fichier "vendor/silverstripe/ siteconfig/templates/ Silverstripe/SiteConfig/Includes/ SiteConfigLeftAndMain_EditForm.ss".

Email admin

L'équipe de Silverstripe m'a répondu que c'était normal, mais l'email de l'admin, nécessaire dans le cas d'un password recovery par exemple, doit être mis manuellement. Pour cela éditer le fichier "app/_config/mysite. yml" et ajouter à la fin :

SilverStripe\Control\Email\Email:
admin_email: 'webmaster@monsite.com'

Trailing Slash (SS 5)

Le CMS ne gérant plus par défaut le / à la fin des URL, si on les veut il faut le spécifier.

SilverStripe\Control\Controller:
add_trailing_slash: true

Fichiers téléchargeables

Pour permettre de télécharger des extensions non prévues, éditer le fichier "app/_config/mysite. yml" et ajouter à la fin :

SilverStripe\Assets\File:
allowed_extensions:
- xml

W3C check

La validation des pages par le W3C donne deux warning sur ‹script type="application/javascript">. Pour s'en défaire, dans "vendor/silverstripe/ framework/src/View/ Requierements_Backend.php" commenter l'ajout du type :

  $htmlAttributes = [
// 'type' => isset($attributes['type']) ? $attributes['type'] : "application/javascript",
'src' => $this->pathForFile($file),

Zoom

La modification suivante permet d'effectuer un zoom sur la page d'admin depuis un smartphone.

Dans "vendor/silverstripe/ admin/templates/Silverstripe/ Admin/LeftandMain.ss", remplacer :

meta name="viewport" content="width=device-width, maximum-scale=1.0"

Par

meta name="viewport" content="width=device-width"

Purge des versions de page

Par défaut, Silverstripe garde une trace de toutes les versions des pages, publiées et brouillons. En quelques jours, on peut donc avoir des dizaines de versions d'une seule page en base de données, ce qui augmente la taille de la BDD de manière significative. Il existe heureusement un module, Truncator, qui permet de nettoyer automatiquement l'historique d'une page à chaque sauvegarde de celle-ci.

composer require axllent/silverstripe-version-truncator

On paramètre juste le nombre de versions publiées et le nombre de versions brouillons qu'on souhaite garder par page dans "vendor/axllent/silverstripe-version-truncator/_config/extension.yml".

Upgrade

Indiquer dans le fichier composer.json la version à laquelle on souhaite upgrader, par exemple :

"silverstripe/recipe-cms": "~4.11.0@stable",

Puis utiliser la ligne de commande suivante :

composer update

En local, si la version de php détectée par Composer n'est pas la même que celle utilisée par wampserver, entrer :

composer config platform.php 7.4.21