Vamos aprender a realizar a customização do Help Center para o novo padrão.
Pré-requisitos
- Saber o código hexadecimal das cores primária, secundária e terciária do produto
- Criar os ícones
- riar o banner
Alterar os ícones nos documentos
- Documentos principais
- Documentos secundários
- Documentos adicionais
Documentos principais
- Alterar a descrição dos documentos
Editar o tema do Help Center
- Alterar o Logo
- Alterar o Banner
- Alterar a cor de background do header: Secundária
- Alterar a cor de background do banner: Secundária
- Alterar a cor de texto do header e do banner para branco
Categorias
- Criar as categorias conforme o contexto dos conteúdos que serão organizados
Ex: Preciso de ajuda
FAQ
Tutoriais
Solução de problemas
Falar com o Suporte
Custom script
- 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
Você pode copiar o conteúdo de outro produto.
- Escolher as funções dos componentes que deseja utilizar
Você pode copiar o conteúdo de outro produto.
- Inserir a URL base no arquivo route.js
const baseUrls = [
'https://helpcenter-testes.ndd.tech',
'https://helpcenter-nddorbix.ndd.tech',
'https://helpcenter-nddprint.ndd.tech',
'https://helpcenter-kubo.ndd.tech',
'https://helpcenter-nddmove.ndd.tech'
];
- 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
confluencendd.github.io/public/app-hc-[produto].css
confluencendd.github.io/public/app-hc-[produto].js
- Atualizar o Help Center