事前準備

Qiita記事一覧をたとえば自ブログなどに埋め込むには,まずQiitaで個人用アクセストークンを取得する必要があります.
まずは右上の自分のプロフィールアイコンから、
設定>アプリケーション>新しくトークンを発行する を選択し,read~(つまり読み込み)にチェックをします.
このとき,必ずトークンをコピペしといてください.

方法

メインとなるhtmlファイルの埋め込みたい箇所に,

index.html

<div id="qiita-posts">
    <script src="qiita.js"></script>
</div>

を追加します.
タグのアイコンをfont awesomeを使って表示するのでhtmlファイルのヘッダに

<head>
    ~省略
    <script src="https://kit.fontawesome.com/b740cfc262.js" crossorigin="anonymous"></script>
</head>

のように忘れずに追加します.

次に,自分のローカルに下記のqiita.jsファイルを作成します.

qiita.js

// Qiitaユーザー名を定数として定義
const userId = 'soburi06';

// APIエンドポイントを定数として定義（${}内には変数userIdが入ります）
const url = `https://qiita.com/api/v2/users/${userId}/items`;

// 投稿一覧を表示する要素のIDを取得して、container定数に代入する
const container = document.getElementById('qiita-posts');

// fetch関数によってQiita APIからデータを取得
fetch(url, {
  headers: {
    // Authorizationヘッダーにアクセストークンを指定
    'Authorization': 'Bearer ここにトークントークントークン'
  }
})
  // 読み込んだレスポンスの内容をJSON形式に変換してリターンする
  .then(response => response.json())
  // JSON形式のデータを引数にしてコールバック関数を実行
  .then(data => {
    // HTMLの文字列を作成するための変数htmlを定義
    let html = '';
    // forEachメソッドで投稿データ一つずつループ処理を行う
    data.forEach(post => {
      // テンプレートリテラルを使ってHTMLの文字列を作成
      html += `
              <div class="qiita-post">
                <a class="qiita-link" href="${post.url}" target="_blank" rel="noopener noreferrer"></a>
                <p>${post.title}</p>
                <div class="tags">
            `;
      
      // 投稿のタグ情報をループ処理でタグ名をHTML書式に追加する
      post.tags.forEach(function(tag) {
        html+= `<a class="tag-name" href="https://qiita.com/tags/${tag.name}">`+ tag.name + '</a>';
      });
      
      html += `   </div>
                <div class="date">${post.created_at.slice(0, 10)}</div>
              </div>
            `;
    });
    
    // 完成したHTML文字列を要素に挿入
    container.innerHTML = html;
  })
  // エラー時のコールバック関数
  .catch(error => console.error(error));

cssでは,

#qiita-posts {
    display: flex;
    flex-wrap: wrap;
}
.qiita-post {
    border-radius:1vw;
    position:relative;
    width: 29%;
    margin: 1%;
    padding: 1%;
    background-color: #3d4144;
    box-shadow:0.3vw 0.3vw #8c8b8d;
}
.qiita-post:hover{
    box-shadow:none;
    transition:0.2s;
    transform:translateX(0.3vw)translateY(0.3vw);
}
.qiita-post .qiita-link{
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: block;
    margin:0;
}

.qiita-post p {
    display: block;
    font-size: 1vw;
    font-weight: bold;
    margin:0;
    color: #ffffff;
    text-decoration: none;
}
.qiita-post .tag{
    display:flex;
}

.tag-name::before{
    font-family: "Font Awesome 5 Free";
    content: "\f02b";

    -webkit-font-smoothing: antialiased;
    display: inline-block;
    font-style: normal;
    font-variant: normal;
    text-rendering: auto;
    line-height: 1;
    padding-right:0.1em;
    font: var(--fa-font-solid);
    color:#ffffff;
}

.qiita-post .tags .tag-name{
    display:inline-block;
    font-size:0.8vw;
    font-weight:lighter;
    position:relative;
    z-index:1;
    vertical-align:text-top;
    padding-left:0.2em;
    padding-right:0.2em;
    color:#ffffff
}
.qiita-post .tags .tag-name:visited{
    color:#d4d4d4
}
.qiita-post .date {
    display:flex;

    font-size: 14px;
    color: #999;
    text-align:right;
    position:absolute;
    right:0.7vw;
    bottom:0.2vw;
}

とか適当にデザインを決めて貰えれば,

このようにQiitaの記事一覧が埋め込むことができました.
タグのurlはQiitaのタグ記事一覧に飛びますが,自分の記事をタグでソートしたページに飛ぶように改造すると便利かと思います.

QiitaAPIを利用してhtmlにQiita記事一覧を「カッコよく」埋め込むには

事前準備

方法

引用