jekyllにクールで簡潔な検索を追加

codeboyに入るme、Ctrlキーをダブルクリックしてみるか、右下の検索アイコンをクリックしてみましょう
ブログはwordpressのjekyll、jekyllの核心思想から:

JekyllはWordPressのような簡単な無料のBlog生成ツールです.しかし、WordPressとは大きく異なります.jekyllは静的なWebページを生成するツールであり、データベースのサポートは必要ありません.ただし、Disqusなどのサードパーティのサービスに協力することができます.最も重要なのはjekyllがGithubに無料で配置でき、自分のドメイン名をバインドできることです.
Jekyllにはデータベースのサポートがなく、デフォルトでは検索機能がありませんが、クールで簡潔な検索機能を追加するにはどうすればいいのでしょうか.Googleでは、ほとんどがプラグインなどを使用しており、最初はサービス側でインデックスを直接生成し、その後インデックスを利用して検索することができます.
spotlightの簡潔さに啓発され、現在の太った軒のナビゲーションバーには空間がないので、spotlightのような検索をしようとした.操作手順を見てみましょう.

①          
②          
③           

サーバによる記事インデックスの生成

---
layout: null
---
{
	"code" : 0 ,
	"data" : [
	 {\% for post in site.posts \%}
	{
		"title" : " - {\% for tag in post.tags \%}{\% if forloop.rindex != 1 \%}_{\% else \%}{\% endif \%}{\% endfor \%}",
		"url" : ""
	}
	{\% if forloop.rindex != 1  \%}
	,
	{\% endif %\}
    {\% endfor \%}
	]
}

文章中の動的コードは解析されるので、置換を行います.コード中%は%に置き換えられます.使用中は%の前のエスケープ記号を除去してください.
このコードは、文章のタイトルとラベルを組み合わせながらurlとともにjson文字列に組み合わせた2層ループで、後続のajax呼び出しを容易にします.
ブラウザによる記事インデックスの取得
ここではajax呼び出しであり、$を用いる.ajaxまたは$.getJsonでもいいですが、ajaxの非同期リクエストを参照してください.
ページインタラクションおよびキーコントロール
より良いインタラクションを得るために、検索には多くのボタンが操作されています.
PC下でCtrlキーをダブルクリックして検索ボックスを開くか閉じる.
検索ボックス表示時にEscキーを押す検索ボックスを閉じる.
キーの検出はjsでも容易であり,ここでも列コードではない.
移動端もよく検索できるように、ページの右下隅に検索浮上ボタンを入れ、クリックして検索ページを開き、検索ページ、右上隅に閉じるボタンを提供することで、全体的に検索が完璧に実現します.
もっと多くの文章は小太り軒を訪問してください.