dev APIとnetlify関数で最近の投稿を表示する

このポストで説明された方法はJavaScriptフレームワーク、CMS、または静的サイトジェネレーターを必要としない単純なHTMLサイトで動作しますが、これらの環境にも拡張できます.
これらの手順を使用して、任意の利用可能なAPIではなく、devだけでなく、簡単にあなたの静的サイトにNetLifyでホストされてライブデータをプルすることができます.この純粋な静的なHTMLバージョンでは、データはすべてのページ負荷で更新され、新しいポストを発行するときに起動するビルドを必要としません.
このチュートリアルのための唯一の要件は、少なくとも1つの公開されたポスト、およびNetlify ホストアカウント.
あなたが達成できることについての参照のために、ここにありますa live demo スターターのこのチュートリアルから完全なコードで作成しました.

テンプレートオプションを使用しますstarter repo あなたがちょうどあなたのdev柱を表示するサイトを得るために' n GO 'をつかむのが好きであるならば、ちょっとREADME情報をチェックしてください.
NET Lifeyでホストされている既存のプロジェクトに統合したい場合、および基本プロジェクトを拡張するのに役立つように設定する方法について説明します.

ステップ1 : dev APIキーを取得する

devでは、ログインして、APIキーを生成して生成してください

ステップ2 :環境変数を作成する

Login to Netlify そして、あなたのサイトを選択し、設定内でDEVTO あなたのdev APIキーである値で.

ステップ3 : netlify関数を作成する

Netlify functions それ以外の場合は本当にスタティックサイトであるAPI上で安全にAPIを問い合わせることができます.
まず、netlify関数を格納するディレクトリを作成します.これはnetlify設定関数のいずれかを定義します.netlify.toml netlifyが存在するようにファイルを処理します.
例 netlify.toml 定義された関数ディレクトリを持つファイル

[build]
  # Directory with the serverless Lambda functions to deploy to AWS.
  functions = "functions"

シンプルにするにはfunctions/devto.js プロジェクトのルートで.
JavaScriptを使用して機能を記述し、Axiosを使用して、dev APIから投稿を取得します.
Axiosはあなたのローカルには必要ありませんpackage.json netlifyは関数の処理に含まれます.しかし、必要とすることから始めます.

const axios = require("axios");

次に、ユーザの公開された記事のベースAPI URLで変数を作成します9 返り値:

const apiRoot = "https://dev.to/api/articles/me/published?per_page=9";

次に、プライマリ関数ハンドラを作成します.これはかなり柔軟です、キーは我々が我々の終点に表示されるものを返すということですcallback ハンドラに渡される関数.
Axiosは、dev APIの結果を得るために使用され、カスタマイズされたAPIで表示したいものをカスタマイズするためにそれらをマップします.私たちはtitle , url , description , and tags . 私たちはjoin でtag_list 表示用の単純な文字列を作成するには

exports.handler = async (event, context, callback) => {
  try {
    const { data } = await axios.get(apiRoot, { headers: { "api-key": process.env.DEVTO } });

    let response = [];

    // Grab the items and re-format to the fields we want
    if (data.length) {
      response = data.map((item) => ({
        title: item.title,
        url: item.url,
        description: item.description,
        tags: item.tag_list.join(", "),
      }));
    }
    callback(null, {
      statusCode: 200,
      body: JSON.stringify(response),
    });
  } catch (err) {
    callback(err);
  }
};

信用Raymond and Andy その実現は、私を正しい方向に導くのを助けました

ステップ4 :機能を公開する

ブランチ配置が有効になっていない場合は、プレビューの展開で機能と結果を確認できるようにします.それはNetlifyの超素晴らしい機能です、そして、あなたは設定からそれを使用するために更新することができます.あなたは確かにこの更新プログラムを作った後に復帰することができます.
変更をコミットすることができます.ビルドが発行されると、展開URLをクリックしてプレビューURLを起動できます.
一度公開されたすべての機能は、以下の形式でサイトから入手できます.[preview-url]/.netlify/[functionsdir]/[functionname]このためには、次のようにします.[preview-url]/.netlify/functions/devtoペイロードの例は次のようになります.

[
  {
    "title": "CSS-Only Accessible Dropdown Navigation Menu",
    "url": "https://dev.to/5t3ph/css-only-accessible-dropdown-navigation-menu-1f95",
    "description": "This is the seventh post in a series examining modern CSS solutions to problems I've been solving ov...",
    "tags": "css, html, webdev, a11y"
  },
  // ...and so on
]

ローカルテストデータ

Corsのため、ローカルビルドからリモートエンドポイントを取得できません.
これで2つのオプションがあります.結果をローカルのファイルにコピーしてテストしたり、セットアップをしたりしますNetlify CLI ローカル関数をビルドする.
私はそれがより初心者に優しいとして、ローカルデータオプションを続行するつもりです.
そのため、エンドポイントの内容をローカルファイルにコピーしますpostdata.json を使用すると、.gitignore . 次のステップを構築するためにこのファイルを参照します.

