astro portfolio 다운로드 - astro portfolio 소스코드 다운로드

astro portfolio

기타 카테고리

0.0.2

다운로드

? Astro 4.0 + Tailwind CSS를 사용하여 포트폴리오 웹사이트를 만들 수 있는 무료 템플릿입니다.

다크 모드

라이트 모드

등대 보고서

데모

? https://astro-fe-portfolio.netlify.app/

특징

✔️ 다크 모드를 지원하는 Tailwind CSS (@astrojs/tailwind)와 통합 .

✔️ 다음 통합을 사용합니다:

@astrojs/mdx
@astrojs/이미지
@astrojs/tailwind - 더 예쁜 클래스 정렬 플러그인 포함
@astro-아이콘
@astro-seo
@astro-navbar

✔️(@Playwright) e2e 테스트가 준비되었습니다.

머리말(제목, 설명, 작성자, 날짜, 이미지, 태그) 및 RSS 피드, 사이트맵 및 robots.txt가 포함된 블로그

404 오류 페이지

프로젝트 구조

Astro 프로젝트 내부에는 다음 폴더와 파일이 표시됩니다.

 /
├── public/
│   └── favicon.ico
|   ├── hero.png
|   └── ...
├── src/
|   ├── assets/
|   |   ├── images/
│   │   |   ├── hero.png
|   |   |   └── ...
│   ├── components/
│   │   ├── ui/
│   │   |   ├── BackToTop.astro
|   |   |   └── ...
│   │   ├── About.astro
│   │   ├── Contact.astro
|   |   └── ...
│   ├── content/
│   │   ├── projects/
│   │   │   ├── project-1.md
│   │   │   ├── project-1.md
│   │   │   └── ...
│   │   └-- config.ts
│   ├── layouts/
│   │   ├── Layout.astro
│   ├── pages/
│   │   ├── index.astro
│   ├── tests/
│   │   ├── index.spec.ts
├── package.json
├── astro.config.mjs
└── ...

Astro는 src/pages/ 디렉터리에서 .astro , .md 또는 .mdx 파일을 찾습니다. 각 페이지는 파일 이름을 기반으로 하는 경로로 노출됩니다.

src/components/ 는 Astro 컴포넌트를 넣는 곳이고, 레이아웃을 위한 src/layouts/ 도 마찬가지입니다.

이미지는 src/images/ 에 배치할 수 있습니다.

블로그 및 문서 콘텐츠는 src/content 에 Markdown 또는 MDX 파일 모음으로 생성됩니다.

모든 정적 자산(예: 이미지는 public/ 디렉토리에 배치될 수 있습니다.

명령

모든 명령은 프로젝트 루트의 터미널에서 실행됩니다.

명령	행동
`yarn`	종속성을 설치합니다.
`yarn dev`	`localhost:3000` 에서 로컬 개발 서버를 시작합니다.
`yarn build`	프로덕션 사이트를 `./dist/` 로 구축하세요.
`yarn preview`	배포하기 전에 로컬에서 빌드 미리보기
`yarn astro ...`	`astro add` , `astro preview` 와 같은 CLI 명령 실행
`yarn astro --help`	Astro CLI를 사용하여 도움 받기
`yarn test:e2e`	극작가 테스트 실행