위젯 만들기

위젯 만들기에 대해 설명합니다.
콘솔에서 생성된 위젯은 별도의 Data ID 없이 대부분의 Request에 요소로 추가하여 화면에 사용 할 수 있습니다.

Data ID

별도의 Data ID 없이 Request 요소로 추가합니다. 예시){'dataID':'GET_POST','widget':['widget1','widget2']}

Request

Name Value
widget 위젯코드 ['widget_code_1','widget_code_n'](콘솔의 위젯 관리에서 확인 가능)

Response

JSON : output.widget['widget_code_n'], PHP : $output['widget']['widget_code_n']

Name Value
content_category 위젯 콘텐츠 카테고리(게시판 시퀀스 등)
content_limit 콘텐츠 노출 수
content_sort 콘텐츠 정렬(asc or desc)
create_date 위젯 생성일
description 웨젯 설명
widget_code 위젯 코드
widget_key 위젯 키
widget_type 위젯 형식(bbs_daily_rate:조회율 순,bbs_create_date:등록일 순,custom:사용자 지정 게시물)
content_list 위젯 콘텐츠 - 게시물 목록과 동일한 Response

HTML attributes

Tag : a 게시물 보기 링크

Name Value Description
href [URL]?post_key=[post_key] post_key 파라미터를 포함한 게시물 상세 페이지 URL

HTML

VueJS

<div class="bg-white p-3 rounded-3">
    <div>
        <h6 class="mb-3">많이본 게시물</h6>
        <ul class="list-group list-group-flush">
            <li class="list-group-item bg-transparent px-1" v-for="post in output.widget.most_read_post.content_list">
	            <div class="d-flex justify-content-between align-items-center">
	                <a :href="'/community/detail?post_key='+post.post_key" class="text-black">
		                <small class="crop-text-1">{\{ post.subject }}</small>
	                </a>
		            <small>{\{ post.create_date }}</small>
	            </div>
            </li>
        </ul>
    </div>
</div>

PHP

<div class="bg-white p-3 rounded-3">
	<div>
		<h6 class="mb-3">많이본 게시물</h6>
		<ul class="list-group list-group-flush">
			<? foreach($output['widget']['most_read_post']['content_list'] as $intKey=>$arrPost){ ?>
			<li class="list-group-item bg-transparent px-1">
				<div class="d-flex justify-content-between align-items-center">
					<a href="/community/detail?post_key=<?=$arrPost['post_key'];?>" class="text-black">
						<small class="crop-text-1"><?=$arrPost['subject'];?></small>
					</a>
					<small><?=$arrPost['create_date'];?></small>
				</div>
			</li>
			<? } ?>
		</ul>
	</div>
</div>

관련 링크