astro theme cactusダウンロード - astro theme cactusソースコードダウンロード

astro theme cactus

その他のカテゴリー

v5.0.0

ダウンロード

アストロカクタス

Astro Cactus は、Astro フレームワークで構築されたシンプルで独自のスターターです。使いやすいブログやウェブサイトの作成にご活用ください。

主な特長

アストロ v5 ファースト
TailwindCSS ユーティリティクラス
アクセシブルでセマンティックな HTML マークアップ
レスポンシブかつSEOフレンドリー
ダーク / ライトモード、Tailwind および CSS 変数を使用
MD および MDX の投稿とメモ
- 忠告を含む
開いたグラフ PNG イメージを作成するためのSatori
自動 RSS フィード
ウェブメンション
自動生成:
- サイトマップ
- ロボット.txt
- Webアプリマニフェスト
Pagefind 静的検索ライブラリの統合
Astro Icon svg アイコンコンポーネント
Expressive Code のコードブロックと構文ハイライター

デモ

Netlify でホストされているデモをチェックしてください

クイックスタート

このテンプレートから新しいリポジトリを作成します。

 # npm 7+
npm create astro@latest -- --template chrismwilliams/astro-theme-cactus

# pnpm
pnpm dlx create-astro --template chrismwilliams/astro-theme-cactus

プレビュー

ライトテーマモードのアストロテーマサボテン

ダークテーマモードのアストロテーマサボテン

コマンド

pnpm を選択した npm/yarn に置き換えます。

指示	アクション
`pnpm install`	依存関係をインストールします
`pnpm dev`	`localhost:3000`でローカル開発サーバーを起動します
`pnpm build`	運用サイトを`./dist/`に構築します。
`pnpm postbuild`	ブログ投稿の静的検索を構築するための Pagefind スクリプト
`pnpm preview`	デプロイする前にビルドをローカルでプレビューする
`pnpm sync`	`src/content/config.ts`の構成に基づいてタイプを生成します。

設定する

基本的なサイトのメタデータの構成ファイルsrc/site.config.tsを編集します。
ファイルastro.config.tsを更新する
- 重要: 独自のドメインを持つサイトプロパティ。
- astro-webmanifest オプション
/publicフォルダー内のファイルを置換および更新します。
- icon.svg - ファビコンとマニフェストアイコンを作成するためのソースとして使用されます
- social-card.png - デフォルトの og:image として使用されます
ファイルsrc/styles/global.css独自の明るいスタイルと暗いスタイルで変更します。
- Expressive Code によって生成されたマークダウンコードブロックのテーマを変更することもできます。 Astro Cactus には、暗いテーマ (dracula) と明るいテーマ (github-light) の両方があり、 src/site.config.tsにあります。ここでその他のテーマとオプションを見つけることができます。
src/components/SocialList.astroのソーシャルリンクを編集して、メディアプロファイルを追加/置換します。 Astro Icon の説明に従って、アイコンは @ icones.js.org で見つけることができます。
.md/mdx ファイルを使用して、 src/content/post/およびsrc/content/note/内でブログの投稿とメモを作成/編集します。詳細については、以下を参照してください。
- サイトに Webmention を追加するには、この投稿をお読みください。
OG画像:
- Satori ライブラリが作成する生成画像のスタイルを変更したい場合は、 src/pages/og-image/[slug].png.tsを開いてマークアップ関数を開き、必要に応じて html/tailwind-classes を編集できます。。このプレイグラウンドを使用してデザインを支援できます。
- アセットへのリンクを含む ogImage プロパティをフロントマターに追加することで、独自の og イメージを作成し、Satori の生成をスキップすることもできます。例はsrc/content/post/social-image.mdにあります。フロントマターの詳細については、こちらをご覧ください
オプション:
- フォント: このテーマは、 body 要素を、グローバル CSS ファイルsrc/styles/global.cssにあるフォントファミリfont-monoに設定します。フォントを変更するには、バリアントfont-monoを削除します。その後、TailwindCSS はデフォルトでfont-sansフォントファミリスタックを使用します。

更新中

テンプレートをフォークした場合は、そのフォークを自分のプロジェクトと同期できます。自分のプロジェクトが失われるため、「変更の破棄」をクリックしないように注意してください。

テンプレートリポジトリがある場合は、ここで説明するように、このテンプレートをリモートとして追加できます。

