GnuTailwindcss v0.1 > 그누보드5 테마

그누보드5 테마

좋은 댓글과 좋아요는 제작자에게 큰힘이 됩니다.

GnuTailwindcss v0.1 정보

GnuTailwindcss v0.1

첨부파일

GnuTailwind_v0.1.zip (9.2M) 386회 다운로드 2021-09-01 03:00:25
테스트한 버전5.4.5.5
호환 가능 버전5.4 이상

본문

tailwindcss를 사용하여 그누보드를 반응형으로 제작해 보았습니다.
 

# 사용 환경 및 지원
그누보드 5.4.5.5 버전을 사용하였으며, tailwindcss 2.2.7 버전을 사용하였기에 이 테마는 인터넷 익스플로러는 지원하지 않습니다. (tailwindcss 1.9까지만 인터넷 익스플로러를 지원)

그누보드 5.3.x에서는 사용할 수 없으며, 5.4 이상이면 사용이 가능할 것으로 생각합니다.
공교롭게도 몇 개 설치해 놓은 그누보드의 버전이 모두 5.4.5.5이기에 직업 확인하지는 못했지만, 5.4.x면 사용이 가능하지 않을까 생각합니다.
 

# 구성 파일
basic 게시판과 gallery 게시판, 그리고 최신글의 네 가지 타입(basic, notice, pic_block, 그리고 pic_list)에 대해 각각 tailwindcss 버전이 제공됩니다.
(게시판은 tailwind_basic과 tailwind_gallery, 최신글은 tail_basic, tail_notice, tail_pic_block, tail_pic_list)
 

그리고 index 파일은 두 개를 제공합니다.
하나는 slick 슬라이더와 최신글의 네 가지 타입의 조합으로 구성하였습니다.(index_latest.php)
다른 하나는 사이트 소개 형식으로 구성하였으며, AOS를 사용하여 간단한 애니메이션을 적용했고, 슬라이더는 swiper를 사용하였습니다.(index.php)
 

slick 슬라이더에 사용한 이미지는 img > slick 폴더, swiper 슬라이더에 사용한 이미지는 img > testimonials 폴더에 있습니다.
 

# 설정
반응형으로 사용할 것이기에 config.php의 라인 130 부근에서 아래의 내용을 찾아 true를 false로 바꿔주셔야 합니다.
define('G5_USE_MOBILE', true); // 모바일 홈페이지를 사용하지 않을 경우 false 로 설정
 

그리고 관리자에서 테마를 변경하시고, 기본환경설정에서는 아래의 내용을 모두 (테마) basic으로 맞춰주세요.
(최근게시물 스킨, 검색 스킨, 접속자 스킨, FAQ 스킨, 회원 스킨)
 

관리자의 게시판 관리에 있는 1:1 문의 설정에서 스킨 디렉토리를 (테마) basic으로 맞춰주신 후 사용하시면 됩니다.
 

#사족
그누보드에 tailwindcss를 적용하면 재미 있겠다 싶어 아무런 계획 없이 시작했기에 그누보드 자체의 css와 커스터마이즈한 css가 깔끔하게 정돈된 상태가 아니며, 테마의 완성도도 그리 높지 않음을 양해바랍니다.
 

그누보드의 많은 부분(즉, css)을 tailwindcss로 변경하고 싶었는데, 그 작업량이 상상을 초월하네요.
해서, 더는 손을 댈 엄두가 나지 않아 버전 업 등은 전혀 고려하지 않고 있습니다.
너무 힘들어요. ^^
 

실사용도 가능하기는 하지만, 아직 손을 대지 못한 곳도 많으니 참조 정도로 활용하시면 좋을 듯합니다.
 

이전에 그누 5.3.x에 부트스트랩 4를 적용하여 GnuBS4 테마를 공개하였는데, 언제 기회가 되면 그누 5.4.x에 부트스트랩 5를 적용하여 손을 보고 싶은 생각도 있기는 한데, 그저 생각으로만 머물고 있네요.
 

그럼, 건강과 행복이 함께 하는 일상이길 바랍니다.
 

감사합니다.

추천
19

댓글 전체

특정게시판을 관리자에서 페이지를 만들지 않고 php 페이지를 따로 만들어서 할려고 하는데 방법좀 알려 주실수 있나요?

01.php 파일을 만들어서 특정 게시판와 카테고리까지 불로 올려고 합니다.

<?php
include_once('./_common.php');
$g5['title'] = '타이틀';
include_once(G5_THEME_PATH.'/head.php');
?>

<div>


특정 게시판와 카테고리까지 불로 올려고 합니다.

 
</div>

<?php
include_once(G5_THEME_PATH.'/tail.php');
?>
정확히 어떤 용도로 사용하실 계획인지 알 수없어 본 소스를 적용했을 때 원하지 않는 부분이 일부 있을 수도 있겠지만, 일단 문의하신 내용에 맞춰 작성한 소스를 알려드립니다.

먼저 그누보드 루트에 page 폴더를 만드시고, 그 안에 category.php를 만드세요.(폴더명과 파일명은 원하시는 것으로 변경하셔도 됩니다.)

그리고 관리자의 메뉴 설정에 메뉴를 추가하실 때, 그 링크를 다음과 같이 설정합니다.
http://도메인명/page/category.php

그럼, category.php의 내용입니다.
본 소스 상단에 있는 $bo_table 변수에 카테고리를 불러오길 원하는 게시판의 id를 설정해 주세야 합니다.

<?php
include_once('../common.php');
include_once(G5_PATH.'/head.php');

