> ## Documentation Index
> Fetch the complete documentation index at: https://developers.hubspot.es/docs/llms.txt
> Use this file to discover all available pages before exploring further.

# La biblioteca de recursos del CMS de HubSpot

> La biblioteca de recursos del CMS incluye las prácticas recomendadas y ayuda a los desarrolladores a crear un sitio web rápidamente en el CMS de HubSpot. 

<DndSection>
  <DndModule numCols={9}>
    <div>
      [La biblioteca de recursos del CMS de HubSpot](https://github.com/HubSpot/cms-theme-boilerplate) sirve como punto de partida para poner en marcha un sitio web en el CMS de HubSpot, e incluye además algunas de las mejores prácticas recomendadas. La biblioteca de recursos ha sido creada y es revisada de forma continua por HubSpot. Además, es un proyecto de código abierto en GitHub, donde cualquier persona puede contribuir y adaptarlo según sus necesidades. Si eres nuevo en el CMS de HubSpot, y quieres empezar un nuevo proyecto basado en el contenido de la biblioteca, sigue la [guía de inicio rápido para desarrollar en el CMS de HubSpot](/cms/start-building/introduction/classic-hubl-quickstart).

      [Ver una demostración de la plantilla](https://boilerplate.hubspotcms.com/).
    </div>
  </DndModule>

  <DndModule numCols={3}>
    <div>
      [Ver](https://github.com/login?return_to=https%3A%2F%2Fgithub.com%2FHubSpot%2Fcms-theme-boilerplate%2Fsubscription) [Bifurcar](https://github.com/login?return_to=https%3A%2F%2Fgithub.com%2FHubSpot%2Fcms-theme-boilerplate%2Ffork) [Destacar](https://github.com/HubSpot/cms-theme-boilerplate)
    </div>
  </DndModule>
</DndSection>

## Estructura de la biblioteca de recursos del CMS de HubSpot

<DndSection>
  <DndModule numCols={6}>
    <div>
      Puedes trabajar con la biblioteca utilizando las [herramientas de desarrollo locales](/developer-tooling/local-development/hubspot-cli/install-the-cli) o directamente dentro del [administrador de diseño](https://knowledge.hubspot.com/cos-general/get-started-with-the-design-manager). La biblioteca utiliza referencias de rutas relativas para todos los materiales, lo que facilita su adaptación a cualquier proyecto. Esto también permite que la biblioteca sea completamente portátil entre cuentas en la plataforma HubSpot. A continuación se muestra una captura de pantalla de la estructura de carpetas de los recursos de la biblioteca. La biblioteca almacena sus recursos en varios directorios para una fácil identificación de dónde residen.
    </div>
  </DndModule>

  <DndModule numCols={6}>
    <HubspotVideoPlayer videoId="172844633478" />
  </DndModule>
</DndSection>

<Frame>
  <img src="https://cdn2.hubspot.net/hubfs/53/5Cdocs/boilerplate/boilerplate-structure-tree-view-4.png" alt="Estructura de las carpetas de la biblioteca de recursos del CMS de HubSpot" />
</Frame>

La estructura subyacente de la biblioteca de recursos del CMS de HubSpot gira en torno a un [diseño de base común](https://github.com/HubSpot/cms-theme-boilerplate/blob/main/src/templates/layouts/base.html) ubicado en la carpeta **plantillas > diseños**, que luego es la etiqueta `{% extends %}` y hace referencia al bloque `{% block body %}` para su contenido principal. Se puede ver una muestra de cómo se utilizan la etiqueta extendida y los bloques en [cualquiera de los archivos html dentro del directorio de plantillas.](https://github.com/HubSpot/cms-theme-boilerplate/tree/main/src/templates) Más información sobre los [bloques y las extensiones](/cms/reference/hubl/overview#blocks-and-extends).

Este es un método común de desarrollo en sistemas CMS, donde se utiliza una plantilla base (a veces llamada principal) que contiene los elementos estructurales comunes del contenido de tu sitio. Estos suelen ser elementos que se encuentran dentro del elemento `<head>` de tu sitio, como las meta propiedades comunes (por ejemplo: título y metadescripción), enlaces de favicono, enlaces de CSS y scripts de terceros

```hubl theme={null}
<!doctype html>
<html lang="{{ html_lang }}" {{ html_lang_dir }}>
 <head>
   <meta charset="utf-8">
   <title>{{ page_meta.html_title }}</title>
   {% if site_settings.favicon_src %}<link rel="shortcut icon" href="https://developers.hubspot.es/docs{{ site_settings.favicon_src }}" />{% endif %}
   <meta name="description" content="{{ page_meta.meta_description }}">
   {{ require_css(get_asset_url("../../css/layout.css")) }}
   {{ require_css(get_asset_url("../../css/main.css")) }}
   {{ require_css("https://fonts.googleapis.com/css?family=Merriweather:400,700|Lato:400,700&display=swap") }}
   {{ require_js(get_asset_url("../../js/main.js")) }}
   {{ standard_header_includes }}
 </head>
 <body>
   <div class="body-wrapper {{ builtin_body_classes }}">
     {% block header %}
       {% global_partial path="../partials/header.html" %}
     {% endblock header %}

     {% block body %}
       <!-- Nothing to see here -->
     {% endblock body %}

     {% global_partial path="../partials/footer.html" %}
   </div>
   {{ standard_footer_includes }}
 </body>
</html>
```

Dentro de este diseño base, también hay llamadas a nuestros parciales globales de encabezados y pie de página. Esto nos permite mantener el código de estas parciales en sus propios archivos separados para la modularidad y, debido a que son parciales globales, se pueden editar fácilmente usando nuestro [Editor de contenido global](/cms/start-building/building-blocks/global-content).

Para profundizar en los recursos incluidos en la biblioteca [, consulta la wiki de la biblioteca en GitHub](https://github.com/HubSpot/cms-theme-boilerplate/wiki).

## jQuery

**La biblioteca de temas de HubSpot no requiere jQuery para funcionar**. Para las cuentas más antiguas de HubSpot, jQuery se carga por opción predeterminada. Las nuevas cuentas de HubSpot, tienen jQuery desactivado por opción predeterminada.

Anteriormente, los scripts de HubSpot requerían jQuery para funcionar correctamente, por lo que la configuración de todo el dominio estaba ahí para ayudar a garantizar la compatibilidad. Los scripts de HubSpot ya no usan jQuery. Porque JQuery no es necesario y hay mejores formas para que los desarrolladores incluyan bibliotecas que también funcionan con el control de origen. Se aconseja desactivar la configuración de jQuery en los nuevos sitios web.

Ten en cuenta que si deshabilitas jQuery en un dominio que tiene un sitio web existente, las landing pages o páginas web que tengas podrían romperse si dependen de jQuery.

**Si quieres utilizar jQuery en tu nuevo sitio web, te recomendamos que utilices la última versión de jQuery.** Hay dos maneras de hacerlo:

* Sube la última versión de jQuery en tu sistema de archivos para desarrolladores y utiliza [`require_js`](/cms/reference/hubl/functions#require-js) para cargarlo donde y cuando lo necesites.
* Utiliza una CDN de confianza y usa [`require_js`](/cms/reference/hubl/functions#require-js) para cargar jQuery donde y cuando lo necesites.

## Recursos relacionados

* [Primeros pasos para usar temas](/cms/start-building/building-blocks/themes/getting-started)
* [Cómo optimizar el rendimiento de tu sitio de CMS](/cms/best-practices/testing-staging-performance/speed)
* [Primeros pasos con la accesibilidad](/cms/best-practices/improve-existing-sites/accessibility)
