웹마스터 팁

음악 게시판 스킨을 만들어서 올렸는데 다른 스킨에도 적용해보시라고 정리해서 팁을 올려봅니다.

더 좋은 방법이 있을지도 모르겠지만 일단 ㅎㅎ.

영상 말고 노래 가사 보이기나 뭐 다른 거에도 응용할 수 있겠죠.

예를 들어 가사보기를 만들어 보도록 하겠습니다.


(1) 일단 header.html 이나 _setting.html 의 리스트 형태 정하는 부분에 이 비슷한 게 있습니다.

게시판 형태를 원하는 모습으로 나오게 하고 싶을 때 쓰는 부분입니다.


<!--@if($listStyle=='gallery')-->
    {@ $module_info->default_style = 'gallery'}
<!--@elseif($listStyle=='webzine')-->
    {@ $module_info->default_style = 'webzine'}
<!--@elseif($listStyle=='list')-->
    {@ $module_info->default_style = 'list'}
<!--@elseif($listStyle=='card')-->
    {@ $module_info->default_style = 'card'} 
<!--@elseif($listStyle=='video')-->
    {@ $module_info->default_style = 'video'} 
 <!--@elseif($listStyle=='videolist')-->
    {@ $module_info->default_style = 'videolist'}

 <!--@elseif($listStyle=='가사')-->
    {@ $module_info->default_style = '가사'}
<!--@elseif(!in_array($module_info->default_style,array('list','webzine','gallery','card','blog','video','videolist','가사')))-->
    {@ $module_info->default_style = 'list'}
<!--@end-->


에 추가합니다. 이런 식으로. 저는 창 두개를 하나는 비디오용, 하나는 비디오리스트용으로 만들 생각이어서 video, videolist를 추가했죠. 여기에 가사용 listStyle 추가.


(2)

(2-1) 이후 만약 원하시는게 글목록(다수의 글)을 사용하는 거라면

목록 loop 바깥쪽에 <a href="{getUrl('listStyle','videolist','act','','document_srl','')}" target="_blank">비디오리스트 보기</a>

를 추가하시면 새창으로 videolist 의 형태를 가진 글목록이 열리고,


(2-2) 원하시는게 해당 글의 내용을 사용하는 거라면

목록(_style.list.html)에서 loop="$document_list=>$no,$document" 가 들어가 있는 곳 안쪽으로

<a href="{getUrl('document_srl',$document->document_srl,'listStyle','video','page','')}" target="_blank">비디오 보기</a>

를 추가하시고 클릭하시면 해당 document_srl 이 listStyle video인 창으로 열립니다.


가사를 추가해줘야하는데 글내용을 써야할 거 같으니

<a href="{getUrl('document_srl',$document->document_srl,'listStyle','가사','page','')}" target="_blank">가사 보기</a>

를 추가해야겠죠.


(3) 그럼 이제 list.html 로 가셔서 listStyle 이 video인 창과 videolist인 창의 스킨경로를 정해줘야합니다. 가사보기도.


 (3-1) list.html 을 열어 원래 있던 리스트소스의 시작 부분에

<include cond="$module_info->default_style=='video'" target="video.html" /> 를 추가하고, 원래 있던 소스를
<block cond="$module_info->default_style!='video' && $module_info->default_style!='videolist'">

</block>

으로 감싸면, video 일때는 video.html 을 보이고, 아닐때는 원래 있는 list.html 내용을 보여라 가 됩니다.


(3-2) 그런데 이경우 인클루드 위치에 주의하셔야합니다. 꼭 제일 위에 쓴 내용이 들어간 부분이 video.html 앞에 위치해야해요.

만약에 header.html 에 넣으셨는데,

<include cond="$module_info->default_style=='video'" target="video.html" />
<block cond="$module_info->default_style!='video' && $module_info->default_style!='videolist'">

<!--#include("_header.html")-->

</block>

이렇게 되면 안됩니다. 옳은 예는

<!--#include("_header.html")-->

<include cond="$module_info->default_style=='video'" target="video.html" />
<block cond="$module_info->default_style!='video' && $module_info->default_style!='videolist'">

</block>


저는 게시판 제목이 출력되도록 해놨는데 그게 비디오 화면에 나오는게 싫어서 설정을 모조리 setting.html 로 분리했고요.

제일 처음에 세팅에서 liststyle 로 video와 videolist를 추가해놓고 거기서 정해진 변수로 다음과 같이 적었습니다.

셋팅을 제일 먼저 출력 후 listStyle 이 video면 video.html, videolist면 videolist.html 을 보이고,

아니면 원래 있던 게시판 목록을 보이라는 뜻입니다. 그래서 이렇게...

