blog

#はじめに

こんにちは！
この度、情報システム部「 MISC 」 では、新たなホームページを作成しました！

元々ホームページは存在していたのですが、運用が続かなかったりうやむやになってしまい、いっそのこと一新しよう！ということでこのサイトが作成されました。

折角情報システム部のホームページができたので、第一回となるこのブログでは、ホームページ作成に関する技術的な話をしようと思います！

※詳しい内容は GitHub のリポジトリ にもありますのでそちらもどうぞ

#技術スタック

• Svelte
• SvelteKit
• TypScript
• SCSS
• microCMS
• Storybook

#動的なルーティングについて

皆さんがご覧になる多くのブログには、記事が複数あると思います。しかし、それらを個々にページとして作成していては、たまったもんじゃありません。

管理も複雑化したり、デザインを変えようと思ったら全てのページで変えなければいけませんからね。

そんなときに使うのが、動的ルーティングです。

Svelteでは、

src/routes/blog/[slug]/+page.svelte

と配置します。

この時の[slug]が動的ルーティングで重要になります。

他のページから、blog/から続くリンクを受け取った時、その値をparamsとしてページで扱うことができます。

例えば、下記のようにすることで、記事ごとに中身を変えることができます。

src/routes/blog/[slug]/+page.ts

import { error } from '@sveltejs/kit';

/** @type {import('./$types').PageLoad} */
export function load({ params }) {
  const res = await getContentDetail("blogs", slug);
}
  error(404, 'Not found');
}

例えば、<a herf="/blog/blog1">というリンクが押された時、parmsにはblog1が代入されます。
こうすることによって存在しない不特定なページに対してそれぞれ内容を作ることができます。