ブログのデザインを新しくしました

2022-12-06 2022-12-05

ブログのデザインを新しくしました

ブログのデザインを作りこみました。おしゃれで見やすくなっただけでなく、カテゴリ検索やアーカイブ検索もできるようにしました。Next.js のコンポーネント機能のおかげで、かなり簡潔にコードを記述することができます。

Before before

↓

After after

地味に HTML の構造も見直しています

今回の収穫として、<h1> タグやメタタグの配置方法を学べたことが大きいと思います。これは SEO 対策としてかなりのアプローチになったはず。

SSG を使うと一般的な動的サイトと比べて表示速度が非常に速いはずなのでその点は問題ありませんが、コーディングだけではサイトの構造がおかしい部分に気づけなかったりします。

こういうの作る人は HTML の基礎的な知識も大事です。地味ではありますが、知識は一生もの。地道に経験を重ねると人間として大きくなれる気がします。

ちなみにコードのハイライト表示もご覧の通りばっちりです

src/lib/api.ts

// カテゴリー一覧と件数を取得する
export const getCategories = () => {
  const categoryDic: { [key: string]: number } = {};
  getAllPosts().forEach((post) => {
    categoryDic[post.category] = (categoryDic[post.category] || 0) + 1;
  });
  const categories = Object.keys(categoryDic)
    .sort()
    .map((key) => {
      return { label: key, number: categoryDic[key] };
    });
  return categories;
};

react-syntax-highliter というプラグインをベースに多少手を入れて作っています。これでいくらでも技術ブログを書くことができますね。

作り方は追って記事にしていきます。

react-syntax-highlighter

syntax highlighting component for react with prismjs or highlightjs ast using inline styles. Latest version: 15.5.0, last published: 9 months ago. Start using react-syntax-highlighter in your project by running `npm i react-syntax-highlighter`. There are 987 other projects in the npm registry using react-syntax-highlighter.

https://www.npmjs.com/package/react-syntax-highlighter