DocumentaciónCommerceContenido y diseño

Recursos del tema

Last update: Sun Jul 14 2024 00:00:00 GMT+0000 (Coordinated Universal Time)
  • Temas:

Creado para:

  • Principiante
  • Intermedio
  • Administrador
  • Usuario

Los archivos estáticos son la colección de recursos como CSS, fuentes, imágenes y JavaScript que usa un tema. La ubicación de los archivos estáticos se especifica en la configuración de URL base. Puede agregar una firma digital a la dirección URL de cada archivo estático para que los exploradores puedan detectar cuándo está disponible una versión más reciente. Se utiliza la versión más reciente del archivo si la firma difiere de lo que se almacena en la caché del explorador.

Para una instalación estándar, los recursos asociados con un tema están organizados en la carpeta web en la siguiente ubicación debajo de la raíz Commerce.

[commerce_root]/app/design/frontend/Magento/[theme_name]/web

Agregar una firma digital a las direcciones URL de los archivos estáticos

  1. En la barra lateral Admin, vaya a Stores > Settings>Configuration.

  2. En el panel izquierdo, expanda Advanced y elija Developer.

  3. Expanda Selector de expansión en la sección Static Files Settings.

    Configuración de archivos estáticos {width="500" modal="regular"}

  4. Establezca Sign Static Files en Yes.

  5. Una vez finalizado, haga clic en Save Config.

Tipo de archivo
Descripción
CSS
Controlar el estilo visual asociado a la piel. Ubicación de ejemplo en el servidor: [commerce]/app/design/frontend/Magento/[theme]/web/css
Fuentes
Proporcione las fuentes disponibles para usar en la temática. Ubicación en el servidor: [commerce]/app/design/frontend/Magento/[theme]/web/fonts
Imágenes
Proporcione los recursos gráficos utilizados por la temática, incluidos botones, texturas de fondo, etc. Ubicación de ejemplo en el servidor: [commerce]/app/design/frontend/Magento/[theme]/web/images
JS
Rutinas JavaScript específicas del tema y funciones a las que se puede llamar. Ubicación de ejemplo en el servidor: [commerce]/app/design/frontend/Magento/[theme]/web/js

Combinar archivos CSS

Como parte del esfuerzo por optimizar el sitio y reducir el tiempo de carga de la página, puede reducir el número de archivos CSS independientes combinándolos en un único archivo condensado. Si abre un archivo CSS combinado, verá un flujo continuo de texto, con los saltos de línea eliminados. No puede editar el archivo combinado, por lo que es mejor esperar hasta que esté fuera del modo de desarrollo y ya no realice cambios frecuentes en CSS.

NOTE
Los archivos CSS se pueden combinar desde el panel Admin solo cuando se trabaja en modo de desarrollador.

  1. En la barra lateral Admin, vaya a Stores > Settings>Configuration.

  2. En el panel izquierdo, Advanced y elija Developer.

  3. Expanda Selector de expansión en la sección CSS Settings.

    Configuración de CSS {width="500" modal="regular"}

    Para obtener descripciones detalladas de estas opciones de configuración, consulte Configuración de CSS en la Referencia de configuración.

  4. Establezca Merge CSS Files en Yes.

  5. Una vez finalizado, haga clic en Save Config.

Combinar archivos de JavaScript

Se pueden combinar varios archivos JavaScript en uno solo y condensado para reducir el tiempo de carga de la página. Si abre un archivo JavaScript combinado, verá un flujo continuo de texto, con los saltos de línea eliminados. Si ha finalizado el proceso de desarrollo y el código no contiene errores, considere la posibilidad de combinar los archivos.

NOTE
Los archivos de JavaScript se pueden combinar desde el panel Admin solo cuando se trabaja en Modo de desarrollador.

  1. En la barra lateral Admin, vaya a Stores > Settings>Configuration.

  2. En el panel izquierdo, Advanced y elija Developer.

  3. Expanda Selector de expansión en la sección JavaScript Settings.

    Configuración de JavaScript {width="600" modal="regular"}

    Para obtener descripciones detalladas de estas opciones de configuración, consulte Configuración de JavaScript en la Referencia de configuración.

  4. Establezca Merge JavaScript Files en Yes.

  5. Una vez finalizado, haga clic en Save Config.

recommendation-more-help
2b0136b4-ef75-405f-9734-60d741f198de