searchinGhostダウンロード - searchinGhostソースコードのダウンロード

幽霊を探す

Ghost 用の純粋な JavaScript、軽量、ブラウザ内全文検索プラグイン (ブログ)

説明

SearchinGhost は、Ghost ブログプラットフォーム専用の軽量で拡張可能な検索エンジンです。その中核では、Ghost Content API を使用してブログコンテンツを読み込み、強力な FlexSearch ライブラリを使用してインデックスを作成し、検索クエリを実行します。

すべてはクライアントブラウザ内で行われ、非常に高速な検索結果を提供し、ユーザーにリアルタイムで表示するのに役立ちます (別名「入力しながら検索」)。また、ブラウザのlocalStorage必要な場合にのみリクエストを送信するようにすることで、ネットワーク負荷を最小限に抑えることにも配慮しています。

あなたのブログはキリル語、中国語、韓国語、ギリシャ語、インド語、またはその他の非ラテン語で書かれていますか?心配はいりません。サポートされています。専用のセクションを参照してください。

おまけ: コンセプトは気に入ったが、すばやく簡単に (実際には 3 分以内に) インストールしたい場合は、SearchinGhostEasy プロジェクトにアクセスしてください。

デモ

インストールと構成に入る前に、このライブデモで自分で試してみてください。

このデモでは、検索可能なコンテンツは公式の Ghost デモ API (つまり https://demo.ghost.io) から取得されます。オプションはデフォルトに設定されているため、各入力単語は投稿のタイトル、タグ、抜粋、メインコンテンツで検索されます。

たとえば、「マーマレード」という単語を検索します。これは投稿のタイトル、抜粋、タグには存在しませんが、「Down The Rabbit Hole」の記事で一度使用されているため、結果として取得できます。

クイックスタート

まず、テーマのdefault.hbsファイルを更新して、検索結果を表示するための入力フィールドと出力要素を含めます。次に、 SearchinGhost スクリプトへのリンクを追加し、独自のCONTENT_API_KEYで初期化します。コンテンツ API キーを取得するには、Ghost の公式ドキュメントを参照してください。

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

以上です。すべて完了です。より詳細な設定が必要な場合は、次のセクションをお読みください。

インストール

SearchinGhost はさまざまな方法でインストールできます。次のような方法があります。

コンテンツ配信ネットワーク (CDN) から

これは、SearchinGhost をインストールする最も簡単で推奨される方法です。これらのスクリプトのいずれかをテーマのdefault.hbsに追加します。また、信頼性とパフォーマンスの点で、unpkg ではなく jsdelivr を使用することをお勧めします。

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

ソースから

SearchinGhost を独自のサーバーから提供したい場合、またはビルドプロセスに含めたい場合は、リリースページのアセットから取得するか、 dist/searchinghost.min.jsファイルをダウンロードできます。

故宮から

SearchinGhost をプロジェクトの依存関係としてインストールします。

$ npm install searchinghost
# OR
$ yarn add searchinghost

次に、任意の JavaScript ファイルからそれをロードします。

 import SearchinGhost from 'searchinghost' ;
// OR
var SearchinGhost = require ( 'searchinghost' ) ;

構成

唯一の必須の構成フィールドはkeyです。他のフィールドにはデフォルト値があり、オプションになりました。

SearchinGhost はすぐに使えるように設計されており、この最小限の構成でも強力です。キーを押すたびに、投稿のタイトル、タグ、抜粋、コンテンツが検索されます。これが最も一般的と思われるデフォルトの動作です。

 // SearchinGhost minimal configuration
var searchinGhost = new SearchinGhost ( {
    key : '<CONTENT_API_KEY>'
} ) ;

それでも、ニーズに合わせて少し追加の構成を行う価値はあるかもしれません。 titleのみを検索し、見つかった各投稿のtitleとpublished_atフィールドを表示したいとします。次の構成を使用できます。

 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 は、その構成を通じて簡単にカスタマイズおよび拡張できます。次のセクションから各オプションを時間をかけて調べてください。

オプション

完全なデフォルト設定

 {
    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
} ) ;