// 페이지 제목
// $g5['title'] = "카테고리 불러오기";

// 카테고리를 불러오길 원하는 게시판의 id
$bo_table = "free";

$sql = "SELECT * FROM {$g5['board_table']} WHERE bo_table = '$bo_table'";
$row = sql_fetch($sql);
$board['bo_category_list'] = $row['bo_category_list'];

$is_category = true;
$category_href = get_pretty_url($bo_table);

$category_option .= '<li><a href="'.$category_href.'"';
if ($sca=='')
    $category_option .= ' id="bo_cate_on"';
$category_option .= '>전체</a></li>';

$categories = explode('|', $board['bo_category_list']); // 구분자가 , 로 되어 있음
for ($i=0; $i<count($categories); $i++) {
    $category = trim($categories[$i]);
    if ($category=='') continue;
    $category_option .= '<li><a href="'.(get_pretty_url($bo_table,'','sca='.urlencode($category))).'"';
    $category_msg = '';
    if ($category==$sca) { // 현재 선택된 카테고리라면
        $category_option .= ' id="bo_cate_on"';
        $category_msg = '<span class="sound_only">열린 분류 </span>';
    }
    $category_option .= '>'.$category_msg.$category.'</a></li>';
}
?>

<div class="pt-6 pb-24">
<!-- 게시판 카테고리 시작 { -->
<?php if ($is_category) { ?>
<nav id="bo_cate">
    <h2><?php echo $board['bo_subject'] ?> 카테고리</h2>
    <ul id="bo_cate_ul">
        <?php echo $category_option ?>
    </ul>
</nav>
<?php } ?>
<!-- } 게시판 카테고리 끝 -->
</div>

<?php
include_once(G5_PATH.'/tail.php');
?>

저의 답글이 원하시는 내용이길 바랍니다.

부족한 부분이 많아서 마음이 불편한데, 이런 과찬의 말씀을 들으니 이젠 부끄러워집니다. ^^
Tailwindcss는 다른 프레임과는 달리 손이 많이 가는데다가 그누보드와 같이 매우 복잡한 구성에 접목하려니 작업량이 상상을 초월하더라구요.
그래서 작업하다가 너무 지쳐서 포기하는 심정이 되고야 말았답니다. ^^
부족하지만, 그래도 도움이 되면 좋겠습니다.
감사합니다.
으아 제가 도전해보려고 했던건데 직접하신분이 계시네요 ㅎㅎㅎ
저야 모바일에만 적용해보려고 했는데....
다운받아 잘 공부해보도록 하겠습니다 (_ _)
엄청난 노가다셨을텐데 감사합니다.
네~ 정말 노가다도 그런 노가다가 없더라고요. ^^
워낙 경황없이 손을 대서 내용이 엉망일 텐데, 그 점 양해 부탁드립니다.
감사합니다.
주신 테마 너무 잘 적용하고 있습니다.
한가지 질문은 메인메뉴를 반드시 클릭해야 서브가 열리는데, 이것을 pc에서는 hover로 열리게 하는 방법이 있을까요?...
모바일은 그렇게 열리는 게 좋지만, PC는 아무래도 기존 방식을 선호하는 사용자들이 있을 것 같습니다...^^
감사합니다.^^
안녕하세요?

head.php에서 아래와 같이 수정해 보시기 바랍니다.

라인 118, 144 부근
- 수정 전
<div @click.away="open = false"
-수정 후
<div @click.away="open = false" @mouseover="open = true" @mouseleave="open = false"

라인 126, 149 부근
-수정 전
<div x-show="open" ...... class="absolute right-0 w-full mt-2
-수정 후
<div x-show="open" @mouseleave="open = false" ...... class="absolute right-0 w-full pt-2

즉, @mouseover, @mouseleave 등을 추가하는 것이며, mt-2를 pt-2로 수정하는 것은 질문과는 무관한 버그 수정입니다. ^^

그럼, 도움이 되었길 바랍니다.

감사합니다.
무료로 공개해주셔서 감사합니다.
혹시 다크모드는 어떻게 설정하는지 여쭤봅니다. 링크 홈페이지랑 다운 받아 만든 홈페이지랑
메뉴 부분이 살짝 달라 보여서요.. 해와 달이 안 보입니다..ㅜㅜ
새해 복 많이 받으세요.~~
Tailwindcss 테마의 버전을 업데이트하여 위의 링크에는 가장 최신 버전의 테마가 설치되어 있습니다.
동일한 테마의 각 버전마다 각각 따로 링크를 만들어 각각 유지하면 좋겠지만, 서버 용량 상 테마별로 최신 버전 하나만 링크한 상태입니다.

지금 이 테마는 다크 모드를 지원하지 않는 이전 Tailwindcss 버전이며, 이 보다 더 상위 버전인 'GnuTailwindcss v0.3.0 Dark Mode 지원'이 현재 링크되어 있는 버전입니다.
따라서 이 테마 게시판에서 'GnuTailwindcss v0.3.0 Dark Mode 지원' 글로 가시면 해와 달을 보실 수 있으며, 그 버전이 Tailwindcss  테마의 최신 버전입니다. ^^
전체 188 |RSS
그누보드5 테마 내용 검색

회원로그인

(주)에스아이알소프트 / 대표:홍석명 / (06211) 서울특별시 강남구 역삼동 707-34 한신인터밸리24 서관 1404호 / E-Mail: admin@sir.kr
사업자등록번호: 217-81-36347 / 통신판매업신고번호:2014-서울강남-02098호 / 개인정보보호책임자:김민섭(minsup@sir.kr)
© SIRSOFT