searchinghost easyダウンロード - searchinghost easyソースコードのダウンロード

サーチインゴーストイージー

Ghost CMS 用のゼロコード & セットアップが簡単な検索バー (ブログ)。

説明

SearchinGhostEasy は、オリジナルの SearchinGhost ライブラリのラッパーで、「開発者以外の」Ghost ユーザーがアクセスできるようにします。

私たちは皆、生まれながらにデザインスキルを持っているわけではないので、いくつかの検索バーテンプレートがすでに作成されています。これらはすべてレスポンシブデザインを採用しているため、携帯電話から 4K テレビまで、あらゆる画面サイズに完璧にフィットします。

最後に、すべてを HTML iframe にまとめることで、非常にリッチでスムーズなユーザーエクスペリエンスが得られます。

おお！最も重要なことを言い忘れていました。すべての Ghost テーマで動作します。 (キャスパー、マッシブリー、ヌビア、...)

インストール

Ghost ブログに検索バーをインストールするには、次の簡単な手順に従います。

1.「カスタム統合」を作成する

左側のパネルで、「統合」セクションに移動し、「+ カスタム統合の追加」をクリックして、「SearchinGhostEasy」という名前を付けます。 Ghost は独自の一意の「コンテンツ API キー」を生成しました (これはba094afe723d802f235af61d51のようになります)。次のステップで必要になるため、どこかに保管しておいてください。さらにヘルプが必要な場合は、Ghost の公式カスタム統合ページにアクセスしてください。

インストール手順1

2. スクリプトをサイトに追加します

「コードインジェクション」セクションから、次のコードチャンクをコピーして「サイトフッター」領域に貼り付けます。
<CONTENT_API_KEY>プレースホルダーを独自の API キーに置き換えることを忘れないでください。「保存」をクリックします。

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

注: カスタムテーマを変更したい場合は、それを他のスクリプトの隣にあるdefault.hbsに貼り付けると、まったく同じように機能します。

インストール手順2

3a. 【オプション】メニュー検索「ワード」を設定します

最後に、検索ボックスを開くリンクをメニューに追加します。これを行うには、「デザイン」セクションに移動して新しい項目を追加します。「ナビゲーション」または「セカンダリナビゲーション」にあります。任意のラベルを付けて名前を付けることができますが (「検索」が自然です)、リンクは#searchinghost-easyで終わる必要があります。「保存」をクリックします。

インストール手順3

3b. 【オプション】メニュー検索「アイコン」を設定します

単語の代わりに検索アイコンを使用したい場合は、このセクションに進んでください。

?これですべてのセットアップが完了しました。ブログでは、メニューバーに「検索」ボタンが表示されるはずです。それをクリックして魔法が起こるのを見てください!デフォルトの検索バーの外観が気に入らない場合は、次のテンプレートセクションを参照して変更してください。

また、役立つヒントをすべて入手するには「質問と回答」セクション、およびより高度なセットアップについては「構成」セクションを必ずチェックしてください。

テンプレート

SearchinGhostEasy にはさまざまなグラフィックフレーバーがあります。デフォルトで提供されるテンプレートは「Basic」と呼ばれますが、他のテンプレートに簡単に切り替えることができます。

これを行うには、各テンプレートの説明を参照し、関連するコード例をコピーしてブログのCode Injection > Site Footerセクションに貼り付けます。基本的に、スクリプト名の最後の部分のみが変更されます (例: "searchinghost-easy-basic.js"、"searchinghost-easy-backpack.js" など)。

できれば、さらに多くの検索バーテンプレートが登場することを願っています。このプロジェクトに貢献してあなたのデザインを共有したい場合は、お気軽に私にご連絡いただくか、問題/PR を作成してください。

✏️ 基本テンプレート

スクリーンショット

基本テンプレートのスクリーンショット

デモ

ライブデモ: 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 >

✏️ バックパックのテンプレート

スクリーンショット

バックパックテンプレートのスクリーンショット

デモ

ライブデモ: 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 >

構成

このセクションは、より上級のユーザー向けに予約されています。デフォルトでは、構成パラメータは慎重に選択されるため、追加の構成は必要ありません。

SearchinGhostEasy をより詳細に制御する必要がある場合は、利用可能な構成オプションを次に示します。

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

contentApiKey (文字列、必須)

コンテンツ API キー。この値は必須であり、カスタム統合の詳細で確認できます。
例: '06a02026a9f2dcf69f7e065d7c'

apiUrl (文字列)

ブログのドメイン名とは異なるAPI URLを設定してください。テスト目的に役立つ可能性があります。このオプションは、SearchinGhost ライブラリのurlに対応します。
例: 'http://example.com'

searchhostOptions (オブジェクト)

