그누보드를 이용하여 홈페이지를 자작하는 방법에 대한 강의 : 아주 찬찬히 잘 알려주신다.
1. 도메인을 구매한다.
www.iwinv.kr/account/domain.html
도메인 간편 구매 및 관리 | iwinv 도메인
iwinv 도메인 서비스는 도메인에 대한 구매, 삭제, 변경, 도메인 연결 등 서비스 운영에 필요한 모든 것을 전용 관리콘솔에서 쉽고 편리하게 관리할 수 있습니다.
www.iwinv.kr
FTP 주소 / 비번, DB 주소 / 비번.... 뒤에 혼란의 도가니가 될 가망성이 크다
도메인 구매 후 셋팅완료 페이지를 스샷 찍어놓자!
2. FTP 프로그램을 설치한다.
파일질라 또는 알드라이브를 찾아보고 본인이 편한 것을 골라 설치 후 연결한다.
3. 그누보드 홈페이지에서 테마를 다운받는다
그누보드5 테마 > SIR
그누보드, 영카트 개발사로 웹사이트와 쇼핑몰을 무료로 만들수 있는 수많은 솔루션을 무료로 제공하고 있으며 다국어버전도 배포하고 있습니다.
sir.kr
4. 테마 적용 후, 내 홈페이지 관리자 모드로 들어가서 게시판을 만들고 세세한 셋팅을 한다.
5-1. 메인화면에 보여지는 각 게시판 종류는 루트 > 테마 > 내가 적용한 테마 > 모바일 > index.php 내 PC에 다운로드.
메모장 또는 EditPlus / 드림위버 같은 프로그램으로 index.php 열기
| <div class="conle_lt"> <?php // 이 함수가 바로 최신글을 추출하는 역할을 합니다. // 사용방법 : latest(스킨, 게시판아이디, 출력라인, 글자수); // 테마의 스킨을 사용하려면 theme/basic 과 같이 지정 echo latest('theme/basic', 'budle', 3, 20); ?> </div> <div class="conle_lt conle_lt_even"> <?php // 이 함수가 바로 최신글을 추출하는 역할을 합니다. // 사용방법 : latest(스킨, 게시판아이디, 출력라인, 글자수); // 테마의 스킨을 사용하려면 theme/basic 과 같이 지정 echo latest('theme/basic', 'gram', 3, 20); ?> </div> |
이 부분이 특정 게시판 목록을 메인 화면에 보이게 하고, 몇 개의 글을 몇 글자로 보여줄지 정해주는 부분이다.
"conle_lt" 이 덩어리가 좌측 게시판 // "conle_lt conle_lt_even" 우측 게시판
게시판 이름과 보이고 싶은 글 갯수 (연동형이라 갯수에 맞게 게시판 테이블 크기가 저절로 변함) 등을 수정해주고,
더 많은 게시판을 메인 화면에 뿌리고 싶으면,
좌/우 짝수를 맞추어 <div class= 어쩌고> </div>
덩어리째 붙여넣기 하여 게시판 최식목록 보기를 생성한다.
5-2 특정 게시판 최신글들 한 번에 보이기
6. 게시판의 글이 어느 양 이상 넘어가면 삭제된 채 포스팅이 되더라.
(글자 또는 용량 제한이 있는 것으로 보임)
gnustudy.com/bbs/board.php?bo_table=gnu_tip&wr_id=24
phpMyAdmin은 내가 도메인을 구매한 사이트에 들어가면 된다! DB비번 사용
7. 카카오톡 쇼셜 로그인 API 연동하기
7. 네이버아이디로로그인 API 검수요청
8. 게시판 별 회원 권한 숫자로 설정 후, 회원관리 - 최우측에 그룹 - 접근가능그룹 - 접근 시킬 게시판 그룹을 선택
9. 네이버 검색 등록 blog.naver.com/anysecure3/220810796466
최적화를 위한 robots.txt 만들기 m.blog.naver.com/naver_search/220952297143
RSS 설정하기
10. 그누보드 우클릭 금지 amina.co.kr/bbs/board.php?bo_table=apms_qa&wr_id=66965
11. 모바일 글쓰기 에디터 가로 짤림 수정 icecreamplay.cafe24.com/bbs/board.php?bo_table=sir_skin&wr_id=28
또는 직접 수정!
/config.php 파일에서 모바일 에디터 사용 설정을 true 로 변경합니다
define('G5_IS_MOBILE_DHTML_USE', true);
/plugin/editor/smarteditor2/css/ko_KR/smart_editor2.css
아래 소스 추가
#smart_editor2{margin-right:1px !important;min-width:100px !important}
@media screen and (max-width: 640px){
#smart_editor2 .se2_text_tool ul:nth-child(4n){clear:both;}
#smart_editor2 .se2_text_tool ul{margin-bottom:4px}
#smart_editor2 .se2_text_tool ul:nth-child(n+4){margin-bottom:0}
#smart_editor2 .se2_text_tool .se2_multy,#smart_editor2 .se2_text_tool .se2_multy button, #smart_editor2 .se2_text_tool .se2_multy button span{height:54px}
}
@media screen and (max-width: 515px){
#smart_editor2 .se2_text_tool ul:nth-child(3n){clear:both;margin-left:4px}
#smart_editor2 .se2_text_tool ul:nth-child(6n),#smart_editor2 .se2_text_tool ul:nth-child(4n){clear:none;margin-left:0}
#smart_editor2 .se2_text_tool ul:nth-child(n+3){margin-bottom:0}
}
@media screen and (max-width: 370px){
#smart_editor2 .se2_text_tool ul:nth-child(2n){clear:both;margin-left:4px}
#smart_editor2 .se2_text_tool ul:nth-child(3n){clear:both;margin-left:4px}
#smart_editor2 .se2_text_tool ul:nth-child(6n),#smart_editor2 .se2_text_tool ul:nth-child(4n){clear:none;margin-left:0}
#smart_editor2 .se2_text_tool ul:nth-child(n+3){margin-bottom:0}
#smart_editor2 .se2_text_tool .se2_multy,#smart_editor2 .se2_text_tool .se2_multy button, #smart_editor2 .se2_text_tool .se2_multy button span{height:79px}
}
@media screen and (max-width: 325px){
#smart_editor2 .se2_text_tool .se2_multy,#smart_editor2 .se2_text_tool .se2_multy button, #smart_editor2 .se2_text_tool .se2_multy button span{height:29px;}
#smart_editor2 .se2_text_tool .se2_multy{border-bottom:1px solid #e0dedf}
}
12. cheditor5 에디터 사용시 이미지등록후 모바일버전에서 사진이 깨지는부분:
plugin/editor/cheditor5/cheditor.js파일을 연다음
약:457줄
imgSetAttrWidth : 1, // -1 = (width="100%"; height="auto"), 0 = 설정 안함, 1 = 기본값
이부분을
imgSetAttrWidth : 0, // -1 = (width="100%"; height="auto"), 0 = 설정 안함, 1 = 기본값
으로 수정해주시면 됩니다.