Загрузка searchinghost easy - Загрузка исходного кода searchinghost easy

SearchinGhostEasy

Нулевой код и простая в настройке панель поиска для Ghost CMS (блог).

Описание

SearchinGhostEasy — это оболочка исходной библиотеки SearchinGhost, делающая ее доступной любому пользователю Ghost, не являющемуся разработчиком.

Поскольку не все мы рождены с дизайнерскими навыками, для вас уже создано несколько шаблонов панели поиска. Все они имеют адаптивный дизайн и идеально подходят для экранов любого размера: от мобильных телефонов до телевизоров 4K.

Наконец, объединив все в iframe HTML, мы получаем очень богатый и удобный пользовательский интерфейс!

Ой! Забыл сказать самое главное: работает со ВСЕМИ темами Ghost ! (каспер, массово, нубия, ...)

Установка

Чтобы установить панель поиска в свой блог Ghost, выполните следующие быстрые шаги:

1. Создайте «индивидуальную интеграцию»

На левой боковой панели перейдите в раздел «Интеграция», нажмите «+ Добавить пользовательскую интеграцию» и присвойте ей имя «SearchinGhostEasy». Ghost сгенерировал ваш собственный уникальный «Ключ Content API» (он должен выглядеть так: ba094afe723d802f235af61d51 ). Сохраните его где-нибудь, он понадобится вам для следующего шага. Если вам нужна дополнительная помощь, посетите официальную страницу пользовательской интеграции Ghost.

Шаг установки 1

2. Добавьте скрипт на свой сайт.

Из раздела «Внедрение кода» скопируйте и вставьте следующий фрагмент кода в область «Нижний колонтитул сайта».
НЕ ЗАБУДЬТЕ заменить заполнитель <CONTENT_API_KEY> собственным ключом API. Нажмите «Сохранить».

 < 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 >

Примечание . Если вы предпочитаете изменить свою собственную тему, вставьте ее в default.hbs рядом с другими скриптами, и она будет работать точно так же.

Шаг установки 2

3а. [опция] Установить поиск в меню «слово»

Наконец, добавьте ссылку в меню, открывающее окно поиска. Для этого перейдите в раздел «Дизайн» и добавьте новый элемент. Это может быть в «навигации» или «дополнительной навигации». Вы можете назвать его любым ярлыком («Поиск» кажется естественным), но ссылка должна заканчиваться #searchinghost-easy . Нажмите «Сохранить».

Шаг установки3

3б. [опция] Установить «значок» поиска в меню

Если вы предпочитаете использовать значок поиска вместо слова, перейдите в этот раздел.

? Вот и всё, всё настроено! В вашем блоге в строке меню должна появиться кнопка «Поиск». Нажмите на нее, чтобы увидеть, как происходит волшебство! Если вам не нравится внешний вид панели поиска по умолчанию, перейдите в следующий раздел шаблона, чтобы изменить ее?

Также не забудьте посетить раздел «Вопросы и ответы», чтобы получить все полезные советы, и раздел конфигурации для более расширенной настройки.

Шаблоны

SearchinGhostEasy поставляется с различными графическими вариантами. Шаблон, предоставленный по умолчанию, называется «Базовый», но вы можете легко переключиться на любой другой.

Для этого обратитесь к описанию каждого шаблона и скопируйте/вставьте связанный пример кода в раздел Code Injection > Site Footer вашего блога. По сути, меняется только последняя часть имени сценария (например, «searchinghost-easy-basic.js», «searchinghost-easy-backpack.js», ...).

Надеемся, что появятся и другие шаблоны панели поиска! Если вы хотите поделиться одним из своих дизайнов, внеся свой вклад в этот проект, пожалуйста, свяжитесь со мной или создайте проблему/пиар.

✏️ Базовый шаблон

Скриншот

Скриншот основного шаблона

Демо

Живая демонстрация: https://gmfmi.github.io/searchinghost-easy/basic/

Установка

 < 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 >

✏️ Шаблон рюкзака

Скриншот

Скриншот шаблона рюкзака

Демо

Живая демонстрация: https://gmfmi.github.io/searchinghost-easy/backpack/

Установка

 < 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 >

Конфигурация

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

Если вам нужен больший контроль над SearchinGhostEasy, вот доступные параметры конфигурации:

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

contentApiKey (строка, обязательно)

Ключ API контента. Это значение является обязательным и его можно найти в деталях пользовательской интеграции.
пример: '06a02026a9f2dcf69f7e065d7c'

апиурл (строка)

Установите URL-адрес API, отличный от имени домена блога. Может быть полезно для целей тестирования. Эта опция соответствует url в библиотеке SearchinGhost.
пример: 'http://example.com'

searchhostOptions (объект)

