Saltar al contenido principal

Assets y fuentes

Los assets son archivos estáticos del tema (CSS, JS, imágenes, fuentes). OmniBuy aplica fingerprinting automático para cache-busting.

Estructura de assets​

themes/<tema>/assets/
├── theme.css           ← Estilos principales
├── theme.js            ← JavaScript del tema
├── fonts/
│   └── *.woff2         ← Fuentes self-hosted
└── images/
    └── *.svg           ← Iconos

Uso en templates​

Usa los filtros asset_url o asset para obtener URLs fingerprinted:

<link rel="stylesheet" href="{{ 'theme.css' | asset_url }}">
<script src="{{ 'theme.js' | asset_url }}"></script>
<img src="{{ 'logo.svg' | asset_url }}" alt="Logo">

El filtro asset_url resuelve la URL con el hash del contenido:

assets/theme.css → /assets/theme.a3b4c5d6.css

Esto permite cache agresivo sin problemas de actualización.

Variables CSS del tema​

El snippet _base/snippets/css_vars.html inyecta variables CSS desde los settings del tema:

{{ cssVars
  "accent-color" .Settings.accent_color
  "font-heading" .Settings.font_heading
  "font-body" .Settings.font_body
  "bg-color" .Settings.bg_color
  "text-color" .Settings.text_color
}}

Esto genera un bloque <style> con las variables CSS custom:

:root {
  --accent-color: #6366F1;
  --font-heading: 'Inter', sans-serif;
  --font-body: 'Inter', sans-serif;
  --bg-color: #ffffff;
  --text-color: #0f172a;
}

Fuentes web​

Google Fonts​

Usa el filtro googleFontsURL para generar la URL de Google Fonts:

{{ googleFontsURL "Inter:wght@400;500;600;700" "JetBrains+Mono:wght@400;500" }}

Resultado:

<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet">

Fuentes self-hosted​

Para fuentes self-hosted, colócalas en assets/fonts/ y referencialas en tu CSS:

@font-face {
  font-family: 'MiFuente';
  src: url('{{ "fonts/mifuente.woff2" | asset_url }}') format('woff2');
  font-weight: 400;
  font-display: swap;
}

Fingerprinting​

El sistema de fingerprinting calcula un hash SHA-256 del contenido del archivo y lo inserta en el nombre:

theme.css → theme.a3b4c5d6.css
theme.js  → theme.f7e8d9c0.js
  • Los archivos se sirven con Cache-Control: max-age=31536000,immutable
  • El hash cambia solo cuando el contenido cambia
  • No necesitas renombrar archivos manualmente

Inyección de assets embebidos​

Las secciones pueden incluir CSS y JS inline:

{{ define "sections/mi-seccion" }}
{{ style }}
  .mi-seccion { padding: {{ .section.padding }}px; }
{{ endstyle }}

<section class="mi-seccion">
  <!-- contenido -->
</section>

{{ script }}
  document.querySelector('.mi-seccion').addEventListener('click', () => {
    // lógica
  });
{{ endscript }}
{{ end }}

Los tags {{ style }} y {{ script }} extraen el CSS/JS del HTML renderizado y lo inyectan en el <head> de la página. Esto permite secciones auto-contenidas.

CSS del fluid engine​

Los assets del fluid engine viven en _base/assets/:

ArchivoContenido
header-variants.cssEstilos de las 26 variantes de header
hero-variants.cssEstilos de las 10 variantes de hero (615 líneas)
hero-variants.jsLógica de carousel, video, countdown del hero
alpine.min.jsAlpine.js para interactividad
model-viewer.min.jsGoogle Model Viewer para AR

Estos assets son heredados por todos los temas vía _base. No necesitas copiarlos.

Buenas prácticas​

  • Usa variables CSS para colores y tipografía — no valores hardcoded
  • Self-host fuentes críticas — mejor que Google Fonts para performance
  • Separa CSS por componente — maintén theme.css organizado
  • No copies assets de _base — están heredados automáticamente
  • Usa asset_url siempre — nunca hardcodees URLs de assets