SvelteKitをブログ用に使う時のTips

Demo

SvelteKitのRouteについて

SvelteKitのURLパスはディレクトリベースです。src/routes/blog/2022-12-01/+page.svelteにブログのコンテンツを入れるとhttp://localhost:5173/blog/2022-12-01でアクセスできますがブログのページごとにディレクトリーを作るとなると少し面倒ですので良い方法がありますのでここで紹介します。

インストール

ここではMarkdownを使いますのでここでインストールしておきましょう。

npm create svelte@latest my-web
cd my-web
npm install
npm i -D mdsvex

mdsvex.config.jsを作って以下のコードを入れてください。

import { defineMDSveXConfig as defineConfig } from 'mdsvex';

const config = defineConfig({
  extensions: ['.svelte.md', '.md', '.svx'],

  smartypants: {
    dashes: 'oldschool'
  },

  remarkPlugins: [],
  rehypePlugins: []
});

export default config;

svelte.config.jsに以下のコードを入れてください。

import preprocess from 'svelte-preprocess';
import adapter from '@sveltejs/adapter-auto';
import { mdsvex } from 'mdsvex';
import mdsvexConfig from './mdsvex.config.js';

/** @type {import('@sveltejs/kit').Config} */
const config = {
  extensions: ['.svelte', ...mdsvexConfig.extensions],
  kit: {
    adapter: adapter()
  },

  preprocess: [
    preprocess({
      postcss: true
    }),
    mdsvex(mdsvexConfig)
  ]
};

export default config;

これでMarkdownのファイルが使えます。
Serverを立ち上げましょう。

npm run dev

以下のコードでTailwindCSSとFlowbite-Svelteを使っていますが興味のある方はインストールの仕方をこのリンクからみてください。

[slug]/+page.jsと[slug]/+page.svelteの作成

次に以下の図のようにファイルを作成してください。pagesはブログと同じ用に作くってください。

[slug]/+page.jsにはこのコードを:

export async function load({ params }) {
  const post = await import(`../${params.slug}.md`);
  const { title, dir } = post.metadata;
  const content = post.default;

  return {
    content,
    title,
    dir
  };
}

${params.slug}でblogやpagesなどのslugをurlから引き出して一つ上のディレクトリーからmarkdownのファイルを全てインポートしています。そのインポートされたファイルからtitle, dir, contentなどをvariableにいれています。titleやdirは好きなものを使うことができます。

[slug]/+page.svelteにはこのコードを:

<script lang="ts">
  import type { PageData } from './$types';
  export let data: PageData;
</script>

<svelte:component this={data.content} />

+page.jsで引き出したvariablesは+page.svelteでdataとして使えますのでここではそれをsvelte:componentで動的にレンダリングしています。

サンプルページの作成

次にarticle-1.md, article-2.mdなどのmarkdownのファイルを作ってみましょう。

---
dir: blog
title: 'Awesome article 1'
---

<script>
  import { Img, Heading, P } from 'flowbite-svelte'
</script>

<Img src="/images/[e-mail]" alt="sample 1" size="max-w-lg" alignment="mx-auto" />

<Heading class="p-8" tag="h1" customSize="text-3xl">{title}</Heading>

<P class="px-8 py-4">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Amet cursus sit amet dictum sit. Quis enim lobortis scelerisque fermentum dui faucibus in. Mattis vulputate enim nulla aliquet porttitor lacus luctus accumsan. Ipsum dolor sit amet consectetur adipiscing elit. Euismod nisi porta lorem mollis aliquam ut porttitor. Tortor consequat id porta nibh. Tortor condimentum lacinia quis vel eros donec ac odio. Elementum sagittis vitae et leo duis ut diam quam nulla. Vel turpis nunc eget lorem.
</P>

ここではTailwindCSSとFlowbite-SvelteのTagを使っていますがインストールされてない方はHTMLのTagを使ってください。

titleやdirなどのvariablesは---内で指定してください。script tagもmarkdownファイル内で使えます。

Demoはレスポンシブなサイドバーメニューがついていますがファイルの構成は全てこの記事と同じです。
興味のある方はrepoを参考にしてください。