cgartlab.github.io
1.0.0
ScrewFastは、迅速かつ効率的なWebプロジェクトのセットアップを実現するために設計されたオープンソーステンプレートで、ミニマリズムと機能性をブレンドします。ポートフォリオを紹介したり、会社のランディングページを起動したり、ブログを実行したりする場合でも、screwfastは必要なものをすべて提供します。 Astro、Tailwind CSS、およびPreline UIの力を組み合わせることにより、このテンプレートは、Webの存在に機能的で審美的に心地よいソリューションを提供します。
ライブデモを表示します
ソーシャルシェアコンポーネント：
ブックマークボタンコンポーネント：
localStorageを使用して後で参照するためにブログ投稿をブックマークできます。localStorage Cookieに置き換えて、ブックマークされた投稿を保持します。ポストフィードバックコンポーネント：
スターライトドキュメントのテーマ統合：
アイコン設定コンポーネント：
<Icon name="iconName" />使用して、事前に定義されたアイコンSVGをレンダリングします。国際化（I18N）機能：
LanguagePickerコンポーネントが含まれています。monolingual-siteブランチから直接モノリンガルバージョンにアクセスできます。 スクロールの進行状況インジケーターを備えた動的目次（TOC） ：
注記
現在、計画された改善や既知のバグはありません。問題が発生した場合は、問題ページでそれらを報告するか、ディスカッションを開始してアイデア、提案、または質問をしてください。
このガイドでは、地元の開発マシンのAstroプロジェクトにセットアップして慣れるための必要な手順を提供します。
開始するには、 Use this templateボタン（右上の大きなグリーンのもの）をクリックして、GitHubアカウントにこのテンプレートから独自のリポジトリを作成します。
リポジトリが作成されたら、次のコマンドを使用してローカルマシンにクローンできます。
git clone https://github.com/[YOUR_USERNAME]/[YOUR_REPO_NAME].git
cd [YOUR_REPO_NAME]プロジェクトの依存関係をインストールすることから始めます。端末を開き、プロジェクトのルートディレクトリに移動して実行します。
npm installこのコマンドは、 package.jsonファイルに定義されているすべての必要な依存関係をインストールします。
依存関係をインストールすると、次のNPMスクリプトを利用して、プロジェクトの開発ライフサイクルを管理できます。
npm run dev ：ホットリロードを有効にして、ローカル開発サーバーを起動します。npm run preview ：展開前にプレビュー用にビルド出力をローカルで提供します。npm run build ：サイトを静的ファイルにバンドルして生産します。AstroCLIコマンドの詳細については、Astroの文書をご覧ください。
展開する前に、生産ビルドを作成する必要があります。
npm run buildこれにより、構築されたサイト（AstroのOutdir経由で構成可能）を備えたdist/ディレクトリが作成されます。
下のボタンをクリックして、Vercelでプロジェクトの展開を開始します。
下のボタンをクリックして、Netlifyにプロジェクトの展開を開始します。
ScrewFastは、開発とコンテンツ管理を合理化するためのモジュラーコンポーネント、コンテンツ、およびレイアウトを整理します。
src/
├── assets/
│ ├── scripts/ # JS scripts
│ └── styles/ # CSS styles
├── components/ # Reusable components
│ ├── Meta.astro # Meta component for SEO
│ ├── sections/ # Components for various sections of the website
│ ├── ThemeIcon.astro # Component for toggling light/dark themes
│ └── ui/ # UI components categorized by functionality
├── content/ # Markdown files for blog posts, insights, products, and site configuration
│ ├── blog/
│ ├── docs/
│ ├── insights/
│ ├── products/
│ └── config.ts # Contains site-wide configuration options
├── data_files/ # Strings stored as JSON files
├── images/ # Static image assets for use across the website
├── layouts/ # Components defining layout templates
│ └── MainLayout.astro # The main wrapping layout for all pages
├── pages/ # Astro files representing individual pages and website sections
│ ├── 404.astro # Custom 404 page
│ ├── blog/
│ ├── fr/ # Localized content
│ ├── contact.astro
│ ├── index.astro # The landing/home page
│ ├── insights/
│ ├── products/
│ ├── robots.txt.ts # Dynamically generates robots.txt
│ └── services.astro
└── utils/ # Shared utility functions and helpers
ブラウザに直接提供される静的ファイルは、プロジェクトのルートにあるpublicディレクトリ内にあります。
public/
└── banner-pattern.svg
screwfastを使用すると、特定のニーズに合わせて簡単にカスタマイズできます。コンポーネントとコンテンツを構成する方法をいくつか紹介します。
一部のコンポーネントには、コンポーネントファイル内のtypeScript変数として定義されたプロパティがあります。 FeaturesGeneralコンポーネントをカスタマイズする例は次のとおりです。
// Define the string variables title and subTitle for the main heading and sub-heading text.
const title : string = "Meeting Industry Demands" ;
const subTitle : string =
"At ScrewFast, we tackle the unique challenges encountered in the hardware and construction sectors." ;証言や統計などのコンテンツのコレクションについては、対応するオブジェクトの配列を編集します。
// An array of testimonials
const testimonials : Testimonial [ ] = [ ... ] ;
// An array of statistics
const statistics : StatProps [ ] = [ ... ] ;これらの配列内のコンテンツを変更して、データを反映します。
ページ間で使用されるコンポーネントのページファイルで、値をプロップに直接渡すことができます。ここに、インライン小道具を備えたHeroSectionおよびClientsSectionコンポーネントの例があります。
< HeroSection
subTitle =" Top-quality hardware tools and expert construction services for every project need. "
primaryBtn =" Start Exploring "
primaryBtnURL =" /explore "
/>
< ClientsSection
title =" Trusted by Industry Leaders "
subTitle =" Experience the reliability chosen by industry giants. "
/>これらのセクションをパーソナライズするために、 title 、 subTitle 、 primaryBtnなどの小道具を編集します。小道具の構造とデータタイプを維持していることを確認してください。
utilsディレクトリ内のnavigation.tsファイルを編集して、ナビゲーションバーとフッターリンクを管理します。
navBarLinks配列を編集して、ナビゲーションバーリンクを調整します。
// An array of links for the navigation bar
export const navBarLinks : NavLink [ ] = [
{ name : "Home" , url : "/" } ,
{ name : "Products" , url : "/products" } ,
{ name : "Services" , url : "/services" } ,
{ name : "Blog" , url : "/blog" } ,
{ name : "Contact" , url : "/contact" } ,
] ;サイト上のページへの適切なパスで、表示テキストとurlにname置き換えます。
同様に、 footerLinksアレイを編集して、フッターに表示されるリンクを調整します。
// An array of links for the footer
export const footerLinks : FooterLinkSection [ ] = [
{
section : "Product" ,
links : [
{ name : "Tools & Equipment" , url : "/tools-equipment" } ,
{ name : "Construction Services" , url : "/construction-services" } ,
{ name : "Pricing" , url : "/pricing" } ,
] ,
} ,
{
section : "Company" ,
links : [
{ name : "About us" , url : "/about" } ,
{ name : "Blog" , url : "/blog" } ,
{ name : "Careers" , url : "/careers" } ,
{ name : "Customers" , url : "/customers" } ,
] ,
} ,
] ; footerLinks配列内の各セクションは、リンクのグループを表します。グループの見出しのsection値を更新し、必要に応じて各リンクのnameとurlを変更します。
socialLinksオブジェクトのプレースホルダーURLをソーシャルメディアプロファイルに置き換えます。
// An object of links for social icons
export const socialLinks : SocialLinks = {
facebook : "#" ,
twitter : "#" ,
github : "#" ,
linkedin : "#" ,
instagram : "#" ,
} ; 注記
ナビゲーションが適切に機能するために、完全かつ有効なURLを追加することを忘れないでください。これらのカスタマイズは、アストロサイト全体に反映され、すべてのページで一貫性を促進します。
ナビゲーションバーのコンポーネントには2つのオプションがあります。NAVBAR.ASTRO Navbar.astro 、通常のNavbarのためのastroと、メガメニューのNavbarMegaMenu.astroです。どちらもsrc/components/sections/navbar&footerにあります。
Navbar.astroおよびNavbarMegaMenu.astroコンポーネントは、 MainLayout.astro内で構成でき、プロジェクトに最適なナビゲーションのスタイルを選択できます。これらのコンポーネントをカスタマイズするには、 src/components/sections/navbar&footerの下で直接変更して、特定の構成または設計更新を適用できます。
Screwfastには、ドキュメントでユーザーエクスペリエンスを向上させるように設計されたStarlightが装備されています。このモダンでエレガントなテーマには、コンテンツをよりアクセスしやすく、ナビゲートできるようにするための一連の機能が含まれています。
主な機能：
Starlightを使用すると、強力な機能と統合にアクセスでき、ニーズに合わせて幅広いカスタマイズオプションにアクセスできます。
注記
Starlightの包括的な機能リストに飛び込み、テーマのドキュメントサイトにアクセスして開発プロセスを合理化する方法を学びます。
重要
Starlightサイトのサイドバーがスクロールしておらず、Scrollbarを手動でドラッグする必要がある場合は、 src/components/ui/starlight/Head.astroからLenis Smooth Scrollライブラリに関連するスクリプトタグを削除する必要があります。
レーニスとバターのような滑らかなスクロールを体験してください。 Lenisを統合して、流動的で応答性の高い強化されたスクロールエクスペリエンスを提供しました。
src/assets/scripts/lenisSmoothScroll.jsでLenisをセットアップする方法は次のとおりです。
// src/assets/scripts/lenisSmoothScroll.js
import "@styles/lenis.css" ;
import Lenis from "lenis" ;
const lenis = new Lenis ( ) ;
function raf ( time ) {
lenis . raf ( time ) ;
requestAnimationFrame ( raf ) ;
}
requestAnimationFrame ( raf ) ;そして、それをMainLayout.astroに追加します：
< script >
import "@scripts/lenisSmoothScroll.js";
</ script >スムーズなスクロールは、一部のデバイスのアクセシビリティとパフォーマンスに影響を与える可能性があるため、さまざまな環境で包括的にテストしてください。
注記
Lenisを削除してブラウザのデフォルトのスクロール動作に戻りたい場合は、 MainLayout.astroファイルと/starlight/Head.astroからこれらの行をコメントまたは削除するだけです。ドキュメントを使用している場合は。
個々の製品ページについては、GSAPが統合されて、製品ページが読み込まれるとすぐに実行される魅力的なアニメーションを追加します。 src/pages/products/[...slug].astroにある製品ページファイルのスクリプトセクションでGSAP構成を見つけて変更できますsrc/pages/insights/[...slug].astro
< script >
import { gsap } from "gsap";
// Initialize GSAP animations...
</ script >アニメーションのカスタマイズ：
このスクリプト内のGSAPアニメーションを調整して、プロジェクトのルックアンドフィールに合わせてください。提供された例は出発点であり、GSAPを活用して製品ページのロードとして即時の視覚的影響を活用する方法を表しています。
アニメーションの変更または削除：
gsap.from()メソッド内のプロパティとパラメーターを更新するか、必要に応じて新しいGSAPアニメーション呼び出しを追加します。注記
統合を無駄のない焦点を合わせておくことを選択しましたが、GSAPの包括的なドキュメントは、より複雑なアニメーション（GSAPドキュメント）について参照できます。
よりクリーンで広々としたデザインを実現するために、デフォルトのスクロールバーは視覚的に削除されています。この選択はプロジェクトの美的目標に適合しますが、隠れたスクロールバーがアクセシビリティとユーザーエクスペリエンスに影響を与える場合があることを考慮することが重要です。ユーザーベースとそのニーズのコンテキスト内で、この設計上の決定を評価することをお勧めします。
カスタムスタイルのスクロールバーを好む人には、ScrollbarスタイルにTailwind CSSユーティリティを追加するTailwind-Scrollbarプラグインを使用することをお勧めします。
注記
デフォルトのスクロールバーを返す場合は、 src/layouts/MainLayout.astroから次のCSSをコメントまたは削除できます。
< style >
.scrollbar-hide::-webkit-scrollbar {
display: none;
}
.scrollbar-hide {
-ms-overflow-style: none;
scrollbar-width: none;
}
</ style >さらに、 <html>タグを更新して、 scrollbar-hideクラスを削除して、以下を削除します。
< html lang =" en " class =" scroll-pt-16 " >ScrewFastテンプレートのSEO構成は、ユーザーが検索エンジンとソーシャルメディアプラットフォームでのWebサイトの可視性を最適化できるように設計されています。このドキュメントでは、SEO設定を効果的に管理するための実装の詳細と使用手順の概要を説明します。
SEO構成は、 constants.tsファイルを使用して集中化されています。このファイルは、ページタイトル、説明、構造化されたデータ、オープングラフタグなどのSEO関連データを管理し、SEO管理に対してより構造化されて管理しやすいアプローチを提供します。
SEO設定をカスタマイズするには、 constants.tsファイルの値を変更します。主要な構成には、サイト、SEO、およびOGが含まれているため、開発者はサイト全体のSEOパラメーターを定義できます。
// constants.ts
export const SITE = {
title : " ScrewFast " ,
// Other SITE properties...
} ;
export const SEO = {
title : SITE . title ,
// Other SEO properties...
} ;
export const OG = {
title : ` ${ SITE . title }: Hardware Tools & Construction Services ` ,
// Other OG properties...
} ;MainLayout.astroなどのレイアウト内にメタデータを適用する場合、希望するメタデータ値をMetaコンポーネントにプロップとして渡すことができます。
---
// In MainLayout.astro file
const { meta } = Astro . props ;
interface Props {
meta ? : string ;
}
---
< Meta meta = { meta } />ページ固有のSEOオーバーライドの場合、開発者は特定のページファイル内で個々のスキーマプロパティを渡すことができます。
---
import { SITE } from " @/data_files/constants " ;
---
< MainLayout
title = { ` Example Page | ${ SITE . title } ` }
structuredData = { {
" @type " : " WebPage " ,
// Other structured data properties...
} }
>
<!-- Page content -->
</ MainLayout >
このセットアップにより、Metaコンポーネントはカスタムメタ説明を受信し、ページのメタデータに適用します。カスタム値が渡されない場合、代わりにMeta.astroのデフォルトが使用されます。
より堅牢なSEO戦略のために、 Meta.astroコンポーネントに追加のプロパティを作成できます。たとえば、Twitter固有のメタデータの記事の公開日またはタグの特定のオープングラフタグを含めることができます。
JSON-LD形式の構造化データは、 Meta.astroコンポーネントによって管理され、検索エンジンがページコンテンツを理解する方法を改善し、リッチなスニペットで検索結果を強化する可能性があります。関連するschema.orgタイプとプロパティを使用して、 structuredDataプロパティを変更します。
< MainLayout
structuredData = { {
" @context " : " https://schema.org " ,
" @type " : " WebSite " ,
" name " : " ScrewFast " ,
" url " : " https://screwfast.uk " ,
" description " : " Discover top-quality hardware tools and services "
} }
>テンプレートはカスタムSEOソリューションを提供しますが、追加のSEO機能と最適化のためにAstro SEOなどのアストロ統合を利用することを選択できます。このようなパッケージを統合すると、より自動化されたメタデータ管理と追加のSEO中心の機能が提供される場合があります。
robots.txtは、src/pages/robots.txt.tsにあるコードを使用して動的に生成されます。この構成は、Astro Docsの例に従います。
import type { APIRoute } from 'astro' ;
const robotsTxt = `
User-agent: *
Allow: /
Sitemap: ${ new URL ( 'sitemap-index.xml' , import . meta . env . SITE ) . href }
` . trim ( ) ;
export const GET : APIRoute = ( ) => {
return new Response ( robotsTxt , {
headers : {
'Content-Type' : 'text/plain; charset=utf-8' ,
} ,
} ) ;
} ;ルートディレクトリに.vscode/settings.jsonファイルを追加すると、画像統合がマークダウンエディター内のコンテンツコレクションに直接容易になります。この機能により、メディアファイルを使用したMarkDownリンクを簡単に作成し、ワークスペースにシームレスにコピーすることができます。
()を使用してリンクされています。src/images/content/<path>で整理されています。 getting-started.png src/content/post-1.mdに貼り付けてください。
 post-1.mdに追加。src/images/content/post-1/getting-started.pngに移動します。 注記
