サーバーをレンダリングした静的サイトを検索する

進歩的な強化は、任意のWebサイトやアプリケーションを作成する際に重要なトピックです.ユーザーのブラウザが使用しているJavaScriptや特定のJavaScriptを処理できない場合、どうなりますか?フロントエンドが失敗した場合は、基本的な機能を有効にするためにフォールバックが必要です.
何がそんなに難しいの?
あなたがJamstackに取り組んでいるとき、それは伝統的なスタックよりずっと難しくありえます.JamstackはCDNからHTMLを提供するために専用されているので、私たちは伝統的なサーバを持っていません--静的なファイルとServerlessな機能だけです.そのため、フロントエンドとサーバの両方にレンダリングコードを書き換えることができます.年と再設計によって行くと突然、タイムマシンでは、昨年のデザインの検索結果を見ている.
11 tyの新しいServerlessなパッケージとNetlify機能で、我々は速くサーバーから始めることができます.そこから、我々は徐々にInstantSearchのようなライブラリを使用して経験を強化することができます.js

どのような11の無力ですか?
11 tyは、ノードに書かれた静的サイトジェネレータです.jsこれは、複数のテンプレート言語とデータを摂取するための複数のメソッドを提供しています.これは、心の柔軟性を内蔵しています.畝
歴史的に、それはビルドプロセスの間、その仕事の全てをして、CDNに格納されることができるHTMLを生成します.これは、Jamstackで信じられないほどうまく動作する迅速なウェブサイトを作成します.畝
任意の動的なコンテンツについては、フロントエンドのJavaScriptデータを取得に頼っている.これは多くの状況で動作しますが、進歩的な拡張に向けて明確なパスを提供しません.
あなたのフロントエンドコードが失敗するならば、あなたのサイトのダイナミックな局面はそれに失敗します.11 tyの今後の1.0リリースでは、これ以上の懸念されません.11 tyはオプションの11 tyサーバレスプラグインでバンドルされます.これにより、開発者はユーザー入力を処理できるルートを指定できます.その入力はクエリパラメータやURL構造自体から得られる.

我々の建物

このデモでは、非常にシンプルな11のサイトを取るし、動的な検索ルートを追加します.そのサーチルートは、私たちが使用している11 tyのコードの中から、すべて無制限の関数でHTMLを作成するために、11 Tyとテンプレートフィルタを使用します.これは、我々の進歩的な強化の「フォールバック」のために使われます.我々は、このデモでは、Javascriptベースの検索を構築するにはreal-time search with InstantSearch.js 固体ユーザーの経験のための素晴らしい基礎です.
どうやってこれをビルドしますか

プラグインをインストールし、Serverless関数を設定します

検索ページの作成

クリエイトアgetResults Algoliaインデックスを問い合わせるテンプレートフィルタ

セットアップ
私たちは基本的な11 tyのテンプレートからちょうど少しHTMLで私たちを得るために起動します.
始めるclone this repository そして、依存関係( 11 ty 1.0とdotenv )をインストールします.
完成品を見たいですか?チェックアウトfinal 倉庫の支店または参照this demo site .

npm install && npm start

我々のプロジェクトの構造は、11のサイトの基本構造に続きます.個々のページはプロジェクトのルートにありますindex.html ファイル.テンプレートは_includes ディレクトリ.設定ファイルは.eleventy.js rootで.サイトテンプレートは比較的単純です:ヘッダーとフッターを含むベーステンプレート.
インストールが完了すると、私たちはローカルで実行している11 tyのサイトを作業します.それはまだ少しだけHTMLとインデックスページ、非常に興味深いことではない.若干の内容をもたらす検索ページを加えましょう.

プラグインのインストールと設定
最新の1.0“カナリア”のバージョンでは、11 ty船のプラグインは11 ty無制限.これは、必要に応じて11 tyを実行する必要があるServerless関数を生成するのに役立ちます.
我々のプロジェクトでそれをインストールするには.eleventy.js 設定ファイル.
畝