Переопределить конфигурацию SearchinGhost по умолчанию. Эта конфигурация будет объединена с конфигурациями, предоставленными самим SearchinGhostEasy и выбранным шаблоном поиска.
Чтобы просмотреть все доступные параметры, обратитесь к документации SearchinGhost.
пример:
 {
    searchOn : 'submit' ,
    limit : 5 ,
    cacheMaxAge : 3600 ,
}

поискhostVersion (строка)

Установите используемую версию SearchinGhost. Может быть полезно, если только что была выпущена новая версия.
пример: '1.3.0'

zИндекс (число)

Установите для элемента HTML iframe z-index определенное значение.
по умолчанию: 2147483647

заполнитель (строка)

Замените заполнитель панели поиска по умолчанию «Поиск» на свой. Особенно полезно для неанглоязычных веб-сайтов.
Можно использовать любые символы, совместимые с браузером (например, UTF-8). Вот несколько рабочих примеров:
 placeholder: "Rechercher..."      # in french with dots
placeholder: "Αναζήτηση"          # in greek
placeholder: "With emojis! ?"   # use with caution
по умолчанию: "Search"

отладка (логическое значение)

Установите для него true , чтобы включить режим отладки. Это выведет окончательную используемую конфигурацию SearchinGhost, а также включит отладку для SearchinGhost.
по умолчанию: false

Вопросы и ответы

Получу ли я обновления и улучшения?

Да, когда появится новая версия SearchinGhostEasy, вы получите ее автоматически.

Если вы не хотите такого поведения, замените @latest конкретной версией в URL-адресе. Например, для basic шаблона используйте: https://cdn.jsdelivr.net/gh/gmfmi/[email protected]/dist/searchinghost-easy-basic.js (замените 1.0.0 на нужную версию). ).

Могу ли я использовать значок поиска вместо слова?

Да, вы можете сделать это с помощью скрипта или обновив тему (опцию темы см. ниже).

Для варианта сценария просто скопируйте/вставьте 3 первые строки следующего примера ПЕРЕД разделом инициализации SearchinGhostEasy.

Обратите внимание, что этот пример кода был разработан для работы со стандартной темой Ghost «Casper». Вам могут потребоваться некоторые настройки, чтобы он работал на вашем собственном веб-сайте (например, селектор запросов и созданный внутренний элемент javascript).

 < 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 >

В противном случае, если вы предпочитаете добавить значок во вторичное меню (рядом со ссылками на социальные сети), используйте его:

 < 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 >

В обоих случаях, если вам нужно изменить цвет значка, чтобы он лучше соответствовал вашей теме Ghost, обновите свойство fill указав соответствующее значение. Например: style="fill:#fc03ec" чтобы получить розовый цвет.

Могу ли я использовать его в собственной теме?

Да, чтобы настроить свою тему, следуйте этому руководству Ghost, чтобы изменить меню по мере необходимости.

Тогда единственное требование для того, чтобы SearchinGhostEasy работал, — это использовать #searchinghost-easy в качестве значения в href вашей ссылки.

Например, ваш файл partials/navigation.hbs может быть таким:

 < 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 >

с partials/icons/search.hbs содержащими:

 < 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 >

Могу ли я использовать ссылку где-нибудь кроме меню?

Конечно, любая ссылка, указывающая на #searchinghost-easy , откроет всплывающее окно поиска. Вы можете создать одну или несколько ссылок на одной странице, например, в сообщении Ghost или непосредственно в файле .hbs темы.

При написании статьи можно просто создать ссылку таким образом:

Шаг установки3

В HTML ссылка SearchinGhostEasy — это не что иное, как:

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

Кредиты

Спасибо ACERLR8, их панель поиска послужила вдохновением для создания шаблона «Basic».
Back to Pack, первоисточник шаблона «Рюкзак»

Расширять

searchinghost easy

SearchinGhostEasy

Описание

Установка

1. Создайте «индивидуальную интеграцию»

2. Добавьте скрипт на свой сайт.

3а. [опция] Установить поиск в меню «слово»

3б. [опция] Установить «значок» поиска в меню

Шаблоны

✏️ Базовый шаблон

Скриншот

Демо

Установка

✏️ Шаблон рюкзака

Скриншот

Демо

Установка

Конфигурация

Вопросы и ответы

Получу ли я обновления и улучшения?

Могу ли я использовать значок поиска вместо слова?

Могу ли я использовать его в собственной теме?

Могу ли я использовать ссылку где-нибудь кроме меню?

Кредиты

easy steamcmd

easy digital downloads

gp|Простая CMS

Простое управление сетью

Легкие размышления

ЛЕГКАЯ CMS

chat.petals.dev

GPT Prompt Templates

GPTyped

waymo open dataset

SmartTube

Sunamu

waymo open dataset

wp functions

termwind