Documentação

Personalização do Sidekick

Last update: Tue Mar 05 2024 00:00:00 GMT+0000 (Coordinated Universal Time)

Você pode personalizar o sidekick do seu projeto. Você pode adicionar um /tools/sidekick/config.json arquivo de configuração para o repositório GitHub do projeto:

<script src=“https://gist.github.com/rofe/491772e7e3f706cb4aca5f9f6451e516.js”></script>

Para todas as opções de configuração disponíveis, consulte a Documentação da API do Sidekick ou o esquema de configuração. Estas são algumas das noções básicas para começar:

Plug-ins

  • id e title são obrigatórios. title aparecerá no botão de plug-in. Você pode fornecer títulos localizados em uma titleI18n objeto
  • Como especificar a ação do plug-in depende da intenção:
    • Para simplesmente abrir um URL em uma nova janela, você pode usar o url propriedade. Opcionalmente, é possível abri-la em uma paleta definindo isPalette para true.
      /tools/sidekick/config.json:
      <script src=“https://gist.github.com/rofe/8a0961575d434fb86ce4fdda3bea60f5.js”></script>
  • A execução do código deve ser feita no contexto da sua página (não suportado no ambiente de edição e administração). Você pode usar o event para especificar o nome de um evento a ser acionado quando o botão de plug-in for clicado. Você pode reagir a ele no código do aplicativo, como no exemplo a seguir:
    /tools/sidekick/config.json:
    <script src=“https://gist.github.com/rofe/e5f215be84acc51ffe87002408d4e107.js”></script>
    <script src=“https://gist.github.com/rofe/4d38d9ec8253cc2f4bec3dad757c33fc.js”></script>
  • A variável environments a matriz especifica onde o plug-in deve aparecer (dev, edit, admin, preview, live ou prod). Você também pode definir exclude_paths e include_paths para restringir a aparência do plug-in com base no caminho.
  • isContainer transforma um plug-in em um menu suspenso. É possível então adicionar outros plug-ins a ele especificando a respectiva ID na containerId propriedade.
  • override pode ser definido como true para estender um plug-in existente.

Exibições especiais

  • path e viewer são obrigatórios. Opcionalmente, você pode especificar um title que serão mostrados na parte superior e você pode fornecer títulos localizados em uma titleI18n objeto:
    <script src=“https://gist.github.com/rofe/9170d068a7b3ab727a8745774e430aca.js”></script>
  • Adicione um arquivo HTML como configurado em path para o repositório GitHub do seu projeto:
    <script src=“https://gist.github.com/rofe/0de48b1696c7334f6fdbd9f63993aad2.js”></script>
  • Adicione um arquivo CSS opcional no mesmo diretório e um arquivo JS com sua lógica:
    <script src=“https://gist.github.com/rofe/8357f72407683cf4bd27c5d364b71af7.js”></script>
  • Abrir um URL de projeto que corresponda ao configurado path e clique no sidekick para ver seu visualizador em ação.
recommendation-more-help
10a6ce9d-c5c5-48d9-8ce1-9797d2f0f3ec