require("dotenv").config();  
const { EleventyServerlessBundlerPlugin } = require("@11ty/eleventy");  

module.exports = function(eleventyConfig) {  
    // Configuration rules  
    eleventyConfig.addPlugin(EleventyServerlessBundlerPlugin, {  
       name: "search", // The serverless function name for the permalink object 
       functionsDir: "./netlify/functions/",  
     });  
};

以来、私たちは私たちのバージョンコントロールを追跡する必要はありません.gitignore 次の項目に従います.

netlify/functions/search/**  
!netlify/functions/search/index.js

我々が再発明するときnpm start , 11 tyは現在、Serverlessな機能を作成します、そして、すべての必要な束ファイルfunctionsDir に指定された名前name プロパティ.畝
ほとんどの用途では、これらのファイルを変更しません.プラグインはindex.js ファイルは、より高度なユースケースのために編集することができます.11 tyは、このディレクトリの他のファイルを各ランで上書きします.

Serverless関数を使用するページを作成する
今では、11 tyがこの関数を作成したので、使用するページを追加できます.
プロジェクトのルートに新しいファイルを作成するsearch.html . ファイルでは、FrontMatterでページのデータを設定できます.

---  
layout: "base.html"  
title: "Search Page  "
permalink:  
 search: /search/  
---

The layout 変数は_includes ディスプレイに使用する.The title 変数はHTMLで表示されます<title> 要素.
The permalink objectは、このページの最終URLを指定する場所です.畝
あなたが11ティーに精通しているならば、あなたはpermalink 変数が文字列です.単純なユースケースのために文字列を使用することもできますが、Serverlessではオブジェクトとなります.オブジェクトのキーは、Serverless関数の設定で指定した名前になります.
また、この方法でURLに基づいて実行するには、異なるServerless関数を指定することもできます.ビルド時とリクエスト時に生成されるページを指定する場合は、build 同様にpermalinkのためのキー.
一度追加、ページが表示されます/search/ . ヘッダとフッター以外のコンテンツはありません.クエリパラメータからいくつかの動的コンテンツを取得しましょう.

--------
layout: "base.html"
title: Search Page
permalink:
  search: /search/
--------

<h2 class="is-size-3 mb-3">This list is built at request from the query "{{ eleventy.serverless.query.query }}"</h2>

畝
これは、ルートのクエリパラメータを見て任意の値を挿入する見出しを作成しますquery パラメータが含まれます.
あなたがページを訪問するならば?query=11ty URLの最後に11ty が表示されます.
それで、どのように我々はその質問をして、Algoliaから結果を得ますか?

クリエイトアgetResults テンプレートフィルタ
テンプレートをレンダリングする必要があるデータを取得するには、テンプレートフィルタを作成する必要があります.フィルタは、Serverlessページからクエリー文字列を受け取り、Algoliaインデックスに対してクエリを実行し、検索ページに記事の配列を返します.
我々はコードに飛び込む前に、Algoliaアプリといくつかの環境変数を持っている必要があります.あなたは既にAlgoliaインデックスを持っている場合は、それを使用して自由に感じる.私たちはタイトル、説明、およびURLでブログ記事を持っているインデックスを使用するでしょう.あなたがAlgoliaインデックスを持たないならば、.create an account and app, このデータを使用して手動で最初のインデックスを作成します.

[
    {
        "title": "Creating an omnibar with Autocomplete",
        "description": "In this tutorial, we’ll walk through setting up Autocomplete to fire interactions with JavaScript. Specifically, we’ll build an omnibar to toggle light and dark mode for our website. An omnibar is a search field that has both search and actions that can be taken. A strong example of this is the Chrome or Firefox search and URL bar.",
        "url": "https://www.algolia.com/blog/engineering/creating-an-omnibar-with-autocomplete/"
    },
    {
        "title": "Building a Store Locator in React using Algolia, Mapbox, and Twilio – Part 1",
        "description": "These days, ecommerce shoppers expect convenience and want the physical and online worlds to mesh allowing them to conduct their business on whichever channel they want. For example, users may choose to:",
        "url": "https://www.algolia.com/blog/engineering/building-a-store-locator-in-react-using-algolia-mapbox-and-twilio-part-1/"
    },
    {
        "title": "Introducing Algolia Recommend: The next best way for developers to increase revenue",
        "description": "Now, with the introduction of Algolia Recommend, Algolia further enables developers to unleash the component of the experience that drives the remaining part of the product discovery experience: product recommendations. ",
        "url": "https://www.algolia.com/blog/product/introducing-algolia-recommend-the-next-best-way-for-developers-to-increase-revenue/"
    }
]

インデックスを作成すると、.env ファイルを追加し、次の変数を追加します

# The app id
ALGOLIA_APP = "" 
# The search-only API key
ALGOLIA_SEARCH_KEY = "" 
# The index name
ALGOLIA_INDEX = "" 

一旦それらが適当であるならば、我々は結果を得るためにAlgolia JavaScriptクライアントを通して質問を提出することができます.私たちのクエリは、我々のテンプレートでアクセス可能ですので、クエリを使用して結果を返す新しいテンプレートフィルタを作成します.
新しいフィルタを作成するには、.eleventy.js 設定ファイル.
まず、インストールしますalgoliasearch NPMパッケージ

npm install algoliasearch

require("dotenv").config();
const { EleventyServerlessBundlerPlugin } = require("@11ty/eleventy");
const algoliasearch = require("algoliasearch");

const client = algoliasearch(process.env.ALGOLIA_APP, process.env.ALGOLIA_SEARCH_KEY);
const index = client.initIndex(process.env.ALGOLIA_INDEX);

module.exports = function (eleventyConfig) {
  eleventyConfig.addPlugin(EleventyServerlessBundlerPlugin, {
    name: "search", // The serverless function name from your permalink object
    functionsDir: "./netlify/functions/",
  });

  eleventyConfig.addFilter("getResults", function (query) {
    return index.search(query, {
      attributesToRetrieve: ["title", "url", "date", "description"],

    }).then(res => {
      return res.hits;
    })
  });

};

ファイルの上部には、APIキー、アプリケーション名、およびインデックス名を持つAlgolia検索クライアントを設定します.その後、エクスポートされた関数の内部で、我々はaddFilter() フィルタを追加する方法.
このメソッドは、フィルターとして使用する文字列と、使用時に実行する関数の2つの引数を受け取ります.この関数は、ページファイルから渡されたデータを受け取ります.この場合、それはユーザー入力の質問です.
この簡単な例では、クエリをindex.search() メソッドをリクエストし、レスポンスを小さく保つために必要な属性だけを返します.これが返されると、結果はテンプレートループで使用するためにページに戻ります.

--------
layout: "base.html"
title: Search Page
permalink:
  search: /search/
--------

<h2 class="is-size-3 mb-3">This list is built at request from the query "{{ eleventy.serverless.query.query }}"</h2>

{% assign results = eleventy.serverless.query.query | getResults %}
<div class="card-grid">
  {% for result in results %}
    {% include "article.html" %}
  {% endfor %}
</div>

ページでは、我々はassign 変数にデータを代入するための液体中のタグ.そして、返された配列をループして、その情報をincludeに渡すことができます.これは、これらの結果だけでなく、サイト上の任意の記事の表示に使用することができます含まれています.The article.html ファイルは_includes ディレクトリ.

<article class="card column">
    <h2 class="title"><a href="{{ result.url }}">{{ result.title }}</a></h2>
    <p class="content">{{ result.description }}</p>
</article>

我々は現在、サーバーが静的に生成されたサイトの検索をレンダリングするための11 ty Serverlessに感謝している.静的サイトの他のいくつかのパターンは、私たちが克服するのを助けることができます.