利用可能なすべてのオプション

キー(文字列、必須)

ブログデータにアクセスするためのパブリックコンテンツ API キー。
例: '22444f78447824223cefc48062'

URL (文字列)

Ghost API の完全なドメイン名。
例: 'https://demo.ghost.io'
デフォルト: window.location.origin

バージョン(文字列)

Ghost API のバージョンを設定します。 'v2'と'v3'の両方で動作します。
デフォルト: 'v3'

ロードオン(文字列)

ライブラリのロード戦略を設定します。これは、HTML ページが読み込まれたとき、ユーザーが検索バーをクリックしたときにオンデマンドでトリガーすることも、まったくトリガーすることもできません。
検索バーの初期化を自分でトリガーするには、この値をfalse (ブール値) に設定します。こうすることで、残りのコードの準備ができたときにsearchinGhost.loadData()を呼び出すことができます。
期待される値: 'page' 、 'focus'またはfalse
デフォルト: 'focus'

searchOn (文字列)

検索クエリをいつ実行するかを選択します。ユーザーのキーストロークやフォームの送信ごとに検索するには、 'keyup'を使用します。ユーザーがボタンまたは「Enter」キーを入力してフォームを送信した場合にのみ検索するには、 'submit'を使用します。独自の JavaScript コードから完全に制御したい場合は、 false (ブール値) を使用し、 searchinGhost.search("...")を使用して自分で検索を実行します。
期待される値: 'keyup' 、 'submit'またはfalse
デフォルト: 'keyup'

制限（数）

検索クエリによって返される投稿の最大数を設定します。 1 ～ 50の値は超高速であり、 1000より低い値でもパフォーマンスが大幅に低下することはありません。ただし、検索エンジンはこの制限に達すると検索を停止し、結果を返すことに注意してください。値が低いほど良いことになります。
使用可能な結果をすべて表示するには、この値を0に設定することは強くお勧めしません。
デフォルト: 10

inputId (文字列の配列)

[非推奨] v1.6.0より前では、このフィールドはstringでしたが、この動作は非推奨になりました。
Web サイトには 1 つまたは複数の検索バーがある場合があり、それぞれに一意の HTML id属性が必要です。この配列に各検索バーid入れます。名前に「#」を含めないでください。
入力フィールドが必要ない場合は、値を[] (空の配列) に設定し、 searchOn false (ブール値) に設定します。次に、 searchinGhost.search("<your query>")を使用して検索を実行します。
デフォルト: ['search-bar']

OutputId (文字列の配列)

[非推奨] v1.6.0より前では、このフィールドはstringでしたが、この動作は非推奨になりました。
Web サイトでは 1 つ以上の HTML 要素を使用して検索結果を表示できます。この配列は、これらすべての出力要素のid属性を参照します。これらの要素のいずれかにすでにコンテンツがある場合、そのコンテンツは検索結果によって上書きされます。
JS フレームワークを使用して検索結果を表示している場合は、この値を[] (空の配列) に設定します。見つかった投稿は、関数searchinGhost.search("<your query>")によって返される値として取得されます。
デフォルト: ['search-results']

出力チャイルドタイプ(文字列)

[非推奨] v1.6.0より前は、このフィールドはstringでした。これは廃止されました。
各検索結果は、 outputId親要素に追加される前に、子要素内にラップされます。デフォルトのタイプはliですが、任意の有効な HTML 要素に設定できます (MDN ドキュメントを参照)。
ラッピング要素を使用してtemplateおよびemptyTemplateの結果を出力要素に直接追加したくない場合は、値をfalse (ブール値) に設定します。
デフォルト: 'li'

postFields (文字列の配列)

必要なすべての投稿フィールドの配列。これらすべてのフィールドは、有用な投稿情報を表示するためにtemplate機能で使用できるようになります。
「フィールド」の公式ドキュメントを参照してください。
注: 'custom_excerpt'を使用すると、テンプレート化を容易にするために、そのコンテンツが自動的に'excerpt'に配置されます。
デフォルト: ['title', 'url', 'excerpt', 'custom_excerpt', 'published_at', 'feature_image']