画像をドロップしながらシフトを押すことを忘れないでください。
これらの組み込みのアストロ統合でウェブサイトの効率を最大化します。
astro.config.mjsファイルでコンプレッサーを構成します。 export default defineConfig ( {
// ...other Astro configurations
integrations : [ ... other Astro integrations , compressor ( { gzip : false , brotli : true } ) ] ,
} ) ;astro.config.mjsファイルの追加オプションを必ず指定してください。 export default defineConfig ( {
// ...
site : 'https://example.com' ,
integrations : [ sitemap ( ) ] ,
} ) ;Astroの素晴らしいところは、統合の豊富なエコシステムであり、プロジェクト機能を正確なニーズに合わせて調整することができます。 Astro Integrationsページをお気軽に調べてください。適切な場合は、追加の機能を追加してください。
このプロジェクトは、パフォーマンス、保守性、開発者の経験を向上させるさまざまなツールとテクノロジーを使用して構築されています。以下は、主要なツールとプロジェクトにおけるその役割のリストです。
NAVBARS、モーダル、アコーディオンなどのインタラクティブコンポーネントは、包括的なオープンソースコンポーネントライブラリであるPreline UIを使用して構築されています。
プロジェクト全体のスタイリングは、Tailwind CSSが提供するユーティリティファーストクラスを活用しています。この方法により、速度と効率のあるカスタムレイアウトとコンポーネントを作成できます。
特にクラスのソートで一貫したコードのフォーマットを確保するために、 prettier-plugin-tailwindcssプラグインを統合しました。次の構成は、プロジェクトのルートにある.prettierrcファイルで設定されています。
{
"plugins" : [ " prettier-plugin-tailwindcss " ]
}シームレスなCI/CDワークフロー用の堅牢なプラットフォームを活用して、プロジェクトをVercelに展開します。 vercel.jsonを使用して、厳しいセキュリティヘッダーとキャッシュポリシーを設定し、セキュリティとパフォーマンスのベストプラクティスを順守します。
{
"headers" : [
{
"source" : " /(.*) " ,
"headers" : [
{
"key" : " Content-Security-Policy " ,
"value" : " default-src 'self'; [other-directives] "
},
" Additional security headers... "
]
}
]
}最適なサイトのパフォーマンスのために、HTMLファイルをprocess-html.mjsでポストプロセスします。これは、ビルドフェーズの後にHTMLを模倣してファイルサイズを縮小し、負荷時間を改善するカスタムスクリプトです。
これは、 process-html.mjsのHTML省略スクリプトからのスニペットです。
/ process-html.mjs
// Post-build HTML minification script snippet
// ...
await Promise . all (
files . map ( async ( file ) => {
// File processing and minification logic
} )
) ;各ツールの詳細なドキュメントを参照して、能力とプロジェクトへの貢献方法を完全に理解することをお勧めします。
あなたが支援に興味があるなら、あなたはいくつかの方法で貢献することができます：
このプロジェクトは、MITライセンスの下でリリースされます。詳細については、ライセンスファイルをお読みください。
注：このWebサイトテンプレートには、表示されている企業とは関係ありません。ロゴはデモンストレーション目的でのみ使用され、カスタマイズされたバージョンに置き換える必要があります。
