searchinghost easy

SearchinGhostFácil

Um código zero e uma barra de pesquisa fácil de configurar para Ghost CMS (blog).

Descrição

SearchinGhostEasy é um wrapper da biblioteca SearchinGhost original para torná-la acessível a qualquer usuário Ghost "não desenvolvedor".

Como nem todos nascemos com habilidades de design, vários modelos de barra de pesquisa já foram feitos para você. Todos eles usam um design responsivo para que se encaixem perfeitamente em qualquer tamanho de tela, desde telefones celulares até TVs 4K.

Por fim, ao reunir tudo em um iframe HTML, obtemos uma experiência de usuário super rica e tranquila!

Oh! Esqueci de dizer o mais importante: funciona com TODOS os temas do Ghost ! (casper, massivamente, núbia, ...)

Instalação

Para instalar a barra de pesquisa em seu blog Ghost, siga estas etapas rápidas:

1. Crie uma “integração personalizada”

No painel esquerdo, vá até a seção “integração”, clique em “+ Adicionar integração personalizada” e dê o nome “SearchinGhostEasy”. O Ghost gerou sua própria e exclusiva "Chave de API de conteúdo" (deve ser semelhante a ba094afe723d802f235af61d51 ). Guarde-o em algum lugar, você precisará dele na próxima etapa. Se precisar de mais ajuda, visite a página oficial de integração personalizada do Ghost.

2. Adicione o script ao seu site

Na seção "Injeção de código", copie/cole o seguinte trecho de código na área "Rodapé do site".
NÃO SE ESQUEÇA de substituir o espaço reservado <CONTENT_API_KEY> pela sua própria chave de API. Clique em "salvar".

 < script src =" https://cdn.jsdelivr.net/gh/gmfmi/searchinghost-easy@latest/dist/searchinghost-easy-basic.js " > </ script >
< script >
    new SearchinGhostEasy ( {
        contentApiKey : '<CONTENT_API_KEY>'
    } ) ;
</ script >

nota : se você preferir modificar seu tema personalizado, cole-o em seu default.hbs próximo aos outros scripts e funcionará exatamente da mesma maneira.

3a. [opção] Defina uma "palavra" de pesquisa no menu

Por fim, adicione um link no menu que abre a caixa de pesquisa. Para isso, vá até a seção “Design” e adicione um novo item. Pode ser na “navegação” ou na “navegação secundária”. Você pode nomeá-lo com qualquer rótulo ("Pesquisar" parece natural), mas o link deve terminar com #searchinghost-easy . Clique em "salvar".

3b. [opção] Defina um "ícone" de pesquisa no menu

Se você preferir usar um ícone de pesquisa em vez de uma palavra, vá para esta seção.

---

? É isso, está tudo configurado! No seu blog, um botão “pesquisar” deve aparecer na barra de menu. Clique nele para ver a mágica acontecer! Se você não gosta da aparência padrão da barra de pesquisa, verifique a próxima seção do modelo para alterá-la.

Além disso, não se esqueça de verificar a seção Perguntas e Respostas para obter todas as dicas úteis e a seção de configuração para uma configuração mais avançada.

Modelos

SearchinGhostEasy vem em vários sabores gráficos. O modelo fornecido por padrão é chamado de “Básico”, mas você pode facilmente mudar para qualquer outro.

Para fazer isso, consulte a descrição de cada modelo e copie/cole o exemplo de código associado na seção Code Injection > Site Footer do seu blog. Basicamente, apenas a última parte do nome do script muda (por exemplo, "searchinghost-easy-basic.js", "searchinghost-easy-backpack.js", ...).

Esperançosamente, mais modelos de barra de pesquisa estão chegando! Se você gostaria de compartilhar um de seus designs contribuindo para este projeto, sinta-se à vontade para entrar em contato comigo ou para criar uma edição/PR.

---

✏️ Modelo básico

Captura de tela

Demonstração

Demonstração ao vivo: https://gmfmi.github.io/searchinghost-easy/basic/

Instalação

 < script src =" https://cdn.jsdelivr.net/gh/gmfmi/searchinghost-easy@latest/dist/searchinghost-easy-basic.js " > </ script >
< script >
    new SearchinGhostEasy ( {
        contentApiKey : '<CONTENT_API_KEY>'
    } ) ;
</ script >

---

✏️ Modelo de mochila

Captura de tela

Demonstração

Demonstração ao vivo: https://gmfmi.github.io/searchinghost-easy/backpack/

