blog

情報システム部「MISC」のホームページを作成しました!

ブログ
Default MISC OGP

公開日:2024/06/22

更新日:2024/07/02

#はじめに

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

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

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

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

#技術スタック

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

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

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

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

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

Svelteでは、

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

と配置します。

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

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

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

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

TypeScript

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が代入されます。
こうすることによって存在しない不特定なページに対してそれぞれ内容を作ることができます。

MISC © 2024 Copyright.