안녕하세요~

 

여러 위젯 파일에서 공통으로 쓰이는 부분을 별도 파일로 만들어 include를 해서 사용할수 있는 방법이 있을가요?

 

공통 부분을 수정할때 모든 페이지에서 다 변경을 해줘야하니 시간도 오래걸리고 너무 비효율적이네요ㅠ

 

가령 위젯 페이지 content 에 위쪽에 탭 같은것을 html로 넣었는데 하나만 수정하려해도 여러 페이지에서 싹다 변경 해주려니

 

실수도 생기고 시간도 너무 오래 걸려서 방식을 변경해야 할것 같거든요..

 

좋은 방도가 있을까요?

  • Lv5
    https://rhymix.org/manual/theme/template_v2#%EC%9D%B8%ED%81%B4%EB%A3%A8%EB%93%9C%EC%8B%9C_%EB%B3%80%EC%88%98_%EC%A0%84%EB%8B%AC

    위젯 템플릿 파일을 별도로 컴포넌트화 시켜 인클루드시 변수를 전달해주면 됩니다.
  • ?
    php 예시
    <?php include 'header.php'; ?>

    ssl 예시
    <!--#include virtual="/path/to/header.html" -->

    javascript 예시
    fetch('header.html')
    .then(response => response.text())
    .then(html => document.getElementById('header-placeholder').innerHTML = html);

    HTML 파일에서는 다음과 같이 플레이스홀더를 배치합니다
    <div id="header-placeholder"></div>

    <template id="my-header">
    <div>Here is the common header</div>
    </template>

    <script>
    class MyHeader extends HTMLElement {
    constructor() {
    super();
    const template = document.getElementById('my-header').content;
    const shadowRoot = this.attachShadow({mode: 'open'}).appendChild(template.cloneNode(true));
    }
    }
    customElements.define('my-header', MyHeader);
    </script>


    사용시
    <my-header></my-header>