[이윰] 여분필드를 활용한 간단한 게시판 입력 서식 만들기

페이지 정보

루루아빠 3,132 2016.05.13 22:10

평점

  • 평점 : 0점 (0명 참여)

본문

여분필드를 활용해서 게시판 글 작성시 간단한 입력 서식을 만들고 뷰페이지와 리스트페이지 그리고 메인 최신글로 출력하는 방법에 대해 설명드리겠습니다.
우선 그누보드 여분필드 중 1~5까지는 이윰에서 사용을 합니다.
사용자 분께서는 여분필드를 사용하신다면 6~9까지 사용하시면 되겠습니다.
 
반응형 basic2테마 webzine보드스킨을 기준으로 설명드리며 위치 및 스타일은 사용자에게 맞게 수정을 하시기 바랍니다.
1. 게시판 쓰기 스킨에 여분필드 입력 서식 만들기
write.skin.html 파일 제목아래에 여분필드 6 부분을 추가합니다.

<section>
    <div class="row">
        <div class="col col-8 md-margin-bottom-10">
            <label for="wr_subject" class="sound_only">제목<strong class="sound_only"> 필수</strong></label>
            <label class="input">
                <i class="icon-prepend fa fa-edit"></i>
                <input type="text" name="wr_subject" value="{_subject}" id="wr_subject" required class="form-control" size="50" maxlength="255">
                <b class="tooltip tooltip-top-left">제목을 입력 해 주세요.</b>
            </label>
        </div>
        <!--{? _is_member //임시 저장된 글 기능}-->
        <div class="col col-4 text-right">
            <script src="../../../../../../js/autosave.js"></script>
            <button type="button" id="btn_autosave" class="btn-e btn-e-red">임시 저장된 글 (<span id="autosave_count">{_autosave_count}</span>)</button>
            <div id="autosave_pop">
                <strong>임시 저장된 글 목록</strong>
                <div><span class="autosave_close"><i class="fa fa-times"></i></span></div>
                <div class="clearfix"></div>
                <ul></ul>
                <div><span class="autosave_close btn-e btn-e-dark btn-e-sm">닫기</span></div>
            </div>
        </div>
        <!--{/}-->
    </div>
</section>
<div class="margin-hr-10"></div>
 
<!--{* 여분필드 6 시작 *}-->
<section>
    <div class="row">
        <div class="col col-12 md-margin-bottom-10">
            <label for="wr_6" class="sound_only">출처</label>
            <label class="input">
                <i class="icon-prepend fa fa-book"></i>
                <input type="text" name="wr_6" value="{_wr_6}" id="wr_6" required class="form-control" size="50" maxlength="255" placeholder="출처를 입력 해 주세요.">
            </label>
        </div>
    </div>
</section>
<div class="margin-hr-10"></div>
 
<!--{* 여분필드 6 끝 *}-->
여분필드를 활용한 간단한 게시판 입력 서식 만들기
2. 뷰페이지에 여분필드 출력하기
view.skin.html 파일 별점과 짧은 주소 사이에 여분필드 6를 넣어줍니다.

<!--{? eyoom_board.bo_use_rating == '1'}-->
<section class="board-view-star">
    <h2>별점</h2>
    <ul class="list-unstyled star-ratings-view">
        <li>- 별점통계: </li>
        <li><i class="rating{? rating.star > 0}-selected{/} fa fa-star"></i></li>
        <li><i class="rating{? rating.star > 1}-selected{/} fa fa-star"></i></li>
        <li><i class="rating{? rating.star > 2}-selected{/} fa fa-star"></i></li>
        <li><i class="rating{? rating.star > 3}-selected{/} fa fa-star"></i></li>
        <li><i class="rating{? rating.star > 4}-selected{/} fa fa-star"></i></li>
        <li class="margin-left-5">- 평점 : <!--{rating.point}-->점 ({=number_format(rating.members)}명 참여)</li>
    </ul>
    <div class="clearfix"></div>
</section>
<!--{/}-->
 
<!--{* 여분필드 6 시작 *}-->
<section class="board-view-star">
    <h2>출처</h2>
    <div> - 출처: {view.wr_6}</div>
</section>
<!--{* 여분필드 6 끝 *}-->
 
<section class="board-view-short-url">
    <h2>짧은주소</h2>
    <ul class="list-unstyled">
        <li>
            - 짧은주소:
            <a href="{short_url}" target="_blank">{short_url}</a>
            <a href="javascript:void(0);" type="button" data-toggle="modal" data-target=".short-url-modal" class="copy_short_url btn-e btn-e-xs btn-e-light-grey"><span>주소복사</span></a>
        </li>
    </ul>
</section>
여분필드를 활용한 간단한 게시판 입력 서식 만들기
3. 리스트페이지에 여분필드 출력하기
list.skin.html 파일 제목출력 부분위에 여분필드 6를 넣어줍니다.

    <!--{? eyoom_board.bo_use_rating == '1' && eyoom_board.bo_use_rating_list == '1'}-->
    <li>
        <ul class="list-unstyled list-inline star-ratings-list">
            <li><i class="rating{? .star > 0}-selected{/} fa fa-star"></i></li>
            <li><i class="rating{? .star > 1}-selected{/} fa fa-star"></i></li>
            <li><i class="rating{? .star > 2}-selected{/} fa fa-star"></i></li>
            <li><i class="rating{? .star > 3}-selected{/} fa fa-star"></i></li>
            <li><i class="rating{? .star > 4}-selected{/} fa fa-star"></i></li>
        </ul>
    </li>
    <!--{/}-->
    <!--{* 여분필드 6 시작 *}-->
    <li>출처:{.wr_6}</li>
    <!--{* 여분필드 6 끝 *}-->
</ul>
<p class="color-grey">
    <!--{? _is_checkbox}-->
    <span class="pull-left">
        <label for="chk_wr_id_{.key_}" class="sound_only">{.subject}</label>
        <label class="checkbox">
            <input type="checkbox" name="chk_wr_id[]" value="{.wr_id}" id="chk_wr_id_{.key_}"><i></i>
        </label>
    </span>
    <!--{/}-->
    {.content}
    <div class="clearfix"></div>
</p>  
여분필드를 활용한 간단한 게시판 입력 서식 만들기
4. 메인 최신글 출력하기
EB Basic2 Skin Pack 에 제공되는 webzine 최신글 스킨을 예로 하겠습니다.
latest.skin.html 파일에 여분필드 6 부분을 넣어줍니다.

<div class="webzine-txt">
    <a href="{.href}">
        <div class="txt-subj">
            <h5>{.wr_subject}</h5>
        </div>
        <!--{? content == 'y'}-->
        <p class="txt-cont">{.wr_content}</p>
        <!--{/}-->
        <span class="txt-photo"><!--{? .mb_photo}-->{.mb_photo}<!--{:}--><span class="txt-user-icon"><i class="fa fa-user"></i></span><!--{/}--></span>
        <span class="txt-nick">{.mb_nick}</span>
        <span class="txt-time"><i class="fa fa-clock-o {? .new}color-red{:}i-color{/}"></i> {eb->date_time('Y-m-d',.datetime)}</span>
        <!--{* 여분필드 6 시작 *}-->
        <span class="font-size-11 color-grey"> 출처:{.wr_6}</span>
        <!--{* 여분필드 6 끝 *}-->
    </a>
</div>
여분필드를 활용한 간단한 게시판 입력 서식 만들기
추천인
  • 추천해 주세요
6
루루아빠 - 회원등급 : 최고관리자 - 포인트 : 1,295,461
레벨 97
경험치 1,400,095

Progress Bar 12%

- 가입일 : 2015-03-04 03:24:54
- 서명 : KNOW YOUR LIMITS BUT NEVER STOP TRYING TO EXCEED THEM !!
- 자기소개 : 루루의 자랑 루루아빠랍니다~~

댓글

첫 번째 댓글을 남겨 주세요

Total 7482138 페이지
제목 글쓴이 날짜 조회 추천
그누•영카트  🏆 그누보드 5.2.9 패치 루루아빠 2017.07.05 5,062 0
그누•영카트  🏆 영카트 5.2.9 패치 루루아빠 2017.07.05 3,011 0
Bootstrap  🏆 뒤로가기 클릭시 모달창 닫기 루루아빠 2017.07.18 4,327 0
jQuery  🏆 이미지 로딩 실패시 대체 이미지 보여주기 루루아빠 2017.07.18 2,547 1
그누•영카트  🏆 영카트 5.2.9.1 루루아빠 2017.07.25 2,870 0
Bootstrap  🏆 부트스트랩 툴팁 텍스트 한 줄로 보여주기 루루아빠 2017.08.03 2,376 1
이윰  🏆 최신글 추출 시 공지글을 제외하기 루루아빠 2017.08.19 2,738 0
jQuery  🏆 a href 속성 마우스 오버시 브라우저 하단 링크 주소 감추기 루루아빠 2017.08.29 2,762 0
그누•영카트  🏆 그누보드 5.2.9.2 패치 루루아빠 2017.08.31 2,406 0
그누•영카트  🏆 영카트 5.2.9.2 패치 루루아빠 2017.08.31 3,102 0
이윰  🏆 인기검색어 노출수, 기간 설정하기 루루아빠 2017.09.03 3,124 1
그누•영카트  🏆 그누보드 5.2.9.3 패치 루루아빠 2017.09.14 2,518 0
그누•영카트  🏆 영카트 5.2.9.3 패치 루루아빠 2017.09.14 3,079 0
그누•영카트  🏆 영카트 5.2.9.4 패치 루루아빠 2017.09.25 2,794 0
이윰  🏆 특정 페이지에 다른 헤더 적용하기 루루아빠 2017.10.16 2,658 0
Bootstrap  댓글+1🏆 모달창이 열렸을 때 백그라운드 스크롤 금지하기 루루아빠 2017.10.17 3,040 1
그누•영카트  🏆 그누보드 5.2.9.5 패치 루루아빠 2017.10.22 2,649 0
그누•영카트  🏆 영카트 5.2.9.5 패치 루루아빠 2017.10.22 2,923 0
기타  🏆 Font Awesome 4.7.0 - Web Application, Directional 루루아빠 2017.11.20 3,324 0
기타  🏆 Font Awesome 4.7.0 - Form Control, Video Player, Chart, Text Editor, File Type, Spinner 루루아빠 2017.11.20 2,594 0