searchinghost easy
v1.1.2
Un code zéro et une barre de recherche facile à configurer pour Ghost CMS (blog).
SearchinGhostEasy est un wrapper autour de la bibliothèque SearchinGhost originale pour la rendre accessible à tout utilisateur Ghost "non-développeur".
Parce que nous ne sommes pas tous nés avec des compétences en design, plusieurs modèles de barres de recherche ont déjà été réalisés pour vous. Ils utilisent tous un design réactif afin de s'adapter parfaitement à n'importe quelle taille d'écran, des téléphones mobiles aux téléviseurs 4K.
Enfin, en rassemblant le tout dans une iframe HTML, nous obtenons une expérience utilisateur super riche et fluide !
Oh! J'ai oublié de dire le plus important : ça marche avec TOUS les thèmes Ghost ! (casper, massivement, nubia, ...)
Pour installer la barre de recherche sur votre blog Ghost, suivez ces étapes rapides :
Sur le panneau latéral de gauche, allez dans la section « intégration », cliquez sur « + Ajouter une intégration personnalisée » et donnez-lui le nom « SearchinGhostEasy ». Ghost a généré votre propre « clé API de contenu » unique (elle devrait ressembler à ba094afe723d802f235af61d51 ). Gardez-le quelque part, vous en aurez besoin pour la prochaine étape. Si vous avez besoin de plus d'aide, visitez la page officielle d'intégration personnalisée de Ghost.
Dans la section « Injection de code », copiez/collez le morceau de code suivant dans la zone « Pied de page du site ».
N'OUBLIEZ PAS de remplacer l'espace réservé <CONTENT_API_KEY> par votre propre clé API. Cliquez sur "enregistrer".
< 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 > note : si vous préférez modifier votre thème personnalisé, collez-le dans votre default.hbs à côté des autres scripts et cela fonctionnera exactement de la même manière.
Enfin, ajoutez un lien dans le menu qui ouvre le champ de recherche. Pour ce faire, rendez-vous dans la section "Design" et ajoutez un nouvel élément. Cela peut être dans la « navigation » ou la « navigation secondaire ». Vous pouvez le nommer avec n'importe quelle étiquette ("Recherche" semble naturelle) mais le lien doit se terminer par #searchinghost-easy . Cliquez sur "enregistrer".
Si vous préférez utiliser une icône de recherche plutôt qu'un mot, veuillez accéder à cette section.
? Ça y est, tout est configuré ! Sur votre blog, un bouton « rechercher » devrait apparaître dans la barre de menu. Cliquez dessus pour voir la magie opérer ! Si vous n'aimez pas l'apparence de la barre de recherche par défaut, consultez la section de modèle suivante pour la modifier ?
N'oubliez pas non plus de consulter la section Questions et réponses pour obtenir tous les conseils utiles et la section de configuration pour une configuration plus avancée.
SearchinGhostEasy est disponible en différentes versions graphiques. Le modèle fourni par défaut s'appelle "Basic" mais vous pouvez facilement passer à n'importe quel autre.
Pour ce faire, référez-vous à la description de chaque modèle et copiez/collez l'exemple de code associé dans la section Code Injection > Site Footer de votre blog. Fondamentalement, seule la dernière partie du nom du script change (par exemple "searchinghost-easy-basic.js", "searchinghost-easy-backpack.js", ...).
Espérons que d’autres modèles de barre de recherche arrivent ! Si vous souhaitez partager un de vos designs en contribuant à ce projet, n'hésitez pas à me contacter ou à créer un problème/PR.
Démo en direct : 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 >
Démo en direct : 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 > Cette section est réservée aux utilisateurs plus avancés. Par défaut, les paramètres de configuration sont soigneusement choisis, aucune configuration supplémentaire n'est donc nécessaire.
Si vous avez besoin de plus de contrôle sur SearchinGhostEasy, voici les options de configuration disponibles :
new SearchinGhostEasy ( {
contentApiKey : '<CONTENT_API_KEY>' , // mandatory
apiUrl : 'http://example.com' ,
searchinghostOptions : { } ,
searchinghostVersion : '1.0.0' ,
zIndex : 200 ,
placeholder : "Search" ,
debug : false
} ) ;La clé API de contenu. Cette valeur est obligatoire et peut être trouvée dans les détails de l'intégration personnalisée.
exemple :
'06a02026a9f2dcf69f7e065d7c'
Définissez une URL d'API différente du nom de domaine du blog. Peut être utile à des fins de test. Cette option correspond à
urldans la bibliothèque SearchinGhost.exemple :
'http://example.com'
Remplacez la configuration par défaut de SearchinGhost. Cette configuration sera fusionnée avec celles fournies par SearchinGhostEasy lui-même et le modèle de recherche sélectionné.
Pour voir toutes les options disponibles, reportez-vous à la documentation SearchinGhost.
exemple:
{ searchOn : 'submit' , limit : 5 , cacheMaxAge : 3600 , }
Définissez la version de SearchinGhost à utiliser. Peut être utile si une version plus récente vient de sortir.
exemple :
'1.3.0'
Définissez l'élément HTML iframe
z-indexsur une valeur spécifique.par défaut :
2147483647
Remplacez l'espace réservé par défaut de la barre de recherche « Recherche » par le vôtre. Particulièrement utile pour les sites Web non anglais.
Tous les caractères compatibles avec les navigateurs (par exemple UTF-8) peuvent être utilisés. Voici quelques exemples de travail :placeholder: "Rechercher..." # in french with dots placeholder: "Αναζήτηση" # in greek placeholder: "With emojis! ?" # use with cautionpar défaut :
"Search"
Définissez-le sur
truepour activer le mode débogage. Cela affichera la configuration finale de SearchinGhost utilisée et activera également le débogage pour SearchinGhost.par défaut :
false
Oui, lorsqu'une nouvelle version de SearchinGhostEasy est disponible, vous l'obtiendrez automatiquement.
Si vous ne souhaitez pas ce comportement, remplacez @latest par une version spécifique dans l'URL. Par exemple, avec le modèle basic , utilisez : https://cdn.jsdelivr.net/gh/gmfmi/[email protected]/dist/searchinghost-easy-basic.js (remplacez 1.0.0 par la version souhaitée ).
Oui, vous pouvez le faire en utilisant un script ou en mettant à jour votre thème (voir juste en dessous pour l'option de thème).
Pour l'option script, copiez/collez simplement les 3 premières lignes de l'exemple suivant AVANT la section d'initialisation de SearchinGhostEasy.
Veuillez noter que cet exemple de code a été conçu pour fonctionner sur le thème Ghost par défaut « Casper ». Vous aurez peut-être besoin de quelques ajustements pour le faire fonctionner sur votre propre site Web (c'est-à-dire le sélecteur de requête et l'élément javascript interne créé).
< 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 >Sinon, si vous préférez ajouter l'icône dans le menu secondaire (à côté des liens sociaux), utilisez celle-là :
< 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 > Dans les deux cas, si vous devez modifier la couleur de l'icône pour mieux correspondre à votre thème Ghost, mettez à jour la propriété fill avec la valeur appropriée. Par exemple : style="fill:#fc03ec" pour obtenir du rose.
Oui, pour personnaliser votre thème, suivez ce guide Ghost pour modifier le menu selon vos besoins.
Ensuite, la seule condition requise pour que SearchinGhostEasy fonctionne est d'utiliser #searchinghost-easy comme valeur dans le href de votre lien.
Par exemple, votre fichier partials/navigation.hbs pourrait être :
< 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 > avec partials/icons/search.hbs contenant :
< 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 > Bien sûr, tout lien pointant vers #searchinghost-easy ouvrira la fenêtre contextuelle du champ de recherche. Vous pouvez créer un ou plusieurs liens sur une même page, par exemple dans une publication Ghost ou directement dans un fichier .hbs de thème.
Lorsque vous rédigez un article, vous pouvez simplement créer un lien de cette façon :
En HTML, un lien SearchinGhostEasy n’est rien de plus que :
< a href =" #searchinghost-easy " > click to search </ a > 
