sveltekit blog mdx
1.0.0
SvelteKit ブログ スターターは、次の Svelte ブログ サイトを始めるのに役立ちます。このプロジェクトは、すぐに使えるプログレッシブ Web アプリ (PWA) を作成します。ロゴなどを入れてカスタマイズするだけです。
内容とカスタマイズ方法の説明については、Rodney Lab サイトの Sveltekit Blog Starter ブログ投稿を参照してください。質問はそのページの下部にあるコメントに書き込んでください。
クイックスタートは次のとおりです。
sveltekit-blog-mdxを利用して、Svelte ブログ サイトを構築するために必要なものがすべて揃っています。
これが表示されている場合は、この手順をすでに実行している可能性があります。おめでとうございます！
git clone https://github.com/rodneylab/sveltekit-blog-mdx.git my-new-mdsvex-blog
cd my-new-mdsvex-blog
pnpm install # or npm install
npm run devスターターは、 vite-imagetoolsプラグインを使用して応答性の高い画像を作成し、キャッシュします。どの画像を含めたいかが事前にわかっている場合、これは簡単に使用できます。使用したいページにインポートするだけです。
import featuredImageSrc from '$lib/assets/home/home.jpg' ;次に、 vite-imagetoolsプラグインがイメージを生成してハッシュします。 src/routes/index.svelteの例を参照してください。
ブログ投稿ごとに異なるアイキャッチ画像を設定する例は、管理しやすいとはいえ、少し複雑になります。この場合、スクリプト ( generate-responsive-image-data.jsを参照) を実行して、すべてのブログ投稿を反復処理し、ブログ投稿の前付けから注目の画像を取得できます。このスクリプトは、ブログ投稿ごとに 1 つずつ、生成された JavaScript ファイルに必要なインポートを出力できます ( src/lib/generatedディレクトリを参照)。最後に、ブログ テンプレートの読み込み関数でその JavaScript ファイルを動的にインポートできます。
付属のスクリプトを次のようなコマンドで実行するには、次のように入力します。
pnpm run gen:imagesこれは、新しいブログ投稿を追加するたびに行う必要があります。また、ページ読み込み中のコンテンツ レイアウトのシフトを最小限に抑えるために、低解像度のプレースホルダーも生成されます。
スクリプトでブログ投稿画像を検索するには、 src/lib/assets/blogフォルダーの下に画像を追加します。そのフォルダー内に、投稿スラッグと一致する名前の新しいフォルダーを作成し、画像を新しいフォルダーに追加します。ファイルの名前は、ポスト フロントマター (たとえば、featuredImage の場合) に使用する名前と一致する必要があります。
ユースケースに応じてスクリプトを微調整する必要がある場合があります。どうすれば改善できるか教えてください。
src/routes/sitemap.xml/+server.jsに生成されます。このファイルを微調整して出力を調整します。正しい URL がサイト マップに出力されるように、サイトの URL が.envでPUBLIC_SITE_URL変数として定義されていることを確認してください。
スターターは、オフライン可用性のための Service Worker や HTML ヘッド セクションへのメタの追加など、ほとんどの PWA 構成を自動的に生成します。 PWA には、さまざまなデバイスと互換性のある、さまざまなサイズのロゴ (ファビコン用) を詳細に記述したマニフェスト ファイルが必要です。アイコンのセットをassets/に生成する必要があります。
無料のオープンソース ツールを使用して、入力 SVG からこれらを生成および最適化できます。このリソースには、生成を自動化するために実行できるシェル スクリプトが含まれています。
PWA の HTML メタは、 src/lib/components/PWA.svelteのコンポーネントに追加されます。
src/lib/config/website.jsを編集することで、マニフェスト (アイコン ファイル パスを含む) をカスタマイズできます。次の変数は、生成されたmanifest.jsonファイルに入力されます。
siteTitle 、siteShortTitle 、siteUrl 、backgroundColor 、themeColor 。詳細については、SvelteKit のプログレッシブ Web アプリに関する記事を参照してください。
npm run buildアダプターをインストールしたかどうかに関係なく、
npm run preview使用してビルドされたアプリをプレビューできます。これは、実稼働環境でアプリを提供するために使用しないでください。
.
├── README.md
├── generate-responsive-image-data.js
├── jsconfig.json
├── netlify.toml
├── package.json
├── src
│ ├── app.html
│ ├── content
│ │ └── blog
│ │ ├── best-medium-format-camera-for-starting-out
│ │ ├── folding-camera
│ │ └── twin-lens-reflex-camera
│ ├── global.d.ts
│ ├── hooks.server.js
│ ├── lib
│ │ ├── assets
│ │ │ ├── blog
│ │ │ └── home
│ │ ├── components
│ │ │ ├── BannerImage.svelte
│ │ │ └── ...
│ │ ├── config
│ │ │ └── website.js
│ │ ├── constants
│ │ │ └── entities.js
│ │ ├── generated
│ │ │ └── posts
│ │ ├── styles
│ │ └── utilities
│ │ ├── blog.js
│ │ ├── file.js
│ │ └── image.js
│ ├── routes
│ │ ├── +error.svelte
│ │ ├── +layout.js
│ │ ├── +layout.svelte
│ │ ├── +page.js
│ │ ├── +page.svelte
│ │ ├── [slug]
│ │ │ ├── +layout.svelte
│ │ │ ├── +page.js
│ │ │ └── +page.svelte
│ │ ├── contact
│ │ │ └── +page.svelte
│ │ ├── manifest.webmanifest
│ │ │ └── +server.js
│ │ └── sitemap.xml
│ │ └── +server.js
│ └── service-worker.js
├── static
│ ├── assets
│ ├── favicon.png
│ ├── icon.svg
│ ├── robots.txt
│ └── sitemap.xml
└── svelte.config.js
src/contentsrc/content/blogには、ブログ投稿を配置する必要があります。サンプル コンテンツを削除して、あなたの世界観に置き換えるだけです。投稿ごとに個別のフォルダーがあり、投稿に固有の画像、ビデオ、その他の関連メディアをより適切に整理しておくことができます。このフォルダー名からブラウザーのパスを設定するため、フォルダーに名前を付けるときはそのことに注意してください。実際の投稿を投稿フォルダー内のindex.mdというファイルに書き込みます。ファイルの拡張子は.mdですが、その中に Svelte を書き込むことができます。srchooks.server.jsここでは、コンテンツ セキュリティ ポリシー (CSP) とその他の HTTP セキュリティ ヘッダーを定義します。これは、サーバー側でレンダリングされるアプリに効果的です。静的サイト用に CSP などを設定する方法については、SvelteKit 静的サイトの HTTP ヘッダーに関する投稿を参照してください。src/componentssrc/lib/componentsこれらはページで使用するコンポーネントです。src/lib src/lib/config/website.js便宜上、ここでサイトのタイトル、連絡先電子メール アドレス、ソーシャル メディア アカウントなどのサイトのプロパティを定義します。一部のプロパティは環境変数から取得されます。 SvelteKit の環境変数の詳細については、SvelteKit の使用開始に関する投稿を参照してください。
src/lib/styles期待どおりの動作をします。レイアウト内のスタイル設定とソースセルフホスト フォントには SCSS を使用します。
src/utilitiessrc/utilities/blog.jsこのファイルには、ブログ投稿のマークダウンを Svelte に変換するのに役立つコードが含まれています。また、フロントマター内のフィールドを抽出するのにも役立ちます (これは、ブログ投稿のindex.mdファイルの先頭に含めるメタデータです)。src/routes src/routes/[slug]/+page.jsこれは基本的にブログ投稿データのテンプレートです。これらのファイルの 1 つは、ブログ投稿ごとにビルド時に生成されます。これは、投稿の HTML の生成に使用される Svelte ファイルで必要なデータを抽出するために使用されます。
src/routes/[slug]/+page.svelte前のファイルと同様に、これらの 1 つがブログ投稿ごとに生成されます。今回は、SvelteKit がブログ投稿用の HTML と JavaScript を生成するために使用する Svelte コードです。
他のファイルのほとんどについては、「SvelteKit 入門」のブログ投稿で言及していますが、さらに説明が必要な点が不足している場合はお知らせください。
気軽に Rodney Lab マトリックス チャット ルームに飛び込んでください。