ステップ6 : netlifyエンドポイントからデータを取得する

あなたのウェブサイトプロジェクトで新しいJavascriptファイルを作成します.posts.js .
まず、netlifyエンドポイントURLの値を保持する変数を設定しますwindow.location.port 値をローカルのビルドと変更し、ローカルのテストデータファイルを指すように変更します.

let postsApi = "/.netlify/functions/devto";

// Use local test data if not live site
if(window.location.port) {
  postsApi = "/js/postdata.json";
}

次に、使用しますfetch 結果を得るには、文字列化されたデータをJSONに変換し、次に次の関数をカスタム関数に渡します.

fetch(postsApi, {
  method: "GET",
})
  .then((response) => response.json())
  .then((data) => {
    // Pass to post template and output function
    createPostList(data);
  })
  .catch((error) => {
    console.error("Error:", error);
  });

ステップ7 :投稿プレースホルダを定義する

HTMLファイル内の出力の場所を定義する必要があります.
ポストを表示するには、次のプレースホルダを作成します.<div class="posts"></div>重要な部分はプレースホルダを見つけるために使うクラスです.あなたの選択、またはクラスのそれを更新することができますid あなたが好むならば.
その後、先に行くとスクリプトタグのソースを追加するposts.js 閉じる前にHTMLファイルの最後に</body> タグ<script src="js/posts.js"></script>

ステップ8 :表示機能を作成する

バック・インposts.js , ファイルの先頭にある最初のことは、プレースホルダを参照する変数を作成することです.

const postList = document.querySelector(".posts");

それから、それを書く時間ですcreatePostList 関数.
それが通過されていることを思い出してくださいbody すでにカスタマイズされたデータの中で、私たちはそれぞれをマップしますpost , 使用destructuring 簡単にポストデータの各部分の値へのアクセスを得るために.
次に、テンプレートリテラルを使ってテンプレートを定義し、データをli と他の適切なHTML要素.

const createPostList = (posts) => {
  const items = posts.map((post) => {

    const {
      title,
      url,
      description,
      tags
    } = post;

    return `<li class="card">
              <div class="card__content">
                <a href="${url}" class="card__title">${title}</a>
                <p>${description}</p>
                <em>${tags}</em>
              </div>
            </div>
          </li>`;
  });

  const list = `<ul class="card-wrapper" role="list">${items.join("")}</ul>`;

  postList.innerHTML = list;
  postList.classList.add("loaded");
}

この関数はli into ul , そして最後に完成したリストをプレースホルダにinnerHTML , とloaded データが存在するならば、あなたが起ころうとするどんなCSSのためのクラスでも.

オプション:最小カードレイアウト

あなたがそれを必要とするならば、ViewPortサイズに従って1 - 3の自動列でCSSグリッドを置くためにCSS Gridを使用する応答的な「カード」を生産する最小限のCSSはここにあります

.posts {
  // Reduce jarring effect when posts loaded and height adjusts if you have other elements on your page
  min-height: 60vh;
  transition: 320ms opacity ease-in;
  opacity: 0;
}

.posts.loaded {
  // Fade in to make appearance more pleasant
  opacity: 1;
}

.card-wrapper {
  display: grid;
  grid-gap: 2em;
  grid-template-columns: repeat(auto-fit, minmax(25ch, 1fr));
  padding-left: 0;
  list-styles: none;
}

.card {
  display: flex;
  flex-direction: column;
  border-radius: 8px;
  background-color: #fff;
  box-shadow: 0 3px 5px rgba(0, 0, 0, 0.18);
}

.card__title {
  margin-bottom: 1rem;
  color: blue;
  text-decoration: none;
}

.card__content {
  position: relative;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  padding: 24px;
}

.card__content p {
  line-height: 1.4;
  margin: 0 0 1rem;
}

.card__content *:last-child {
  margin-top: auto;
}

ステップ8 :コミットとプレビュー展開

あなたの変更をコミットして、もう一度NetLifyブランチプレビューについてレビューしてください.
それがそうするならば、残っているすべてはあなたが準備ができているとき、生きているサイト配備のためにあなたのマスター支店に合併することです!🚀

APIオプションとカスタマイズ

返還郵便番号

オープンfunctions/devto.js そして$apiRoot 変数変更per_page 値.dev APIは1000までの値を許容します.これは、ページネーションを処理するために拡張することができます.

返り値

オープンfunctions/devto.js 生成されたマップで、必要に応じて値を追加または削除します.返されたAPIオブジェクトのサンプルです.

テンプレートの変更

で使用されるマークアップについて何かを変更することができますcreatePostList 関数.
表示する追加API値を追加する場合は、前のセクションを確認してください.
IE 11またはサポートの下で必要な場合はjs/posts.js 通してonline Babel compiler POSTテンプレートを作成するために使用するテンプレートリテラルに別の方法を生成します.