pug starter 다운로드 - pug starter 소스 코드 다운로드

pug starter

웹사이트 데이터

Render multiple CSS support

다운로드

퍼그 스타터

웹 개발자 로서 경력을 시작하려는 경우 시장에서 가장 높은 유료 일자리에 합의하고 Wow Job을 방문하십시오.

프로젝트 파일 구조

 .
├── README.md
├── package.json
├── src
│   ├── _asset
│   │   ├── image
│   │   │   └── become-a-web-developer-today.jpg
│   │   │   └── logo.png
│   │   └── js
│   │       └── all.js
│   │       └── game.js
│   ├── _component
│   │   ├── header
│   │   │   ├── header.pug
│   │   │   └── header.scss
│   │   ├── footer
│   │   │   ├── footer.pug
│   │   │   └── footer.scss
│   │   ├── smart-button
│   │   │   ├── smart-button.pug
│   │   │   └── smart-button.scss
│   │   ├── project-list
│   │   │   ├── project-list.pug
│   │   │   └── project-list.scss
│   │   └── layout
│   │       ├── base.pug
│   │       └── general.scss
│   ├── _data
│   │   ├── site.yml
│   │   └── user.json
│   │   ├── menu.yaml
│   │   └── article.json
│   ├── embed.scss
│   ├── favicon.ico
│   ├── index.pug <---------------- MAIN index
│   ├── style.scss <---------------- MAIN style
│   └── contact
│       └── index.pug
│   └── portfolio
│       └── index.pug
│   └── about-me
│       └── index.pug
│   └── my-first-project
│       └── index.pug
│   └── how-i-got-to-work-with-big-companies
│       └── index.pug
└── yarn.lock

baseurl

참고 : inline 속성이 embed 로 업데이트되었습니다

오래된 방법 :

 if config.entry.css.embed
  link(rel="stylesheet" href=`${embedPath}` inline)

새로운 방법 :

 if config.entry.css.embed
  link(rel="stylesheet" href=`${embedPath}` embed)

ModularCSS 지원을 추가하십시오. package.json 구성에서 활성화되면 모든 SCSS/SASS 파일을 특파원 CSS 경로로 변환합니다.

github.io 및 사용자 정의 도메인에 대해 구성 할 수있는 Baseurl 지원을 추가하십시오. package.json 구성 섹션을 확인하십시오

deploytogithubio- (true | false) 기본적으로 true 로 설정되며 github.io에 배포하려는 경우 BaseUrl 의 값에 영향을 미칩니다. customurl을 baseurl 의 값으로 사용하려면 false 로 설정하고 싶습니다.
customurl- baseurl이 http://my-project.wowjob.dev 또는 다른 것과 같은 값을 갖기를 원한다면;
Githuburl- Baseurl이 http://github.com/marianzburlea/pug-starter.git 또는 다른 것과 같은 값을 갖기를 원한다면;

결국 Baseurl을 사용하여 다음과 같은 경로를 접두사 할 수 있습니다.

 link(rel="stylesheet", href=`${baseUrl}/style.css`)

또는

 a(
  title="Is it possible?"
  target="_blank"
  href=`${baseUrl}/article/nice-weather`
)

또는

 img(alt="Awesome dog" width="100" href=`${baseUrl}/image/cool-dog.jpg`)

YouTube 비디오 자습서

새로운 기술을 사용하여 해당 튜토리얼을 새로운 기술로 변경하고 싶습니다.

더 많은 도움을주기 위해 YouTube 자습서를 작성했습니다.

nodejs, git 및 github를 설치하십시오

3 가지 쉬운 단계 2017에서 무료로 웹 사이트를 만드는 방법

악몽이 마침내 끝났습니다! 웹 페이지 레이아웃 2017 구축 방법에 대한 HTML5 자습서

초보자 2017을위한 HTML5 웹 사이트 통증 무료 튜토리얼 구축

