searchinghost easy

BuscandoFantasmaFácil

Un código cero y una barra de búsqueda fácil de configurar para Ghost CMS (blog).

Descripción

SearchinGhostEasy es un contenedor de la biblioteca SearchinGhost original para que sea accesible para cualquier usuario de Ghost "no desarrollador".

Debido a que no todos nacemos con habilidades de diseño, ya se han creado varias plantillas de barra de búsqueda para usted. Todos utilizan un diseño responsivo para que se adapten perfectamente a cualquier tamaño de pantalla, desde teléfonos móviles hasta televisores 4K.

Finalmente, al reunir todo en un iframe HTML, obtenemos una experiencia de usuario súper rica y fluida.

¡Oh! Olvidé decir lo más importante: ¡funciona con TODOS los temas de Ghost ! (casper, masivamente, nubia, ...)

Instalación

Para instalar la barra de búsqueda en tu blog de Ghost, sigue estos rápidos pasos:

1. Cree una "integración personalizada"

En el panel lateral izquierdo, vaya a la sección "integración", haga clic en "+ Agregar integración personalizada" y asígnele el nombre "SearchinGhostEasy". Ghost ha generado su propia y única "Clave API de contenido" (debería verse como ba094afe723d802f235af61d51 ). Guárdelo en algún lugar, lo necesitará para el siguiente paso. Si necesita más ayuda, visite la página oficial de integración personalizada de Ghost.

2. Agregue el script a su sitio

Desde la sección "Inyección de código", copie y pegue el siguiente fragmento de código en el área "Pie de página del sitio".
NO OLVIDE reemplazar el marcador de posición <CONTENT_API_KEY> con su propia clave API. Haga clic en "guardar".

 < 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 : si prefiere modificar su tema personalizado, péguelo en su default.hbs junto a los otros scripts y funcionará exactamente de la misma manera.

3a. [opción] Establecer una "palabra" de búsqueda en el menú

Finalmente, agregue un enlace en el menú que abre el cuadro de búsqueda. Para hacerlo, vaya a la sección "Diseño" y agregue un nuevo elemento. Puede ser en la “navegación” o en la “navegación secundaria”. Puedes nombrarlo con cualquier etiqueta ("Buscar" parece natural), pero el enlace debe terminar con #searchinghost-easy . Haga clic en "guardar".

3b. [opción] Establecer un "icono" de búsqueda en el menú

Si prefiere utilizar un icono de búsqueda en lugar de una palabra, vaya a esta sección.

---

? ¡Esto es todo, todo está configurado! En su blog, debería aparecer un botón de "buscar" en la barra de menú. ¡Haz clic para ver cómo sucede la magia! Si no le gusta el aspecto de la barra de búsqueda predeterminada, consulte la siguiente sección de plantilla para cambiarla.

Además, no olvide consultar la sección Preguntas y respuestas para obtener todos los consejos útiles y la sección de configuración para una configuración más avanzada.

Plantillas

SearchinGhostEasy viene en varios estilos gráficos. La plantilla proporcionada por defecto se llama "Básica", pero puedes cambiar fácilmente a cualquier otra.

Para hacerlo, consulte la descripción de cada plantilla y copie y pegue el ejemplo de código asociado en la sección Code Injection > Site Footer de su blog. Básicamente, solo cambia la última parte del nombre del script (por ejemplo, "searchinghost-easy-basic.js", "searchinghost-easy-backpack.js", ...).

¡Con suerte, habrá más plantillas de barra de búsqueda! Si desea compartir uno de sus diseños contribuyendo a este proyecto, no dude en ponerse en contacto conmigo o crear un problema/PR.

---

✏️ Plantilla básica

Captura de pantalla

Manifestación

Demostración en vivo: https://gmfmi.github.io/searchinghost-easy/basic/

Instalación

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

---

✏️ Plantilla de mochila

Captura de pantalla

Manifestación

Demostración en vivo: https://gmfmi.github.io/searchinghost-easy/backpack/

Instalación

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

Configuración

Esta sección está reservada para usuarios más avanzados. De forma predeterminada, los parámetros de configuración se eligen cuidadosamente para que no sea necesaria ninguna configuración adicional.