Instalação

 < script src =" https://cdn.jsdelivr.net/gh/gmfmi/searchinghost-easy@latest/dist/searchinghost-easy-backpack.js " > </ script >
< script >
    new SearchinGhostEasy ( {
        contentApiKey : '<CONTENT_API_KEY>'
    } ) ;
</ script > 

Configuração

Esta seção é reservada para usuários mais avançados. Por padrão, os parâmetros de configuração são escolhidos cuidadosamente para que nenhuma configuração extra seja necessária.

Se você precisar de mais controle sobre o SearchinGhostEasy, aqui estão as opções de configuração disponíveis:

 new SearchinGhostEasy ( {
    contentApiKey : '<CONTENT_API_KEY>' , // mandatory
    apiUrl : 'http://example.com' ,
    searchinghostOptions : { } ,
    searchinghostVersion : '1.0.0' ,
    zIndex : 200 ,
    placeholder : "Search" ,
    debug : false
} ) ;

• contentApiKey (string, obrigatório)

A chave da API de conteúdo. Este valor é obrigatório e pode ser encontrado nos detalhes da integração customizada.

exemplo: '06a02026a9f2dcf69f7e065d7c'

• apiUrl (string)

Defina um URL de API diferente do nome de domínio do blog. Pode ser útil para fins de teste. Esta opção corresponde ao url na biblioteca SearchinGhost.

exemplo: 'http://example.com'

• pesquisandohostOptions (objeto)

Substitua a configuração padrão do SearchinGhost. Esta configuração será mesclada com aquelas fornecidas pelo próprio SearchinGhostEasy e pelo modelo de pesquisa selecionado.

Para ver todas as opções disponíveis, consulte a documentação do SearchinGhost.

exemplo:

 {
    searchOn : 'submit' ,
    limit : 5 ,
    cacheMaxAge : 3600 ,
}

• pesquisandohostVersion (string)

Defina a versão do SearchinGhost a ser usada. Pode ser útil se uma versão mais recente acabar de ser lançada.

exemplo: '1.3.0'

• zIndex (número)

Defina o z-index do elemento iframe HTML para um valor específico.

padrão: 2147483647

• espaço reservado (string)

Altere o espaço reservado da barra de pesquisa padrão "Pesquisar" pelo seu. Especialmente útil para sites que não sejam em inglês.
Qualquer caractere compatível com navegador (por exemplo, UTF-8) pode ser usado. Aqui estão alguns exemplos de trabalho:

 placeholder: "Rechercher..."      # in french with dots
placeholder: "Αναζήτηση"          # in greek
placeholder: "With emojis! ?"   # use with caution

padrão: "Search"

• depuração (booleano)

Defina-o como true para ativar o modo de depuração. Isso gerará a configuração final do SearchinGhost usada e também permitirá a depuração do SearchinGhost.

padrão: false

Perguntas e respostas

Receberei atualizações e melhorias?

Sim, quando uma nova versão do SearchinGhostEasy estiver disponível, você a receberá automaticamente.

Se você não quiser esse comportamento, substitua @latest por uma versão específica na URL. Por exemplo, com o modelo basic , use: https://cdn.jsdelivr.net/gh/gmfmi/[email protected]/dist/searchinghost-easy-basic.js (substitua 1.0.0 pela versão desejada ).

Posso usar um ícone de pesquisa em vez de uma palavra?

Sim, você pode fazer isso usando um script ou atualizando seu tema (veja abaixo a opção de tema).

Para a opção de script, basta copiar/colar as 3 primeiras linhas do exemplo a seguir ANTES da seção de inicialização do SearchinGhostEasy.

Observe que este exemplo de código foi projetado para funcionar no tema padrão "Casper" Ghost. Você pode precisar de alguns ajustes para fazê-lo funcionar em seu próprio site (ou seja, o seletor de consulta e o elemento javascript interno criado).

 < script >
    var searchIcon = '<svg style="fill:#fff" width="14px" height="14px" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M508.875,493.792L353.089,338.005c32.358-35.927,52.245-83.296,52.245-135.339C405.333,90.917,314.417,0,202.667,0 S0,90.917,0,202.667s90.917,202.667,202.667,202.667c52.043,0,99.411-19.887,135.339-52.245l155.786,155.786 c2.083,2.083,4.813,3.125,7.542,3.125c2.729,0,5.458-1.042,7.542-3.125C513.042,504.708,513.042,497.958,508.875,493.792z M202.667,384c-99.979,0-181.333-81.344-181.333-181.333S102.688,21.333,202.667,21.333S384,102.677,384,202.667 S302.646,384,202.667,384z"/></svg>'
    var menu = document . querySelector ( 'ul.nav' ) ;
    menu . insertAdjacentHTML ( 'beforeend' , `<li class="nav-search"><a href="#searchinghost-easy"> ${ searchIcon } </a></li>` ) ;
    
    new SearchinGhostEasy ( {
        contentApiKey : '<CONTENT_API_KEY>'
    } ) ;