PUG (이전 Jade) 템플릿 기반 프로젝트 용 스타터 패키지.

참고 : 부울 옵션 config.render.sourcefilechange가 package.json 에 추가되었습니다. 동작은 값에 따라 다릅니다.

true- 소스 파일 (PUG 파일)이 변경된 경우 렌더링됩니다. 이것은 다른 옵션에 비해 렌더링 할 때 훨씬 더 빠른 속도를 가지지 만 PUG가 시청 한 현재 파일을 변경하는 경우에만 관련이 있습니다. 레이아웃과 마찬가지로 "_"가 포함 된 경로에 확장되고 파일을 변경하는 경우 변경 사항이 반영되지 않습니다.
False- PUG 파일이 변경된 경우 렌더링되고 출력을 대상 파일과 비교합니다 (현재 생성 된 HTML과 함께 생성 된 HTML). 파일 수가 증가하면 느리게 될 수 있습니다.

퍼그 스타터 로 제작 된 라이브 프로젝트

프로젝트를 여기에 나열하려면 Facebook의 Codetap에 메시지를 남겨주세요. 프로젝트는 최소한 버전 하나가되어야합니다 (베타 / 알파 또는 진행중인 작업은 허용됩니다.

저자 : Marian Zburlea
- 채소 먹기 (라이브) - 채소를 먹기 (출처)
- W3Schools 복제 (라이브) -W3Schools 복제 (출처)
- 내 이력서 (라이브) - 내 이력서 (소스)
- 빠른 블로그 (라이브) - 빠른 블로그 (소스)
- Tesla는 생명을 구합니다 (라이브) -Tesla는 생명을 구합니다 (출처)
저자 : ISTVAN ACS
- ACME Mobile First (Live) -Acme Mobile First (소스)
- Thumb Gallery (Live) - Thumb Gallery (소스)

전제 조건

이 프로젝트에는 nodejs v.4+가 필요합니다

nodejs를 설치하려면 nodejs 다운로드 페이지를 방문하십시오. 오페라 인 시스템의 적절한 패키지 다운로드를 다운로드하고 다운로드 된 파일을 클릭하고 열고 설치 프로세스를 따르십시오. 그것에 대해 많이 알지 못하면 다음 모든 것을 클릭하거나 설치 버튼을 클릭하고 프롬프트되면 "동의"를 선택하면 괜찮을 것입니다.

설치

설치하기 전에 : 전제 조건을 읽으십시오

$ npm i

또는

$ npm install

참고 : Windows에서 pngquant-bin 오류가 발생하면 실행을 시도하십시오.

 npm install [email protected] -D
npm install [email protected] -D

npm start

용법

개발 모드에서 프로젝트를 실행하고 여러 장치에서 동기화하는 로컬 서버를 열려면 다음과 같습니다.

npm start

또는

npm run dev

생산 사용을위한 프로젝트를 구축하려면 :

npm run prod

프로젝트를 GitHub 페이지에 자동으로 배포하고 https : // [your-username] .github.io/[your-project-name]에서 사용할 수 있도록합니다.

npm run deploy

스타일

이 프로젝트는 임베드 및 외부 스타일 시트를 모두 지원합니다. 당신은 하나, 다른 하나 또는 둘 다를 가질 수 있습니다.

단일 페이지 응용 프로그램 스타일

단일 페이지 앱이나 웹 사이트를 구축 할 때 외부 파일에서 스타일 시트를로드하는 데 필요한 점이 없으며 그 이유를 설명하겠습니다. 외부 스타일 시트를로드하는 점은 브라우저가 해당 파일을 캐시하고 같은 웹 사이트의 다른 웹 페이지를 방문하는 대신 스타일 시트 파일에 대한 다른 요청 (S)을 서버로 다운로드 해야하는 대신 브라우저를 다운로드해야합니다. 단일 페이지에는 다른 페이지가 없으므로 외부 파일 기술이 적용되지 않습니다.