Si necesita más control sobre SearchinGhostEasy, estas son las opciones de configuración disponibles:

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

• contentApiKey (cadena, obligatoria)

La clave API de contenido. Este valor es obligatorio y se puede encontrar en los detalles de integración personalizada.

ejemplo: '06a02026a9f2dcf69f7e065d7c'

• URL de API (cadena)

Establezca una URL de API diferente del nombre de dominio del blog. Puede resultar útil para fines de prueba. Esta opción corresponde a url en la biblioteca SearchinGhost.

ejemplo: 'http://example.com'

• searchhostOptions (objeto)

Anule la configuración predeterminada de SearchinGhost. Esta configuración se fusionará con las proporcionadas por el propio SearchinGhostEasy y la plantilla de búsqueda seleccionada.

Para ver todas las opciones disponibles, consulte la documentación de SearchinGhost.

ejemplo:

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

• searchhostVersion (cadena)

Configure la versión de SearchinGhost que desea utilizar. Puede resultar útil si se acaba de lanzar una versión más nueva.

ejemplo: '1.3.0'

• Índice z (número)

Establezca el z-index del elemento iframe HTML en un valor específico.

predeterminado: 2147483647

• marcador de posición (cadena)

Cambie el marcador de posición predeterminado de la barra de búsqueda "Buscar" por el suyo. Especialmente útil para sitios web que no están en inglés.
Se puede utilizar cualquier carácter compatible con el navegador (por ejemplo, UTF-8). Aquí hay algunos ejemplos de trabajo:

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

predeterminado: "Search"

• depurar (booleano)

Configúrelo en true para habilitar el modo de depuración. Esto generará la configuración final de SearchinGhost utilizada y también habilitará la depuración para SearchinGhost.

predeterminado: false

Preguntas y respuestas

¿Recibiré actualizaciones y mejoras?

Sí, cuando esté disponible una nueva versión de SearchinGhostEasy, la obtendrás automáticamente.

Si no desea este comportamiento, reemplace @latest con una versión específica en la URL. Por ejemplo, con la plantilla basic , use: https://cdn.jsdelivr.net/gh/gmfmi/[email protected]/dist/searchinghost-easy-basic.js (reemplace 1.0.0 con la versión deseada ).

¿Puedo usar un ícono de búsqueda en lugar de una palabra?

Sí, puede hacerlo utilizando un script o actualizando su tema (consulte la opción de tema a continuación).

Para la opción de secuencia de comandos, simplemente copie y pegue las 3 primeras líneas del siguiente ejemplo ANTES de la sección de inicialización de SearchinGhostEasy.

Tenga en cuenta que este ejemplo de código ha sido diseñado para funcionar con el tema predeterminado "Casper" Ghost. Es posible que necesite algunos ajustes para que funcione en su propio sitio web (es decir, el selector de consultas y el elemento javascript interno creado).

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

De lo contrario, si prefieres agregar el ícono al menú secundario (al lado de los enlaces sociales), usa ese:

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

En ambos casos, si necesita modificar el color del icono para que coincida mejor con su tema Ghost, actualice la propiedad fill con el valor apropiado. Por ejemplo: style="fill:#fc03ec" para obtener color rosa.

¿Puedo usarlo en un tema personalizado?

Sí, para personalizar tu tema, sigue esta guía de Ghost para modificar el menú según sea necesario.

Entonces, el único requisito para que SearchinGhostEasy funcione es utilizar #searchinghost-easy como valor en el href de su enlace.

Por ejemplo, su archivo partials/navigation.hbs podría 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 >

con partials/icons/search.hbs que contienen:

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

¿Puedo usar un enlace en cualquier lugar que no sea el menú?

Seguramente, cualquier enlace que apunte a #searchinghost-easy abrirá el cuadro de búsqueda emergente. Puede crear uno o varios enlaces en la misma página, por ejemplo en una publicación de Ghost o directamente en un archivo .hbs de tema.

Al escribir un artículo, simplemente puedes crear un enlace de esta manera:

En HTML, un enlace SearchinGhostEasy no es más que:

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

Créditos

• Gracias a ACERLR8, su barra de búsqueda inspiró la plantilla "Básica"
• Volver a Pack, la fuente original de la plantilla "Mochila"