</ script >

Caso contrário, se preferir adicionar o ícone ao menu secundário (ao lado dos links sociais), utilize este:

 < script >
    var searchIcon = '<svg style="fill:#fff" width="16px" height="16px" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M508.875,493.792L353.089,338.005c32.358-35.927,52.245-83.296,52.245-135.339C405.333,90.917,314.417,0,202.667,0 S0,90.917,0,202.667s90.917,202.667,202.667,202.667c52.043,0,99.411-19.887,135.339-52.245l155.786,155.786 c2.083,2.083,4.813,3.125,7.542,3.125c2.729,0,5.458-1.042,7.542-3.125C513.042,504.708,513.042,497.958,508.875,493.792z M202.667,384c-99.979,0-181.333-81.344-181.333-181.333S102.688,21.333,202.667,21.333S384,102.677,384,202.667 S302.646,384,202.667,384z"/></svg>'
    var menu = document . querySelector ( '.social-links' ) ;
    menu . insertAdjacentHTML ( 'beforeend' , `<a class="social-link" href="#searchinghost-easy"> ${ searchIcon } </a>` ) ;

    new SearchinGhostEasy ( {
        contentApiKey : '<CONTENT_API_KEY>'
    } ) ;
</ script >

Em ambos os casos, se você precisar modificar a cor do ícone para melhor corresponder ao tema do Ghost, atualize a propriedade fill com o valor apropriado. Por exemplo: style="fill:#fc03ec" para ficar rosa.

Posso usá-lo em um tema personalizado?

Sim, para personalizar seu tema, siga este guia do Ghost para modificar o menu conforme necessário.

Então, o único requisito para fazer o SearchinGhostEasy funcionar é usar #searchinghost-easy como valor no href do seu link.

Por exemplo, seu arquivo partials/navigation.hbs poderia ser:

 < ul class =" nav " role =" menu " >
    {{#foreach navigation}}
    < li class =" {{link_class for=(url) class=(concat " nav- " slug)}}" role=" menuitem " > < a href =" {{url absolute= " true "}}" > {{label}} </ a > </ li >
    {{/foreach}}
    < li class =" search-icon " role =" menuitem " > < a href =" #searchinghost-easy " > {{ > "icons/search"}} </ a > </ li >
</ ul >

com partials/icons/search.hbs contendo:

 < svg xmlns =" http://www.w3.org/2000/svg " xmlns:xlink =" http://www.w3.org/1999/xlink " viewBox =" 0 0 512 512 " > < path d =" M508.875,493.792L353.089,338.005c32.358-35.927,52.245-83.296,52.245-135.339C405.333,90.917,314.417,0,202.667,0 S0,90.917,0,202.667s90.917,202.667,202.667,202.667c52.043,0,99.411-19.887,135.339-52.245l155.786,155.786 c2.083,2.083,4.813,3.125,7.542,3.125c2.729,0,5.458-1.042,7.542-3.125C513.042,504.708,513.042,497.958,508.875,493.792z M202.667,384c-99.979,0-181.333-81.344-181.333-181.333S102.688,21.333,202.667,21.333S384,102.677,384,202.667 S302.646,384,202.667,384z "/> </ svg >

Posso usar um link em qualquer lugar que não seja no menu?

Com certeza, qualquer link apontando para #searchinghost-easy abrirá o pop-up da caixa de pesquisa. Você pode criar um ou vários links na mesma página, por exemplo, em uma postagem do Ghost ou diretamente em um arquivo .hbs de tema.

Ao escrever um artigo, você pode simplesmente criar um link desta forma:

Em HTML, um link SearchinGhostEasy nada mais é do que:

 < a href =" #searchinghost-easy " > click to search </ a > 

Créditos

• Obrigado ao ACERLR8, sua barra de pesquisa inspirou o modelo "Básico"
• Back to Pack, a fonte original do modelo "Mochila"