Une configuration frontend / backend pour un site Web multi-langues simple utilisant Bootstrap 4 avec le cadre PHP sans gras, mais pas de base de données.
Je voulais un framework PHP à utiliser avec Bootstrap 4 pour créer des sites Web qui le feraient:
Mon choix était sans gras - "un micro-framework PHP puissant mais facile à utiliser"
Pour être sûr de pouvoir construire un site, j'en ai créé un; Un site sur la façon dont j'ai utilisé Bootstrap et sans gras pour créer un site. Et le site est mon dossier pour ce que j'ai fait et pourquoi.
Ce n'est pas un CMS. Il n'y a pas de base de données. Tout le contenu est dans le fichier de configuration, les fichiers de contrôleur et les modèles de contenu.
* Remarque: j'ai un référentiel similaire pour Bootstrap 5 sur https://github.com/richdebourke/simple-f3-bootstrap-5-multi-lang-site.
Tout le code de ce référentiel est en fonctionnement à http://sbf-testting.byethost7.com. L'intention est que le code soit un package tel que possible, plutôt qu'un simple point de départ à nu pour la construction d'un site. La démo fonctionne sur un service d'hébergement gratuit qui fournit PHP et Apache, mais aucun e-mail et la plupart des robots ne sont bloqués, donc pas de formulaire de contact et pas de SSL 1 (c'est pourquoi je dis un site "presque complet"), mais ceux-ci devraient être assez faciles à mettre en œuvre sur un hôte de production.
Remarque 1 : Le service d'hébergement propose des certificats auto-signés, mais je ne suis pas sûr que Google accepte ceux pour le classement de recherche. Étant donné que le service d'hébergement bloque la plupart des bots, il est difficile de valider ma propriété, donc je gère le site sans SSL.
Tous mes fichiers pour le site de démonstration, les fichiers de configuration, de contrôleur et de modèle sans gras, et les fichiers SCSS, image et JavaScript associés sont dans ce référentiel GitHub. Les fichiers bootstrap et sans gras sont disponibles auprès de Bootstrap et sans gras.
Il devrait être assez facile de remplacer le contenu spécifique de mon site par du contenu pour un site Web différent.
Les fichiers sans gras ne sont pas inclus - ces fichiers sont disponibles à partir de
Bootstrap est facile à structurer avec les classes disponibles et à l'aide de SASS. Il y avait deux choses que j'ai changé par rapport au code de bootstrap standard:
Les fichiers bootstrap ne sont pas inclus - ces fichiers sont disponibles à partir de bootstrap
Bien que le contenu du site de démonstration soit en anglais, la démo a des pages chinoises et coréennes pour démontrer l'opération multi-langues. Les pages d'accueil chinois et coréennes ont été créées à partir de la page d'accueil anglaise à l'aide de Google Translate. Le reste des pages chinoises et coréennes, qui ne sont fournies que pour démontrer la navigation, ont simplement des traductions Google des titres et descriptions des pages anglaises.
Pour la mise à jour de juillet 2022, en plus de vérifier le site, les dernières versions de Fat-Free, Bootstrap 4 et JQuery, j'ai également révisé le site pour:
Utilisez des polices système - passées de l'utilisation des polices Google à l'utilisation des polices system-ui . L'utilisation de polices Google nécessite que le navigateur de l'utilisateur envoie une demande à Google pour la feuille de style et les fichiers de police nécessaires. Cela implique l'envoi de l'adresse IP de l'utilisateur à Google, ce qui, selon le règlement général de la protection des données (RGPD), n'est pas autorisé. system-ui demande au navigateur d'utiliser la même police que le système d'exploitation utilise pour afficher le texte. Cela fournit un look similaire à ce que l'utilisateur voit sur les écrans du système, et il accélère le temps de démarrage de la page car il n'y a pas de polices à télécharger.
Fichiers Bootstrap et jQuery auto-host - passé de l'utilisation des réseaux de livraison de contenu pour le framework et les fichiers de bibliothèque à la fourniture des fichiers de mon serveur, encore une fois en raison de l'exigence du RGPD pour ne pas partager des adresses IP utilisateur avec d'autres sites. J'utilise maintenant WebPack pour combiner jQuery, bootstrap JavaScript, jQuery Ferming Plugin et le JavaScript pour le site en un seul fichier (un fichier téléchargera plus rapidement).
Support Préfers-réduit Motion - Bien que Boostrap ait déjà pris en charge le paramètre utilisateur pour un mouvement réduit, je n'ai pas ajusté les animations jQuery. Je le fais maintenant.
Support Prefers-Color-Scheme - Ajout d'un format en mode noir pour les utilisateurs qui préfèrent un format sombre plutôt qu'un format lumineux.
Le site de démonstration fonctionne avec les dernières versions de:
Et avec:
Ce code est fourni sous une licence MIT. Voir le fichier de licence pour plus de détails.
Sans gras est fourni sous une licence publique GNU (GPL V3)
Bootstrap est fourni sous une licence MIT
La navigation OffCanvas est fournie en vertu d'une licence du MIT
2018/09/23 - version initiale.
2019/01/02 - Validé que le site fonctionne avec 3,6.5 sans gras et mis à jour une partie du contenu de la page pour de meilleurs résultats de moteur de recherche.
2019/05/10 - Validé que le site fonctionne avec jQuery 3.4.1 et bootstrap 4.3.1.
2019/05/27 - Déplacé la section de l'avis de cookie de l'UE en bas de la page, car Google comprenait parfois le texte de l'avis dans l'extrait de certaines pages de résultats du moteur de recherche.
2019/07/02 - Implémentation display=swap sur les polices Google, ce qui élimine le besoin d'un gestionnaire de polices, au moins pour les polices Google (j'utilisais Font Face Observer).
2020/01/20 - Validé que le site fonctionne avec 3,7.1 sans gras et Bootstrap 4.4.1, et a effectué quelques modifications mineures au contenu.
2020/07/05 - Validé que le site fonctionne avec le 3,7.2 sans gras 3.7.2, Bootstrap 4.5.0 et JQuery 3.5.1, a éliminé les fichiers CSS non mini (en fournissant simplement des fichiers CSS minifiés sur le site Web), et a fait quelques modifications mineures au contenu (y compris une explication sur la façon dont je fais SASS dans le code VS).
2022/07/15 - Validé que le site fonctionne avec le 3,8.0 sans gras, Bootstrap 4.6.1 et JQuery 3.6.0, passé des polices Google à l'utilisation des polices système, une prise en charge ajoutée pour un mouvement réduit et un mode sombre, et a mis à jour le contenu.
2022/11/17 - Validé que le site fonctionne avec jQuery 3.6.1 et est passé à la fourniture d'images WebP normales et haute résolution pour les modes légers et sombres à l'aide d'éléments d'image et de source.
2023/07/09 - Ajouter un lien à Bootstrap 5.3 avec le référentiel Framework PHP sans gras.
2023/10/07 - Validé que le site fonctionne avec Bootstrap 4.6.2 et JQuery 3.7.1. L'hôte du site de démonstration exécute désormais PHP 8.2, donc la démo utilise désormais 3,8.2 sans gras.