¶ Declaimer
Este manual sofre melhoria contínua, de modo que é possível encontrar campos novos e ainda incompletos com relativa frequência, no entanto, as informações básica de uso estão disponíveis.
Atenção às chefias: o uso da wiki, por parte de estagiários, é de responsabilidade de um servidor supervisor, de modo que as boas práticas devem ser observadas pela chefia, sendo facultado à GSERV tomar as medidas necessárias para a manutenção da plataforma, inclusive a exclusão de documentos ou outros arquivos inseridos em local indevido ou o reset de configurações.
¶ Criar e configurar página
¶ Criando a página
Como exemplo, criaremos uma página no space da Coinfra, utilizando o editor visual:
Passo 01 Clique no ícone que indica a criação de página conforme indicado na imagem abaixo:
Passo 02 Você então visualizará a seguinte aba, onde poderá escolher o local onde deseja criar sua página. Observe que, por padrão, uma página nova é nomeada como /new-page:
Passo 03 Selecione a página mãe, neste caso, Space - Coinfra:
Passo 04 A seleção gerará o seguinte caminho, sendo necessário adicionar a página que se deseja criar, manualmente, inserindo o nome da página, campo /teste/ para o caso destas instruções:
.png)
Por padrão todos os nomes de página inseridos nesse passo devem ser escritos com letras minúsculas, em caso de nome com mais de uma palavra deve-se utilizar o underline «_» para interligar a sentença.
Ex: /home/spaces/coinfra/teste_criacao_pagina
Evite utilizar conectores entre as palavras (de, da, para, com entre outros) e, não utilize acentos ou «ç».
Passo 05 Após isso, clique em selecionar para entrar no menu de seleção para criar sua página teste. No menu exibido em seguida, clique em Visual Editor:
¶ Configuração da página
Passo 06 Será aberta a seguinte aba de configuração da sua publicação:
Passo 6.1 Adicione um título à sua página, de preferência igual ou relacionado ao preenchido no passo 04:
Passo 07 Em agendamento, é possível configurar, clicando na chave, se a página será criada pulicada ou despublicada.
Páginas despublicadas só podem ser visualizadas por usuários logados e que possuam perfil de acesso do setor que criou a página em tela.
Passo 7.1 Do mesmo modo, clicando em a publicação inicia em: ou a publicação expira em: é possível configurar o período em que a página ficará online.
Passo 08 Após, clicar em «OK» no campo superior direito para salvar sua configuração:
¶ Mover páginas
A movimentação das páginas deve, sempre, acompanhar a lógica da árvore organizacional do setor, mas também obedecendo aos critérios de boas práticas e manutenção da plataforma.
Mova páginas somente dentro de seu spaces e, tenha cuidado para não manter ppáginas órfãs (sem ancoragem).
Na página que deseja mover:
Passo 01 Clique no ícone «Ações da página», no canto superior direito:
Passo 02 Após, clique sobre «Mover/renomear» para abrir o diretório da Wiki. Observe que a guia exibe um campo com o caminho atual da página em que você se encontra e deseja mover.
Passo 03 Navegue pelas pastas até localizar o local em que deseja alocar a página, simplesmente, ou escreva o caminho desejado no campo, com o cuidado de não apagar o nome com o qual a página atual foi nomeada anteriormente.
Se desejar alterar o nome da página, consulte o Passo 06 na seção Configuração da página deste mesmo manual, antes de movê-la
Passo 04 Clique em SELECIONAR para salvar as alterações desejadas.
¶ O editor visual
O texto utilizado para a desmonstração provém de uma página web geradora de conteúdo próprio para este fim, Lorem Ipsum (https://www.lipsum.com/), não possuindo quanquer relação com esta plataforma governamental, ou mesmo, relevância.
Vencido o «Passo 08», será exibida a seguinte visão do Editor Visual. Observe que possui diversos recursos já conhecidos por usuários de editores de texto em sua barra superior:
Digite o texto desejado e veja abaixo como formatá-lo dentre outros recursos de edição.
¶ Títulos
Para criar um título, selecione o texto desejado e clique sobre uma das opções de "Heading", sendo que, de acordo com os títulos é que será estruturado o índice, de acordo com a progressão númerica é estabelecida a ordem hierárquica.
¶ Parágrafos
Observe que o processo para a criação de um parágrafo o procedimento é quase idêntico ao anterior. No mais, as opções de negrito e itálico seguem o padrão encontrado em ferramentas de edição de texto do mercado.
¶ Alinhamento
O alinhamento está disponível nos três modelos padrão, à esquerda, à direita e central. Para alinhar, basta selecionar o texto desejado e clicar sobre o menu suspenso, exibindo as opções, após clica naquela desejada.
¶ Listas
A criação de listas está disponível em 3 formatos, numérico, bulleted (pontos) e to-do (lista de tarefas). Para criar uma lista, selecione o texto desejado e clique sobre a opção desejada:
¶ Citação
Para criar um bloco de citação é necessário selecionar o texto e clicar sobre o ícone indicado:
¶ Link
Para inserir um link em um caractere ou frase, é necessário selecionar o texto desejado e clicar no ícone de link:
Será aberto o seguinte campo logo abaixo do trecho selecionado, onde deverá ser colado o link e, após clicar no marcador verde para salvar:
Por padrão, quando clicado sobre texto com link, será aberta uma nova guia, sendo que modificar esta configuração só é possível pelo editor de código ou markdown.
¶ Imagem
Em nenhuma hipótese, coloque imagens ou documentos na raiz da Wiki.js (/). SEMPRE adicione os assets em uma pasta criada previamente pela GSERV.
Caso precise criar uma pasta para imagens consulte a Gestão de Serviços desta SETIC.
Para inserir uma imagem (assets), é necessário clicar sobre o ícone na barra superior e abrir o gerenciador de mídia:
Navegue entre as pastas para escolher uma imagem já existente, ou arraste a imagem necessária para o campo enviar mídia na lateral superior direita. Após, clique em inserir.
Escolhida a imagem e inserida, é possível formatá-la, entre recuo à esquerda, à direita, centralização, bem como rotular a mídia.
¶ Vídeo
A Wiki.js, nesta versão, ainda não suporta vídeos de forma nativa, mas é possível linka-los à página.
Para linkar um vídeo à sua página é possível fazê-lo sem a necessidade de inserção de framework manual, bastando, para isso, clicar no ícone player (insert media) e, após, inserir o link no campo indicado, em seguida, clicar no marcador verde (ok):
O resultado será o seguinte:
¶ Tabelas
Para criar uma tabela, clique sobre o ícone indicado na barra superior (insert table) e selecione a quantidade de colunas e linhas desejadas:
Será gerada uma tabela simplificada que pode ser editada para criar campos de título, ou unificar títulos.
Veja abaixo o exemplo de como criar títulos:
O resultado será o seguinte:
¶ Código
Para transformar um texto em linha de código simples, basta selecionar o trecho desejado e clicar sobre o ícone de código (code):
¶ Bloco de código
Para inserir um bloco de código, basta selecionar o trecho desejado e clicar sobre o ícone de bloco código (insert code block):
¶ O editor markdown
A Wiki.js utiliza sintaxe CommonMark. Você pode utilizar o guia rápido de markdown para auxiliá-lo clicando aqui.
Siga os passos iniciais do 01 ao 04.
Passo 05 Após isso, clique em selecionar para entrar no menu de seleção para criar sua página teste. No menu exibido em seguida, clique em Markdown:
Você terá a seguinte visão de tela inicial, das quais as funções serão detalhadas mais abaixo:
Atente-se para a barra de opções superior:
E a barra lateral esquerda:
¶ Negrito
É possível selecionar um texto e negritá-lo pelos seguintes métodos:
- Adicionado 2 austerísticos antes e após o texto desejado:
**texto**; - Selecionando o texto desejado com o botão esquerdo do mouse e pressionando as teclas Ctrl + B;
- Através das tags HTML:
<strong>texto</strong>; - Selecionando o texto desejado com o botão esquerdo do mouse e clicando sobre a opção indicada na barra superior:
O resultado será => texto
¶ Itálico
É possível selecionar um texto e torná-lo itálico pelos seguintes métodos:
- Adicionado 1 austerístico antes e após o texto desejado:
*texto*; - Selecionando o texto desejado com o botão esquerdo do mouse e pressionando as teclas Ctrl + I;
- Através das tags HTML:
<em>texto</em>ou<i>texto></i>; - Selecionando o texto desejado com o botão esquerdo do mouse e clicando sobre a opção indicada na barra superior:
O resultado será => texto
¶ Tachado
É possível selecionar um texto e tachá-lo pelos seguintes métodos:
- Adicionando o 2 acentos tilde «~» antes e após o texto desejado:
~~texto~; - Através das tags HTML:
<s>texto</s>; - Selecionando o texto desejado com o botão esquerdo do mouse e clicando sobre a opção indicada na barra superior:
O resultado será => texto
¶ Títulos
Os títulos podem ser criados de duas formas:
- Manualmente, por meio de forquilhas:
# texto, sendo observado que a quantidade de forquilhas à esquerda do texto determina a hierarquia entre os títuo; - Através das tags HTML:
<h1>texto</h1>; - Selecionando o texto desejado com o botão esquerdo do mouse e clicando sobre a opção indicada na barra superior:
O resultado será =>
¶ Subscrito
¶ Sobrescrito
¶ Bloco
¶ Lista não ordenada
¶ Lista ordenada
¶ Código inline
¶ Tecla do teclado
¶ Barra horizontal
¶ Inserir link
¶ Inserir mídia
¶ Inserir diagrama
¶ Recuperação de página por histórico
Passo 01 Na página onde deseja realizar a recuperação de conteúdo, clique sobre o ícone de edição no canto inferior direito da tela para abrir as opções de página:
Passo 02 Clique sobre histórico para abrir os registros da página:
Você será redirecionado:
Observe que os registros apresentam as configurações A (versão anterior) e B (versão atual), de modo que, ao clicar sobre algum dos A’s, é possível visualizar a diferença entre versões no campo à direita:
Veja como funciona o modo de seleção:
Observe os dados do terceiro registro, o qual utilizaremos de exemplo:
Passo 03 Selecionado o registro de interesse (o terceiro, conforme imagens acima), clique sobre os 3 pontos ao lado esquerdo da seleção para abrir as seguintes opções:
Passo 04 Clique sobre a opção «Restore» para restaurar a versão:
Será exibida a seguinte mensagem. Clique sobre RESTAURAR para confirmar e salvar as configurações desejadas:
Passo 05 Retorne à página clicado em RETURN TO LIVE VERSION:
¶ Extra: recursos visuais/códigos
Coordenações que possam dispor de desenvolvedor em sua equipe para a edição do space próprio, é possível acessar configurações de estilo em CSS ou Semantic UI, previamente configuradas clicando aqui.
As coordenações que necessitem de recursos visuais diversos dos já previamente configurados e, que não possuam recursos humanos próprios, podem solicitar à GSERVE a criação de código que os atenda através do seguinte formulário https://atendimento.setic.ro.gov.br/plugins/formcreator/front/formdisplay.php?id=368 (selecionando «alteração de página»).