postExtraFields (文字列の配列)

この配列を使用すると、 tagsやauthorsなどの追加フィールドを使用できます。個人的には、他の「フィールド」にはない理由がわかりませんが、Ghost API はこのように設計されています...
完全に無効にするには、その値を[] (空の配列) に設定します。
「インクルード」の公式ドキュメントを参照してください。
デフォルト: ['tags']

postFormats (文字列の配列)

これは、HTML またはプレーンテキストで投稿コンテンツを取得できるようにする「フォーマット」Ghost API に対応しています。
完全に無効にするには、その値を[] (空の配列) に設定します。
「形式」の公式ドキュメントを参照してください。
デフォルト: ['plaintext']

IndexedFields (文字列の配列)

インデックス付きフィールドのリスト。これらすべてのフィールドの内容が検索可能になります。
このリストのすべての値は投稿で定義する必要があります。そうしないと、検索結果は正確ではなくなりますが、アプリはクラッシュしません。 postsFields 、 postsExtraFields 、およびpostsFormats値を再確認してください。
注意: 'string_tags'奇妙なフィールドがcustomProcessingオプションに追加されています。タグを使用したい場合は、FlexSearch が配列を適切に処理できないため、この醜い機能が (今のところ) 必要になります。それを望まない場合、または気に入らない場合は、追加の変更を加えずにpostsを返すように、 customProcessingオーバーライドします。タグを使用する場合は、ここでも'string_tags'を使用してください。
デフォルト: ['title', 'string_tags', 'excerpt', 'plaintext']

テンプレート（関数）

独自の結果テンプレートを定義します。このテンプレートは、結果を生成するために見つかった各投稿に使用され、子要素として出力要素に追加されます。テンプレートエンジンはなく、 postオブジェクトを引数として使用するネイティブ JavaScript 関数だけです。
このテンプレートオプションは、予想よりもはるかに強力です。検索結果に対して呼び出されるカスタム処理関数と考えることもできます。たとえば、何らかのフィルタリングを行いたい場合は、何も返さない (例: return; )、または空の文字列 (例: return ""; ) を返して項目を破棄します。
一重引用符または二重引用符の代わりにバックティック(「`」など) を使用することに注意してください。これは、非常に便利な JavaScript 変数補間を有効にするために必要です。
使用可能な変数は、 postsFieldsオプションで定義されたものです。
例：
template: function ( post ) {
   return `<a href=" ${ post . url } "># ${ post . tags } - ${ post . published_at } - ${ post . title } </a>`
}

emptyTemplate (関数)

結果が見つからない場合は、独自の結果テンプレートを定義します。
例：
emptyTemplate: function ( ) {
  return '<p>Sorry, nothing found...</p>'
}

カスタム処理（関数）

Ghost から取得した投稿データに追加の変更を加える必要がありますか?この機能を使用して、必要なことをすべて実行します。この関数は各ポストで呼び出され、 onFetchEnd()の後、 onIndexBuildStart()の前に実行されます。
投稿を破棄したい場合は、JS の false 値 (例: null 、 undefined 、 false 、 "" 、...) を返します。
入出力を簡単にデバッグするには、 onFetchEnd()およびonIndexBuildEnd()を使用して、 console.log()で結果を表示します。上級ユーザーの場合でも、デバッガーを使用するのが最善の選択肢です。また、テストするときはローカルキャッシュをクリーンアップすることを忘れないでください。
注: デフォルトでは、このオプションには投稿内でフィールド「タグ」を使いやすくするためのヘルパー関数がすでに入力されています。 indexedFieldsオプションを参照してください。
例：
customProcessing: function ( post ) {
  post . extra_field = "hello" ;
  return post ;
}

日付（オブジェクト）

