Una configuración de frontend / backend para un sitio web simple de varios idiomas que usa Bootstrap 4 con el marco PHP sin grasa, pero sin base de datos.
Quería un marco PHP para usar con Bootstrap 4 para crear sitios web que:
Mi elección era libre de grasas: "un microframo de PHP potente pero fácil de usar"
Para asegurarme de que podría construir un sitio, creé uno; Un sitio sobre cómo utilicé Bootstrap y sin grasa para crear un sitio. Y el sitio es mi registro de lo que hice y por qué.
Esto no es un CMS. No hay una base de datos. Todo el contenido está en el archivo de configuración, los archivos del controlador y las plantillas de contenido.
*Nota: Tengo un repositorio similar para Bootstrap 5 en https://github.com/richdebourke/simple-f3-bootstrap-5-multi-lang-site.
Todo el código de este repositorio está en funcionamiento en http://sbf-testing.byethost7.com. La intención es que el Código sea un paquete como Compensador, en lugar de solo un punto de partida básico para construir un sitio. La demostración se ejecuta en un servicio de alojamiento gratuito que proporciona PHP y Apache, pero ningún correo electrónico y la mayoría de los bots están bloqueados, por lo que no hay formulario de contacto y no SSL 1 (es por eso que digo un sitio "casi completo"), pero esos deberían ser lo suficientemente fáciles de implementar en un host de producción.
Nota 1 : El servicio de alojamiento ofrece certificados autofirmados, pero no estoy seguro de que Google acepte los que se ranking. Dado que el servicio de alojamiento bloquea la mayoría de los bots, es difícil validar mi propiedad, por lo que estoy ejecutando el sitio sin SSL.
Todos mis archivos para el sitio de demostración, la configuración sin grasa, el controlador y los archivos de plantilla, y los archivos SCSS, imagen y JavaScript asociados están en este repositorio de GitHub. Los archivos Bootstrap y sin grasa están disponibles en Bootstrap y sin grasa.
Debería ser bastante fácil reemplazar el contenido específico de mi sitio con contenido para un sitio web diferente.
Los archivos sin grasa no están incluidos: esos archivos están disponibles sin grasa
Bootstrap es fácil de estructurar con las clases disponibles y usando SASS. Hubo dos cosas que cambié del código de arranque estándar:
Los archivos de bootstrap no están incluidos: esos archivos están disponibles en bootstrap
Si bien el contenido para el sitio de demostración está en inglés, la demostración tiene páginas chinas y coreanas para demostrar la operación de varios idiomas. Las páginas de inicio chinas y coreanas se crearon a partir de la página de inicio de inglés utilizando Google Translate. El resto de las páginas chinas y coreanas, que se proporcionan solo para demostrar la navegación, solo tienen traducciones de Google de los títulos y descripciones de las páginas de inglés.
Para la actualización de julio de 2022, además de verificar el sitio funciona con las últimas versiones de Fat-Free, Bootstrap 4 y JQuery, también revisé el sitio para:
Use las fuentes del sistema: cambie de usar las fuentes de Google a usar fuentes system-ui . El uso de Google Fonts requiere que el navegador del usuario envíe una solicitud a Google para la hoja de estilo y los archivos de fuentes necesarios. Eso implica enviar la dirección IP del usuario a Google, que no se permite el Reglamento General de Protección de Datos de la UE (GDPR). system-ui instruye al navegador que use la misma fuente que el sistema operativo utiliza para mostrar texto. Esto proporciona un aspecto similar a lo que el usuario ve en las pantallas del sistema, y acelera el tiempo de inicio de la página, ya que no hay fuentes para descargar.
Archivos de bootstrap y jQuery de auto-host: cambió de usar redes de entrega de contenido para los archivos de marco y biblioteca para proporcionar los archivos desde mi servidor, nuevamente debido al requisito GDPR para no compartir direcciones IP de los usuarios con otros sitios. Ahora estoy usando Webpack para combinar jQuery, Bootstrap JavaScript, JQuery Easing Plugin y JavaScript para el Sitio en un archivo (un archivo se descargará más rápido).
Apoyo a la cámara reducida prefpers: mientras que Boostrap ya admitía la configuración del usuario para un movimiento reducido, no ajusté las animaciones jQuery. Lo hago ahora.
Soporte de prefiertas de color-esquema: agregó un formato de modo oscuro para los usuarios que prefieren un formato oscuro en lugar de un formato de luz.
El sitio de demostración funciona con las últimas versiones de:
Y con:
Este código se proporciona bajo una licencia MIT. Consulte el archivo de licencia para obtener más detalles.
Sin grasa se proporciona bajo una licencia pública de GNU (GPL V3)
Bootstrap se proporciona bajo una licencia MIT
La navegación de OffCanvas se proporciona bajo una licencia MIT
2018/09/23 - Lanzamiento inicial.
2019/01/02 : el sitio validado funciona con Fat-Free 3.6.5 y actualizó parte del contenido de la página para obtener mejores resultados de los motores de búsqueda.
2019/05/10 - Validado El sitio funciona con JQuery 3.4.1 y Bootstrap 4.3.1.
2019/05/27 : movió la sección para el aviso de cookies de la UE a la parte inferior de la página, ya que Google a veces incluyó el texto de notificación en el fragmento en algunas páginas de resultados del motor de búsqueda.
2019/07/02 - Implementado display=swap en Google Fonts, que elimina la necesidad de un administrador de fuentes, al menos para Google Fonts (estaba usando Font Face Observer).
2020/01/20 -Validado El sitio funciona con Fat 3.7.1 y Bootstrap 4.4.1, e hizo algunas ediciones menores al contenido.
2020/07/05 -Validado El sitio funciona con Fat-Free 3.7.2, Bootstrap 4.5.0 y JQuery 3.5.1, eliminó los archivos CSS no minificados (solo suministrando archivos CSS minificados en el sitio web) e hicieron algunas ediciones menores al contenido (incluida una explicación sobre cómo estoy haciendo el código SASS en VS).
2022/07/15 -Validado el sitio funciona con Fat-Fat 38.0, Bootstrap 4.6.1 y JQuery 3.6.0, cambió de Google Fonts a usar fuentes del sistema, agregó soporte para un modo de movimiento y modo oscuro reducidos, y actualizó el contenido.
2022/11/17 - Validado El sitio funciona con jQuery 3.6.1 y se cambió a proporcionar imágenes webp de resolución normales y de alta resolución para modos de luz y oscuridad utilizando elementos de imagen y fuente.
2023/07/09 -Agregue el enlace a Bootstrap 5.3 con el repositorio de marco PHP sin grasa.
2023/10/07 - VALIDADO El sitio funciona con Bootstrap 4.6.2 y JQuery 3.7.1. El host del sitio de demostración ahora está ejecutando PHP 8.2, por lo que la demostración ahora está usando 3.8.2 sin grasa.