gridsome portfolio starter

그리드 포트폴리오 스타터

Astro 버전은 여기에서 https://github.com/drehimself/astro-portfolio-starter를 확인하십시오

GridSome의 간단한 포트폴리오 스타터 테마

데모 URL

https://gridsome-portfolio-starter.netlify.com

특징

• 깨끗하고 최소한의 디자인
• 꼬리 바람 CSS V1 (Purgecss 포함). 이 Gridsome 플러그인 사용.
• Vue-Scrollto를 사용하여 섹션으로 스크롤하십시오
• 게시물에 대한 마크 다운 컨텐츠가있는 블로그
• Markdown에서 vue 구성 요소를 사용하는 방법을 보여주는 문서 유형 (문서를 클릭)
• 어두운 모드를 가진 테마 스위처
• fuse.js 및 vue-fuse로 게시물을 검색합니다
• 게시물 태그
• 기본 페이지 매김
• Shiki로 구문 강조 표시 (이 Gridsome 플러그인 사용)
• 404 페이지
• RSS 피드
• XML의 SiteMap

설치

1. GridSome CLI 도구 설치가 없으면 : npm install --global @gridsome/cli
2. 레포를 복제 git clone https://github.com/drehimself/gridsome-portfolio-starter.git
3. cd gridsome-portfolio-starter
4. npm install (Cypress로 인해 긴 다운로드가 될 수 있습니다. Cypress로 테스트하는 것이 신경 쓰지 않으면 package.json 에서 제거).
5. GridSome은 http://localhost:8080 에서 로컬 개발자 서버를 시작하도록 gridsome develop

테스트

Cypress를 사용하여 몇 가지 기본 엔드 투 엔드 테스트가 있습니다. /cypress/integration/tests.js 에서 찾을 수 있습니다.

테스트를 실행하려면 먼저 Dev Server가 gridsome develop 통해 실행되고 있는지 확인하십시오. 기본 포트 8080을 사용하고 있다고 가정합니다. 그렇지 않은 경우 cypress.json 파일에서 baseUrl 키를 변경하십시오.

개발자 서버가 실행되면 npm run test 또는 ./node_modules/.bin/cypress open 실행하여 Cypress를 시작할 수 있습니다. Cypress Electron 앱이 실행됩니다. tests.js 파일을 클릭하면 자동화 된 브라우저에서 테스트가 실행됩니다.

메모

• Gridsome이 Vue 3으로 이동하면이 리포지어도 업데이트하겠습니다. Dark Mode 및 JIT와 같은 다른 Tailwind V2 제품과 함께 Tailwind V2로 업데이트하겠습니다.
• 내 개인 포트폴리오 웹 사이트를 기반으로합니다. 더 많은 기능이있는 오픈 소스 버전을 만들고 싶었습니다.
• 웹 사이트 구축 과정을 거치는 곳에서 내가 한 스크린 캐스트를 확인하십시오.
• undraw의 삽화
• 검색은 fuse.js 및 vue-fuse를 기반으로합니다. 지금은 게시물의 제목과 요약 만 검색합니다. 당신의 취향을 검색하기 위해서는 약간의 조정이 필요할 수 있습니다. 검색 설정에 대한 퓨즈 문서를 확인하십시오. 이 PR은 "Post"및 "Documentation"유형을 모두 검색 할 수있는 기능을 추가했습니다.
• 다음과 같은 아이디어를 얻은 다른 그리드 스타터를 확인하십시오.
  • 그리드 스타터 블로그
  • 그리드 스타터 블레다
  • Jigsaw 스타터 블로그 -이 스타터 테마에서 많은 디자인 영감을 얻었습니다.

다른 버전

• nuxt 버전 : https://github.com/drehimself/nuxt-portfolio-starter
• 세이버 버전 : https://github.com/drehimself/saber-portfolio-starter