投稿から取得した日付形式を定義します。
詳細については、MDN リファレンスを参照してください。
例：
date: {
    locale : "fr-FR" ,
    options : { weekday : 'long' , year : 'numeric' , month : 'long' , day : 'numeric' }
}

cacheMaxAge (数値)

キャッシュの最大存続期間を秒単位で設定します。この間に、ローカルストレージで既存のインデックスが見つかった場合、その有効性を確認するための追加の HTTP リクエストなしでインデックスがロードされます。キャッシュがパージされると、値はリセットされます。
これは、サーバーのブロードバンドとネットワークの負荷を節約するのに特に役立ちます。デフォルト値は 30 分に設定されています。この値は、Google アナリティクスで使用されるデフォルトのユーザーセッション期間から取得されます。
デフォルト: 1800

onFetchStart (関数)

Ghost API からデータをフェッチする前に、コールバック関数を定義します。
この関数は引数を取りません。
例：
onFetchStart: function ( ) {
  console . log ( "before data fetch" ) ;
}

onFetchEnd (関数)

フェッチが完了したときのコールバック関数を定義します。 postsに加えた変更が保持される場合でも、 customProcessing()関数を使用して保持することをお勧めします。
この関数は引数を 1 つ取ります。それは、Ghost 自体によって返されるすべての投稿の配列です。
例：
onFetchEnd: function ( posts ) {
  console . log ( "Total posts found on Ghost:" , posts . length ) ;
}

onIndexBuildStart (関数)

検索インデックスの構築を開始する前に、コールバック関数を定義します。
この関数は引数を取りません。
例：
onIndexBuildStart: function ( ) {
  console . log ( "before building the index" ) ;
}

onIndexBuildEnd (関数)

検索インデックスの構築が完了したら、コールバック関数を定義します。
この関数は 1 つの引数、つまりビルド FlexSearch インデックスオブジェクトを受け取ります。
例：
onIndexBuildEnd: function ( index ) {
  console . log ( "index built:" , index ) ;
}

onSearchStart (関数)

検索クエリの実行を開始する前にコールバック関数を定義します。たとえば、 onSearchEnd完了を待機している間に結果の HTML 要素を非表示にしたり、派手なトランジション効果を追加したりするために使用できます。ただし、検索機能は十分に高速で目に優しいため、ほとんどの場合、これは必要ありません。
この関数は引数を取りません。
例：
onSearchStart: function ( ) {
  console . log ( "before executing the search query" ) ;
}

onSearchEnd (関数)

検索結果が準備できたら、コールバック関数を定義します。
この関数は 1 つの引数、つまり一致する投稿の配列を受け取ります。
例：
onSearchEnd: function ( posts ) {
  console . log ( "search complete, posts found:" , posts ) ;
}

IndexOptions (オブジェクト)

追加の検索インデックス構成を追加するか、デフォルトの構成をオーバーライドします。これらのオプションは、すでに提供されているオプションとマージされます。
 {
    doc : {
        id : "id" ,
        field : this . config . indexedFields
    } ,
    encode : "simple" ,
    tokenize : "forward" ,
    threshold : 0 ,
    resolution : 4 ,
    depth : 0
}
また、このパラメータを使用して、非ラテン言語のサポートを有効にします。このセクションを参照してください。
デフォルト： {}

searchOptions (オブジェクト)

上級ユーザー向けに作成されており、検索クエリを微調整できます。この FlexSearch ドキュメントを参照してください。
ここでは、 index.search("your query", searchOptions)という特定のクエリ構造を使用しているため、 searchOptionsに追加されたものはすべて、この方法で FlexSearch に渡されます。
このパラメータは、タグに基づいて投稿をフィルタリングするときに非常に便利です。例として:
searchOptions: {
    where : {
        string_tags : "getting started"
    }
}
また、 limit Searchinghost オプションは自動的にsearchOptionsにマージされることにも注意してください。私たちの場合、最終的には次のようになります。
searchOptions: {
    where : {
        string_tags : "getting started"
    } ,
    limit : 10
}
デフォルト： {}

デバッグ(ブール値)

