XpressEngine에 관련 내용에 대해서 이야기 합니다.
글 수 193
소개
본 스킨은 jQuery 프레임웍을 이용하여 이쁜 효과, 디자인(?)을 구현하여 통합용 게시판에 맞게 제작 된 스킨 입니다.
모듈 타이틀, 카테고리 이름이 추가 되어있습니다.
설치법
- 아래 첨부파일 rnq_newest_default.zip을 다운 받으셔서 압축을 푸시고 widgets/rnq_newest_document/skins/ 폴더안에 복사해주세요.
- 스킨 사용 전 func_include 애드온을 다운 받으셔서 실행시켜주세요.
- 관리자 페이지 -> 위젯 -> 최근 문서 출력 위젯에서 코드생성 해주세요.
- 원하는 레이아웃, 페이지 등에 삽입하여 이용해주세요.
옵션
- 컬러는 위 이미지와 같이 총 6가지 입니다.
- 흰색과 검정색 바탕에 각각 3가지의 색으로 이루워져 있습니다.
그밖에 기능 소개
우선 본 스킨은 func_include 애드온을 이용하여 기존 스킨으로만 구현할 수 없었던
직접 만든 함수처리라든가 Query 결과물을 출력 하도록 하였습니다.
사용된 함수 3개
- 스킨 파일 내에 있는 lang 언어파일 로딩
- 대상 중 최근 등록한 글의 등록시간을 구하는 함수
- 대상 중 최근 등록된 글의 게시 시간으로 부터 얼마나 지났는지 표시 함수
이름에 커뮤니티 정보 출력
- 레벨 아이콘이라든지 닉네임 이미지를 출력하게 하면 스킨 초기 기획 상 디자인이 안 어울려서
일반 닉네임 명으로만 출력하게 했습니다.
- 대신 일반 이름을 클릭하셔도 쪽지 보내기 등 팝업이 뜹니다.
언어변수 설정
- 본 스킨은 기본 언어 이외에 스킨 내부에서 불러오는 언어가 있습니다.
- 언어 변수 중 최근 등록 된 글의 시간과 현 시간을 비교하여
출력해주는 언어들이 있습니다.
- 위와 같은 형식으로 추가 시켜 주시면 됩니다.
- 형식상 일수와 초수의 글에 대해서만 대입시키도록 하였습니다.
jQuery Framework
본 스킨은 지난 로그인 스킨과 마찬가지로 jQuery를 이용하여 제작 되었습니다.
지난 번 보단 기능이 많이 내장 되어있습니다.
쿠키
본 스킨의 잠그기, 접기 기능의 쿠키 유지 기간 입니다.(기본 7일로 잡았습니다.)
rnq_newest_default/js/rnq_newest_default.js
ps : 0으로 할 경우 쿠키 생성이 되지 않습니다. 고로 페이지 새로고침 또는 이동 후에 최초 모습으로 가게 됩니다.
AJAX로 페이지 이동
본 기능을 넣을까 말까 하다가 넣었습니다. 하지만 넣긴 넣었지만 그리 추천하지는 않습니다.
해당 기능은 페이지 이동 시 AJAX를 이용하여 리플레쉬 하지 않고 이동하도록 해주는 기능 입니다.
rnq_newest_default/js/rnq_newest_default.js
ps : 본 내용은 AJAX라도 해도 적은 트래픽으로 불러오는게 아닙니다. 그냥 일반 리플레쉬와 똑같은 트래픽이 발생되고
속도 또한 똑같습니다. 더 빠른 처리를 위해서는 스킨가지고만은 되질 않습니다.
잠그기 , 접기 기능
- 이 기능은 그냥 재미삼아 넣은 기능입니다.
단순한 디자인 가지고는 먼가 멋없어 보여서 잠그기와 접기 기능을 넣어봤습니다.
- 잠그기의 원래 목적은 관리자가 위젯은 출력하되 내용과 이동을 하지 못하도록 웹상에서 버튼 하나로 처리하도록 하는 목적이었으나,
너무 복잡해지고 그런 관계로 일단 단순한 놀이로 하였습니다.
- 접기 기능은 접고 펴고 하는건데 뭐 이런건 설명할 필요는 없겠죠.
- 본 기능은 쿠키를 가지고 이용 됩니다. 쿠키의 기간 만큼 화면상에 저장 됩니다.
- 허나 위젯의 위치나 선언 내용이 바뀌면 초기화 또는 꼬이게 되니 주의 하시기 바랍니다.(꼬여도 큰 문제는 없습니다. 다시 생성하면 되는 거니까요)
호환성
본 스킨의 호환테스트는
firefox 3.0.5,
opera 9.52,
safari 3.1.2(525.21),
Chrome(초기버전),
IE 7.0.5730.13
위 5가지로 테스트 했습니다.
IE 6이하는 테스트하지도 염두하지도 않았기 때문에 제대로 출력되지 않습니다.
IE6이하는 호환하지 않습니다.
앞으로 제가 만드는 모든 스킨은 IE6을 염두하지 않고 제작합니다.
너무 무의미하게 시간과 노력이 들어가기에, 요즘 대세도 IE6은 이미 물건너갔다고
보기 때문에 IE6인 사람들은 어쩔 수 없지만 앞으로 IE7이상에서 제작합니다.
가로 사이즈
기본 188px 입니다.(200px에 해당하는 크기)
css 파일(white.css,black.css) 제일 처음 줄 중에 .rnq_newest_integrate 에 선언되어있으니 로마네스크 위젯을 이용하지 않을 경우에는
해당 크기를 조절해 주시기 바랍니다.
배경 이미지
배경이 png 이고 하나의 파일이 아니라 각 리스트 세로 크기 만큼 짤라 놓은 겁니다.
임의의 이미지를 만드시고 싶으신 분들은 해당 위젯의 images 폴더 안에 파일이 있으니 포토샵 등을 이용해서
크기는 그대로 두시고 이미지를 꾸며주시기 바랍니다.
주의
- 본 스킨을 로마네스크 최근 문서 위젯이 아닌 XE 기본 위젯에 넣을 경우 위의 페이지 기능 및 게시글 시간 여부는 표시되지 않습니다.
(언어 파일도 로딩 되지 않습니다.)
하지만 동작 과정에는 아무런 문제 없습니다.(잠그기,접기 기능은 정상 동작 함)
안내
테스트는 http://www.animeclub.net 또는 http://www.animeclub.net/xe_rnq 에서 하시기 바랍니다.
덧 : 버그 잡습니다. +_+ 알려주세요~
본 스킨은 jQuery 프레임웍을 이용하여 이쁜 효과, 디자인(?)을 구현하여 통합용 게시판에 맞게 제작 된 스킨 입니다.
모듈 타이틀, 카테고리 이름이 추가 되어있습니다.
설치법
- 아래 첨부파일 rnq_newest_default.zip을 다운 받으셔서 압축을 푸시고 widgets/rnq_newest_document/skins/ 폴더안에 복사해주세요.
- 스킨 사용 전 func_include 애드온을 다운 받으셔서 실행시켜주세요.
- 관리자 페이지 -> 위젯 -> 최근 문서 출력 위젯에서 코드생성 해주세요.
- 원하는 레이아웃, 페이지 등에 삽입하여 이용해주세요.
옵션
- 컬러는 위 이미지와 같이 총 6가지 입니다.
- 흰색과 검정색 바탕에 각각 3가지의 색으로 이루워져 있습니다.
그밖에 기능 소개
우선 본 스킨은 func_include 애드온을 이용하여 기존 스킨으로만 구현할 수 없었던
직접 만든 함수처리라든가 Query 결과물을 출력 하도록 하였습니다.
사용된 함수 3개
- 스킨 파일 내에 있는 lang 언어파일 로딩
- 대상 중 최근 등록한 글의 등록시간을 구하는 함수
- 대상 중 최근 등록된 글의 게시 시간으로 부터 얼마나 지났는지 표시 함수
이름에 커뮤니티 정보 출력
- 레벨 아이콘이라든지 닉네임 이미지를 출력하게 하면 스킨 초기 기획 상 디자인이 안 어울려서
일반 닉네임 명으로만 출력하게 했습니다.
- 대신 일반 이름을 클릭하셔도 쪽지 보내기 등 팝업이 뜹니다.
언어변수 설정
- 본 스킨은 기본 언어 이외에 스킨 내부에서 불러오는 언어가 있습니다.
- 언어 변수 중 최근 등록 된 글의 시간과 현 시간을 비교하여
출력해주는 언어들이 있습니다.
/* 일수 글 */ $lang->rnq->_time->DiffDay = array( /* 일수 => '내용' */ 1 => '어제', 2 => '그저께', 3 => '그끄제', 4 => '4일전', 5 => '5일전', 6 => '6일전', 7 => '1주전', .... 중략 );- 일수에 따라 비교 할 말을 변수로 따로 뺐습니다.
- 위와 같은 형식으로 추가 시켜 주시면 됩니다.
- 형식상 일수와 초수의 글에 대해서만 대입시키도록 하였습니다.
jQuery Framework
본 스킨은 지난 로그인 스킨과 마찬가지로 jQuery를 이용하여 제작 되었습니다.
지난 번 보단 기능이 많이 내장 되어있습니다.
쿠키
본 스킨의 잠그기, 접기 기능의 쿠키 유지 기간 입니다.(기본 7일로 잡았습니다.)
rnq_newest_default/js/rnq_newest_default.js
var rnq_newest_default = { /* cookie 유지 기간(일) */ date : 7,파일을 열어보시면 보기 쉽게 주석을 달아놨으니 원하시는 날짜 만큼 조정하시기 바랍니다.
ps : 0으로 할 경우 쿠키 생성이 되지 않습니다. 고로 페이지 새로고침 또는 이동 후에 최초 모습으로 가게 됩니다.
AJAX로 페이지 이동
본 기능을 넣을까 말까 하다가 넣었습니다. 하지만 넣긴 넣었지만 그리 추천하지는 않습니다.
해당 기능은 페이지 이동 시 AJAX를 이용하여 리플레쉬 하지 않고 이동하도록 해주는 기능 입니다.
rnq_newest_default/js/rnq_newest_default.js
/* ajax로 페이지를 넘길지 예(true), 아니오(false) */ ajax_mode : false,파일을 열어보시면 보기 쉽게 주석을 달아놨으니 사용하실려면 true 아니면 그대로 두시기 바랍니다.
ps : 본 내용은 AJAX라도 해도 적은 트래픽으로 불러오는게 아닙니다. 그냥 일반 리플레쉬와 똑같은 트래픽이 발생되고
속도 또한 똑같습니다. 더 빠른 처리를 위해서는 스킨가지고만은 되질 않습니다.
잠그기 , 접기 기능
- 이 기능은 그냥 재미삼아 넣은 기능입니다.
단순한 디자인 가지고는 먼가 멋없어 보여서 잠그기와 접기 기능을 넣어봤습니다.
- 잠그기의 원래 목적은 관리자가 위젯은 출력하되 내용과 이동을 하지 못하도록 웹상에서 버튼 하나로 처리하도록 하는 목적이었으나,
너무 복잡해지고 그런 관계로 일단 단순한 놀이로 하였습니다.
- 접기 기능은 접고 펴고 하는건데 뭐 이런건 설명할 필요는 없겠죠.
- 본 기능은 쿠키를 가지고 이용 됩니다. 쿠키의 기간 만큼 화면상에 저장 됩니다.
- 허나 위젯의 위치나 선언 내용이 바뀌면 초기화 또는 꼬이게 되니 주의 하시기 바랍니다.(꼬여도 큰 문제는 없습니다. 다시 생성하면 되는 거니까요)
호환성
본 스킨의 호환테스트는
firefox 3.0.5,
opera 9.52,
safari 3.1.2(525.21),
Chrome(초기버전),
IE 7.0.5730.13
위 5가지로 테스트 했습니다.
IE 6이하는 테스트하지도 염두하지도 않았기 때문에 제대로 출력되지 않습니다.
IE6이하는 호환하지 않습니다.
앞으로 제가 만드는 모든 스킨은 IE6을 염두하지 않고 제작합니다.
너무 무의미하게 시간과 노력이 들어가기에, 요즘 대세도 IE6은 이미 물건너갔다고
보기 때문에 IE6인 사람들은 어쩔 수 없지만 앞으로 IE7이상에서 제작합니다.
가로 사이즈
기본 188px 입니다.(200px에 해당하는 크기)
css 파일(white.css,black.css) 제일 처음 줄 중에 .rnq_newest_integrate 에 선언되어있으니 로마네스크 위젯을 이용하지 않을 경우에는
해당 크기를 조절해 주시기 바랍니다.
배경 이미지
배경이 png 이고 하나의 파일이 아니라 각 리스트 세로 크기 만큼 짤라 놓은 겁니다.
임의의 이미지를 만드시고 싶으신 분들은 해당 위젯의 images 폴더 안에 파일이 있으니 포토샵 등을 이용해서
크기는 그대로 두시고 이미지를 꾸며주시기 바랍니다.
주의
- 본 스킨을 로마네스크 최근 문서 위젯이 아닌 XE 기본 위젯에 넣을 경우 위의 페이지 기능 및 게시글 시간 여부는 표시되지 않습니다.
(언어 파일도 로딩 되지 않습니다.)
하지만 동작 과정에는 아무런 문제 없습니다.(잠그기,접기 기능은 정상 동작 함)
안내
본 스킨으로 되어있는 는 지우지 말아주셨으면 합니다.
현 XE는 info.xml 등을 통하여 제작자 정보를 기록하도록 되어있지만 그 표기법에 있어서 위젯 스킨은
누가 만들었는지 표시되는 곳이 없습니다.
스킨의 는 게시판의 와 같은 역할로 만든 것이니 지우지 말아주셨으면 합니다. ㅠㅠ
현 XE는 info.xml 등을 통하여 제작자 정보를 기록하도록 되어있지만 그 표기법에 있어서 위젯 스킨은
누가 만들었는지 표시되는 곳이 없습니다.
스킨의 는 게시판의 와 같은 역할로 만든 것이니 지우지 말아주셨으면 합니다. ㅠㅠ
테스트는 http://www.animeclub.net 또는 http://www.animeclub.net/xe_rnq 에서 하시기 바랍니다.
덧 : 버그 잡습니다. +_+ 알려주세요~