searchinghost easy
v1.1.2
Eine Zero-Code- und einfach einzurichtende Suchleiste für Ghost CMS (Blog).
SearchinGhostEasy ist ein Wrapper um die ursprüngliche SearchinGhost-Bibliothek, um sie jedem „Nicht-Entwickler“-Ghost-Benutzer zugänglich zu machen.
Da wir nicht alle mit Designkenntnissen geboren werden, wurden bereits mehrere Suchleistenvorlagen für Sie erstellt. Sie alle verfügen über ein responsives Design, sodass sie perfekt auf jede Bildschirmgröße passen, vom Mobiltelefon bis zum 4K-Fernseher.
Indem wir schließlich alles in einem HTML-Iframe zusammenfassen, erhalten wir ein äußerst reichhaltiges und reibungsloses Benutzererlebnis!
Oh! Ich habe vergessen, das Wichtigste zu sagen: Es funktioniert mit ALLEN Ghost-Themen ! (Casper, massiv, Nubia, ...)
Um die Suchleiste in Ihrem Ghost-Blog zu installieren, befolgen Sie diese kurzen Schritte:
Gehen Sie im linken Seitenbereich zum Abschnitt „Integration“, klicken Sie auf „+ Benutzerdefinierte Integration hinzufügen“ und geben Sie ihr den Namen „SearchinGhostEasy“. Ghost hat Ihren eigenen und einzigartigen „Content API Key“ generiert (er sollte wie folgt aussehen: ba094afe723d802f235af61d51 ). Bewahren Sie es irgendwo auf, Sie werden es für den nächsten Schritt benötigen. Wenn Sie weitere Hilfe benötigen, besuchen Sie die offizielle Seite zur benutzerdefinierten Ghost-Integration.
Kopieren Sie aus dem Abschnitt „Code-Injektion“ den folgenden Codeblock und fügen Sie ihn in den Bereich „Site-Fußzeile“ ein.
VERGESSEN SIE NICHT, den Platzhalter <CONTENT_API_KEY> durch Ihren eigenen API-Schlüssel zu ersetzen. Klicken Sie auf „Speichern“.
< 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 > Hinweis : Wenn Sie Ihr benutzerdefiniertes Design lieber ändern möchten, fügen Sie es neben den anderen Skripten in Ihre default.hbs ein, dann funktioniert es genauso.
Fügen Sie abschließend einen Link im Menü hinzu, der das Suchfeld öffnet. Gehen Sie dazu in den Bereich „Design“ und fügen Sie einen neuen Artikel hinzu. Es kann in der „Navigation“ oder „Sekundärnavigation“ sein. Sie können es mit einer beliebigen Bezeichnung benennen („Suchen“ fühlt sich natürlich an), aber der Link muss mit #searchinghost-easy enden. Klicken Sie auf „Speichern“.
Wenn Sie statt eines Wortes lieber ein Suchsymbol verwenden möchten, springen Sie bitte zu diesem Abschnitt.
? Das ist es, alles ist eingerichtet! In Ihrem Blog sollte in der Menüleiste eine Schaltfläche „Suchen“ angezeigt werden. Klicken Sie darauf, um zu sehen, wie die Magie geschieht! Wenn Ihnen das Standard-Erscheinungsbild der Suchleiste nicht gefällt, sehen Sie sich den nächsten Vorlagenabschnitt an, um es zu ändern.
Vergessen Sie auch nicht, den Abschnitt „Fragen und Antworten“ zu lesen, um alle nützlichen Tipps zu erhalten, und den Abschnitt „Konfiguration“ für eine erweiterte Einrichtung.
SearchinGhostEasy gibt es in verschiedenen grafischen Varianten. Die standardmäßig bereitgestellte Vorlage heißt „Basic“, Sie können jedoch problemlos zu einer anderen Vorlage wechseln.
Sehen Sie sich dazu die Beschreibung jeder Vorlage an und kopieren Sie das zugehörige Codebeispiel und fügen Sie es in den Abschnitt Code Injection > Site Footer Ihres Blogs ein. Grundsätzlich ändert sich nur der letzte Teil des Skriptnamens (z. B. „searchinghost-easy-basic.js“, „searchinghost-easy-backpack.js“, ...).
Hoffentlich folgen noch weitere Suchleistenvorlagen! Wenn Sie eines Ihrer Designs durch einen Beitrag zu diesem Projekt teilen möchten, können Sie mich gerne kontaktieren oder eine Ausgabe/PR erstellen.
Live-Demo: 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 >
Live-Demo: 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 > Dieser Abschnitt ist für fortgeschrittenere Benutzer reserviert. Standardmäßig werden die Konfigurationsparameter sorgfältig ausgewählt, sodass keine zusätzliche Konfiguration erforderlich ist.
Wenn Sie mehr Kontrolle über SearchinGhostEasy benötigen, finden Sie hier die verfügbaren Konfigurationsoptionen:
new SearchinGhostEasy ( {
contentApiKey : '<CONTENT_API_KEY>' , // mandatory
apiUrl : 'http://example.com' ,
searchinghostOptions : { } ,
searchinghostVersion : '1.0.0' ,
zIndex : 200 ,
placeholder : "Search" ,
debug : false
} ) ;Der Inhalts-API-Schlüssel. Dieser Wert ist obligatorisch und kann in den benutzerdefinierten Integrationsdetails gefunden werden.
Beispiel:
'06a02026a9f2dcf69f7e065d7c'
Legen Sie eine andere API-URL als den Blog-Domänennamen fest. Kann zu Testzwecken nützlich sein. Diese Option entspricht der
urlin der SearchinGhost-Bibliothek.Beispiel:
'http://example.com'
Überschreiben Sie die Standardkonfiguration von SearchinGhost. Diese Konfiguration wird mit denen von SearchinGhostEasy selbst und der ausgewählten Suchvorlage zusammengeführt.
Informationen zu allen verfügbaren Optionen finden Sie in der SearchinGhost-Dokumentation.
Beispiel:
{ searchOn : 'submit' , limit : 5 , cacheMaxAge : 3600 , }
Legen Sie die zu verwendende SearchinGhost-Version fest. Kann nützlich sein, wenn gerade eine neuere Version veröffentlicht wurde.
Beispiel:
'1.3.0'
Legen Sie den
z-indexdes HTML-Iframe-Elements auf einen bestimmten Wert fest.Standard:
2147483647
Ändern Sie den Standardplatzhalter der Suchleiste „Suchen“ durch Ihren eigenen. Besonders hilfreich für nicht-englische Websites.
Es können alle browserkompatiblen Zeichen (z. B. UTF-8) verwendet werden. Hier einige Arbeitsbeispiele:placeholder: "Rechercher..." # in french with dots placeholder: "Αναζήτηση" # in greek placeholder: "With emojis! ?" # use with cautionStandard:
"Search"
Setzen Sie es auf
trueum den Debug-Modus zu aktivieren. Dadurch wird die endgültige verwendete SearchinGhost-Konfiguration ausgegeben und auch das Debuggen für SearchinGhost aktiviert.Standard:
false
Ja, wenn eine neue Version von SearchinGhostEasy verfügbar ist, erhalten Sie diese automatisch.
Wenn Sie dieses Verhalten nicht wünschen, ersetzen Sie @latest durch eine bestimmte Version in der URL. Verwenden Sie beispielsweise mit der basic : https://cdn.jsdelivr.net/gh/gmfmi/[email protected]/dist/searchinghost-easy-basic.js (ersetzen Sie 1.0.0 durch die gewünschte Version ).
Ja, Sie können dies tun, indem Sie ein Skript verwenden oder Ihr Theme aktualisieren (siehe rechts unten für die Theme-Option).
Für die Skriptoption kopieren Sie einfach die ersten drei Zeilen des folgenden Beispiels und fügen Sie sie VOR dem SearchinGhostEasy-Initialisierungsabschnitt ein.
Bitte beachten Sie, dass dieses Codebeispiel für das Standard-Ghost-Design „Casper“ konzipiert wurde. Möglicherweise sind einige Anpassungen erforderlich, damit es auf Ihrer eigenen Website funktioniert (z. B. der Abfrageselektor und das erstellte innere Javascript-Element).
< 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 >Wenn Sie das Symbol andernfalls lieber zum sekundären Menü (neben den sozialen Links) hinzufügen möchten, verwenden Sie dieses:
< 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 > Wenn Sie in beiden Fällen die Symbolfarbe ändern müssen, damit sie besser zu Ihrem Ghost-Design passt, aktualisieren Sie die fill mit dem entsprechenden Wert. Zum Beispiel: style="fill:#fc03ec" um Pink zu erhalten.
Ja, um Ihr Design anzupassen, befolgen Sie diese Ghost-Anleitung, um das Menü nach Bedarf zu ändern.
Dann ist die einzige Voraussetzung, damit SearchinGhostEasy funktioniert, die Verwendung von #searchinghost-easy als Wert im href Ihres Links.
Ihre Datei partials/navigation.hbs könnte beispielsweise wie folgt lauten:
< 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 > mit partials/icons/search.hbs mit:
< 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 > Natürlich öffnet jeder Link, der auf #searchinghost-easy verweist, das Suchfeld-Popup. Sie können einen oder mehrere Links auf derselben Seite erstellen, beispielsweise in einem Ghost-Beitrag oder direkt in einer Theme .hbs Datei.
Wenn Sie einen Artikel schreiben, können Sie einfach auf diese Weise einen Link erstellen:
In HTML ist ein SearchinGhostEasy-Link nichts anderes als:
< a href =" #searchinghost-easy " > click to search </ a > 
