searchinGhost
v1.6.2
Ein reines Javascript, leichtes Plugin für die Volltextsuche im Browser für Ghost (Blog)
SearchinGhost ist eine leichte und erweiterbare Suchmaschine speziell für die Ghost-Blogging-Plattform. Im Kern nutzt es die Ghost Content API zum Laden Ihrer Blog-Inhalte und die leistungsstarke FlexSearch-Bibliothek zum Indizieren und Ausführen von Suchanfragen.
Alles geschieht im Client-Browser. Dadurch können wir blitzschnell Suchergebnisse liefern und diese Ihren Benutzern in Echtzeit anzeigen (auch bekannt als „Suche während der Eingabe“). Wir achten auch auf die Minimierung der Netzwerklast, indem wir uns darauf verlassen, dass der Browser localStorage nur dann Anfragen sendet, wenn es nötig ist.
Ihr Blog ist auf Kyrillisch, Chinesisch, Koreanisch, Griechisch, Indisch oder einer anderen nicht-lateinischen Sprache verfasst? Keine Sorge, es wird unterstützt, siehe den entsprechenden Abschnitt.
BONUS : Wenn Ihnen das Konzept gefällt, Sie es aber schnell und einfach installieren möchten (eigentlich in weniger als 3 Minuten!), besuchen Sie bitte das SearchinGhostEasy-Projekt.
Bevor Sie sich mit der Installation und Konfiguration befassen, probieren Sie es selbst mit dieser Live-Demo aus.
Bei dieser Demo stammt der durchsuchbare Inhalt von der offiziellen Ghost-Demo-API (d. h. https://demo.ghost.io). Die Optionen sind auf Standard eingestellt, sodass jedes eingegebene Wort nach Titel, Tags, Auszug und Hauptinhalt des Beitrags durchsucht wird.
Suchen Sie beispielsweise nach dem Wort „Marmelade“. Es kommt in keinem Beitragstitel, Auszug oder Tag vor, wird aber einmal im Artikel „Down The Rabbit Hole“ verwendet, weshalb Sie es als Ergebnis erhalten.
Aktualisieren Sie zunächst die Datei default.hbs Ihres Themes so, dass sie ein Eingabefeld und ein Ausgabeelement zur Anzeige der Suchergebnisse enthält. Fügen Sie dann einen Link zum SearchinGhost-Skript hinzu und initialisieren Sie es mit Ihrem eigenen CONTENT_API_KEY . Informationen zum Erhalt des Inhalts-API-Schlüssels finden Sie in der offiziellen Ghost-Dokumentation.
< input id =" search-bar " >
< ul id =" search-results " > </ ul >
< script src =" https://cdn.jsdelivr.net/npm/[email protected]/dist/searchinghost.min.js " > </ script >
< script >
var searchinGhost = new SearchinGhost ( {
key : 'CONTENT_API_KEY'
} ) ;
</ script >Das war's, alles ist erledigt! Wenn Sie eine detailliertere Konfiguration benötigen, lesen Sie bitte die nächsten Abschnitte.
Sie können SearchinGhost mit verschiedenen Methoden installieren. Hier sind die Möglichkeiten:
Dies ist die einfachste und bevorzugte Methode zur Installation von SearchinGhost. Fügen Sie eines dieser Skripte zu Ihrem Theme default.hbs hinzu. Aufgrund der Zuverlässigkeit und Leistung empfehlen wir außerdem die Verwendung von jsdelivr anstelle von unpkg.
< script src =" https://cdn.jsdelivr.net/npm/[email protected]/dist/searchinghost.min.js " > </ script >
<!-- OR -->
< script src =" https://unpkg.com/[email protected]/dist/searchinghost.min.js " > </ script > Wenn Sie SearchinGhost von Ihrem eigenen Server aus bereitstellen oder in Ihren Build-Prozess einbinden möchten, können Sie es von den Assets der Release-Seite herunterladen oder die Datei dist/searchinghost.min.js herunterladen.
Installieren Sie SearchinGhost als Projektabhängigkeit.
$ npm install searchinghost
# OR
$ yarn add searchinghostLaden Sie es dann aus einer beliebigen Javascript-Datei.
import SearchinGhost from 'searchinghost' ;
// OR
var SearchinGhost = require ( 'searchinghost' ) ; Das einzige obligatorische Konfigurationsfeld ist key . Jedes andere Feld hat einen Standardwert und ist optional.
SearchinGhost wurde so konzipiert, dass es sofort einsatzbereit ist. Diese minimale Konfiguration ist dennoch leistungsstark! Bei jedem Tastendruck werden der Titel, die Tags, der Auszug und der Inhalt des Beitrags durchsucht. Dies ist das Standardverhalten, da es am häufigsten vorkommt.
// SearchinGhost minimal configuration
var searchinGhost = new SearchinGhost ( {
key : '<CONTENT_API_KEY>'
} ) ; Dennoch könnte sich ein wenig zusätzliche Konfiguration entsprechend Ihren Anforderungen lohnen. Angenommen, Sie möchten nur den title durchsuchen und für jeden gefundenen Beitrag die Felder title und published_at anzeigen. Sie könnten diese Konfiguration verwenden:
var searchinGhost = new SearchinGhost ( {
key : '<CONTENT_API_KEY>' ,
postsFields : [ 'title' , 'url' , 'published_at' ] ,
postsExtraFields : [ ] ,
postsFormats : [ ] ,
indexedFields : [ 'title' ] ,
template : function ( post ) {
return `<a href=" ${ post . url } "> ${ post . published_at } - ${ post . title } </a>`
}
} ) ;SearchinGhost ist durch seine Konfiguration leicht anpassbar und erweiterbar. Nehmen Sie sich die Zeit, sich die einzelnen Optionen im nächsten Abschnitt anzusehen.
{
key : '' ,
url : window . location . origin ,
version : 'v3' ,
loadOn : 'focus' ,
searchOn : 'keyup' ,
limit : 10 ,
inputId : [ 'search-bar' ] ,
outputId : [ 'search-results' ] ,
outputChildsType : 'li' ,
postsFields : [ 'title' , 'url' , 'excerpt' , 'custom_excerpt' , 'published_at' , 'feature_image' ] ,
postsExtraFields : [ 'tags' ] ,
postsFormats : [ 'plaintext' ] ,
indexedFields : [ 'title' , 'string_tags' , 'excerpt' , 'plaintext' ] ,
template : function ( post ) {
var o = `<a href=" ${ post . url } ">`
if ( post . feature_image ) o += `<img src=" ${ post . feature_image } ">`
o += '<section>'
if ( post . tags . length > 0 ) {
o += `<header>
<span class="head-tags"> ${ post . tags [ 0 ] . name } </span>
<span class="head-date"> ${ post . published_at } </span>
</header>`
} else {
o += `<header>
<span class="head-tags">UNKNOWN</span>
<span class="head-date"> ${ post . published_at } </span>
</header>`
}
o += `<h2> ${ post . title } </h2>`
o += `</section></a>`
return o ;
} ,
emptyTemplate : function ( ) { } ,
customProcessing : function ( post ) {
if ( post . tags ) post . string_tags = post . tags . map ( o => o . name ) . join ( ' ' ) . toLowerCase ( ) ;
return post ;
} ,
date : {
locale : document . documentElement . lang || "en-US" ,
options : { year : 'numeric' , month : 'short' , day : 'numeric' }
} ,
cacheMaxAge : 1800 ,
onFetchStart : function ( ) { } ,
onFetchEnd : function ( posts ) { } ,
onIndexBuildStart : function ( ) { } ,
onIndexBuildEnd : function ( index ) { } ,
onSearchStart : function ( ) { } ,
onSearchEnd : function ( posts ) { } ,
indexOptions : { } ,
searchOptions : { } ,
debug : false
} ) ;Der API-Schlüssel für öffentliche Inhalte, um Zugriff auf Blog-Daten zu erhalten.
Beispiel:
'22444f78447824223cefc48062'
Der vollständige Domänenname der Ghost-API.
Beispiel:
'https://demo.ghost.io'Standard:
window.location.origin
Legen Sie die Ghost-API-Version fest. Arbeiten Sie sowohl mit
'v2'als auch mit'v3'.Standard:
'v3'
Legen Sie die Strategie zum Laden der Bibliothek fest. Es kann ausgelöst werden, wenn die HTML-Seite geladen wurde, bei Bedarf, wenn der Benutzer auf die Suchleiste klickt, oder nie.
Um die Initialisierung der Suchleiste selbst auszulösen, legen Sie diesen Wert auf
false(boolescher Wert) fest. Auf diese Weise können SiesearchinGhost.loadData()aufrufen, wenn der Rest Ihres Codes fertig ist.erwartete Werte:
'page','focus'oderfalseStandard:
'focus'
Wählen Sie, wann die Suchabfrage ausgeführt werden soll. Um bei jedem Tastendruck des Benutzers zu suchen und jedes Formular zu senden, verwenden Sie
'keyup'. Um nur zu suchen, wenn der Benutzer das Formular über eine Schaltfläche oder die Eingabetaste sendet, verwenden Sie'submit'. Wenn Sie die vollständige Kontrolle über Ihren eigenen Javascript-Code haben möchten, verwenden Siefalse(boolean) und führen Sie die Suche selbst mitsearchinGhost.search("...")aus.erwartete Werte:
'keyup','submit'oderfalseStandard:
'keyup'
Legen Sie die maximale Anzahl der von einer Suchabfrage zurückgegebenen Beiträge fest. Jeder Wert zwischen
1und50ist blitzschnell und Werte unter1000sollten die Leistung nicht zu sehr beeinträchtigen. Aber denken Sie daran, wenn die Suchmaschine diese Grenze erreicht, stoppt sie die Suche und gibt die Ergebnisse zurück: Je niedriger, desto besser.Auch wenn davon dringend abgeraten wird, setzen Sie diesen Wert auf
0um alle verfügbaren Ergebnisse anzuzeigen.Standard:
10
[Veraltet] Vor
v1.6.0war dieses Feld einestring, dieses Verhalten ist veraltet.Ihre Website verfügt möglicherweise über eine oder mehrere Suchleisten. Jede davon muss über ein eindeutiges HTML-
id-Attribut verfügen. Fügen Sie jede Suchleisten-idin dieses Array ein. Fügen Sie kein „#“ in den Namen ein.Wenn Sie kein Eingabefeld benötigen, setzen Sie den Wert auf
[](leeres Array) und setzen SiesearchOnaußerdem auffalse(boolean). Führen Sie dann eine Suche mitsearchinGhost.search("<your query>")durch.Standard:
['search-bar']
[Veraltet] Vor
v1.6.0war dieses Feld einestring, dieses Verhalten ist veraltet.Ihre Website kann ein oder mehrere HTML-Elemente verwenden, um die Suchergebnisse anzuzeigen. Dieses Array verweist auf alle
id-Attribute dieser Ausgabeelemente. Wenn eines dieser Elemente bereits einen Inhalt hat, wird dieser durch die Suchergebnisse überschrieben.Wenn Sie ein JS-Framework zum Anzeigen der Suchergebnisse verwenden, setzen Sie diesen Wert auf
[](leeres Array). Sie erhalten die gefundenen Beiträge als den von der FunktionsearchinGhost.search("<your query>")zurückgegebenen Wert.Standard:
['search-results']
[Veraltet] Vor
v1.6.0war dieses Feld einestring. Dies ist veraltet.Jedes Suchergebnis wird in ein untergeordnetes Element eingeschlossen, bevor es dem übergeordneten Element
outputIdhinzugefügt wird. Der Standardtyp istli, Sie können ihn jedoch auf jedes gültige HTML-Element festlegen (siehe MDN-Dokumente).Wenn Sie kein Wrapping-Element verwenden möchten, um die Ergebnisse von
templateundemptyTemplatedirekt an das Ausgabeelement anzuhängen, legen Sie den Wert auffalse(boolean) fest.Standard:
'li'
Ein Array aller gewünschten Beitragsfelder. Alle diese Felder werden in der
templateverfügbar, um nützliche Beitragsinformationen anzuzeigen.Weitere Informationen finden Sie in der offiziellen Dokumentation zu „Feldern“.
Hinweis: Wenn Sie
'custom_excerpt'verwenden, wird der Inhalt automatisch in'excerpt'eingefügt, um die Vorlagenerstellung zu vereinfachen.Standard:
['title', 'url', 'excerpt', 'custom_excerpt', 'published_at', 'feature_image']
Mit diesem Array können Sie zusätzliche Felder wie
tagsoderauthorsverwenden. Ich persönlich weiß nicht, warum sie nicht mit den anderen „Feldern“ übereinstimmen, aber die Ghost-API ist so konzipiert ...Setzen Sie den Wert auf
[](leeres Array), um es vollständig zu deaktivieren.Weitere Informationen finden Sie in der offiziellen Dokumentation zu „include“.
Standard:
['tags']
Dies entspricht der Ghost-API „Formate“, die es ermöglicht, den Inhalt der Beiträge mit HTML oder einfachem Text abzurufen.
Setzen Sie den Wert auf
[](leeres Array), um es vollständig zu deaktivieren.Bitte beachten Sie die offizielle Dokumentation zu „Formate“.
Standard:
['plaintext']
Liste der indizierten Felder. Der Inhalt aller dieser Felder ist durchsuchbar.
Alle Werte in dieser Liste müssen in den Beiträgen definiert werden. Andernfalls ist das Suchergebnis nicht korrekt, die App stürzt jedoch nicht ab! Überprüfen Sie die Werte
postsFields,postsExtraFieldsundpostsFormatsnoch einmal.HINWEIS : Das seltsame Feld
'string_tags'wurde in der OptioncustomProcessinghinzugefügt. Wenn Sie Tags verwenden möchten, ist diese hässliche Sache (vorerst) notwendig, da FlexSearch Arrays nicht richtig verarbeiten kann. Wenn Sie es nicht möchten/mögen, überschreiben Sie diecustomProcessing, um nurpostsohne zusätzliche Änderungen zurückzugeben. Wenn Sie sich für die Verwendung von Tags entscheiden, verwenden Sie bitte auch hier'string_tags'.Standard:
['title', 'string_tags', 'excerpt', 'plaintext']
Definieren Sie Ihre eigene Ergebnisvorlage. Diese Vorlage wird für jeden gefundenen Beitrag zur Generierung des Ergebnisses verwendet und als untergeordnetes Element an das Ausgabeelement angehängt. Es gibt keine Template-Engine, sondern nur eine native Javascript-Funktion, die ein
postObjekt als Argument verwendet.Diese Vorlagenoption ist viel leistungsfähiger, als Sie vielleicht erwarten. Wir können es uns auch als eine benutzerdefinierte Verarbeitungsfunktion vorstellen, die für die Suchergebnisse aufgerufen wird. Wenn Sie beispielsweise etwas filtern möchten, geben Sie nichts zurück (z. B.
return;) oder eine leere Zeichenfolge (z. B.return "";), um ein Element zu verwerfen.Bitte beachten Sie die Verwendung von Backticks (z. B. „“) anstelle von einfachen/doppelten Anführungszeichen. Dies ist erforderlich, um die sehr nützliche Interpolation von Javascript-Variablen zu ermöglichen.
Die verfügbaren Variablen sind diejenigen, die in der Option
postsFieldsdefiniert sind.Beispiel:
template: function ( post ) { return `<a href=" ${ post . url } "># ${ post . tags } - ${ post . published_at } - ${ post . title } </a>` }
Definieren Sie Ihre eigene Ergebnisvorlage, wenn kein Ergebnis gefunden wird.
Beispiel:
emptyTemplate: function ( ) { return '<p>Sorry, nothing found...</p>' }
Müssen Sie zusätzliche Änderungen an den von Ghost abgerufenen Beitragsdaten vornehmen? Verwenden Sie diese Funktion, um alles zu tun, was Sie brauchen. Diese Funktion wird bei jedem Beitrag aufgerufen und nach
onFetchEnd()und voronIndexBuildStart()ausgeführt.Wenn Sie einen Beitrag verwerfen möchten, geben Sie einen beliebigen falschen JS-Wert zurück (z. B.
null,undefined,false,"", ...).Um Ihre Ein-/Ausgaben einfach zu debuggen, verwenden Sie
onFetchEnd()undonIndexBuildEnd()um das Ergebnis mit einemconsole.log()anzuzeigen. Wenn Sie ein fortgeschrittener Benutzer sind, ist die Verwendung des Debuggers immer noch die beste Option. Vergessen Sie außerdem nicht, beim Testen Ihren lokalen Cache zu leeren!Hinweis : Standardmäßig ist diese Option bereits mit einer Hilfsfunktion gefüllt, um die Verwendung des Felds „Tags“ in Beiträgen zu erleichtern. Siehe die
indexedFields-Optionen.Beispiel:
customProcessing: function ( post ) { post . extra_field = "hello" ; return post ; }
Definieren Sie das Datumsformat, das aus Beiträgen abgerufen wird.
Weitere Informationen finden Sie in der MDN-Referenz.
Beispiel:
date: { locale : "fr-FR" , options : { weekday : 'long' , year : 'numeric' , month : 'long' , day : 'numeric' } }
Legen Sie das maximale Alter des Caches in Sekunden fest. Wenn während dieser Zeit ein bereits vorhandener Index im lokalen Speicher gefunden wird, wird dieser ohne zusätzliche HTTP-Anfrage zur Bestätigung seiner Gültigkeit geladen. Wenn der Cache geleert wird, wird der Wert zurückgesetzt.
Dies ist besonders nützlich, um die Breitband- und Netzwerklast Ihres Servers zu schonen. Der Standardwert ist auf eine halbe Stunde eingestellt. Dieser Wert ergibt sich aus der von Google Analytics verwendeten Standardsitzungsdauer des Benutzers.
Standard:
1800
Definieren Sie eine Rückruffunktion, bevor wir die Daten von der Ghost-API abrufen.
Diese Funktion akzeptiert kein Argument.
Beispiel:
onFetchStart: function ( ) { console . log ( "before data fetch" ) ; }
Definieren Sie eine Rückruffunktion, wenn der Abruf abgeschlossen ist. Auch wenn an
postsvorgenommene Änderungen bestehen bleiben, empfehlen wir hierfür die Verwendung der FunktioncustomProcessing().Die Funktion benötigt ein Argument: das Array aller von Ghost selbst zurückgegebenen Beiträge.
Beispiel:
onFetchEnd: function ( posts ) { console . log ( "Total posts found on Ghost:" , posts . length ) ; }
Definieren Sie eine Rückruffunktion, bevor wir mit der Erstellung des Suchindex beginnen.
Die Funktion akzeptiert kein Argument.
Beispiel:
onIndexBuildStart: function ( ) { console . log ( "before building the index" ) ; }
Definieren Sie eine Rückruffunktion, wenn die Erstellung des Suchindex abgeschlossen ist.
Die Funktion benötigt ein Argument: das Build-FlexSearch-Indexobjekt.
Beispiel:
onIndexBuildEnd: function ( index ) { console . log ( "index built:" , index ) ; }
Definieren Sie eine Rückruffunktion, bevor Sie mit der Ausführung der Suchabfrage beginnen. Beispielsweise könnte es verwendet werden, um das Ergebnis-HTML-Element auszublenden, während auf den
onSearchEndAbschluss gewartet wird, oder um ausgefallene Übergangseffekte hinzuzufügen. In den meisten Fällen ist dies jedoch nicht erforderlich, da die Suchfunktion schnell genug ist, um angenehm anzusehen zu sein.Die Funktion akzeptiert kein Argument.
Beispiel:
onSearchStart: function ( ) { console . log ( "before executing the search query" ) ; }
Definieren Sie eine Rückruffunktion, wenn die Suchergebnisse fertig sind.
Die Funktion benötigt 1 Argument: das Array übereinstimmender Beiträge.
Beispiel:
onSearchEnd: function ( posts ) { console . log ( "search complete, posts found:" , posts ) ; }
Fügen Sie zusätzliche Suchindexkonfigurationen hinzu oder überschreiben Sie die Standardkonfigurationen. Diese Optionen werden mit der bereits bereitgestellten zusammengeführt:
{ doc : { id : "id" , field : this . config . indexedFields } , encode : "simple" , tokenize : "forward" , threshold : 0 , resolution : 4 , depth : 0 }Verwenden Sie diesen Parameter auch, um die Unterstützung nicht-lateinischer Sprachen zu aktivieren, siehe diesen Abschnitt.
Standard:
{}
Für fortgeschrittene Benutzer konzipiert, ermöglicht es Ihnen, die Suchanfragen zu verfeinern. Weitere Informationen finden Sie in dieser FlexSearch-Dokumentation.
Wir verwenden diese spezielle Abfragekonstruktion:
index.search("your query", searchOptions)sodass alles, was zusearchOptionshinzugefügt wird, auf diese Weise an FlexSearch übergeben wird.Dieser Parameter kann sehr praktisch sein, wenn Sie Beiträge basierend auf einem Tag filtern. Als Beispiel:
searchOptions: { where : { string_tags : "getting started" } }Beachten Sie außerdem, dass die Option
limitSearchinghost“ automatisch insearchOptionsintegriert wird. In unserem Fall würde es schließlich lauten:searchOptions: { where : { string_tags : "getting started" } , limit : 10 }Standard:
{}
Wenn etwas nicht wie erwartet funktioniert, setzen Sie es auf
trueum Anwendungsprotokolle anzuzeigen.Standard:
false
Wenn Ihr Blog eine lateinische Alphabetsprache (z. B. Englisch, Französisch, Spanisch) oder eine nord-/osteuropäische Sprache (z. B. Deutsch, Schwedisch, Ungarisch, Slowenisch, Estnisch) verwendet, funktioniert die Standardkonfiguration einwandfrei. Suchen Sie in den anderen Fällen den entsprechenden indexOptions Wert und fügen Sie ihn Ihrer SearchinGhost-Hauptkonfiguration hinzu.
Informationen zum Erstellen Ihrer eigenen spezifischen Einstellungen finden Sie in der FlexSearch-README-Datei und in diesen drei Ausgaben.
Wenn bei Ihnen nichts funktioniert oder das daraus resultierende Verhalten nicht korrekt ist, können Sie gerne ein Problem erstellen.
indexOptions: {
encode : false ,
rtl : true ,
split : / s+ /
}indexOptions: {
encode : false ,
tokenize : function ( str ) {
return str . replace ( / [x00-x7F] / g , "" ) . split ( "" ) ;
}
}Diese Option kann von allen durch Leerzeichen getrennten Wortsprachen verwendet werden, die komplexe Zeichen verwenden.
indexOptions: {
encode : false ,
split : / s+ /
}Wenn Sie mehrere Sprachtypen verwenden müssen (z. B. Kyrillisch/Englisch oder Indisch/Spanisch), verwenden Sie die entsprechende Konfiguration unten. Ich weiß, es kann auf den ersten Blick beängstigend aussehen, aber kopieren Sie es einfach und fügen Sie es ein und vertrauen Sie mir.
indexOptions: {
split : / s+ / ,
encode : function ( str ) {
var regexp_replacements = {
"a" : / [àáâãäå] / g ,
"e" : / [èéêë] / g ,
"i" : / [ìíîï] / g ,
"o" : / [òóôõöő] / g ,
"u" : / [ùúûüű] / g ,
"y" : / [ýŷÿ] / g ,
"n" : / ñ / g ,
"c" : / [ç] / g ,
"s" : / ß / g ,
" " : / [-/] / g ,
"" : / ['!"#$%&\()*+,-./:;<=>?@[]^_`{|}~] / g ,
" " : / s+ / g ,
}
str = str . toLowerCase ( ) ;
for ( var key of Object . keys ( regexp_replacements ) ) {
str = str . replace ( regexp_replacements [ key ] , key ) ;
}
return str === " " ? "" : str ;
}
} Zunächst haben wir auch diese anderen Lösungen ausprobiert: Lunr.js, minisearch und Fuse.js. Am Ende bot FlexSearch die besten Gesamtergebnisse mit schnellen und genauen Ergebnissen, einer ausreichend kleinen Paketgröße und einer einfachen Einrichtung/Konfiguration. Es gibt alles, was man auswählen kann!
Keine Sorge, es ist normal. SearchinGhost verwendet ein Cache-System, um Ihre Blog-Daten im Browser zu speichern und die Netzwerkinteraktion einzuschränken. Standardmäßig werden zwischengespeicherte Daten, die vor weniger als 30 Minuten gespeichert wurden, weiterhin als gültig betrachtet. Danach steht Ihnen der neue Artikel zur Verfügung.
Bedenken Sie, dass andere Benutzer möglicherweise nicht 30 Minuten warten müssen, je nachdem, wann sie das letzte Mal eine Recherche durchgeführt haben. Wenn Sie vor einer Stunde dort waren, wird der Cache geleert und erneuert, sodass der Artikel angezeigt wird.
Wenn Sie möchten, dass Ihre Benutzer immer auf dem neuesten Stand sind, setzen Sie den cacheMaxAge auf 0 . Dabei sollten Sie auch loadOn auf 'focus' setzen, um die Anzahl der HTTP-Anfragen zu begrenzen.
Wenn Sie die URL-Variable feature_image verwenden, um Bilder in Ihren Suchergebnissen anzuzeigen, erhalten Sie standardmäßig immer die Original-/Vollgröße. Diese sind im Allgemeinen zu groß (in Größe und Gewicht) für unsere Anforderungen, eine Miniatur wäre besser fit.
Seit Ghost V3 ist eine Medienverarbeitungs-Engine eingebettet, um reaktionsfähige Bilder zu erstellen. Standardmäßig erstellt Ghost 6 verschiedene Bilder des gegebenen Bildes neu. Die verfügbaren Größen sind: w30 , w100 , w300 , w600 , w1000 , w2000 .
In unserem Fall besteht der einfachste Weg, Bilder schneller zu laden, darin, einfach kleinere Bilder zu verwenden. Grundsätzlich möchten wir, dass diese URL https://www.example.fr/content/images/2020/05/picture.jpg (standardmäßig von der Ghost-API abgerufen) zu https://www.example.fr/content/images/size/w600/2020/05/picture.jpg wird. https://www.example.fr/content/images/size/w600/2020/05/picture.jpg (das 600 Pixel breite).
Aktualisieren Sie dazu die Konfiguration, indem Sie mit dem folgenden Codebeispiel ein "customProcessing" -Feld hinzufügen. Natürlich können Sie anstelle von w600 auch jede der oben genannten verfügbaren Größen verwenden.
customProcessing: function ( post ) {
if ( post . tags ) post . string_tags = post . tags . map ( o => o . name ) . join ( ' ' ) . toLowerCase ( ) ;
if ( post . feature_image ) post . feature_image = post . feature_image . replace ( '/images/' , '/images/size/w600/' ) ; // reduce image size to w600
return post ;
}Diese Änderung tritt nicht sofort ein. Sie benötigen eine Cache-Aktualisierung, um den Unterschied tatsächlich zu erkennen.
Erstellen Sie ein HTML-Element mit der ID "search-counter" und nutzen Sie die Funktion onSearchEnd() um es mit dem Ergebnis zu füllen. Hier ist ein Beispiel:
< p id =" search-counter " > </ p > onSearchEnd: function ( posts ) {
var counterEl = document . getElementById ( 'search-counter' ) ;
counterEl . textContent = ` ${ posts . length } posts found` ;
} Ja, durch die Verwendung interner Methoden von SearchinGhost, aber es ist möglich. Es mag wie schwarze Magie aussehen, aber fügen Sie den folgenden Code zu Ihrer aktuellen Konfiguration hinzu. Hier bezieht sich searchinGhost auf Ihre eigene Instanz, die mit new SearchinGhost(...) erstellt wurde.
emptyTemplate: function ( ) {
var allPostsArray = Object . values ( searchinGhost . index . l ) ;
var latestPosts = allPostsArray . slice ( 0 , 6 ) ;
searchinGhost . display ( latestPosts ) ;
}Wenn Sie ein Framework wie React, Vue oder Angular verwenden, möchten Sie wahrscheinlich nicht, dass SearchinGhost das DOM selbst manipuliert. Da Sie auf jeden Fall alle Inhaltsaktualisierungen in Ihrem Framework beibehalten müssen, sollten Sie folgende Konfiguration verwenden:
var searchinGhost = new SearchinGhost ( {
key : '<CONTENT_API_KEY>' ,
inputId : false ,
outputId : false ,
[ ... ]
} ) ;Um nun eine Suchabfrage auszuführen, rufen Sie diese SearchinGhost-Methode auf:
var postsFound = searchinGhost . search ( "my query" ) ;
// Where 'postsFound' content looks like:
[
{
"title" : "A Full and Comprehensive Style Test" ,
"published_at" : "Sep 1, 2012" ,
[ ... ]
} ,
{
"title" : "Publishing options" ,
"published_at" : "Aug 20, 2018" ,
[ ... ]
}
]Auf diese Weise wird nichts hinter Ihrem Rücken gerendert und alles bleibt im ShadowDom unter Kontrolle.
debug: true onFetchStart() , onSearchStart() , ... hinzu Von nun an werden alle Änderungen in dieser speziellen CHANGELOG.md-Datei verfolgt.
Jeder Beitrag ist mehr als willkommen! Wenn Sie einen Fehler gefunden haben oder den Code verbessern möchten, können Sie gerne ein Problem oder eine PR erstellen.
Alle Codeaktualisierungen müssen im src -Verzeichnis durchgeführt werden.
Um das Projekt selbst zu erstellen, führen Sie Folgendes aus:
$ npm install
$ npm run buildVerwenden Sie beim Entwickeln stattdessen den Befehl „watch“, da dieser bei jeder Dateiänderung schneller neu erstellt wird und einen Link zur Quellzuordnung enthält, was das Debuggen erleichtert.
$ npm run watchHinweis: Beim Erstellen dieses Projekts verwende ich Node v12.16.2 mit NPM v6.14.4, es sollte aber auch mit älteren/neueren Versionen funktionieren
SearchinGhost ist nicht allein im Bereich der Ghost-Such-Plugins. Hier finden Sie eine kurze Liste weiterer verwandter Projekte. Sie sollten sie auf jeden Fall ausprobieren, um zu sehen, ob sie besser zu Ihren Bedürfnissen passen:
GhostHunter (v0.6.0 – 101 kB, 26 kB gzip)
Vorteile:
- Am bekanntesten sind viele Artikel und Tutorials dazu
- Ein leistungsstarkes Cache-System basierend auf localStorage
- Volltextindizierung (nicht nur Beitragstitel)
Nachteile:
- Verlässt sich auf jQuery
- Funktioniert (vorerst) nur mit der Ghost v2 API
- Der Quellcode wurde mit der Zeit unübersichtlich
Ghost-Suche (v1.1.0 – 12 kB, 4,2 kB gzip)
Vorteile:
- Gut geschriebene und leicht lesbare Codebasis
- Nutzen Sie „Fuzzy“-Funktionen
Nachteile:
- Der Browser verzögert sich bei der Suche nach langen Wörtern
- Möglicherweise werden zu viele API-Anfragen gesendet
- Verwendet kein Bewertungssystem, um die besten Ergebnisse zuerst anzuzeigen
Ghost Finder (v3.1.2 – 459 kB, 116 kB gzip)
Vorteile:
- Reine Javascript-Bibliothek
Nachteile:
- Die gewaltige endgültige Bündelgröße
- Senden Sie für jede gedrückte Taste eine HTTP-Anfrage!
- Verwendet keine Suchmaschine, sondern sucht nur nach Teilzeichenfolgen in Beitragstiteln
- Indiziert akzentuierte Zeichen nicht korrekt (z. B. sollte „é“ mit „e“ gefunden werden)
