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

페이지 정보

루루아빠 3,114 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,294,164
레벨 97
경험치 1,397,066

Progress Bar 1%

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

댓글

첫 번째 댓글을 남겨 주세요

Total 7482138 페이지
제목 글쓴이 날짜 조회 추천
그누•영카트  🏆 영카트 5.3.1.9 패치 shadow2fox 2018.10.19 1,932 0
PHP  🏆 PHP Warning: Invalid argument supplied for foreach() 해결책 shadow2fox 2018.11.11 1,666 0
제로  🏆 카테고리/페이지 상관없이 공지는 무조건 보이게 루루아빠 2006.05.26 3,272 0
이윰  🏆 🎞️ 그누보드 5.17, 영카트 5.16 대응 테마 패치 루루아빠 2015.11.18 2,766 0
그누•영카트  🏆 그누보드 5.3.2.0 패치 shadow2fox 2018.11.22 1,824 0
DB  🏆 MYSQL 유저 추가 및 삭제 야돌이 2006.05.28 2,600 0
이윰  🏆 🎞️ Eyoom Builder 1.1.16 패치 루루아빠 2015.11.19 2,928 0
그누•영카트  🏆 영카트 5.3.2.0 패치 shadow2fox 2018.11.22 1,940 0
그누•영카트  🏆 영카트 5.4.5.2 shadow2fox 2021.03.17 1,062 0
DB  🏆 MYSQL root 비번 분실시 해결방법 야돌이 2006.05.28 3,175 0
그누•영카트  댓글+1🏆 🎞️ 접근차단 IP, 접근가능 IP로 인해 홈에 접근 불가될때 루루아빠 2015.11.21 2,815 0
이윰  🏆 마우스 오버시 이전글 다음글에 제목을 띄우기 shadow2fox 2018.11.27 2,083 0
DB  🏆 MYSQL에서 DB 백업 및 복구 방법 야돌이 2006.05.28 2,990 0
이윰  댓글+2🏆 회원 프로필 사진 변경시 바로 갱신하여 보여 주기 shadow2fox 2018.12.04 2,456 0
제로  🏆 선택한 게시글은 목록 제목에서 진하게 표시하기 루루아빠 2006.05.29 3,399 0
그누•영카트  🏆 🎞️ 그누보드 5.1.8 패치 루루아빠 2015.11.25 2,500 0
제로  댓글+3🏆 한글 이름이 들어간 이미지나 동영상 익스 설정없이 보여주기 루루아빠 2006.06.01 3,170 0
그누•영카트  🏆 🎞️ 영카트 5.1.7 패치 루루아빠 2015.11.25 2,438 0
그누•영카트  🏆 영카트 5.4.5.3 shadow2fox 2021.04.05 1,097 0
기타  🏆 🎞️ 윈도우 서버를 위한 하드 링크와 심볼릭 링크 루루아빠 2015.11.29 2,388 0