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

페이지 정보

루루아빠 3,061 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,290,342
레벨 96
경험치 1,388,035

Progress Bar 70%

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

댓글

첫 번째 댓글을 남겨 주세요

Total 7462138 페이지
제목 글쓴이 날짜 조회 추천
이윰  🏆 게시글 작성시 전화번호 입력하고 구독자가 전화걸 수 있게 하기 루루아빠 2015.09.17 2,461 0
이윰  🏆 Eyoom Builder 1.2.4 패치 루루아빠 2016.04.23 2,459 0
그누•영카트  🏆 영카트 5.2.6 패치 루루아빠 2017.01.20 2,456 0
제로  🏆 💾 등록실패 방지 (글 등록 실패로 인한 글날림 방지) 루루아빠 2005.07.05 2,454 0
그누•영카트  🏆 구글 웹폰트를 적용해보자 루루아빠 2015.10.27 2,453 0
이윰  🏆 이윰빌더 외부이미지 로컬 저장 https 보안서버도 적용하기 루루아빠 2017.11.22 2,452 0
이윰  🏆 최신글에서 글 작성 시간을 나타내지 않기 루루아빠 2017.02.16 2,450 0
제로  🏆 [스킨만들기] 제로보드 스킨 파일들의 구성 루루아빠 2005.06.23 2,448 0
그누•영카트  🏆 그누보드 5.1.16 패치 루루아빠 2016.04.23 2,447 0
그누•영카트  🏆 그누보드 5.1.1 패치 루루아빠 2015.08.28 2,440 0
그누•영카트  🏆 영카트 5.1.14 패치 루루아빠 2016.03.08 2,432 0
그누•영카트  🏆 그누보드 5.2.1 패치 루루아빠 2016.08.22 2,432 0
그누•영카트  🏆 영카트 5.3.1.2 보안 패치 루루아빠 2018.04.21 2,424 0
제로  🏆 📸 💾 제로보드 비밀번호 힌트와 답으로 웹에서 바로찾기 루루아빠 2005.07.11 2,419 0
그누•영카트  🏆 🎞️ 영카트 5.1.6 패치 루루아빠 2015.11.17 2,419 0
이윰  🏆 🎞️ Input 관련 버튼과 이윰 버튼 정렬 맞추기 루루아빠 2015.11.17 2,416 0
그누•영카트  🏆 🎞️ 영카트 5.1.7 패치 루루아빠 2015.11.25 2,416 0
JavaScript  🏆 반응형 테마에서 Theia Sticky Sidebar 사용시 레이아웃이 중첩되는 문제 해결하기 루루아빠 2017.04.22 2,416 0
이윰  🏆 🎞️ 게시글 본문에 동영상(HTML5)이 있을 시 아이콘 보여주기 루루아빠 2018.01.29 2,415 0
이윰  🏆 Eyoom Builder 3.0.9 패치 shadow2fox 2019.03.25 2,412 0