![画像が読み込まれない場合はページを更新してみてください。](https://prod-files-secure.s3.us-west-2.amazonaws.com/a0f002b4-eec2-4df2-8737-c6ae60d92dd2/54a4bf64-0ed0-46e2-9c88-cb40f1479f07/171179514-46dafc98-b4c4-4143-b97c-8242b663763b.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Content-Sha256=UNSIGNED-PAYLOAD&X-Amz-Credential=AKIAT73L2G45HZZMZUHI%2F20240726%2Fus-west-2%2Fs3%2Faws4_request&X-Amz-Date=20240726T011334Z&X-Amz-Expires=3600&X-Amz-Signature=b224dc3f0332a246f8d9b456277e172c80449f9cec5dc63b360bf73b09129332&X-Amz-SignedHeaders=host&x-id=GetObject)
今回は記事一覧ページ、カテゴリ一覧ページにサムネイルを追加する方法についての備忘録です。
変更前は以下のような見た目です。
![画像が読み込まれない場合はページを更新してみてください。](https://prod-files-secure.s3.us-west-2.amazonaws.com/a0f002b4-eec2-4df2-8737-c6ae60d92dd2/b0c171ce-1f4e-4dc2-b933-ea129f78bd15/Untitled.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Content-Sha256=UNSIGNED-PAYLOAD&X-Amz-Credential=AKIAT73L2G45HZZMZUHI%2F20240726%2Fus-west-2%2Fs3%2Faws4_request&X-Amz-Date=20240726T011334Z&X-Amz-Expires=3600&X-Amz-Signature=28ecaae9ed08f3eb6c999c3a375e916c0e3e9c52f1957fcf34c9091bed0ecc77&X-Amz-SignedHeaders=host&x-id=GetObject)
変更後は以下のような見た目になります。
![画像が読み込まれない場合はページを更新してみてください。](https://prod-files-secure.s3.us-west-2.amazonaws.com/a0f002b4-eec2-4df2-8737-c6ae60d92dd2/7fd33a4a-cb40-4d55-ba64-1c7e2dd46c20/Untitled.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Content-Sha256=UNSIGNED-PAYLOAD&X-Amz-Credential=AKIAT73L2G45HZZMZUHI%2F20240726%2Fus-west-2%2Fs3%2Faws4_request&X-Amz-Date=20240726T011334Z&X-Amz-Expires=3600&X-Amz-Signature=bdee47e8776060e070461c0e5d8bb0146efdb3947a5737d753864cd2cc5af2cf&X-Amz-SignedHeaders=host&x-id=GetObject)
記事一覧ページにサムネイルを追加する
追加する画像は、NotionのデータベースのOGImage
を使用します。
![画像が読み込まれない場合はページを更新してみてください。](https://prod-files-secure.s3.us-west-2.amazonaws.com/a0f002b4-eec2-4df2-8737-c6ae60d92dd2/c52a758a-8d6e-44ef-b401-b5efbc609086/Untitled.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Content-Sha256=UNSIGNED-PAYLOAD&X-Amz-Credential=AKIAT73L2G45HZZMZUHI%2F20240726%2Fus-west-2%2Fs3%2Faws4_request&X-Amz-Date=20240726T011334Z&X-Amz-Expires=3600&X-Amz-Signature=5f718e56d75ea997f224e78d6af062afa84e304cb0e2321d5988b5fc0d61d167&X-Amz-SignedHeaders=host&x-id=GetObject)
まずは、サムネイルを追加するための関数をsrc\components\blog-parts.tsx
に追加します。
export const PostThumbnail = ({ post }) => (
<div className={styles.thumbnail}>
<Link href="/blog/[slug]" as={getBlogLink(post.Slug)} passHref>
<img
src={`/notion_images/${post.PageId}.png`}
width={300}
height={160}
alt="thumbnail"
/>
</Link>
</div>
)
追加する場所は以下です。
![画像が読み込まれない場合はページを更新してみてください。](https://prod-files-secure.s3.us-west-2.amazonaws.com/a0f002b4-eec2-4df2-8737-c6ae60d92dd2/089adc7a-e72d-46bc-99b6-af10edf13cf2/Untitled.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Content-Sha256=UNSIGNED-PAYLOAD&X-Amz-Credential=AKIAT73L2G45HZZMZUHI%2F20240726%2Fus-west-2%2Fs3%2Faws4_request&X-Amz-Date=20240726T011334Z&X-Amz-Expires=3600&X-Amz-Signature=b5dcd4460ca929b411341ce364f3ad0c8434b26410cd3a8d8d2a6c95045c9f7a&X-Amz-SignedHeaders=host&x-id=GetObject)
続いて、記事一覧ページsrc\pages\blog\index.tsx
に以下を追加します。
import {
BlogPostLink,
BlogTagLink,
NextPageLink,
NoContents,
PostDate,
PostExcerpt,
PostTags,
PostTitle,
PostsNotFound,
ReadMoreLink,
PostThumbnail, /*この行を追加*/
} from '../../../components/blog-parts'
import styles from '../../../styles/blog.module.css'
import * as imageCache from '../../../lib/notion/image-cache' /*この行を追加*/
posts.forEach((p) => p.OGImage && imageCache.store(p.PageId, p.OGImage))
{posts.map((post) => {
return (
<div className={styles.post} key={post.Slug}>
<div className={styles.postContair}>
<div className={styles.thumbnail}>
<PostThumbnail post={post} />
</div>
<div className={styles.postContent}>
<PostDate post={post} />
<PostTags post={post} />
<PostTitle post={post} />
<PostExcerpt post={post} />
<ReadMoreLink post={post} />
</div>
</div>
</div>
)
})}
追加する場所は以下です。
![画像が読み込まれない場合はページを更新してみてください。](https://prod-files-secure.s3.us-west-2.amazonaws.com/a0f002b4-eec2-4df2-8737-c6ae60d92dd2/7721beba-d8f9-45ef-9229-495a19565f17/Untitled.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Content-Sha256=UNSIGNED-PAYLOAD&X-Amz-Credential=AKIAT73L2G45HZZMZUHI%2F20240726%2Fus-west-2%2Fs3%2Faws4_request&X-Amz-Date=20240726T011334Z&X-Amz-Expires=3600&X-Amz-Signature=bea641f5ef7e3e49ce428ee016c637516c10a89ec8c6e1b205da376b1bb95aea&X-Amz-SignedHeaders=host&x-id=GetObject)
![画像が読み込まれない場合はページを更新してみてください。](https://prod-files-secure.s3.us-west-2.amazonaws.com/a0f002b4-eec2-4df2-8737-c6ae60d92dd2/97e44241-6cc9-4fce-ac44-7be4aa57d1eb/Untitled.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Content-Sha256=UNSIGNED-PAYLOAD&X-Amz-Credential=AKIAT73L2G45HZZMZUHI%2F20240726%2Fus-west-2%2Fs3%2Faws4_request&X-Amz-Date=20240726T011334Z&X-Amz-Expires=3600&X-Amz-Signature=4dfe190bb2e8a14150711aff14c060f523e999ae3194fa39d61f3bc9acb7935a&X-Amz-SignedHeaders=host&x-id=GetObject)
これで記事一覧ページにサムネイルが追加されます。
しかし、レイアウトが整っていないので、CSSで調整します。
サムネイルをCSSで調整する
src\styles\blog.module.css
に以下を追加します。
.post {
margin: 0 auto 100px; /*ここは変更*/
}
/*以下は追加*/
.postContair{
display: flex;
flex-direction: row;
gap: 4vh;
padding-bottom: 100px;;
border-bottom: 1px solid #ddd;
}
.thumbnail{
width:300px;
cursor: pointer;
}
.postContent{
width:100%;
}
@media (max-width: 1280px) {
.postContair {
flex-direction: column;
}
.thumbnail{
width:100%;
text-align: center;
}
}
フッターのborder
とpadding
は削除します。
.mainContent footer {
margin: 0 auto;
}
これでサムネイルの見た目を整えることができました。
その他のページにもサムネイルを追加する
上記で記事一覧ページにサムネイルを追加することができましたが、ページ数が増えた時に表示される2ページ目以降にもサムネイルを追加するためには別途、追加する必要があります。
また、各カテゴリページ、カテゴリページの2ページ目以降についても同様です。
ただし、追加する内容、追加する場所はsrc\pages\blog\index.tsx
と全く同じです。
src\pages\blog\index.tsx
に追加した内容を下記のページにも追加してください。
src\pages\blog\before\[date].tsx
src\pages\blog\tag\[tag].tsx
src\pages\blog\tag\[tag]\before\[date].tsx
終わりに
今回、無事想定通りに画像を追加することができました。
追加はできましたが、内容を完全に把握できてはいません。
追加する際には、easy-notion-blogの先駆者であるhoromi(@mineral_30)さんのリポジトリを参考にさせていただきました。
後々気づきましたが、horomiさんのブログに今回の追加に関して参考になる記事が掲載されていました。
より詳しく知りたい場合は、以下の記事と開発者のおとよさんのプルリクエスト(horomiさんの記事に詳細説明有り)を参考にしてみてください。
以上、ありがとうございました!