메인 레이아웃 사용자 지정

제품 지원
1

안녕하세요, 메인 아웃렛(main-outlet)에 왼쪽과 오른쪽 두 개의 열을 추가하여 배너로 사용하려고 합니다.

지금까지 파악한 바로는 플러그인 아웃렛 공간에 새로운 HTML 코드를 쉽게 추가할 수 있다고 이해하고 있습니다.
하지만 이 배너를 위한 공간이 이미 존재하지 않기 때문에, 제가 하고 싶은 것은 아닙니다.

어떤 방식으로 접근해야 할까요?

2

다음 링크를 확인해 보세요:

3

음.. 그러면 각 배너마다 위젯을 하나씩 만들어서 로드하는 거죠?

4

기존의 HTML 위젯이 필요한 기능을 모두 제공할 수 있습니다. GitHub - paviliondev/layouts-custom-html: A widget for the Layouts plugin that allows for Custom HTML to be inserted · GitHub

5

아마도 해결책일 것 같습니다. 다만 아직 제대로 작동하게 만들지 못했어요.

무엇을 말씀하시는지, 그리고 기존 HTML 위젯을 어떻게 사용해야 하는지 이해가 되지 않습니다. :confused:
그래서 두 개의 배너를 생성하고 화면 양쪽에 추가하는 자체 위젯을 만들기로 했습니다.

위젯을 생성했습니다: https://github.com/teakap/banner-theme-component

banners_import
banners_import2016×472 50 KB

위젯이 로드되었고 레이아웃 설정에 위젯으로 추가했지만, 여전히 페이지에서 위젯의 HTML이 보이지 않습니다.

6

깊이 파고들어서 좋네요!

JavaScript 디버깅할 때는 항상, 반드시 브라우저 콘솔을 열어두세요.

제가 확인한 결과는 다음과 같습니다:

image

import 구문이 빠져 있습니다:

import { h } from 'virtual-dom';

이렇게 하면 수정됩니다:

image
image359×132 2.15 KB

다만, 클래스 이름이 그대로 표시되는 문제(위와 같이)를 피하려면 아래처럼 코드를 작성해야 합니다:

h ("span.some-banner-class", "my text"):

image
image441×125 2.62 KB

image

계속 진행하세요! :slight_smile: