Essepage 에서 여러 페이지로 이루어진 웹페이지를 만들 때, 헤더나 푸터 처럼 여러 페이지에 공통으로 사용되는 부분을 essepage-component 로 만드는 방법에 대해 포스팅합니다.
1. 푸터로 사용할 페이지 만들기
우선, 푸터로 사용할 페이지를 추가합니다.
여기서는 예제를 위해서 public 아래에 footer 라는 폴더를 만들고 그 안에 +page.essepage 파일을 만들겠습니다.
파일이 추가되었다면, 푸터로 사용할 페이지에 HTML 코드를 작업합니다. 예제가 필요한 분은 아래 코드를 이용해보세요^^
<div style="padding: 2rem; background-color: green;">
<p style="color: white; text-align: center;">
푸터 FOOTER
</p>
</div>2. 추가한 푸터를 여러 페이지에서 사용하는 방법
1번에서 만든 푸터 파일을 essepage-component 로 간단하게 사용하는 방법입니다.
푸터를 표시하고 싶은 페이지의 코드 부분으로 이동해서, 아래 코드를 입력합니다.
<essepage-component path="/public/footer/+page.essepage"></essepage-component>제대로 입력되었다면, 이렇게 푸터가 표시될 겁니다.
푸터 FOOTER
다른 페이지에도 같은 essepage-component 코드를 입력하면, 같은 내용이 표시됩니다.
간단하죠?^^
이렇게 essepage-component 를 이용해서 푸터를 표시하면, 푸터의 내용을 하나의 코드로 관리할 수 있게 됩니다. 수정하거나 내용을 추가했을 때 모든 푸터에 반영되기 때문에 페이지 작업이나 유지보수를 생각한다면 꼭 사용해야하는 기능입니다.
예제로 푸터를 이야기했지만, 여러 페이지에서 사용하는 공통된 코드들이 있다면, essepage-component 를 사용해보세요😀 작업이 정말 편해집니다^^
3. essepage-component 를 쓸 때 알아두면 좋은팁
essepage-component 를 사용할 때 대상 파일의 경로를 path 에 입력하는데요.
이 때, 파일의 이름이 +page.essepage이나 +layout.essepage 라면, 입력하지 않아도 됩니다.
2번의 코드에서 +page.essepage 없이 아래처럼 입력할 수 있습니다.
<essepage-component path="/public/footer/"></essepage-component>그리고, 좀 더 줄여서 이렇게도 입력할 수 있습니다.
<essepage-component path="/public/footer/" />essepage-component 로 Essepage에서 더 자유롭게 코딩하는 경험을 느껴보시는데 이 글이 도움이 되었으면 좋겠습니다~^^