Widgets Of MoonHouse

Etc Of MoonHouse

[버전 특징] [V1.2] - 배경이미지 3가지 추가(white. black, gray) - 익스플로러에서 상단메뉴 및 우측Wing 영역 위치 오류 수정 - 본문상단에 이미지 슬라이드 2종중 선택가능 - Elastic 슬라이드, TriplePanelImage 슬라이드 [V1.1] - 배경이미지 6가지중 선택가능(green. gold, lightgreen, yellowocher, darkgreen, 색상선택) - 앞의 5가지색상은 이미지이며, 뒤의 색상선택은 색상코드로 되어있습니다. - 1차 메뉴의 위치를 상단과 좌측Wing영역에 베치가능 - 상단에 배치시 좌측Wing영역에 2치메뉴 출력, 좌측Wing영역에 배치시 2차메뉴 출력없음 - SNS로그인시 각 SNS이미지 지우고 Xeicon사용 - Web Fonts 애드온 사용추천 [특징] - Sub메뉴를 좌측 Wing영역에 배치하여 Sub메뉴의 활용도를 높였습니다. - 최대한으로 코드를 단순하게 하고 이미지를 최소화할려고 노력했습니다. - 원본 디자인의 화려한 원색 색상을 가져 왔습니다. - 우측 상단에 슬라이딩기능으로 로그인영역을 배치했습니다. - 우측 Wing영역을 활용할 수 있게 했습니다. + Adsense나 위젯등을 배치하시면 됩니다. - 자체 로그인 Box를 가지며 SNS로그인도 지원합니다. - 간단하게나마 반응형을 지원합니다. + 풀립형 메뉴 + 하단 Copyright 영역 Free Website Templates 에서 디자인을 가져 왔습니다. https://freewebsitetemplates.com/preview/originarchitectswebsitetemplate/index.html
MediaElement.js와 HTML5 video,audio 태그를 이용한 미디어 플레이어 및 유튜브 링크 애드온입니다. 당초에는 유튜브 뮤직을 링크시켜주는 애드온을 찾다고 없어서 시작했는데 일판이 좀 커졌네요. 애드온 이름을 몇번 바꾸다가 최종적으로 미디어플레이어 애드온으로 정했습니다. 폴더 이름은 mytube youtube가 '너튜브"라면 mytube는 '내튜브'...... https://xetown.com/tips/1167281 참조 유튜브 링크가 메인이 아니고 원래는 첨부한 오디오와 비디오 재생이 주 기능입니다. 1. 업로드된 mp3 및 wav 등의 오디오 파일 재생 2. 업로드된 mp4, mov, 3gp 등등의 비디오 파일 재생 제가 만들었지만 어디까지 동작할지는 저도 잘 모릅니다. html5 video,audio가 지원하는 것은 다 될 것으로 추측합니다. 3. 유튜브 링크 4. 유튜브 뮤직 링크 5. 위 4가지 기능이 댓글에서도 동작 6. 유튜브 영상과 오디오의 제목과 설명가져오기 7. 리스트재생(미완성) 목록까지는 가져오지면 UI는 완성하지 못했습니다. 수정해서 사용하시고 잘되면 공유 부탁드립니다. 8. 반응형 플레이어 당초 목적은 모바일에서 찍은 동영상을 업로드하고 다음화면서 재생하는 것이어서 모바일과 데스크탑에 다 어울리는 반응형으로 만들었습니다. 9. 썸네일 만들기 썸네일 애드온 별도로 사용할 필요없습니다. Rhymix에서는 외부이미지로 본문삽입만해도 썸네일이 잘생깁니다. XE에서는 잘 안되는 경우가 종종 있어서 아예 썸네일을 첨부화일로 넣는 기능을 만들었습니다. 나머지 설정은 바꿔가면서 테스트해보면 금방 이해할 수 있는 것들이라 설명을 생략합니다. 포스터기능은 업로드된 동영상을 위한 것입니다. 유튜브 동영상은 preload 기능을 이용하면 플레이하기 전에 썸네일 화면이 보이지만 업로드된 동영상은 플레이되기 전까지는 아무것도 나나타지 않습니다. 처럼 각자의 사이트에 걸맞는 영상을 만들어서 입력해주면 플레이되기 전에도 뭔가를 보여 줄 수 있습니다. 마지막으로 제일 중요한 것은 youtube data api key를 입력해야합니다. 입력하지 않아도 동작에는 문제가 없지만 제목과 설명을 가져오지 못합니다. 구글콘솔에 사이트를 등록하고 youtube data api key를 만들어서 입력하면 됩니다. 자세한 설명은 https://developers.google.com/youtube/registering_an_application?hl=ko 를 참조하십시요. api 키를 입력하면 재생창 상단에 제목이 나타나고 제목을 클릭하면 toggle되면서 설명이 나옵니다. 모바일에서 백그라운드로 가거나 화면을 끈 상태에서도 플레이가 가능합니다. 단 스마트폰 브라우저앱의 알림기능 , 특히 미디어알림기능이 꺼져있으면 동작하지않습니다. https://xetown.com/topics/1166111 참조 mediaelement.js를 가져다 xe(Rhymix)에 붙여서플레이어를 만들고 있습니다. 작업은 거의다 마무리 되어서 좀더 테스트해보고 공개할 예정입니다. 헌데 몇가지 기대이상의 기능들이 있네요. 저도 뭐 js는 그져 가져다 사용하는 입장이라서 아직 내부 기능을 다 이해하지는 못한 상태입니다. 그중에서도 눈에 띄는 점은 모바일 플레이어 기능입니다. 일반적으로 유튜브를 플레이시키면 별도의 플레이어가 있는 것이 아니라서 화면을 끄거나 백그라운드로 들어가면 플레이가 중지됩니다. 하지만 미디어플레이어에 링크해서 플레시키면 플레이어가 뜨네요. 화면을 끄거나 백그라운드로 들어가도 플레이어는 동작합니다. 스마트폰을 꺼서 호주머니 담은 상태에서도 음악감상이 가능합니다. 연결된 블루투스 기계에서 콘트롤도 가능하고... 구태여 유튜브 프리미엄으로 가지 않아도 될 것같습니다... ver : 0.8.1 1. 태그를 사용해서 유튜브를 링크한 경우 여러개의 재생창이 생기면서 발생하던 문제를 수정했습니다. 2. iframe 태그를 사용하던 기존 링크와 호환되게 수정했습니다. 3. 제목과 설명을 유튜브처럼 영상 아랫쪽으로 이동했습니다. ver : 0.8.2 url 및 설명과 제목의 사용여부와 위치를 설정할 수 있게 수정했습니다. [Sample] https://youtube.com/ZKgZ96QXPQM
Category 애드온 Data 2019.02.09 Views 34
드래그하여 페이지/문서 이동 애드온 https://xetown.com/point_contents/1161730 [스케치북5 게시판에 적용하는 방법] 1. 먼저 /addons/drag_interaction/tpl/index.html 코드를 보면 $list_area_id = 'board_list'; $document_area_id = 'board_read'; board_list 가 페이지 부분 id 이고, board_read 가 본문글 부분 id 입니다. 2. 그럼 어떻게 적용하는가 /modules/board/m.skins/sketchbook5/list.html 파일안에 파란색부분을 찾아서 빨간색부분으로 감사줍니다. <!--// 본문 --> <div id="board_read"> <include cond="$oDocument->isExists()" target="_read.html" /> </div> 이렇게 하면 본문글(_read.html)부분이 board_read 라는 id 값으로 설정됩니다. <div id="board_list"> <!--// 게시판 유형 --> <!--@if($mi->default_style=='list')--> <!--@if(!Mobile::isMobileCheckByAgent() || $mi->list_m)--> <include target="_list_normal.html" /> <!--@else--> <include target="_list_m.html" /> <!--@end--> <!--@elseif($mi->default_style=='webzine')--> <include target="_list_webzine.html" /> - 중략 - <!--@else--> <include target="_list_normal.html" /> <!--@end--> </div> 이 부분은 페이지리스트 부분이 board_list 라는 id 값으로 설정됩니다. 이렇게 까지만 해도 모바일에서 게시판 스킨이 스케치북5 이면 잘 작동합니다. 3. Xetown의 웹지기님이 남긴 팁적용 https://xetown.com/tips/1163417 애드온의 php 파일에 사용되지 않아야할 조건에 || $_COOKIE['donotdragpage'] == 'true' 를 추가해 줍니다. /addons/drag_interaction/drag_interaction.addon.php <?php // 중단 조건 if ( !Mobile::isMobileCheckByAgent() || $called_position !== 'before_display_content' || Context::getResponseMethod() !== 'HTML' || Context::get('module_info')->module !== 'board' || !Context::get('grant')->access || Context::get('act') || $_COOKIE['donotdragpage'] == 'true' ) return; 저는 페이지이동 문구를 상단으로 끌어 올렸습니다. /modules/board/m.skins/sketchbook5/list.html 빨간색부분 추가 하시고 img방에 drag.png파일 추가 <!--// FAQ 검색창 --> <div cond="$mi->srch_window!='N'" class="bd_faq_srch<!--@if($mi->srch_window==3)--> clear<!--@end-->" style="display:block"|cond="$mi->srch_window==2 || $search_keyword"> <include target="_search.html" /> </div> </div> <div style="text-align:center; margin:10px 0; color:orange"> <img src="img/drag.png" /> <p style="display:none;" class="dragoff"> 좌우 스크롤로 페이지 이동이 가능합니다. 끄기 <i class="fa fa-toggle-on dragoff" aria-hidden="true"></i></p> <p style="display:none;" class="dragon"> 좌우 스크롤로 페이지 이동이 불가능합니다. 켜기 <i class="fa fa-toggle-off dragon" aria-hidden="true"></i></p> </div> <!--// 카테고리 --> <div class="cnb_n_list"> list.html 파일 최하단에 아래 스크립트 추가 <script> jQuery(function($){ if(getCookie('donotdragpage') == 'true'){ $('.dragoff').hide(); $('.dragon').show(); } else { $('.dragon').hide(); $('.dragoff').show(); } $('.dragoff').click(function(){ setCookie('donotdragpage', 'true', new Date(Date.now() + 1000000000000)); $('.dragoff').remove(); $('.dragon').show(); location.reload(); }); $('.dragon').click(function(){ setCookie('donotdragpage', 'true', new Date(Date.now() - 1)); $('.dragon').remove(); $('.dragoff').show(); location.reload(); }); }); </script> /modules/board/m.skins/sketchbook5/_read.html 상단에 빨간색 부분 추가 <div style="text-align:center; margin:10px 0; color:orange"> <img src="img/drag.png" /> <p style="display:none;" class="dragoff"> 좌우 스크롤로 이전/다음 글 이동이 가능합니다. 끄기 <i class="fa fa-toggle-on dragoff" aria-hidden="true"></i></p> <p style="display:none;" class="dragon"> 좌우 스크롤로 이전/다음 글 이동이 불가능합니다. 켜기 <i class="fa fa-toggle-off dragon" aria-hidden="true"></i></p> </div> <div class="rd<!--@if(!$mi->rd_nav_style)--> rd_nav_style2<!--@end--><!--@if($mi->default_style=='blog')--> rd_blog {$mi->blog_style}<!--@end--> clear" style="padding:{$mi->rd_padding};" data-docSrl="{$oDocument->document_srl}">
제가 예전에 "위젯을 가로로 정렬했을때 모바일에서 반응형으로 적용하기" Tip을 올린적이 있는데요 이것을 아주 쉽게 적용한 것이 올라왔네요. [본문 내용] XE를 사용하면서 가장 불만인게 메인페이지의 위젯이 반응형으로 작동되지 않는다는 점이다. 반응형에 대한 수요는 많다. 또 많은 부분에서 반응형에 대한 요구사항을 반영하여 업데이트를 하는데 유독 위젯에서의 반응형 지원은 되지 않는 것이 이해가 되지 않는다. 이 문제로 모바일 스킨을 별도로 구매하는 경우도 있는 듯한데 더 이상 골치 아프지 말도록 하자. 그럼 위젯을 반응형으로 적용하는 방법을 알아보자. 방법은 아주 간단하다. 먼저, 위젯 크기를 적용하는 화면에서 위젯 CSS Class 명을 적어준다. 예제에서는 xe-widget이라고 적었다. 다음으로 자신이 원하는 위젯스타일을 적용한다. 그리고 위젯스타일의 CSS 파일을 아래와 같이 수정한다. @media screen and (max-width:639px){ .xe-widget { width: 100% !important; box-sizing:border-box; } } @media screen and (min-width: 640px){ .xe-widget { width: 49% !important; box-sizing:border-box; } } css부분을 해석하면 @media screen and (max-width:639px){ 가로크기가 최대 639px까지는(639보다 작거나 같으면) .xe-widget xe-widget라는 클래스명을 가진 요소의 width: 100% !important; 가로 크기를 100%로 만들고, 이게 우선순위를 가지며 box-sizing:border-box; 내부여백(패딩)과 선(보더)의 크기는 가로크기(width)에 포함시켜라. @media screen and (min-width: 640px){ 가로크기가 최소 640px까지는(640보다 크거나 같으면) .xe-widget xe-widget라는 클래스명을 가진 요소의 width: 49% !important; 가로 크기를 49%로 만들고, 이게 우선순위를 가지며 box-sizing:border-box; 내부여백(패딩)과 선(보더)의 크기는 가로크기(width)에 포함시켜라. 요런 의미이죠. 좀더 정교하게 만들려면 외부여백같은 요소들도 계산해서 넣어주는게 좋기는 하죠. [문하우스의 Tip] 저는 MH 위젯스타일에 적용해 보았습니다. http://moonhouse.co.kr/xe/index.php?mid=moonre&package_srl=469185 - skin.xml 에 옵션 추가 <var name="ws_width" type="text"> <name xml:lang="ko">반응형 가로폭</name> <description xml:lang="ko">반응형 가로폭 (기본 49% 숫자만)</description> </var> <var name="ws_width_r" type="text"> <name xml:lang="ko">반응형 가로폭_오른쪽</name> <description xml:lang="ko">반응형 가로폭 (기본 49% 숫자만)</description> </var> - widgetstyle.html 에 추가 <block cond="!$widgetstyle_extar_var->ws_width">{@ $widgetstyle_extar_var->ws_width = '49'}</block> <block cond="!$widgetstyle_extar_var->ws_width_r">{@ $widgetstyle_extar_var->ws_width_r = '49'}</block> <style> @media screen and (max-width:639px){ .xe-widget, .xe-widget_r { width:100% !important; box-sizing:border-box; padding-bottom:10px;} } @media screen and (min-width: 640px){ .xe-widget { width:{$widgetstyle_extar_var->ws_width}% !important; box-sizing:border-box; padding-right:5px; } .xe-widget_r { width:{$widgetstyle_extar_var->ws_width_r}% !important; box-sizing:border-box; padding:0px; } } </style> 그리고 반응형만 지원하는 위젯스타일도 하나 만들어 봤어요. 이건 스타일은 아무 것도 출력되지 않고 단지 반응형만 지원합니다. mh_mobile V1.0.zip xe-widget와 xe-widget_r을 잘 이용하면 2개 이상의 위젯을 반응형으로 배치할 수 있습니다. 아래의 이미지는 좌측2개는 ws_width를 25%로 ws_width_r을 50%로 설정한 것입니다. 물론 모바일에서는 100%로 배치됩니다. [Demo] http://moonhouse.co.kr/xe/page_CiNC29
게시글에 댓글이 여러줄로 달릴 경우 댓글란들이 길게 나열되는 것이 싫어실 경우 적용하시면 됩니다. sketchbook5 게시판을 예로 해서 설명합니다. 1. 게시판설정에서 게시판별로 해당 기능을 켜고 끄게 만듭니다. 아래 코드를 skin.xml의 적당한 곳에 추가합니다. <var name="cmt_line_use" type="radio"> <title xml:lang="ko">댓글 한줄 출력</title> <description xml:lang="ko">댓글이 2줄 이상일때 펼쳐보기 메뉴 출력</description> <options value=""> <title xml:lang="ko">미출력(기본)</title> </options> <options value="Y"> <title xml:lang="ko">출력</title> </options> </var> <var name="cmt_line_no" type="text"> <title xml:lang="ko"> ┖ 댓글 출력 라인수</title> <description xml:lang="ko">댓글 출력 라인수(기본 1줄)</description> </var> <var name="cmt_line_h" type="text"> <title xml:lang="ko"> ┖ 댓글 출력 칸높이</title> <description xml:lang="ko">댓글 출력 각 칸의 높이를 지정합니다. (기본 1.5em)</description> </var> 2. _comment.html의 상단부분에 아래 코드 추가 - style 과 script <!--// 댓글 줄수 설정 --> <block cond="!$mi->cmt_line_no">{@ $mi->cmt_line_no = '1'}</block> <block cond="!$mi->cmt_line_h">{@ $mi->cmt_line_h = '1.5'}</block> <style cond="$mi->cmt_line_use=='Y'"> .commentbox{ overflow:hidden; } .commentbox .xe_content{ margin-top:0px; } .commentbox .xe_content.hiddenComment p, .commentbox .xe_content.hiddenComment{ float:left; width:80%; overflow:hidden; text-overflow: ellipsis; -webkit-line-clamp:{$mi->cmt_line_no}; line-height:{$mi->cmt_line_h}em; height: {$mi->cmt_line_h*$mi->cmt_line_no}em; } .commentbox .xe_content.hiddenComment p{ width:100%; } .btn-moreComment{ display:none; white-space:nowrap; float:right; margin-top:0px; } .btn-moreComment.hidden {display:none !important;} .btn-closeComment{ display:none; white-space:nowrap; float:right; margin-top:0px; } .btn-closeComment.active{ display:inline-block; } @media screen and (max-width: 533px){ .commentbox .xe_content.hiddenComment{ width:60%; } } </style> <script cond="$mi->cmt_line_use=='Y'"> jQuery(function ($) { var commentbox = $('.commentbox .xe_content'); commentbox.each( function() { $( this ).outerHeight(); if( $(this).outerHeight() > 22*{$mi->cmt_line_no} ){ $(this).addClass('hiddenComment'); var btnMoreCmt = $(this).siblings('.btn-moreComment'); btnMoreCmt.show(); btnMoreCmt.on("click",function(){ $(this).siblings('.xe_content').removeClass('hiddenComment'); $(this).siblings(".btn-closeComment").addClass("active"); $(this).addClass("hidden"); }); //코멘트 닫기 var btnCloseCmt = $(this).siblings('.btn-closeComment'); btnCloseCmt.on("click",function(){ $(this).removeClass("active"); $(this).siblings('.xe_content').addClass('hiddenComment'); btnMoreCmt.removeClass("hidden"); }); } } ); }); </script> 3. _comment.html내의 댓글부분 - {$comment->getContent(false)}아래에 코드 추가 <div class="commentbox"> {$comment->getContent(false)} <div cond="$mi->cmt_line_use=='Y'" class="btn-moreComment sbtn_small sbtn-gray"><i class="fas fa-angle-double-down"></i> 펼치기</div> <div cond="$mi->cmt_line_use=='Y'" class="btn-closeComment sbtn_small sbtn-gray"><i class="fas fa-angle-double-up"></i> 접기</div> </div> p.s sbtn_small sbtn-gray 부분과 폰트어썸 아이콘은 웹폰드 에드온을 사용했습니다.
서버에 요청 중입니다. 잠시만 기다려 주십시오...