Vamos aprender a realizar a customização do Help Center para o novo padrão.

Pré-requisitos

...

...

Alterar os ícones nos documentos

•  Documentos principais (ícones com as cores primárias)
•  Documentos secundários (ícones com a cor secundária)
•  Documentos adicionais (ícones com a cor cinza)

Documentos principais

•  Alterar a descrição dos documentos

Abaixo você pode conferir alguns exemplos de descrição, fique a vontade para utilizar outros modelos.

Editar o tema do Help Center

Header

•  Alterar o Logo
•  Alterar o Banner Alterar a cor de background do header : para a cor Secundária do produto
•  Alterar a cor de background do banner: Secundáriatexto do header para branco #FFFFFF

Portal

•  Alterar o título do Help Center com o nome do produto em minúsculo e tudo junto

•  Alterar a cor de texto do header e do banner para branco #FFFFFF
•  Alterar o Banner
•  Mudar o tamanho das caixas para Medium

Categorias

•  Criar as categorias conforme o contexto dos conteúdos que serão organizados

...

Finalização

•  Criar o tema (css) do Help Center
•  Criar a pasta como nome do produto
•  Criar o arquivo principal app-hc-ndd[produto].js e app-hc-ndd[produto].css dentro da pasta do produto
•  Atualizar o tema com os elementos que deseja modificar a estilização
• Incluir o script Custom CSS alterando o nome do arquivo para o nome do produto

•  Escolher as funções dos componentes que deseja utilizar

•  Inserir a URL base no arquivo route.js

@import url("https://

confluencendd.

•  Inserir o novo idioma no arquivo route.js (se houver)

const languages = ['', '?l=pt', '?l=en', '?l=es', '?l=it'];

•  Inserir as traduções para o título e a descrição e dos documentos (se houver)

"nddprint": {
    "pt": {
      "Comece aqui": {
        "headline": "Comece aqui",
        "description": "Entenda o conceito dos módulos, funcionalidades e cenários do NDD Print."
      }
    },
    "en": {
      "Comece aqui": {
        "headline": "Getting started",
        "description": "Understand the concept of NDD Print modules, functionalities and scenarios."
      }
    },
    "es": {
      "Comece aqui": {
        "headline": "Empieza aqui",
        "description": "Comprender el principio de los módulos, funcionalidades y escenarios de NDD Print."
      }
    }
  },

•  Inserir as traduções para as categorias dos documentos (se houver)

"nddprint": {
    "pt": {
      "Preciso de ajuda": {
        "text": "Preciso de ajuda"
      }
    },
    "en": {
      "Preciso de ajuda": {
        "text": "I need some help"
      }
    },
    "es": {
      "Preciso de ajuda": {
        "text": "Busco ayuda"
      }
    }
  },

•  Inserir as traduções para os links do Help Center (se houver)

"nddprint": {
    "pt": {
      "Suporte": {
        "text": "Suporte"
      }
    },
    "en": {
      "Suporte": {
        "text": "Support"
      }
    },
    "es": {
      "Suporte": {
        "text": "Soporte"
      }
    }
  },

•  Inserir os redirecionamentos de links dos documentos (se houver)

"kubo": {
    "pt": {
      "https://helpcenter-kubo.ndd.tech/pt/falar-com-suporte/Current/": "https://suporte.ndd.tech/"
    },
    "en": {
      "https://helpcenter-kubo.ndd.tech/en/falar-com-suporte/Current/": "https://suporte.ndd.tech/"
    },
    "es": {
      "https://helpcenter-kubo.ndd.tech/es/falar-com-suporte/Current/": "https://suporte.ndd.tech/"
    }
  }

•  Capturar a cor para o link de destaque (conta-gotas na sombra do personagem do banner)
•  Alterar a cor do link de destaque (se houver)
•  Criar o script de geração dos arquivos finais no package.json

"nddmove-build": "parcel build src/nddmove/app-hc-nddmove.js src/nddmove/app-hc-nddmove.css --dist-dir public/ --no-source-maps --no-cache",
"nddmove-dev": "parcel watch src/nddmove/app-hc-nddmove.js src/nddmove/app-hc-nddmove.css --dist-dir dev/nddmove",

•  Gerar o build através do comando

npm run ndd[produto]-build

•  Realizar o commit

Finalização

•  Incluir os scripts no Help Center

github.io/public/app-hc-[produto].css”)

•  Incluir o script Custom JS alterando o nome do arquivo para o nome do produto

vp.loadScript("https://confluencendd.github.io/public/app-hc-[produto].js")
.then(() => {
});

•  Atualizar o Help Center