gridea search

Plug-in de tema de pesquisa de artigo de cliente de site estático Gridea

Visualização: https://kytrun.com, ou baixe este projeto, coloque example/ no caminho dos temas do Gridea e execute você mesmo o Gridea.

É adequado apenas para desenvolvedores de temas Gridea com base em programação front-end usando grinda-search pode ser visualizado aqui .

Características:

• Páginas de resultados de pesquisa independentes e links da web
• Os desenvolvedores de temas podem reutilizar modelos existentes em alto grau
• Amplie o uso da API oficial, sem custos adicionais de aprendizagem
• Carregue apenas os recursos necessários usando a pesquisa
• Personalização de estilo de suporte
• boa compatibilidade

Início rápido:

1. Pegue o modelo oficial de desenvolvimento do tema como exemplo e adicione novos arquivos com base nele:

 ├── assets
 │   └── media
 │       └── gridea-search
 │           └── result-template.ejs - 搜索结果列表模板
 │           └── ejs.min.js - 模板渲染引擎
 │           └── fuse.basic.min.js - 模糊搜索
 │           └── gridea-search.js - 功能入口
 └── templates
     ├── api.ejs - 输出整站 API
     └── search.ejs - 搜索页面

2. Modifique os seguintes arquivos

(1) ./templates/api.ejs

O modelo que gera a API no formato JSON Para reduzir ao máximo o tempo de transmissão da rede, alguns atributos são inicialmente anotados. Você pode cancelar as anotações correspondentes conforme necessário.

(2) ./templates/includes/header.ejs

Modelo público, adicione uma caixa de pesquisa no local apropriado para referência em outras páginas:

 < form id =" gridea-search-form " action =" <%= themeConfig.domain %>/search/ " >
    < input name =" q " />
</ form >

A peça existente não pode ser modificada, outros atributos como classe ou estilo podem ser adicionados.

(3) ./templates/search.ejs

A página de pesquisa pode ser modificada com base em outras páginas e, em seguida, adicionar nós de renderização de resultados de pesquisa e scripts dependentes.

• O script dependente <script> deve ser colocado antes de </body> . Não altere a ordem arbitrariamente para evitar erros de carregamento.

(4) ./assets/media/gridea-search/result-template.ejs

O modelo de lista de resultados de pesquisa é analisado no lado do navegador e basicamente reutilizado ./templates/includes/post-list.ejs, mas o conteúdo resumido <%- post.abstract %> é modificado para <%- post.searchedPreview %> , usando a visualização dos resultados da pesquisa contendo palavras-chave.

• A lista de resultados da pesquisa ainda não possui função de paginação, por favor não utilize o campo pagination .

Personalização de estilo:

1. Exibir resultados de pesquisa e nenhum resultado de pesquisa

 < div id =" gridea-search-result " data-update =" <%= site.utils.now %> " >
    < div class =" searching " >搜索中...... </ div >
    < div class =" no-result " style =" display:none " >未搜索到相关文章</ div >
</ div >

• Retenha atributos existentes, como classe, id, etc., e adicione novos atributos, ícones ou animações.

2. Caixa de entrada de pesquisa

• Mantenha os atributos existentes, adicione novos atributos e adicione ícones ou animações.

3. Destaque de palavras-chave

 < style >
   .searched-keyword {
     /* <span> 标签支持的所有 CSS 属性 */
    }
</ style > 

outro:

• Tópicos usando gridea-search

• Estrutura de diretório oficial e descrição de variável de página

• Bibliotecas de terceiros:

  • Pesquisa difusa de front-end - Fuse.js: https://github.com/krisk/fuse

  • Análise de modelo - EJS: https://github.com/mde/ejs

• Licença de código aberto: MIT

• Artigos relacionados:

  • Adicionar função de pesquisa ao blog Gridea