파그 5분 뒤에.
15317 단어 htmljavascriptwebdevbeginners
이게 어떻게 된 일입니까?
노드 및 브라우저 환경에 사용되는 템플릿 엔진입니다.
그것은 축소에 민감한 문법을 사용해서 더 적은 코드로 깨끗한 표시를 작성할 수 있도록 한다😎
TL 캠프에 있는 사람;박사님, 아래로 스크롤 시범!😎
뛰어들다👟
하나의 원소는 이런 구조를 따른다
input#check.checkbox(checked="true")
pug 기본값div.인 클래스 정의#로 정의하는 id<input class="checkbox" id="check" checked="true" />
div의 종류flower를 원한다면, 우리는 단지.flower
내용 중첩
요소를 중첩하려면 들여쓰십시오!
.parent
.child
.grandchild
<div class="parent">
<div class="child">
<div class="grandchild"></div>
</div>
</div>
요소에 일반 텍스트를 포함해야 하는 경우 접미사는
//입니다.👍script.
if (isAwesome(pug))
return "Hell yeah!"
확장 및 블록을 통한 상속
Pug는
//- 및 .를 통해 템플릿 상속을 지원합니다.흔히 볼 수 있는 예는 레이아웃 확장이다.//- layout.pug
html
head
title Awesome site
body
block content
//- home.pug
extends layout.pug
block content
h1 Welcome to my awesome site!
<html>
<head>
<title>Awesome site</title>
</head>
<body>
<h1>Welcome to an awesome site!</h1>
</body>
</html>
포함
우리의 삽살개 서류가 통제되지 않도록, 우리는 그것들을 단독 서류
extends 로 나누어 보존할 수 있다.표시된 메뉴 부분을 포함하는 레이아웃을 고려합니다.
//- layout.pug
html
head
title Some awesome site!
body
include menu.pug
main
block content
//- menu.pug
nav
ul
li
a(href="/") Home
li
a(href="/about") About
<html>
<head>
<title>Some awesome site!</title>
</head>
<body>
<nav>
<ul>
<li><a href="/">Home</a></li>
<li><a href="/about">About</a></li>
</ul>
</nav>
<main></main>
</body>
</html>
인라인 코드🤓
Pug 템플릿에서 유효한 JavaScript를 사용할 수 있습니다.이 점을 해낼 수 있는 여러 가지 방법이 있다.
blocks - 출력include가 없는 코드Unbuffered - 계산 접두사가 -인 코드와 출력 포함- const random = Math.floor(Math.random() * 10)
.number= `Random number is ${random}`
<div class="number">Random number is 4</div>
삽입값
보간 변수가 필요합니까?두 가지 방법이 있다.파거스 삽입 연산자
Buffered를 사용할 수 있습니다.그러나 내연 코드를 사용하면 비버퍼 코드도 사용할 수 있다😎- const name = 'Geoff'
.greeting Hey #{name}!
.greeting= `Hey ${name}!`
<div class="greeting">Hey Geoff!</div>
조건문
파그는 우리가 다른 곳에서 사용하는 조건 연산자를 제공했다.또는 우리는
= 코드를 사용하여 같은 결과를 실현할 수 있다😎- const balance = 100
if balance >= 50
span Nice!
else if balance >= 0
span Cool
else
span Uh oh!
<span>Nice!</span>
번갈아
Pug에서 교체되는 두 가지 주요 조작부호는
#{}와 Unbuffered이다.ul.week
each day in ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat']
li.week__day= day.toUpperCase()
<ul class="week">
<li class="week__day">SUN</li>
<li class="week__day">MON</li>
<li class="week__day">TUE</li>
<li class="week__day">WED</li>
<li class="week__day">THU</li>
<li class="week__day">FRI</li>
<li class="week__day">SAT</li>
</ul>
- let b = 0
while b < 5
.balloon
- b++
<div class="balloon"></div>
<div class="balloon"></div>
<div class="balloon"></div>
<div class="balloon"></div>
<div class="balloon"></div>
each 코드를 사용하여 같은 결과를 실현할 수 있다👍혼혈아
혼합 단백질은 삽살개의 강력한 기능이다.그것들은 정태적이거나 파라미터를 받아들이거나 블록을 받아들일 수 있는 파그 블록이다.
우리는
while 을 사용하여mixin을 호출합니다.우리가 표시에서 중복 모드를 발견했을 때, 아마도 섞을 때가 되었을 것이다.
이것은 정적 믹스다.
mixin socials
li
a(href='https://dev.to/jh3y') Check out some articles!
li
a(href='https://codepen.io/jh3y') Check out some code!
footer
ul
+socials
<footer>
<ul>
<li><a href="https://dev.to/jh3y">Check out some articles!</a></li>
<li><a href="https://codepen.io/jh3y">Check out some code!</a></li>
</ul>
</footer>
mixin card(name, avatar = 'https://placehold.it/400x400')
.card
img.card__image(src= avatar)
h2.card__title= name
+card('Geoff', 'https://some-image.com/geoff.png')
+card('Jack')
<div class="card">
<img class="card__image" src="https://some-image.com/geoff.png" />
<h2 class="card__title">Geoff</h2>
</div>
<div class="card">
<img class="card__image" src="https://placehold.it/400x400" />
<h2 class="card__title">Jack</h2>
</div>
만약
Unbuffered 필요하지만, 어떤 경우에는 서로 다른 끼워넣기 표시가 필요하다면, 믹스 블록은 된다.mixin card(name, avatar = 'https://placehold.it/400x400')
.card
img.card__image(src= avatar)
h2.card__title= name
if block
block
+card('Stu', 'https://stu.com/avatar.png')
.card__badge User of the month!
<div class="card">
<img class="card__image" src="https://stu.com/avatar.png" />
<h2 class="card__title">Stu</h2>
<div class="card__badge">User of the month!</div>
</div>
좋은 소식!🔥
JavaScript 템플릿 텍스트를 인라인 스타일로 사용하여 동적 프리젠테이션을 생성할 수 있습니다.😎
예컨대 랜덤으로 생성된 꽃🌼
우리들은 몇 가지 기교를 실천에 옮깁시다.이것은 꽃이다.
그곳에는 삽살개가 적지 않다👎
.flower
.flower__petal.flower__petal--0
div
div
div
div
.flower__petal.flower__petal--1
div
div
div
div
.flower__petal.flower__petal--2
div
div
div
div
.flower__petal.flower__petal--3
div
div
div
div
.flower__core
mixin flower
.flower
- let p = 0
while (p < 4)
.flower__petal(class=`flower__petal--${p}`)
- let s = 0
while (s < 4)
div
- s++
- p++
.flower__core
+flower
+과 mixin로 그것의 위치를 정의할 수 있다😎무작위
--x 및 --y로 생성된 태그 예👍<div class="flower" style="--x: 1; --y: 85;">...</div>
--x과--y는 일련의 가능성을 열어준다.이거 봐!우리는 하나
Pug의 순환을 이용하여 무작위 특징을 생성하여 모든 꽃 원소에 전달한다🤓- let f = 0
while f < 50
- const x = randomInRange(0, 100)
- const y = randomInRange(0, 100)
- const hue = randomInRange(0, 360)
- const size = randomInRange(10, 50)
- const rotation = randomInRange(0, 360)
- const delay = f * 0.1
+flower(x, y, hue, size, rotation, delay)
- f++
이렇게!
5분 안에 당신은 충분한 정보
CSS를 알게 되어 표지 생성 속도를 높일 수 있습니다.당신은 또한
while의 좋은 기능을 이용하여 속도를 높이고 오류를 줄이며 무작위로 프레젠테이션을 생성할 수 있습니다!🔥즐겁게 놀아라!
본문의 모든 시범은 본문CodePen collection에서 찾을 수 있다.
여느 때와 마찬가지로, 만약 어떤 문제가 있으면, 수시로 메시지를 남기거나 회답해 주십시오🐦! 그리고'헤이!'어쨌든😎
Reference
이 문제에 관하여(파그 5분 뒤에.), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/jh3y/pug-in-5-minutes-272k텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
