Closed6

Next.jsブログカード実装

Hiroki KamedaHiroki Kameda

やるべきこと

  1. 記事を取得する
  2. aタグのURLの取得
  3. カードにしたいURLとそうでないURLに分ける
  4. URLからtext/htmlデータを取得
  5. 取得したtext/htmlデータから該当するmetaタグを取得
  6. title, description, imageにあたる情報を取り出し配列として格納
  7. 配列をコンポーネントに返す
  8. コンポーネントをhtmlに置き換える
Hiroki KamedaHiroki Kameda

2. aタグのURLを取得

    // 2. カードに変換したいリンクのURLを配列として取得 ===========================
    // 行ごとに配列にする
    const lines = article.split("\n");
    const links = [];
    // URLの取得
    lines.map(line => {
        if (line.indexOf("http://") === 0) links.push(line);
        if (line.indexOf("https://") === 0) links.push(line);
    });

https://qiita.com/iwato/items/183e6dd676bf547ea341

Hiroki KamedaHiroki Kameda

8. HMTLコンポーネントを置き換える

html-react-parserを使って単独のaタグをコンポーネントに置き換える

//単独のaタグ判定
    const replace = (node) => {
      if (node.name === "a" && node.parent?.name === "p" && node.parent?.children.length === 1) {
        return (
          <a {...node.attribs} rel="noreferrer" data-label="true">
            {domToReact(node.children)}
          </a>
        );
      }
    };
このスクラップは2021/12/17にクローズされました