<!--#include("_setting.html")-->
<include cond="$module_info->default_style=='가사'" target="가사.html" />
<include cond="$module_info->default_style=='video'" target="video.html" />
<include cond="$module_info->default_style=='videolist'" target="videolist.html" />
<block cond="$module_info->default_style!='video' && $module_info->default_style!='videolist'">
<!--#include("_header.html")-->
</block>


분리할때 중요한 점은 setting.html 에 css, js파일 링크를 해놨다면 그게 필요한 다른 화면 예를 들어 write.form.html 등에 css 파일이 안들어갈 수 있으니 다른 곳도 잘살펴보시고 넣을 곳에 넣어주셔야합니다. 안 그러면 ㅇㅅㅇ; 저는 책임지지 않아요.


(4) 

(4-1) 이제 video.html 을 만들어서 넣으시면 링크를 눌렀을때 video.html 이 뜨고, 이 링크는 위쪽에서 보셨듯이 글내용을 사용하기 위한 링크이므로, 글내용에서 쓰는 모든 변수를 쓸 수 있습니다.

{$oDocument->getTitle()} (제목) {$oDocument->getContent()} (내용) {$oDocument->getUserID()} (글쓴이) 이런 애들이죠.


(4-2) videolist.html 은 글목록을 사용하기 위한 링크이므로 글 목록에서 쓰는 변수를 쓰심 됩니다.

{$document->getTitle($module_info->subject_cut_size)} (자른제목) {$document->getSummary($module_info->content_cut_size)} (요약)


가사라면 아마 글 내용을 사용했을 거니까 가사.html 에 다음을 {$oDocument->getContent()}  달랑 넣고,

레이아웃이 안뜨게 해야할테니 제일 처음에 {Context::set('layout','none')}를 쓰시면 됩니다.


(5) 기타

만약 확장변수명이 비디오라면

<!--@if($val->eid=='video')-->

만약 확장변수명이 비디오가 아니라면

<!--@if($val->eid!='video')-->

만약 확장변수명 비디오에 값이 있다면

<!--@if($document->getExtraEidValue('video'))-->

목록에서 확장변수명 video인 값

{$document->getExtraEidValue('video')}

확장변수에 youtu 라는 내용이 들어가 있다면

{@ $extras = $val->getValueHTML();}
 <!--@if(preg_match('/youtu/', $extras))-->


p.s 체크박스 배열 만들어 post 로 넘겨서 변수로 이용하고, 그 변수의 갯수대로 돌리는 거 아시는 분 계신가요. ㅠ_ㅠ;

선택듣기를 만들고 싶은데...  제가 진짜 하나도 몰라서!! 체크박스를 checkbox로 쓴다는 것만 압니다. ㅎㅎ

제목 글쓴이 날짜
글쓰기를 클릭하면 띄워지는 테두리 없는 예쁜 팝업 띄우기 core. 1.7.4 [4] file 마음의빈자리 2014.02.11
2014년 2월 12일부터 갑자기 사이트(관리자 페이지)가 깨지는 경우. 새하나모 2014.02.12
이메일인증 Error 한방정리 참고해보세요. [4] 애드바이러스 2014.02.12
css 배경이미지 정리 devdevpia 2014.02.13
GNB 메뉴를 쉽게 만드는 jQuery plugin [2] 김개발 2014.02.14
css 가운데정렬 완벽정리! 돼지코구뇽 2014.02.14
"이 페이지 나가기" 경고창이 뜨는 사이트의 경우 [23] 투씨 2014.02.15
카카오스토리 링크 [14] file 맞장 2014.02.15
우분투 12.04 LTS Nginx 최신버전 설치하기 [1] file 도라미 2014.02.17
1.7.4 용 youtube, vimeo, ted 썸네일 적용 document.item.php 수정방법 [9] file 남자인간 2014.02.17
1.7.4 버전용 한글 lang.xml 파일 [5] file 투씨 2014.02.18
IEXPLORER 버젼 호환성 강제 맞추기 davidis 2014.02.18
누리고 쇼핑몰 모바일버전에서 백지화현상 수정하는 팁 [5] garnecia 2014.02.19
XE 1.7.4 "이메일 주소로 계정 찾기" 오류 해결 방법 꿈돌리 2014.02.20
위젯 게시판 선택시 다중선택하기 ! [2] file GomSang 2014.02.21
게시판 목록에서 새창 띄워서 다른 형태 나오게 하기 [3] foret 2014.02.23
게시판 목록의 new 아이콘 바꾸기 [1] foret 2014.02.23
스케치북5 모바일 댓글 작성시 엔터를 쳤을 때 <br /> 코드 뜨는 문제 해결 [7] oryan 2014.02.23
코어 수정 없이 스킨 수정만으로 게시판 목록에 유튜브,비메오 썸네일 출력 [2] foret 2014.02.23
부트스트랩 레이아웃 제작시 메뉴 코딩팁 웹빌드 2014.02.23