cgartlab.github.io
1.0.0
Screwfast는 빠르고 효율적인 웹 프로젝트 설정을 위해 설계된 오픈 소스 템플릿 으로 미니멀리즘과 기능성을 혼합합니다. 포트폴리오를 선보이거나 회사 방문 페이지를 시작하거나 블로그를 실행하든 Brewfast는 필요한 모든 것을 제공합니다. 이 템플릿은 Astro, Tailwind CSS 및 Preline UI의 힘을 결합하여 웹 존재를위한 기능적이고 미적으로 유쾌한 솔루션을 제공합니다.
라이브 데모를보십시오
소셜 주식 구성 요소 :
북마크 버튼 구성 요소 :
localStorage 사용하여 나중에 참조 할 블로그 게시물을 북마크 할 수 있습니다.localStorage 쿠키로 교체하여 북마크 된 게시물을 지속하십시오.피드백 구성 요소 :
스타 라이트 문서 테마 통합 :
아이콘 세트 구성 요소 :
<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 : 사이트를 제작을 위해 정적 파일로 묶습니다.Astro CLI 명령에 대한 자세한 도움은 Astro의 문서를 방문하십시오.
배포하기 전에 생산 빌드를 만들어야합니다.
npm run build 이렇게하면 구축 된 사이트가있는 dist/ Directory가 생성됩니다 (Astro의 Outdir를 통해 구성 가능).
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 등과 같은 소품을 편집하십시오. 소품의 구조 및 데이터 유형을 유지해야합니다.
navigation.ts 파일을 utils 디렉토리 내에서 편집하여 내비게이션 표시 줄 및 바닥 글 링크를 관리합니다.
내비게이션 막대 링크를 조정하려면 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" } ,
] ; 디스플레이 텍스트로 name 교체하고 사이트의 페이지에 대한 적절한 경로로 url 교체하십시오.
마찬가지로 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을 추가해야합니다. 이러한 사용자 정의는 Astro 사이트 전체에 반영되어 모든 페이지에서 일관성을 높입니다.
내비게이션 바 구성 요소에 대한 두 가지 옵션이 있습니다 : Navbar.astro 일반 Navbar의 경우 및 Mega 메뉴의 경우 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로 버터 같은 부드러운 스크롤을 경험하십시오. 우리는 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를 제거하고 브라우저의 기본 스크롤링 동작으로 돌아 가려면 Docs를 사용하는 경우 MainLayout.astro 파일 및 /starlight/Head.astro 에서이 줄을 주석 또는 삭제하십시오.
개별 제품 페이지의 경우 GSAP가 통합되어 제품 페이지가로드 되 자마자 실행되는 매력적인 애니메이션을 추가했습니다. src/pages/products/[...slug].astro src/pages/insights/[...slug].astro Insights Page에있는 제품 페이지 파일의 스크립트 섹션에서 GSAP 구성을 찾고 수정할 수 있습니다.
< script >
import { gsap } from "gsap";
// Initialize GSAP animations...
</ script >애니메이션 사용자 정의 :
프로젝트의 모양과 느낌에 맞게이 스크립트 내 GSAP 애니메이션을 조정하십시오. 제공된 예제는 제품 페이지로드로 즉각적인 시각적 영향을 위해 GSAP를 활용하는 방법을 나타내는 출발점입니다.
애니메이션 수정 또는 제거 :
gsap.from() 메소드 내의 속성 및 매개 변수를 업데이트하거나 필요에 따라 새로운 GSAP 애니메이션 호출을 추가하십시오.메모
우리는 통합을 기울어지고 집중적으로 유지하기로 선택했지만 GSAP의 포괄적 인 문서는보다 복잡한 애니메이션 인 GSAP 문서에 대해 참조 할 수 있습니다.
더 깨끗하고 넓은 디자인을 달성하기 위해 기본 스크롤 바가 시각적으로 제거되었습니다. 이 선택은 프로젝트의 미적 목표에 적합하지만 스크롤바를 숨기는 것은 때때로 접근성과 사용자 경험에 영향을 줄 수 있다는 점을 고려하는 것이 중요합니다. 사용자 기반의 맥락과 요구 사항 내 에서이 설계 결정을 평가하는 것이 좋습니다.
맞춤형 스타일 스크롤 바를 선호하는 사람들을 위해 스크롤 바 스타일을위한 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 Template의 SEO 구성은 사용자가 검색 엔진 및 소셜 미디어 플랫폼에서 웹 사이트의 가시성을 최적화 할 수 있도록 설계되었습니다. 이 문서는 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.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와 같은 Astro 통합을 사용하도록 선택할 수 있습니다. 이러한 패키지를 통합하면보다 자동화 된 메타 데이터 관리 및 추가 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 편집기 내의 컨텐츠 컬렉션에 이미지 통합이 촉진됩니다. 이 기능을 사용하면 미디어 파일과의 Markdown 링크를 쉽게 생성하고 작업 공간에 완벽하게 복사 할 수 있습니다.
() .src/images/content/<path> 로 구성됩니다. src/content/post-1.md 로 getting-started.png : 결과 :
post-1.md src/images/content/post-1/getting-started.png 로 이동합니다. 메모
이미지를 떨어 뜨리는 동안 Shift를 누르십시오.
이러한 내장 된 Astro 통합으로 웹 사이트의 효율성을 극대화하십시오.
astro.config.mjs 파일에서 압축기를 구성하십시오. export default defineConfig ( {
// ...other Astro configurations
integrations : [ ... other Astro integrations , compressor ( { gzip : false , brotli : true } ) ] ,
} ) ;astro.config.mjs 파일에 사이트의 기본 URL과 추가 옵션을 지정하십시오. export default defineConfig ( {
// ...
site : 'https://example.com' ,
integrations : [ sitemap ( ) ] ,
} ) ;Astro의 가장 큰 장점은 통합의 풍부한 생태계로, 정확한 요구에 맞게 프로젝트 기능을 조정할 수 있습니다. Astro Integrations 페이지를 탐색하고 적합한대로 추가 기능을 추가하십시오.
이 프로젝트는 성능, 유지 관리 및 개발자 경험을 향상시키는 다양한 도구와 기술을 사용하여 구축되었습니다. 아래는 주요 도구 목록과 프로젝트의 역할입니다.
Navbars, Modals 및 Accordions와 같은 대화식 구성 요소는 포괄적 인 오픈 소스 구성 요소 라이브러리 인 Preline UI를 사용하여 구축됩니다.
프로젝트의 스타일링은 Tailwind CSS가 제공하는 유틸리티 우선 클래스를 활용합니다. 이 방법론을 통해 속도와 효율성으로 사용자 정의 레이아웃과 구성 요소를 만들 수 있습니다.
특히 클래스 분류를 위해 일관된 코드 형식을 보장하기 위해 prettier-plugin-tailwindcss 플러그인을 통합했습니다. 다음 구성은 프로젝트의 루트에있는 .prettierrc 파일에 설정됩니다.
{
"plugins" : [ " prettier-plugin-tailwindcss " ]
} 우리는 Vercel에 프로젝트를 배포하여 Seamless CI/CD 워크 플로우를위한 강력한 플랫폼을 활용합니다. 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 라이센스에 따라 릴리스됩니다. 자세한 내용은 라이센스 파일을 읽으십시오.
참고 : 이 웹 사이트 템플릿에는 표시된 회사와 제휴가 없습니다. 로고는 데모 목적으로 만 사용되며 맞춤형 버전으로 교체해야합니다.