投稿とメモの追加

このテーマは、コンテンツコレクションを利用してローカルの Markdown および MDX ファイルを整理し、スキーマ -> src/content/config.tsを使用してフロントマターの型チェックを行います。

投稿/メモの追加は、.md(x) ファイルをsrc/content/postやsrc/content/noteフォルダーに追加するだけで簡単です。そのファイル名はスラッグ/URL として使用されます。このテンプレートに含まれる投稿は、フロントマターを構成する方法の例として提供されています。さらに、Astro ドキュメントにはマークダウンページに関する詳細なセクションがあります。

ポストフロントマター

プロパティ (* 必須)	説明
タイトル *	説明不要です。投稿へのテキストリンク、投稿ページの h1、およびページのタイトルプロパティとして使用されます。最大長は 60 文字で、 `src/content/config.ts`で設定されます。
説明 *	上記と同様に、SEO 説明プロパティとして使用されます。最小長は 50 文字、最大長は 160 文字で、ポストスキーマで設定されます。
公開日 *	これも非常にシンプルです。日付形式/ロケール (現在はen-GB )を変更するには、 `src/site.config.ts`の日付オプションを更新します。必要に応じて、コンポーネント`<FormattedDate>`に追加のオプションを渡すこともできることに注意してください。
更新日	これは、投稿がいつ更新されたかを表すオプションの日付で、publishDate と同じ形式です。
タグ	タグは作成された投稿ではオプションです。新しいタグは`yourdomain.com/posts`および`yourdomain.com/tags`に表示され、 `yourdomain.com/tags/[yourTag]`ページが生成されます。
表紙画像	これは、投稿の上部にカバー画像を追加するオプションのオブジェクトです。 `src` : " path-to-image " と`alt` : " image alt " の両方を含めます。 `src/content/post/cover-image.md`で例を確認できます。
OG画像	これはオプションのプロパティです。このプロパティが提供されていない投稿ごとに、OG 画像が自動的に生成されます。特定の投稿用に独自の投稿を作成したい場合は、このプロパティと画像へのリンクを含めると、テーマは画像の自動生成をスキップします。
下書き	スキーマではデフォルトで false に設定されているため、これはオプションのプロパティです。 true を追加すると、投稿はさまざまな場所で実稼働ビルドから除外されます。 getAllPosts() 呼び出し、OG イメージ、RSS フィード、および生成されたページ。 `src/content/post/draft-post.md`で例を表示できます。

注意事項

プロパティ (* 必須)	説明
タイトル *	文字列、最大長は 60 文字。
説明	ヘッドメタディスクリプションプロパティに使用されます。
公開日 *	オフセットが許可された ISO 8601 形式。

フロントマターのスニペット

Astro Cactus には、投稿とメモのフロントマター「スタブ」を作成する便利な VSCode スニペットが含まれています。ここにあります -> .vscode/post.code-snippets 。新しく作成した .md(x) ファイルにfrontmatter単語を入力してトリガーします。 Visual Studio Code スニペットは、Mac では (⌃Space)、Windows では (Ctrl+Space) を使用して IntelliSense に表示されます。

ページ検索検索

この統合により、ブログ投稿やメモを検索するための静的検索機能が提供されます。現在の形式では、pagefind はサイトが構築された後にのみ機能します。このテーマは、Astro がサイトを構築した後に実行するポストビルドスクリプトを追加します。ビルドとポストビルドの両方を実行すると、ローカルでプレビューできます。

検索結果には、投稿とメモのページのみが含まれます。他のページまたはすべてのページを含めたい場合は、 src/layouts/BlogPost.astroおよびsrc/components/note/Note.astroにある記事タグの属性data-pagefind-body削除または再配置します。

また、ブログ投稿の前付けに追加されたタグで投稿をフィルタリングすることもできます。これを削除したい場合は、 src/components/blog/Masthead.astroのリンクからデータ属性data-pagefind-filter="tag"を削除します。

この統合を含めたくない場合は、コンポーネントsrc/components/Search.astroを削除し、 @pagefind/default-uiとpagefindの両方を package.json からアンインストールします。ここからポストビルドスクリプトも削除する必要があります。

ここで示すように、Web コンポーネントスタイルを遅延読み込みすることで、CSS の初期 CSS ペイロードを減らすことができます。