simple f3 bootstrap 5 multi lang site -Download - simple f3 bootstrap 5 multi lang site Quellcode Download

simple f3 bootstrap 5 multi lang site

Andere Kategorien

1.0.0

Herunterladen

Eine einfache, mehrsprachige Website mit Fettfrei

Ein Frontend / Backend-Setup für eine einfache, mehrsprachige Website mit Bootstrap 5 und das fettfreie PHP-Framework ( aber keine Datenbank-dies ist kein CMS ).

Überblick

Kombinieren Sie Bootstrap 5 mit dem fettfreien PHP-Framework, um Websites zu erstellen, die:

Verwenden Sie Vorlagen zum Zusammenbau der Seiten
Bereitstellung sauberer URLs
Unterstützen Sie die automatische Sprachauswahl
Arbeiten Sie auf einem gemeinsam genutzten Server
sind einfach zu installieren (kopieren und einfügen, kein Paketmanager erforderlich)

Zuvor habe ich eine Demo-Site mit Bootstrap 4 und fettfrei und fettfrei erstellt und die Dateien über ein GitHub-Repository geteilt, um Erfahrungen mit fettfreiem und Bootstrap 4 zu sammeln.

Für die Veröffentlichung von Bootstrap 5.3, das den Dark -Modus unterstützt (und nicht mehr Internet Explorer unterstützt), habe ich eine neue Demo -Site und ein neues Repository erstellt.

Demo

Der Code aus diesem Repository ist unter https://sbf-bootstrap5.alwaysdata.net/ in Betrieb und wird auf einem kostenlosen Hosting-Dienst ausgeführt, der PHP und Apache bietet. Die Absicht ist, dass der Code ein so vollständig wie mögliches Paket ist, anstatt nur ein Ausgangspunkt für den Aufbau eines Standorts.

Dieses Design ist kein CMS. Es gibt keine Datenbank. Der gesamte Inhalt befindet sich in der Konfigurationsdatei, den Controller -Dateien und den Inhaltsvorlagen, die für statische Websites gut geeignet sind.

Anwenden des Setups

Alle meine Dateien für die Demo-Site, die fettfreie Konfiguration, die Controller und die Vorlagendateien sowie die zugehörigen SCSS-, Image- und JavaScript-Dateien finden Sie in diesem GitHub-Repository. Die Bootstrap- und fettfreien Dateien sind bei Bootstrap und fettfrei erhältlich.

Es sollte möglich sein, meinen site -spezifischen Inhalt durch Inhalte für eine andere Website zu ersetzen.

Was ist enthalten (keine umfassende Liste)

Fettfrei

config.ini
Routen.ini
Alle Controller -Dateien
Alle Vorlagen für die Seiten

Die fettfreien Dateien sind nicht enthalten-diese Dateien sind von fettfreien verfügbar

Bootstrap

Bootstrap ist leicht zu strukturieren mit seinen verfügbaren Klassen und Verwendung von SASS. Es gibt ein paar Dinge, die ich aus dem Standard -Bootstrap -Code geändert habe:

Für das Offcanvas -Menü von Bootstrap:
- Verwenden Sie das Navi-Toggle-Button, um das Menü sowohl zu öffnen als auch zu schließen (eliminiert die Notwendigkeit einer Schließung im Menü).
- Schließen Sie das Menü automatisch, wenn ein gleichzeitigem Link klickt
- Es wurde eine Option für den Fokus hinzugefügt, um sich auf das Ziel zu befinden, anstatt auf der Menüschaltfläche zu sein - erfordert die Änderung der Quelldatei modul.js
Für Vollbild-Hintergrundbilder mit Modalen
- Das statische Bild des Hintergrunds fügte is-fixed Klasse hinzu, sodass es mit Modals funktioniert (Bootstrap hat die Funktion, ist aber nicht gut dokumentiert)

Die Bootstrap -Dateien sind nicht enthalten - diese Dateien sind bei Bootstrap bei der verfügbaren Dateien verfügbar

Allgemeine Website -Sachen

Dynamische Sitemap -Erzeugung mit XHTML: Links für alternative Sprachen
Verwenden Sie preload und picture , um eine Auswahl an Heldenbildern (4 Smartphone, 4 Tablet und 5 Laptop/Monitor) für den Browser zu erhalten, um die Seitenladegeschwindigkeit zu verbessern
Verwendet das SMTP-Plug-In von Fatfree für E-Mail-Nachrichten
Benutzerdefinierte Fehlerantwort Seiten

Multisprachiger Unterstützung

Während der Inhalt der Demo-Website in englischer Sprache ist, verfügt die Demo über chinesische und koreanische Seiten, um den mehrsprachigen Betrieb zu demonstrieren. Die chinesischen und koreanischen Heimseiten wurden auf der englischen Homepage mit Google Translate erstellt. Der Rest der chinesischen und koreanischen Seiten, die nur zur Demonstration der Navigation bereitgestellt werden, haben nur Google -Übersetzungen der Titel und Beschreibungen der englischen Seiten.

Verwenden von Systemschriften

Schriftstile verwenden system-ui, die gleiche Schriftart, mit der das Betriebssystem Text angezeigt wird. Dies bietet einen ähnlichen Blick auf das, was der Benutzer auf den Systembildschirmen sieht, und beschleunigt die Startzeit der Seiten, da keine Schriftarten heruntergeladen werden müssen.