gridea search

Плагин темы поиска клиентских статей статического сайта Gridea

Предварительный просмотр: https://kytrun.com или загрузите этот проект, поместите каталог example/ в путь к темам Gridea и запустите Gridea самостоятельно.

Он подходит только для разработчиков тем Gridea с основами фронтенд-программирования. Темы с использованием Grinda-поиска можно посмотреть здесь .

Функции:

• Отдельные страницы результатов поиска и веб-ссылки
• Разработчики тем могут в значительной степени повторно использовать существующие шаблоны.
• Расширьте использование официального API, без дополнительных затрат на обучение
• Загружайте только необходимые ресурсы с помощью поиска
• Поддержка настройки стиля
• хорошая совместимость

Быстрый старт:

1. Возьмите за образец официальный шаблон разработки темы и добавьте на его основе новые файлы:

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

2. Измените следующие файлы

(1) ./templates/api.ejs

Шаблон, который выводит API формата JSON. Чтобы максимально сократить время передачи по сети, некоторые атрибуты изначально аннотируются. При необходимости вы можете отменить соответствующие аннотации.

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

Публичный шаблон, добавьте поле поиска в соответствующем месте для ссылки на других страницах:

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

Существующую часть нельзя изменить, можно добавить другие атрибуты, такие как класс или стиль.

(3) ./templates/search.ejs

Страницу поиска можно изменить на основе других страниц, а затем добавить узлы рендеринга результатов поиска и зависимые скрипты.

• Зависимый скрипт <script> должен быть размещен перед </body> . Не меняйте порядок произвольно, чтобы избежать ошибок загрузки.

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

Шаблон списка результатов поиска анализируется на стороне браузера и в основном используется повторно ./templates/includes/post-list.ejs, но сводное содержимое <%- post.abstract %> изменяется на <%- post.searchedPreview %> , использование предварительного просмотра результатов поиска, содержащих ключевые слова.

• В списке результатов поиска пока нет функции нумерации страниц, пожалуйста, не используйте поле pagination .

Настройка стиля:

1. Отображение результатов поиска и отсутствие результатов поиска.

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

• Сохраните существующие атрибуты, такие как класс, идентификатор и т. д., и добавьте новые атрибуты, значки или анимацию.

2. Поле ввода поиска.

• Сохраняйте существующие атрибуты, добавляйте новые атрибуты и добавляйте значки или анимацию.

3. Выделение ключевых слов

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

другой:

• Темы, использующие Gridea-поиск

• Официальная структура каталогов и описание переменных страницы

• Сторонние библиотеки:

  • Нечеткий поиск во внешнем интерфейсе — Fuse.js: https://github.com/krisk/fuse

  • Разбор шаблонов — EJS: https://github.com/mde/ejs

• Лицензия открытого исходного кода: MIT

• Похожие статьи:

  • Добавьте функцию поиска в блог Gridea