|옐프캠프| YelpCamp: 기본 스타일 추가
8292 단어 htmlwebdevcssjavascript
-A new EJS Tool for Layouts
-Bootstrap 5 Boilerplate
레이아웃을 위한 새로운 EJS 도구
레이아웃은 이 섹션의 초점입니다. 목표는 코드를 복제하지 않고도 모든 단일 페이지에 스크립트, 스타일시트 및 자산을 포함하는 기능을 갖는 것입니다.
ejs-mate는 중복 코드를 줄이려는 목표를 충족하는 재사용 가능한 코드를 생성합니다.
잭슨티안 / ejs-메이트
Express 4.x 레이아웃, EJS 템플릿 엔진용 부분 템플릿 기능.
ejs-메이트
상태
에 대한
Express 4.x
layout , partial 및 block EJS 템플릿 엔진용 템플릿 기능.이전에도 제공되었지만
include 지금은 EJS 1.0.x의 자체 지시문을 사용해야 합니다.설치
$ npm install ejs-mate --save
(--save automatically writes to your package.json file, tell your friends)
용법
Run node app.js from examples and open localhost:3000 to see a working example.
Given a template, index.ejs:
<% layout('boilerplate') -%>
<h1>I am the <%= what %> template</h1>
And a layout, boilerplate.ejs:
<!DOCTYPE html>
<html>
<head>
<title>It's <%= who %></title>
</head>
<body>
<section>
<%- body -%>
</section>
</body>
</html>
When rendered by an Express 4.0 app:
var express = require('express'…
within the terminal
npm i ejs-mate
레이아웃을 사용하면 일부 콘텐츠 사이에 코드를 삽입할 수 있는 상용구를 정의할 수 있습니다.
<section>
<%- body -%>
</section>
내용을 추가하려면 본문이 중요합니다.
기본 상용구 템플릿을 넣을 레이아웃 폴더를 만듭니다.
업데이트된 인덱스 파일
<% layout('../layout/boilerplate')%>
<h1>All Campgrounds</h1>
<div>
<a href="/campgrounds/new">Add Campground</a>
</div>
<ul>
<% for (let campground of campgrounds){%>
<li><a href="/campgrounds/<%= campground._id %>"<%= campground.title <% }%>
</ul>
상용구 템플릿
<body>
<%- body %>
</body>
상용구 템플릿은 필요한 모든 페이지를 대상으로 합니다.
부트스트랩 5 상용구
상용구 템플릿에는 부트스트랩 5 콘텐츠가 들어갈 위치가 있습니다.
https://getbootstrap.com/
Reference
이 문제에 관하여(|옐프캠프| YelpCamp: 기본 스타일 추가), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/code_regina/yelpcamp-yelpcamp-adding-basic-styles-fbm텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