何かが期待どおりに動作しない場合は、 trueに設定してアプリケーションログを表示します。
デフォルト: false

言語設定

ブログでラテンアルファベット言語 (英語、フランス語、スペイン語など) または北/東ヨーロッパ言語 (ドイツ語、スウェーデン語、ハンガリー語、スロベニア語、エストニア語など) を使用している場合は、デフォルト設定で問題なく機能します。それ以外の場合は、適切なindexOptions値を見つけて、メインの SearchinGhost 構成に追加します。

独自の特定の設定を作成するには、FlexSearch README とこれら 3 つの問題を参照してください。

何もうまくいかない場合、または結果の動作が正しくない場合は、お気軽に問題を作成してください。

アラビア語

indexOptions: {
    encode : false ,
    rtl : true ,
    split : / s+ /
}

中国語、韓国語、日本語

indexOptions: {
    encode : false ,
    tokenize : function ( str ) {
        return str . replace ( / [x00-x7F] / g , "" ) . split ( "" ) ;
    }
}

キリル語、インド語、シンハラ語

このオプションは、複雑な文字を使用するスペースで区切られた単語言語で使用できます。

indexOptions: {
    encode : false ,
    split : / s+ /
}

混合言語タイプ

複数の言語タイプ (キリル語/英語、インド語/スペイン語など) を使用する必要がある場合は、以下の専用の構成を使用してください。一見怖そうに見えるかもしれませんが、コピー＆ペーストして信じてください。

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

Q&A

検索エンジンとして FlexSearch を使用する理由は何ですか?

最初は、Lunr.js、minisearch、fuse.js などの他のソリューションも試しました。最終的に、FlexSearch は、高速かつ正確な結果、十分に小さいバンドルサイズ、そしてセットアップ/構成が簡単で、全体的に最高の結果を提供しました。すべてを選択できるようになりました！

私の新しい記事が検索結果に表示されないのはなぜですか?

心配しないでください、それは正常です。 SearchinGhost はキャッシュシステムを使用してブログデータをブラウザに保存し、ネットワークインタラクションを制限します。デフォルトでは、30 分以内に保存されたキャッシュデータは依然として有効とみなされます。それ以降は、新しい記事が利用できるようになります。

他のユーザーは、最後にリサーチを行った時期によっては 30 分待つ必要がない場合があることに注意してください。 1 時間前であれば、キャッシュが削除されて更新され、記事が表示されます。

ユーザーを常に完全に最新の状態にしたい場合は、 cacheMaxAge 0に設定します。その際、HTTP リクエストの数を制限するために、 loadOn 'focus'に設定する必要もあります。

写真の読み込み時間を最適化するにはどうすればよいですか?

デフォルトでは、 feature_image URL 変数を使用して検索結果に画像を表示すると、常にオリジナル/フルサイズの画像が表示されますが、通常、それらは（サイズと重量の点で）私たちのニーズには大きすぎます。ミニチュアの方が良いでしょう。フィット。

Ghost V3 以降、レスポンシブな画像を作成するためのメディア処理エンジンが組み込まれています。デフォルトでは、Ghost は指定されたイメージの 6 つの異なるイメージを再作成します。利用可能なサイズは、 w30 、 w100 、 w300 、 w600 、 w1000 、 w2000です。

私たちの場合、画像をより速く読み込む最も簡単な方法は、単純に小さい画像を使用することです。基本的に、この URL https://www.example.fr/content/images/2020/05/picture.jpg (Ghost API から取得されたデフォルトの URL) をhttps://www.example.fr/content/images/size/w600/2020/05/picture.jpgにする必要があります。 https://www.example.fr/content/images/size/w600/2020/05/picture.jpg (幅 600px のもの)。

これを行うには、次のコード例で"customProcessing"フィールドを追加して構成を更新します。もちろん、 w600の代わりに、上記の利用可能なサイズのいずれかを使用することもできます。

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

この変更はすぐには反映されません。実際に違いを確認するにはキャッシュを更新する必要があります。

