✏️ 섹션
- 섹션은 View 에서 Layout 의 태그에 부족한 것을 추가해주는 기능을 한다.
📍 setting
- 섹션을 사용하기위해 express engine 에 handlebars 를 설정할 때 헬퍼를 설정하면 쉽게 사용할 수 있다.
app.engine('.hbs', engine({
extname: '.hbs',
defaultLayout: 'main',
// 헬퍼를 사용한 섹션 설정
helpers: {
section: function (name, options) {
if (!this._sections) this._sections = {}
this._sections[name] = options.fn(this)
return null
},
},
}));📍 섹션 사용하기
- 섹션을 사용하기 위해선 layout 에 어느 부분에 섹션이 추가될건지 표시해줘야 한다.
- head 태그 내에 head 섹션을 추가하고,
body 태그 내에 script 섹션을 추가해줬다.
- head 태그 내에 head 섹션을 추가하고,
<!doctype html>
<html>
<head>
<title>Meadowlark Travel</title>
<img src="/img/logo.png" alt="Meadowlark Travel logo">
{{{_sections.head}}}
</head>
<body>
{{{body}}}
{{{_sections.script}}}
</body>
</html>- layout 에 표시한 위치에 동적 태그를 view 에서 추가해주는 용도로 사용할 수 있다.
- 섹션은
{{#section '목표태그'}} 내용 {{/section}}으로 사용할 수 있다. - 첫번째 섹션은
<head>태그 내에 meta 태그를 추가한다. - 두번째 섹션은 레이아웃에
<script>태그에 (없다면 생성해서) 자바스크립트 절을 추가하고 있다.
- 섹션은
{{#section 'head'}}
<meta name="robots" content="noindex">
{{/section}}
<h1>Test Page</h1>
<p>We're testing some script stuff.</p>
{{#section 'script'}}
<script>
document.querySelector('body')
.insertAdjacentHTML('beforeEnd', '<small>(scripting works!)</small>')
</script>
{{/section}}
잘못된 내용 PR 환영