테스트 사이트 - 개발 중인 베타 버전입니다

GnuTailwindcss v0.1

· 4년 전 · 10582 · 65
index_modern.png
index_latest.png
basic.png
gallery.png

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를 적용하여 손을 보고 싶은 생각도 있기는 한데, 그저 생각으로만 머물고 있네요.
 

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

감사합니다.

댓글 작성

댓글을 작성하시려면 로그인이 필요합니다.

로그인하기

댓글 65개

좋은 소스 공유 감사합니다.
도움이 되길 바랍니다.
감사합니다.
넘 좋습니다. 감사합니다^^
2년 전
주신 테마 너무 잘 적용하고 있습니다.
한가지 질문은 메인메뉴를 반드시 클릭해야 서브가 열리는데, 이것을 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로 수정하는 것은 질문과는 무관한 버그 수정입니다. ^^

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

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

지금 이 테마는 다크 모드를 지원하지 않는 이전 Tailwindcss 버전이며, 이 보다 더 상위 버전인 'GnuTailwindcss v0.3.0 Dark Mode 지원'이 현재 링크되어 있는 버전입니다.
따라서 이 테마 게시판에서 'GnuTailwindcss v0.3.0 Dark Mode 지원' 글로 가시면 해와 달을 보실 수 있으며, 그 버전이 Tailwindcss 테마의 최신 버전입니다. ^^
2년 전
아~그렇군요.
친절한 설명 감사합니다. 고맙게 잘 사용할게요~^^

게시글 목록

번호 제목
7794
7698
7516
7495
7433
7314
7194
7113
7110
6928
6858
6733