Primeros pasos
Elige tu fragmento
Elige qué estás creando y cómo lo cargas; después, copia las líneas. Las líneas de CDN incluyen hashes de integridad.
Esta traducción la ha escrito una IA y todavía no la ha revisado ninguna persona. Leer esta página en inglés
Los fragmentos cargan los tokens, core y el catálogo en el orden que esperan las capas de cascada; elimina las líneas del catálogo que no uses.
Niveles: Instalar LUZ. Herramienta de compilación: Con un empaquetador o framework.
Elige
| Qué estás creando | npm y un empaquetador | CDN con hashes de integridad |
|---|---|---|
| Solo componentes | ||
| Página de landing | ||
| Blog o periódico | ||
| Aplicación web | ||
| Sitio de documentación |
Solo componentes
Solo componentes: con npm y un empaquetador
pnpm add @luz-ds/tokens @luz-ds/core
import "@luz-ds/tokens/css";
import "@luz-ds/core/css";
// Optional: copy buttons, tabs, players, the color mode
import "@luz-ds/core";Solo componentes: desde un CDN, con hashes de integridad
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@luz-ds/tokens@0.3.0/dist/luz-tokens.min.css" integrity="sha384-XDR3N5eZIuICoLuh6LhwDDEdfeeDDf62e0WB8E0IMsBpvzBVFkwn7plVPLEHjP+W" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@luz-ds/core@0.3.0/dist/luz.min.css" integrity="sha384-fMr2nR2ENqlXOiONQvKhudKJkiKRzMoTJ5GVe31O+28T4B7dAYQe9GTkBSKbWztr" crossorigin="anonymous">
<!-- Optional: copy buttons, tabs, players, the color mode -->
<script type="module" src="https://cdn.jsdelivr.net/npm/@luz-ds/core@0.3.0/dist/luz.min.js" integrity="sha384-MgJmap9riiFYdSl/DtnXO2wMcRzxuIJS/nX5jqKRrOqK3VqhmfNRrfW3EP1WDJgA" crossorigin="anonymous"></script>Página de landing
Página de landing: con npm y un empaquetador
pnpm add @luz-ds/tokens @luz-ds/core @luz-ds/catalog
import "@luz-ds/tokens/css";
import "@luz-ds/core/css";
// Optional: the search, then the site's patterns
import "@luz-ds/catalog/components/search.css";
import "@luz-ds/catalog/components/navbar.css";
import "@luz-ds/catalog/components/sidebar.css";
import "@luz-ds/catalog/components/timeline.css";
import "@luz-ds/catalog/components/site-header.css";
import "@luz-ds/catalog/components/hero.css";
import "@luz-ds/catalog/components/main.css";
import "@luz-ds/catalog/components/section.css";
import "@luz-ds/catalog/components/stat.css";
import "@luz-ds/catalog/components/site-footer.css";
import "@luz-ds/catalog/components/glow.css";
import "@luz-ds/catalog/components/social.css";
import "@luz-ds/catalog/components/pager.css";
import "@luz-ds/catalog/components/page-transition.css";
// Optional: copy buttons, tabs, players, the color mode
import "@luz-ds/core";
// Optional: the script of the search, cookie banner or color mode
import "@luz-ds/catalog";Página de landing: desde un CDN, con hashes de integridad
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@luz-ds/tokens@0.3.0/dist/luz-tokens.min.css" integrity="sha384-XDR3N5eZIuICoLuh6LhwDDEdfeeDDf62e0WB8E0IMsBpvzBVFkwn7plVPLEHjP+W" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@luz-ds/core@0.3.0/dist/luz.min.css" integrity="sha384-fMr2nR2ENqlXOiONQvKhudKJkiKRzMoTJ5GVe31O+28T4B7dAYQe9GTkBSKbWztr" crossorigin="anonymous">
<!-- Optional: the search, then the site's patterns -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@luz-ds/catalog@0.3.0/dist/components/search.min.css" integrity="sha384-lktvmtjXJkC+jS1MMF6Yy/v6A4rPYhVrr92UquHxNMnB5PN/SyACqXPtuRFN6FUr" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@luz-ds/catalog@0.3.0/dist/components/navbar.min.css" integrity="sha384-0Ei6tmImyRUt2v+8h1nC5eFL476Rf4AFL1pDqjqETU8/+v4Of4/M+I+ZOzS49yN7" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@luz-ds/catalog@0.3.0/dist/components/sidebar.min.css" integrity="sha384-vt36+ffiZY/k7pMatnSg+vcsgcYLY2cJSuWh3NBijr6OCkoyR0URAZbP0j6jTpjY" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@luz-ds/catalog@0.3.0/dist/components/timeline.min.css" integrity="sha384-WQ94ImVKUsNsMfgRFc24RdFDrzH/9Dc6HCz4FWlUsAcQHX63oP72OzxMchEcBH5g" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@luz-ds/catalog@0.3.0/dist/components/site-header.min.css" integrity="sha384-21PMBkvzBZetFOsMonT4oc4Ak41zobEeRyD0yfqjWd9UWhrz0PEpMPo/3hyvH1BH" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@luz-ds/catalog@0.3.0/dist/components/hero.min.css" integrity="sha384-yY6Z5/WOdLWJ5gJVsJd6tYONFWiaFA3uu8P2nHPqbXqdGhDCL5lVbif0VJ2a5CnB" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@luz-ds/catalog@0.3.0/dist/components/main.min.css" integrity="sha384-fSDcBofUvDclss8ermBOj5Mp3HwqS0KiPg5PdY1+ux+91hdpKOF9wcLmM+G3Coq4" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@luz-ds/catalog@0.3.0/dist/components/section.min.css" integrity="sha384-IQZYJCtvKeQG+qt4Hfu95jMHtMMQam8TJG78lOSvj106ud4ncidLUQ+JjWKJKKpV" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@luz-ds/catalog@0.3.0/dist/components/stat.min.css" integrity="sha384-BWlLefgZb0IeWPuX51tf8D1yWKqyXVA8/5vQz+wACTjN+NRcfynLunkuHbLbeBf1" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@luz-ds/catalog@0.3.0/dist/components/site-footer.min.css" integrity="sha384-FR+jyrfxxEHbQxuQlEqke2i0HzUuuxoD3YoDetXacWWX9xoIm9TJ4NBGxW9dty3n" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@luz-ds/catalog@0.3.0/dist/components/glow.min.css" integrity="sha384-Jz/eFLH0Ygi6iqQ+xcRrRhniKJbUEGD6yVdCDsRKJDrTq4H6FcjT1dFGo7UmRWba" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@luz-ds/catalog@0.3.0/dist/components/social.min.css" integrity="sha384-a7rXzTCKPeGP05JiCrgSd1tOyQsheAc5koMRVa+SJ4QqOquCUAa6LOIai3xAbSD1" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@luz-ds/catalog@0.3.0/dist/components/pager.min.css" integrity="sha384-apHOhshKXJ9cDKk4V1UbHHNZsD1LAKerRICcUm1M/Eq0D9+4MP773thdHVdCz+Hs" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@luz-ds/catalog@0.3.0/dist/components/page-transition.min.css" integrity="sha384-GsqR+xHLk9aIrM1VSOFUNPawklWIz22hiY8HI7pyriRycpgyDLTu5SOO2Fh9rPYW" crossorigin="anonymous">
<!-- Optional: copy buttons, tabs, players, the color mode -->
<script type="module" src="https://cdn.jsdelivr.net/npm/@luz-ds/core@0.3.0/dist/luz.min.js" integrity="sha384-MgJmap9riiFYdSl/DtnXO2wMcRzxuIJS/nX5jqKRrOqK3VqhmfNRrfW3EP1WDJgA" crossorigin="anonymous"></script>
<!-- Optional: the script of the search, cookie banner or color mode -->
<script type="module" src="https://cdn.jsdelivr.net/npm/@luz-ds/catalog@0.3.0/dist/catalog.min.js" integrity="sha384-9yK+raedLrnQW5Km+05ONPqF1nwZNDofo1bNJIfP4E10fnl8m8SSwYsuXQpw6Q97" crossorigin="anonymous"></script>Blog o periódico
Blog o periódico: con npm y un empaquetador
pnpm add @luz-ds/tokens @luz-ds/core @luz-ds/catalog
import "@luz-ds/tokens/css";
import "@luz-ds/core/css";
// Optional: the search, then the site's patterns
import "@luz-ds/catalog/components/search.css";
import "@luz-ds/catalog/components/navbar.css";
import "@luz-ds/catalog/components/sidebar.css";
import "@luz-ds/catalog/components/timeline.css";
import "@luz-ds/catalog/components/site-header.css";
import "@luz-ds/catalog/components/masthead.css";
import "@luz-ds/catalog/components/site-footer.css";
import "@luz-ds/catalog/components/social.css";
import "@luz-ds/catalog/components/page-header.css";
import "@luz-ds/catalog/components/article-header.css";
import "@luz-ds/catalog/components/article.css";
import "@luz-ds/catalog/components/post-list.css";
import "@luz-ds/catalog/components/pager.css";
import "@luz-ds/catalog/components/page-transition.css";
// Optional: copy buttons, tabs, players, the color mode
import "@luz-ds/core";
// Optional: the script of the search, cookie banner or color mode
import "@luz-ds/catalog";Blog o periódico: desde un CDN, con hashes de integridad
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@luz-ds/tokens@0.3.0/dist/luz-tokens.min.css" integrity="sha384-XDR3N5eZIuICoLuh6LhwDDEdfeeDDf62e0WB8E0IMsBpvzBVFkwn7plVPLEHjP+W" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@luz-ds/core@0.3.0/dist/luz.min.css" integrity="sha384-fMr2nR2ENqlXOiONQvKhudKJkiKRzMoTJ5GVe31O+28T4B7dAYQe9GTkBSKbWztr" crossorigin="anonymous">
<!-- Optional: the search, then the site's patterns -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@luz-ds/catalog@0.3.0/dist/components/search.min.css" integrity="sha384-lktvmtjXJkC+jS1MMF6Yy/v6A4rPYhVrr92UquHxNMnB5PN/SyACqXPtuRFN6FUr" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@luz-ds/catalog@0.3.0/dist/components/navbar.min.css" integrity="sha384-0Ei6tmImyRUt2v+8h1nC5eFL476Rf4AFL1pDqjqETU8/+v4Of4/M+I+ZOzS49yN7" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@luz-ds/catalog@0.3.0/dist/components/sidebar.min.css" integrity="sha384-vt36+ffiZY/k7pMatnSg+vcsgcYLY2cJSuWh3NBijr6OCkoyR0URAZbP0j6jTpjY" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@luz-ds/catalog@0.3.0/dist/components/timeline.min.css" integrity="sha384-WQ94ImVKUsNsMfgRFc24RdFDrzH/9Dc6HCz4FWlUsAcQHX63oP72OzxMchEcBH5g" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@luz-ds/catalog@0.3.0/dist/components/site-header.min.css" integrity="sha384-21PMBkvzBZetFOsMonT4oc4Ak41zobEeRyD0yfqjWd9UWhrz0PEpMPo/3hyvH1BH" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@luz-ds/catalog@0.3.0/dist/components/masthead.min.css" integrity="sha384-Z8LZh/hdX8e75aVw/+7wsEa/DGjmU5P5Jr3gDfMgW5yUXZw0JBlB1bEZt8nUX9nx" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@luz-ds/catalog@0.3.0/dist/components/site-footer.min.css" integrity="sha384-FR+jyrfxxEHbQxuQlEqke2i0HzUuuxoD3YoDetXacWWX9xoIm9TJ4NBGxW9dty3n" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@luz-ds/catalog@0.3.0/dist/components/social.min.css" integrity="sha384-a7rXzTCKPeGP05JiCrgSd1tOyQsheAc5koMRVa+SJ4QqOquCUAa6LOIai3xAbSD1" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@luz-ds/catalog@0.3.0/dist/components/page-header.min.css" integrity="sha384-ztr1TpMlxsr0pNxReBhVERsfWxHXAiYMNVCFT+0huLQ7YHwnUvU04TQSacaMQClw" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@luz-ds/catalog@0.3.0/dist/components/article-header.min.css" integrity="sha384-CcF15TBfLmCLd5Zwh61D6udMRigUVTBJIag9a9m9AiT9rcJkGsbezhKC21x6xdJf" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@luz-ds/catalog@0.3.0/dist/components/article.min.css" integrity="sha384-++/qFKiq0czspViBwQZuh0EkOdjOJVbhRawyPCZDM6MqKb06/TXzqV1chdzP7Lt7" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@luz-ds/catalog@0.3.0/dist/components/post-list.min.css" integrity="sha384-kK6zd16AVte8C1ge85pYFbh52scr+Tf3HNyUDxai1uQkIAT9+/5HJOWZZ/zzFn8H" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@luz-ds/catalog@0.3.0/dist/components/pager.min.css" integrity="sha384-apHOhshKXJ9cDKk4V1UbHHNZsD1LAKerRICcUm1M/Eq0D9+4MP773thdHVdCz+Hs" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@luz-ds/catalog@0.3.0/dist/components/page-transition.min.css" integrity="sha384-GsqR+xHLk9aIrM1VSOFUNPawklWIz22hiY8HI7pyriRycpgyDLTu5SOO2Fh9rPYW" crossorigin="anonymous">
<!-- Optional: copy buttons, tabs, players, the color mode -->
<script type="module" src="https://cdn.jsdelivr.net/npm/@luz-ds/core@0.3.0/dist/luz.min.js" integrity="sha384-MgJmap9riiFYdSl/DtnXO2wMcRzxuIJS/nX5jqKRrOqK3VqhmfNRrfW3EP1WDJgA" crossorigin="anonymous"></script>
<!-- Optional: the script of the search, cookie banner or color mode -->
<script type="module" src="https://cdn.jsdelivr.net/npm/@luz-ds/catalog@0.3.0/dist/catalog.min.js" integrity="sha384-9yK+raedLrnQW5Km+05ONPqF1nwZNDofo1bNJIfP4E10fnl8m8SSwYsuXQpw6Q97" crossorigin="anonymous"></script>Aplicación web
Aplicación web: con npm y un empaquetador
pnpm add @luz-ds/tokens @luz-ds/core @luz-ds/catalog
import "@luz-ds/tokens/css";
import "@luz-ds/core/css";
// Optional: the search, then the site's patterns
import "@luz-ds/catalog/components/search.css";
import "@luz-ds/catalog/components/navbar.css";
import "@luz-ds/catalog/components/sidebar.css";
import "@luz-ds/catalog/components/social.css";
import "@luz-ds/catalog/components/app-bar.css";
import "@luz-ds/catalog/components/dashboard.css";
import "@luz-ds/catalog/components/bar-list.css";
import "@luz-ds/catalog/components/column-chart.css";
import "@luz-ds/catalog/components/stacked-bar.css";
import "@luz-ds/catalog/components/heat-map.css";
import "@luz-ds/catalog/components/ring.css";
import "@luz-ds/catalog/components/pager.css";
import "@luz-ds/catalog/components/page-transition.css";
// Optional: copy buttons, tabs, players, the color mode
import "@luz-ds/core";
// Optional: the script of the search, cookie banner or color mode
import "@luz-ds/catalog";Aplicación web: desde un CDN, con hashes de integridad
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@luz-ds/tokens@0.3.0/dist/luz-tokens.min.css" integrity="sha384-XDR3N5eZIuICoLuh6LhwDDEdfeeDDf62e0WB8E0IMsBpvzBVFkwn7plVPLEHjP+W" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@luz-ds/core@0.3.0/dist/luz.min.css" integrity="sha384-fMr2nR2ENqlXOiONQvKhudKJkiKRzMoTJ5GVe31O+28T4B7dAYQe9GTkBSKbWztr" crossorigin="anonymous">
<!-- Optional: the search, then the site's patterns -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@luz-ds/catalog@0.3.0/dist/components/search.min.css" integrity="sha384-lktvmtjXJkC+jS1MMF6Yy/v6A4rPYhVrr92UquHxNMnB5PN/SyACqXPtuRFN6FUr" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@luz-ds/catalog@0.3.0/dist/components/navbar.min.css" integrity="sha384-0Ei6tmImyRUt2v+8h1nC5eFL476Rf4AFL1pDqjqETU8/+v4Of4/M+I+ZOzS49yN7" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@luz-ds/catalog@0.3.0/dist/components/sidebar.min.css" integrity="sha384-vt36+ffiZY/k7pMatnSg+vcsgcYLY2cJSuWh3NBijr6OCkoyR0URAZbP0j6jTpjY" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@luz-ds/catalog@0.3.0/dist/components/social.min.css" integrity="sha384-a7rXzTCKPeGP05JiCrgSd1tOyQsheAc5koMRVa+SJ4QqOquCUAa6LOIai3xAbSD1" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@luz-ds/catalog@0.3.0/dist/components/app-bar.min.css" integrity="sha384-coazETaShJ8FGQ4mRfMwvCnFxdigv1KQ6ShOIpp7Uu6aaRTzQcuPJJdYCKDLwiLM" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@luz-ds/catalog@0.3.0/dist/components/dashboard.min.css" integrity="sha384-G+VBlP1ufPGoYlRgylA/N+xI4iqLCarfUXTGrPbwteTmtaqhi7iVz7gXNXkK/gVy" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@luz-ds/catalog@0.3.0/dist/components/bar-list.min.css" integrity="sha384-Xl3NzktxixQWSXVFEmjRxNMgf0ez9vdz5p03hix/CwaM9sMmZZWIxrG1tYeDXVuy" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@luz-ds/catalog@0.3.0/dist/components/column-chart.min.css" integrity="sha384-K41y3b0ofKFEbXhPjLBtb3Df9mEHL3G4TWMgg3TdG6Xv9wQTxynvP/vdgh/m44rk" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@luz-ds/catalog@0.3.0/dist/components/stacked-bar.min.css" integrity="sha384-EawyC0MeY43Ls6Vyna5Wo6tQtAJbKY4vu6C6J930w4veLj3B1yFokJZyIu5APjrV" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@luz-ds/catalog@0.3.0/dist/components/heat-map.min.css" integrity="sha384-DJgfU9rFnD5GNimPOCLjdOuNzoYZICrPETuLVH/pOo2F3LcYvJLCAPq85abuQpaw" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@luz-ds/catalog@0.3.0/dist/components/ring.min.css" integrity="sha384-YaRd4u10aQ2xYJEzSk0IBieFbMmJkBTRW8kCchIj7ejPMF7CLvBpdCPmju18ffH5" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@luz-ds/catalog@0.3.0/dist/components/pager.min.css" integrity="sha384-apHOhshKXJ9cDKk4V1UbHHNZsD1LAKerRICcUm1M/Eq0D9+4MP773thdHVdCz+Hs" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@luz-ds/catalog@0.3.0/dist/components/page-transition.min.css" integrity="sha384-GsqR+xHLk9aIrM1VSOFUNPawklWIz22hiY8HI7pyriRycpgyDLTu5SOO2Fh9rPYW" crossorigin="anonymous">
<!-- Optional: copy buttons, tabs, players, the color mode -->
<script type="module" src="https://cdn.jsdelivr.net/npm/@luz-ds/core@0.3.0/dist/luz.min.js" integrity="sha384-MgJmap9riiFYdSl/DtnXO2wMcRzxuIJS/nX5jqKRrOqK3VqhmfNRrfW3EP1WDJgA" crossorigin="anonymous"></script>
<!-- Optional: the script of the search, cookie banner or color mode -->
<script type="module" src="https://cdn.jsdelivr.net/npm/@luz-ds/catalog@0.3.0/dist/catalog.min.js" integrity="sha384-9yK+raedLrnQW5Km+05ONPqF1nwZNDofo1bNJIfP4E10fnl8m8SSwYsuXQpw6Q97" crossorigin="anonymous"></script>Sitio de documentación
Sitio de documentación: con npm y un empaquetador
pnpm add @luz-ds/tokens @luz-ds/core @luz-ds/catalog
import "@luz-ds/tokens/css";
import "@luz-ds/core/css";
// Optional: the search, then the site's patterns
import "@luz-ds/catalog/components/search.css";
import "@luz-ds/catalog/components/navbar.css";
import "@luz-ds/catalog/components/sidebar.css";
import "@luz-ds/catalog/components/terminal.css";
import "@luz-ds/catalog/components/social.css";
import "@luz-ds/catalog/components/docs-layout.css";
import "@luz-ds/catalog/components/doc-header.css";
import "@luz-ds/catalog/components/page-rail.css";
import "@luz-ds/catalog/components/example.css";
import "@luz-ds/catalog/components/do-dont.css";
import "@luz-ds/catalog/components/pager.css";
import "@luz-ds/catalog/components/page-footer.css";
import "@luz-ds/catalog/components/page-transition.css";
// Optional: copy buttons, tabs, players, the color mode
import "@luz-ds/core";
// Optional: the script of the search, cookie banner or color mode
import "@luz-ds/catalog";Sitio de documentación: desde un CDN, con hashes de integridad
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@luz-ds/tokens@0.3.0/dist/luz-tokens.min.css" integrity="sha384-XDR3N5eZIuICoLuh6LhwDDEdfeeDDf62e0WB8E0IMsBpvzBVFkwn7plVPLEHjP+W" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@luz-ds/core@0.3.0/dist/luz.min.css" integrity="sha384-fMr2nR2ENqlXOiONQvKhudKJkiKRzMoTJ5GVe31O+28T4B7dAYQe9GTkBSKbWztr" crossorigin="anonymous">
<!-- Optional: the search, then the site's patterns -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@luz-ds/catalog@0.3.0/dist/components/search.min.css" integrity="sha384-lktvmtjXJkC+jS1MMF6Yy/v6A4rPYhVrr92UquHxNMnB5PN/SyACqXPtuRFN6FUr" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@luz-ds/catalog@0.3.0/dist/components/navbar.min.css" integrity="sha384-0Ei6tmImyRUt2v+8h1nC5eFL476Rf4AFL1pDqjqETU8/+v4Of4/M+I+ZOzS49yN7" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@luz-ds/catalog@0.3.0/dist/components/sidebar.min.css" integrity="sha384-vt36+ffiZY/k7pMatnSg+vcsgcYLY2cJSuWh3NBijr6OCkoyR0URAZbP0j6jTpjY" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@luz-ds/catalog@0.3.0/dist/components/terminal.min.css" integrity="sha384-DKqk/lNOyNOUUo7fPv1IE50Kem82XAMIrVewVyJVZ1XQZI8HSjIXq/4xahlXy/Ai" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@luz-ds/catalog@0.3.0/dist/components/social.min.css" integrity="sha384-a7rXzTCKPeGP05JiCrgSd1tOyQsheAc5koMRVa+SJ4QqOquCUAa6LOIai3xAbSD1" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@luz-ds/catalog@0.3.0/dist/components/docs-layout.min.css" integrity="sha384-4mL+wj5xGmF98hYy2houcLGyUl4xNNTemLvMbtsCj1A7wpQ7RE3Ng26GboK9hgm9" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@luz-ds/catalog@0.3.0/dist/components/doc-header.min.css" integrity="sha384-cVHBijhO5S1m513QmZHN7btnqgne60iGIX8ZA3KRh9BkZafEAbeVcEurGxtfGbg+" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@luz-ds/catalog@0.3.0/dist/components/page-rail.min.css" integrity="sha384-rtBwzNTcuj/dbwc7iMTxhqi7LU16M2g06o5Y73z+/VADATrf1qbSJBM+Z2b3pNjq" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@luz-ds/catalog@0.3.0/dist/components/example.min.css" integrity="sha384-6PMwsV5nwigGpYPyw438GJj5Dk1YJ3/7pLnMLEe0VWvR1iM/pgM131Vldh0IEwh7" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@luz-ds/catalog@0.3.0/dist/components/do-dont.min.css" integrity="sha384-Oy/gLexm/R2x1z6J/k+HPFqeZFukZ9a8dRAA4oXn0+KTbjg3uYSlaRV5fhdnM+UK" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@luz-ds/catalog@0.3.0/dist/components/pager.min.css" integrity="sha384-apHOhshKXJ9cDKk4V1UbHHNZsD1LAKerRICcUm1M/Eq0D9+4MP773thdHVdCz+Hs" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@luz-ds/catalog@0.3.0/dist/components/page-footer.min.css" integrity="sha384-jt0ORcEHERojNhPk2BjZ9bJ3A6cELFABApWGVM0vxUZRBxP3Ey+rPedqU+FdVuwx" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@luz-ds/catalog@0.3.0/dist/components/page-transition.min.css" integrity="sha384-GsqR+xHLk9aIrM1VSOFUNPawklWIz22hiY8HI7pyriRycpgyDLTu5SOO2Fh9rPYW" crossorigin="anonymous">
<!-- Optional: copy buttons, tabs, players, the color mode -->
<script type="module" src="https://cdn.jsdelivr.net/npm/@luz-ds/core@0.3.0/dist/luz.min.js" integrity="sha384-MgJmap9riiFYdSl/DtnXO2wMcRzxuIJS/nX5jqKRrOqK3VqhmfNRrfW3EP1WDJgA" crossorigin="anonymous"></script>
<!-- Optional: the script of the search, cookie banner or color mode -->
<script type="module" src="https://cdn.jsdelivr.net/npm/@luz-ds/catalog@0.3.0/dist/catalog.min.js" integrity="sha384-9yK+raedLrnQW5Km+05ONPqF1nwZNDofo1bNJIfP4E10fnl8m8SSwYsuXQpw6Q97" crossorigin="anonymous"></script>En un proyecto que ya tiene un diseño
Enlaza luz.conditional.css en lugar de luz.css: LUZ da estilo solo a lo que está dentro de un elemento con el atributo data-luz y deja el resto de la página como está. Los tokens siguen yendo en toda la página. Pon el hash en el enlace como abajo, y data-luz en la región que pasas a LUZ.
import "@luz-ds/core/conditional.css";<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@luz-ds/core@0.3.0/dist/luz.conditional.min.css" integrity="sha384-1jsTEY3cLnNPfALWtfrz96HsP+qTD5jAdrw052lyYK8p/qQC6kuOwYR5oTiFCSDD" crossorigin="anonymous">Archivos que se cargan bajo demanda
Core y catalog solo cargan algunos archivos cuando la página los necesita: una tabla ordenable, una línea de tiempo, un reproductor MIDI, una página en español, la búsqueda o el banner de cookies. El hash de un script solo cubre ese archivo, así que cada archivo necesita su propio hash. Para proporcionárselo en todos los navegadores, usa un mapa de importaciones con una sección integrity, antes del primer script de módulo: así, el navegador comprueba cada archivo cuando el script lo importa y no ejecuta los archivos cuyo hash no coincide.
Safari y Firefox no usan el valor integrity de un <link rel="modulepreload"> para bloquear un archivo, así que solo sirve como indicación de rendimiento: úsalo, si quieres, para descargar un archivo antes, pero no confíes en él como comprobación. El mapa de importaciones de abajo enumera todos esos archivos. Conserva solo las líneas correspondientes a lo que incluye la página, como indica la tabla: un hash de un archivo que la página nunca carga no sirve de nada.
<script type="importmap">
{
"integrity": {
"https://cdn.jsdelivr.net/npm/@luz-ds/core@0.3.0/dist/midi.min.js": "sha384-qYxDdj3uAhbdUBDWT7jKDDCywLuqavvW9tVuyh+dRvCaf9Ukr/C93m7VAx3EgYjj",
"https://cdn.jsdelivr.net/npm/@luz-ds/core@0.3.0/dist/table-sort.min.js": "sha384-R+imdkLSyzPq7oSWCtDRr7lxmMxpy4ukmtJG2wc+DtF7AfPuRnKbaMxnSEPQrMFi",
"https://cdn.jsdelivr.net/npm/@luz-ds/core@0.3.0/dist/theme-mode.min.js": "sha384-natHpSKARqNGw7XHQ7s2PQjzR83vuwhXKtW/xxpDvNHakqeGpuN/B33vrBFWvVLr",
"https://cdn.jsdelivr.net/npm/@luz-ds/core@0.3.0/dist/i18n-es.min.js": "sha384-hmysBmnti/r4ub7ZS3vur8pw2+jJw8QpZYTaLopcro/UVYoInmtmrYxDd5bwxQJM",
"https://cdn.jsdelivr.net/npm/@luz-ds/catalog@0.3.0/dist/search.min.js": "sha384-S9oCuJm2Eyxy52qJPehLtpUO6057TK/v4BurHupLx74lJjHKds3lGW2wS+mkA0ZS",
"https://cdn.jsdelivr.net/npm/@luz-ds/catalog@0.3.0/dist/cookie-consent.min.js": "sha384-67nVjdLKj+0xrpgF+0EJ2cvph+Cz00GUBTcP94H01lHn2xJ6+4c2p1C5i6tiDekk",
"https://cdn.jsdelivr.net/npm/@luz-ds/catalog@0.3.0/dist/theme-time.min.js": "sha384-79NCjHgg/L5aw6lJesDu0BPd1MfmzEKBwrL6hoZAyFCvu5/rzpgFFAFQTtazvqe0",
"https://cdn.jsdelivr.net/npm/@luz-ds/catalog@0.3.0/dist/theme-time-bar.min.js": "sha384-UsWVYOe04YXi+RzpJoLBTyF2Kji5Xl77xVRxiQQ0r5PrihUMq43BosGMo9Z1grmI",
"https://cdn.jsdelivr.net/npm/@luz-ds/catalog@0.3.0/dist/timeline.min.js": "sha384-V0MpD8vJQAhW+TsJde49OKnXnDZxBD0bNnlGpzNT1vW7DSQphT9FS97dwiC/ZI8f",
"https://cdn.jsdelivr.net/npm/@luz-ds/catalog@0.3.0/dist/embed.min.js": "sha384-/AxQtyKTjA48ndCh3MqFojzjPXKQv1HACJqM59folkNXdgE1HyK0k9T4WPtDf22I",
"https://cdn.jsdelivr.net/npm/@luz-ds/catalog@0.3.0/dist/chart.min.js": "sha384-BpfRIlP3eLWKd8NDIZjYJZpwBj+/XcK1+af4itrd8u4YsCSQOSa/qaVXPiZ8xsxK",
"https://cdn.jsdelivr.net/npm/@luz-ds/catalog@0.3.0/dist/sidebar.min.js": "sha384-cJ/dAd5heZXVOf1Bss/FCjYe56msQTYileWWgrQJo614LNEXL0CtVgvOc1SOMctD"
}
}
</script>Una indicación para descargar un archivo antes se escribe así. Acelera la página y no comprueba nada en Safari ni Firefox, así que nunca sustituye al mapa de importaciones:
<link rel="modulepreload" href="https://cdn.jsdelivr.net/npm/@luz-ds/catalog@0.3.0/dist/search.min.js" integrity="sha384-S9oCuJm2Eyxy52qJPehLtpUO6057TK/v4BurHupLx74lJjHKds3lGW2wS+mkA0ZS" crossorigin="anonymous">Para añadir un archivo a un mapa que ya tienes, incluye su línea de la tabla dentro de integrity, con una coma al final de todas las líneas menos la última.
| Archivo | Añade la línea solo si la página incluye | Línea que añadir |
|---|---|---|
midi.min.js |
un .luz-player con data-type="midi" |
|
table-sort.min.js |
una tabla ordenable, con th[data-luz-sort] |
|
theme-mode.min.js |
un <luz-theme-mode> |
|
i18n-es.min.js |
un elemento con lang="es", en <html> o en la página, fuera de un enlace o una opción |
|
search.min.js |
un <luz-search> |
|
cookie-consent.min.js |
un <luz-cookie-consent> |
|
theme-time.min.js |
un <luz-theme-time> |
|
theme-time-bar.min.js |
un <luz-theme-time> con variant="bar" |
|
timeline.min.js |
un <luz-timeline> |
|
embed.min.js |
un <luz-embed> |
|
chart.min.js |
un <luz-chart> |
|
sidebar.min.js |
un .luz-sidebar, o una lista marcada con data-luz-spy |
|
Comprueba un hash por tu cuenta
Todos los hashes de esta página se calculan a partir del archivo que publica el paquete al compilar la documentación. Para comprobar uno, descarga el archivo que cargas y calcula su hash del mismo modo:
curl -s <url of the file> | openssl dgst -sha384 -binary | openssl base64 -AEl resultado, después de sha384-, es el valor de integrity. Si no coincide con el de la página, no cargues el archivo: la versión de la URL o el propio archivo han cambiado.