astro theme cody
v2.0.0
Astro で構築されたミニマルなブログ テーマ。自分のブログを始めたい人のための、すばやく簡単なスターター ビルドです。
デモを見る · バグを報告する · 機能をリクエストする
モチベーション
主な特長
デモ
クイックスタート
コマンド
ウェブサイトの設定
サイト構成、ソーシャルメディアリンク、ナビゲーションバーリンク
投稿とプロジェクトの追加
多言語サポート
展開する
追加機能
クレジット
すでに非常に多くのブログテーマが存在していますが、ターミナル/開発の雰囲気を醸し出し、他のテーマにはないいくつかの機能を備えたテーマが必要でした。
アストロ v4 ファースト
TailwindCSS ユーティリティ クラス
アクセシブルでセマンティックな HTML マークアップ
レスポンシブかつSEOフレンドリー
多言語サポート
ダーク / ライト モード、Tailwind および CSS 変数を使用
固定された投稿とプロジェクト
Astro Assets の統合による最適化された画像
MD および MDX ポスト
ページネーション
自動 RSS フィード
自動生成されたサイトマップ
Astro Icon svg アイコン コンポーネント
「トップに戻る」ボタン
ここでデモをチェックしてください。
このテンプレートから新しいリポジトリを作成します。
# npm 7+ npm create astro@latest -- --template kirontoo/astro-theme-cody # pnpm pnpm dlx create-astro --template kirontoo/astro-theme-cody
(トップに戻る)
すべてのコマンドは、プロジェクトのルート、つまりターミナルから実行されます。
| 指示 | アクション |
|---|---|
pnpm install | 依存関係をインストールします |
pnpm run dev | localhost:4321でローカル開発サーバーを起動します |
pnpm run build | 本番サイトを./dist/に構築します。 |
pnpm run preview | デプロイする前にビルドをローカルでプレビューする |
pnpm run astro ... | astro add 、 astro checkなどの CLI コマンドを実行します。 |
pnpm run astro -- --help | Astro CLI を使用してヘルプを表示する |
(トップに戻る)
サイト設定、ソーシャル メディア リンク、Navbar リンクはすべてsrc/consts.ts内に配置されます。そこで、サイトのデフォルトのタイトル、説明、言語、プロフィール、ソーシャルメディアリンク、および表示されるナビゲーションバーリンクを設定できます。
このテーマは、コンテンツ コレクションを利用して Markdown ファイルや MDX ファイルを整理し、スキーマ -> src/content/config.tsによるフロントマターの型チェックを行います。
ブログ投稿の例はsrc/content/blogに、プロジェクトの例はsrc/content/projectにあります。
| プロパティ (* = 必須) | 説明 |
|---|---|
| タイトル * | 投稿のタイトル。最大 150 文字に制限されています |
| 説明 * | 投稿の短い説明。SEO にも使用されます。最大長は 250 文字です。 |
| 公開日 * | 発行日 |
| 更新日 | 投稿がいつ更新されたかを表すオプションの日付。利用可能な場合は、この日付が公開日の代わりに投稿の順序に使用されることに注意してください。 |
| ヒーロー画像 | 投稿するためのオプションのカバー画像。 srcとaltプロパティの両方を含めます。例については、 src/content/blog/first-post.mdを確認してください。 |
| OG画像 | SEOに使用されるオプションの画像。 |
| タグ | オプションのタグを使用して、投稿をカテゴリまたはトピックに整理します。すべてのタグはyourdomain.com/tagsに表示されます。 |
| シリーズ | オプションのシリーズを使用して、投稿を一連の投稿に整理します。すべてのシリーズがyourdomain.com/seriesに表示されます。 |
| 下書き | オプションのブール値。投稿を公開から削除します。 |
| 注文 | 特定の投稿を上部に固定するための 1 ～ 5 のオプションの数値。固定された投稿は 5 件のみに制限されています |
| 隠れる | オプションのブール値。 /blogページの投稿を非表示にします。 /archiveに引き続き表示されます |
| プロパティ (* = 必須) | 説明 |
|---|---|
| タイトル * | プロジェクトのタイトル。最大 150 文字に制限されます |
| 説明 * | プロジェクトの簡単な説明。SEO にも使用されます。 |
| 公開日 * | 発行日 |
| ヒーロー画像 | プロジェクトのオプションのカバー画像。 srcとaltプロパティの両方を含めます。例については、 src/pages/projects/project-1.mdを確認してください。 |
| OG画像 | SEOに使用されるオプションの画像。 |
| スタック* | プロジェクトで使用され、アイコンとして表示されるテクノロジーのリスト。このテーマは SVG ロゴ ライブラリを使用します。icones.js.org を使用して必要なアイコンを見つけることができます。 |
| プラットフォーム | Web サイトまたはデモへのリンク |
| Webサイト | Web サイトまたはデモへのリンク |
| ギットハブ | あなたの github リポジトリ リンク |
| 下書き | オプションのブール値。プロジェクトを公開から削除します。 |
| 注文 | 特定のプロジェクトを先頭に固定するための 1 ～ 5 のオプションの数値。固定された投稿は 5 件のみに制限されています |
(トップに戻る)
ブログの多言語サポートを設定するには、Wiki を参照してください。
Astro は、Astro Web サイトをさまざまなプラットフォームに展開するための優れたドキュメントを提供します。ここで見つけることができます。
RSS フィードなどの他の機能を追加するには、Astro Recipes を確認してください。
このテーマは、アストロ カクタスとヒューゴ リゾットのテーマに基づいています。
(トップに戻る)
