astrowind
1.0.0
? 2022 年と 2023 年に最もスターとフォークされたAstro テーマ。 ?
AstroWind は、Astro 5.0 + Tailwind CSS を使用して Web サイトを作成するための無料のオープンソース テンプレートです。新しいプロジェクトを開始する準備ができており、Web のベスト プラクティスを考慮して設計されています。
? https://astrowind.vercel.app/
私たちはAstroWind 2.0のエキサイティングな旅に乗り出しており、あなたにもそれに参加してもらいたいと考えています。現在、この新しいバージョンの開発の最初のステップを踏んでおり、皆様からの洞察は非常に貴重です。ディスカッションに参加し、フィードバック、アイデア、提案を共有して、 AstroWindの将来を形作るのに役立ててください。一緒にAstroWind 2.0 をさらに改善しましょう!
ディスカッションでフィードバックを共有してください。
AstroWind は、 Astro 5.0 + Tailwind CSS を使用して Web サイトを作成するための迅速なアクセスを提供しようとします。これは、シンプルさ、優れた実践方法、高いパフォーマンスに重点を置いた無料のテーマです。
バニラの JavaScript は基本的な機能を提供するためだけに使用されており、各開発者はどのフレームワーク (React、Vue、Svelte、Solid JS...) を使用するか、どのように目標にアプローチするかを決定します。
このバージョンでは、テンプレートはoutput設定のすべてのオプション ( static 、 hybrid 、およびserverをサポートしていますが、ブログはprerender = trueでのみ機能します。私たちは次のバージョンに取り組んでおり、SSR との完全な互換性を目指しています。
AstroWindテンプレート内には、次のフォルダーとファイルが表示されます。
/
├── public/
│ ├── _headers
│ └── robots.txt
├── src/
│ ├── assets/
│ │ ├── favicons/
│ │ ├── images/
│ │ └── styles/
│ │ └── tailwind.css
│ ├── components/
│ │ ├── blog/
│ │ ├── common/
│ │ ├── ui/
│ │ ├── widgets/
│ │ │ ├── Header.astro
│ │ │ └── ...
│ │ ├── CustomStyles.astro
│ │ ├── Favicons.astro
│ │ └── Logo.astro
│ ├── content/
│ │ ├── post/
│ │ │ ├── post-slug-1.md
│ │ │ ├── post-slug-2.mdx
│ │ │ └── ...
│ │ └-- config.ts
│ ├── layouts/
│ │ ├── Layout.astro
│ │ ├── MarkdownLayout.astro
│ │ └── PageLayout.astro
│ ├── pages/
│ │ ├── [...blog]/
│ │ │ ├── [category]/
│ │ │ ├── [tag]/
│ │ │ ├── [...page].astro
│ │ │ └── index.astro
│ │ ├── index.astro
│ │ ├── 404.astro
│ │ ├-- rss.xml.ts
│ │ └── ...
│ ├── utils/
│ ├── config.yaml
│ └── navigation.js
├── package.json
├── astro.config.ts
└── ...
Astro は、 src/pages/ディレクトリで.astroまたは.mdファイルを探します。各ページは、ファイル名に基づいてルートとして公開されます。
src/components/には特別なことは何もありませんが、Astro/React/Vue/Svelte/Preact コンポーネントをここに配置したいと思います。
画像などの静的アセットは、変換が必要ない場合はpublic/ディレクトリに配置でき、直接インポートする場合はassets/ディレクトリに配置できます。
? 熟練の宇宙飛行士?このファイル
README.mdを削除します。src/config.yamlとコンテンツを更新します。楽しむ！
すべてのコマンドは、プロジェクトのルートまたはターミナルから実行されます。
| 指示 | アクション |
|---|---|
npm install | 依存関係をインストールします |
npm run dev | localhost:4321でローカル開発サーバーを起動します |
npm run build | 運用サイトを./dist/に構築します。 |
npm run preview | デプロイする前にビルドをローカルでプレビューする |
npm run check | プロジェクトにエラーがないか確認してください |
npm run fix | Eslint を実行し、Prettier でコードをフォーマットする |
npm run astro ... | astro add 、 astro previewなどの CLI コマンドを実行します。 |
基本構成ファイル: ./src/config.yaml
site :
name : ' Example '
site : ' https://example.com '
base : ' / ' # Change this if you need to deploy to Github Pages, for example
trailingSlash : false # Generate permalinks with or without "/" at the end
googleSiteVerificationId : false # Or some value,
# Default SEO metadata
metadata :
title :
default : ' Example '
template : ' %s — Example '
description : ' This is the default meta description of Example website '
robots :
index : true
follow : true
openGraph :
site_name : ' Example '
images :
- url : ' ~/assets/images/default.png '
width : 1200
height : 628
type : website
twitter :
handle : ' @twitter_user '
site : ' @twitter_user '
cardType : summary_large_image
i18n :
language : en
textDirection : ltr
apps :
blog :
isEnabled : true # If the blog will be enabled
postsPerPage : 6 # Number of posts per page
post :
isEnabled : true
permalink : ' /blog/%slug% ' # Variables: %slug%, %year%, %month%, %day%, %hour%, %minute%, %second%, %category%
robots :
index : true
list :
isEnabled : true
pathname : ' blog ' # Blog main path, you can change this to "articles" (/articles)
robots :
index : true
category :
isEnabled : true
pathname : ' category ' # Category main path /category/some-category, you can change this to "group" (/group/some-category)
robots :
index : true
tag :
isEnabled : true
pathname : ' tag ' # Tag main path /tag/some-tag, you can change this to "topics" (/topics/some-category)
robots :
index : false
isRelatedPostsEnabled : true # If a widget with related posts is to be displayed below each post
relatedPostsCount : 4 # Number of related posts to display
analytics :
vendors :
googleAnalytics :
id : null # or "G-XXXXXXXXXX"
ui :
theme : ' system ' # Values: "system" | "light" | "dark" | "light:only" | "dark:only" フォント ファミリ、色、またはその他の要素をカスタマイズするには、次のファイルを参照します。
src/components/CustomStyles.astrosrc/assets/styles/tailwind.css以下を使用して、最適化された運用ビルドを作成できます。
npm run buildこれで、Web サイトを展開する準備が整いました。生成されたすべてのファイルはdistフォルダーに配置され、このフォルダーを任意のホスティング サービスにデプロイできます。
自分の GitHub アカウントでこのリポジトリのクローンを作成し、Netlify にデプロイします。
自分の GitHub アカウントでこのリポジトリのクローンを作成し、Vercel にデプロイします。
アイデアや提案がある場合、またはバグを見つけた場合は、お気軽にディスカッションを開いたり、問題を提起したり、プル リクエストを作成したりしてください。それは私たち全員にとって非常に有益であり、喜んで耳を傾け、行動を起こしたいと思います。
当初は onWidget によって作成され、貢献者のコミュニティによって維持されました。
AstroWindは MIT ライセンスに基づいてライセンスされています。詳細については、LICENSE ファイルを参照してください。
