Closed6
Next.jsブログカード実装
参考記事
やるべきこと
- 記事を取得する
- aタグのURLの取得
- カードにしたいURLとそうでないURLに分ける
- URLからtext/htmlデータを取得
- 取得したtext/htmlデータから該当するmetaタグを取得
- title, description, imageにあたる情報を取り出し配列として格納
- 配列をコンポーネントに返す
- コンポーネントをhtmlに置き換える
1.記事の取得
getstaticpropsで取得
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);
});
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>
);
}
};
実装して記事書いたのでclose
このスクラップは2021/12/17にクローズされました