DocumentaçãoCommerceConteúdo e design

Ativos de tema

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

Criado para:

  • Iniciante
  • Intermediário
  • Administrador
  • Usuário

Os arquivos estáticos são a coleção de ativos, como CSS, fontes, imagens e JavaScript, usada por um tema. O local dos arquivos estáticos está especificado na configuração da URL Base. Você pode adicionar uma assinatura digital ao URL de cada arquivo estático para permitir que os navegadores detectem quando uma versão mais recente estiver disponível. A versão mais recente do arquivo é usada se a assinatura for diferente do que está armazenado no cache do navegador.

Para uma instalação padrão, os ativos associados a um tema são organizados na pasta web no seguinte local abaixo da raiz Commerce.

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

Adicionar uma assinatura digital a URLs de arquivo estático

  1. Na barra lateral Admin, vá para Stores > Settings>Configuration.

  2. No painel esquerdo, expanda Advanced e escolha Developer.

  3. Expandir Seletor de expansão a seção Static Files Settings.

    Configurações de Arquivos Estáticos {width="500" modal="regular"}

  4. Defina Sign Static Files como Yes.

  5. Quando terminar, clique em Save Config.

Tipo de arquivo
Descrição
CSS
Controla o estilo visual associado à capa. Exemplo de local no servidor: [commerce]/app/design/frontend/Magento/[theme]/web/css
Fontes
Forneça as fontes disponíveis para serem usadas pelo tema. Local no servidor: [commerce]/app/design/frontend/Magento/[theme]/web/fonts
Imagens
Forneça os ativos gráficos usados pelo tema, incluindo botões, texturas de plano de fundo e assim por diante. Exemplo de local no servidor: [commerce]/app/design/frontend/Magento/[theme]/web/images
JS
Rotinas JavaScript específicas por tema e funções chamáveis. Exemplo de local no servidor: [commerce]/app/design/frontend/Magento/[theme]/web/js

Mesclar arquivos CSS

Como parte de um esforço para otimizar seu site e reduzir o tempo de carregamento de página, você pode reduzir o número de arquivos CSS separados mesclando-os em um único arquivo condensado. Se você abrir um arquivo CSS mesclado, verá um fluxo contínuo de texto, com quebras de linha removidas. Não é possível editar o arquivo mesclado, portanto, é melhor aguardar até que você saia do modo de desenvolvimento e não faça mais alterações frequentes no CSS.

NOTE
Os arquivos CSS só podem ser mesclados do painel Admin no modo de desenvolvedor.

  1. Na barra lateral Admin, vá para Stores > Settings>Configuration.

  2. No painel esquerdo, Advanced e escolha Developer.

  3. Expandir Seletor de expansão a seção CSS Settings.

    Configurações de CSS {width="500" modal="regular"}

    Para obter descrições detalhadas sobre essas opções de configuração, consulte Configurações de CSS na Referência de Configuração.

  4. Defina Merge CSS Files como Yes.

  5. Quando terminar, clique em Save Config.

Mesclar arquivos do JavaScript

Vários arquivos JavaScript podem ser mesclados em um único arquivo condensado para reduzir o tempo de carregamento da página. Se você abrir um arquivo JavaScript mesclado, verá um fluxo contínuo de texto, com quebras de linha removidas. Se você tiver concluído o processo de desenvolvimento e o código não contiver erros, considere mesclar os arquivos.

NOTE
Os arquivos do JavaScript podem ser mesclados do painel Admin somente quando estiverem trabalhando no Modo de Desenvolvedor.

  1. Na barra lateral Admin, vá para Stores > Settings>Configuration.

  2. No painel esquerdo, Advanced e escolha Developer.

  3. Expandir Seletor de expansão a seção JavaScript Settings.

    Configurações do JavaScript {width="600" modal="regular"}

    Para obter descrições detalhadas sobre essas opções de configuração, consulte Configurações do JavaScript na Referência de Configuração.

  4. Defina Merge JavaScript Files como Yes.

  5. Quando terminar, clique em Save Config.

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