見つかった検索結果の数を表示するにはどうすればよいですか?

ID "search-counter"を持つ HTML 要素を作成し、 onSearchEnd()関数を利用して結果を要素に入力します。以下に例を示します。

 < p id =" search-counter " > </ p >

onSearchEnd: function ( posts ) {
    var counterEl = document . getElementById ( 'search-counter' ) ;
    counterEl . textContent = ` ${ posts . length } posts found` ;
}

何も見つからない場合に最新の投稿を表示することはできますか?

はい、SearchinGhost の内部メソッドを使用することで可能ですが、可能です。黒魔術のように見えるかもしれませんが、現在の構成に以下のコードを追加します。ここで、 searchinGhost new SearchinGhost(...)で作成された独自のインスタンスを指します。

emptyTemplate: function ( ) {
    var allPostsArray = Object . values ( searchinGhost . index . l ) ;
    var latestPosts = allPostsArray . slice ( 0 , 6 ) ;
    searchinGhost . display ( latestPosts ) ;
}

このライブラリを JS フレームワークで使用できますか?

React、Vue、Angular などのフレームワークを使用している場合は、おそらく SearchinGhost に DOM を単独で操作させたくないでしょう。必ずフレームワーク内でコンテンツの更新を維持する必要があるため、使用する必要がある構成は次のとおりです。

 var searchinGhost = new SearchinGhost ( {
    key : '<CONTENT_API_KEY>' ,
    inputId : false ,
    outputId : false ,
    [ ... ]
} ) ;

ここで、検索クエリを実行するには、この SearchinGhost メソッドを呼び出します。

 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" ,
    [ ... ]
  }
]

こうすることで、背後でレンダリングされるものは何もなくなり、すべてがshadowDomの制御下に留まります。

ロードマップ

今後、すべての変更はこの専用の CHANGELOG.md ファイルで追跡されます。

貢献する

いかなる貢献も大歓迎です!バグを見つけた場合、またはコードを改善したい場合は、お気軽に問題または PR を作成してください。

すべてのコードの更新はsrcディレクトリの下で行う必要があります。

自分でプロジェクトをビルドするには、次を実行します。

$ npm install
$ npm run build

開発時には、代わりに watch コマンドを使用してください。これにより、ファイルが変更されるたびに再構築が高速になり、ソースマップへのリンクが含まれるため、デバッグが容易になります。

$ npm run watch

注: このプロジェクトの作成中、NPM v6.14.4 で Node v12.16.2 を使用していますが、古い/新しいバージョンでも動作するはずです。

代替ソリューション

Ghost 検索プラグインの分野では SearchinGhost だけが存在するわけではありません。ここでは、その他の関連プロジェクトの短いリストを示します。ぜひ試してみて、ニーズに合うかどうかを確認してください。

GhostHunter (v0.6.0 - 101 KB、26 KB gzip)

長所:
最も有名で、それに関する記事やチュートリアルがたくさんあります
localStorage をベースとした強力なキャッシュシステム
全文インデックス作成 (投稿タイトルだけでなく)
短所:
jQueryに依存する
(現時点では) Ghost v2 API でのみ動作します
時間が経つとソースコードが汚くなった

ゴーストサーチ (v1.1.0 - 12 KB、4.2 KB gzip)

長所:
よく書かれた読みやすいコードベース
「ファジー」機能を活用する
短所:
長い単語を検索するとブラウザに遅延が発生する
送信する API リクエストが多すぎる可能性があります
スコアリングシステムを使用せず、最良の結果を最初に表示します

ゴーストファインダー (v3.1.2 - 459 KB、116 KB gzip)

長所:
純粋な Javascript ライブラリ
短所:
最終的なバンドルの巨大なサイズ
キーが押されるたびに HTTP リクエストを送信します。
検索エンジンを使用せず、投稿タイトルの部分文字列のみを検索します
アクセント付き文字のインデックスが正しく作成されません (例: 'é' は 'e' と一緒に見つかるはずです)

拡大する