SearchinGhost のデフォルト設定をオーバーライドします。この設定は、SearchinGhostEasy 自体と選択した検索テンプレートによって提供される設定とマージされます。
利用可能なすべてのオプションを確認するには、SearchinGhost のドキュメントを参照してください。
例：
 {
    searchOn : 'submit' ,
    limit : 5 ,
    cacheMaxAge : 3600 ,
}

検索ホストバージョン(文字列)

使用する SearchinGhost のバージョンを設定します。新しいバージョンがリリースされたばかりの場合に役立つ可能性があります。
例: '1.3.0'

zIndex (数値)

HTML iframe 要素のz-index特定の値に設定します。
デフォルト: 2147483647

プレースホルダー(文字列)

デフォルトの「検索」検索バーのプレースホルダーを自分のものに変更します。英語以外のウェブサイトに特に役立ちます。
ブラウザと互換性のある任意の文字 (UTF-8 など) を使用できます。以下にいくつかの実際の例を示します。
 placeholder: "Rechercher..."      # in french with dots
placeholder: "Αναζήτηση"          # in greek
placeholder: "With emojis! ?"   # use with caution
デフォルト: "Search"

デバッグ(ブール値)

デバッグモードを有効にするには、これをtrueに設定します。これにより、使用された最終的な SearchinGhost 構成が出力され、SearchinGhost のデバッグも有効になります。
デフォルト: false

Q&A

アップデートや改善は得られますか?

はい、SearchinGhostEasy の新しいバージョンが利用可能になると、自動的に入手されます。

この動作を望まない場合は、URL 内の@latest特定のバージョンに置き換えてください。たとえば、 basicテンプレートでは、 https://cdn.jsdelivr.net/gh/gmfmi/[email protected]/dist/searchinghost-easy-basic.jsを使用します ( 1.0.0目的のバージョンに置き換えます) ）。

単語の代わりに検索アイコンを使用できますか?

はい、スクリプトを使用するか、テーマを更新することでこれを行うことができます (テーマオプションについては下記を参照してください)。

スクリプトオプションについては、次の例の最初の 3 行を SearchinGhostEasy 初期化セクションの前にコピーして貼り付けます。

このコードサンプルは、デフォルトの「Casper」Ghost テーマで動作するように設計されていることに注意してください。独自の Web サイトで機能させるには、いくつかの調整が必要になる場合があります (つまり、クエリセレクターと作成された内部 JavaScript 要素)。

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

それ以外の場合、アイコンを 2 番目のメニュー (ソーシャルリンクの隣) に追加したい場合は、そのアイコンを使用します。

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

どちらの場合も、Ghost テーマに合わせてアイコンの色を変更する必要がある場合は、 fillプロパティを適切な値で更新します。たとえば、ピンクを取得するにはstyle="fill:#fc03ec" 。

カスタムテーマで使用できますか?

はい、テーマをカスタマイズするには、この Ghost ガイドに従って、必要に応じてメニューを変更します。

SearchinGhostEasy を機能させるための唯一の要件は、リンクのhrefの値として#searchinghost-easy使用することです。

たとえば、 partials/navigation.hbsファイルは次のようになります。

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

以下を含むpartials/icons/search.hbs :

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

メニュー以外の場所にリンクを使用できますか?

確かに、 #searchinghost-easyを指すリンクは検索ボックスのポップアップを開きます。たとえば、Ghost 投稿内またはテーマ.hbsファイル内などに、同じページに 1 つまたは複数のリンクを作成できます。

記事を書くときは、次の方法で簡単にリンクを作成できます。

インストール手順3

HTML では、SearchinGhostEasy リンクは次のとおりです。

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

クレジット

ACERLR8 に感謝します。検索バーは「Basic」テンプレートのインスピレーションとなりました
Back to Pack、「Backpack」テンプレートの元のソース

拡大する

searchinghost easy

サーチインゴーストイージー

説明

インストール

1.「カスタム統合」を作成する

2. スクリプトをサイトに追加します

3a. 【オプション】メニュー検索「ワード」を設定します

3b. 【オプション】メニュー検索「アイコン」を設定します

テンプレート

✏️ 基本テンプレート

スクリーンショット

デモ

インストール

✏️ バックパックのテンプレート

スクリーンショット

デモ

インストール

構成

Q&A

アップデートや改善は得られますか?

単語の代わりに検索アイコンを使用できますか?

カスタムテーマで使用できますか?

メニュー以外の場所にリンクを使用できますか?

クレジット

easy steamcmd

easy digital downloads

gp|簡単な CMS

簡単なネットワーク管理

簡単な振り返り

簡単なCMS

chat.petals.dev

GPT Prompt Templates

GPTyped

waymo open dataset

SmartTube

Sunamu

waymo open dataset

wp functions

termwind