You cannot see this page without javascript.

Widgets Of MoonHouse

Etc Of MoonHouse

- '템플릿 컴포넌트'입니다. - 미리 완성된 서식(템플릿)을 이용해 문서를 편집할 수 있게 해주는 에디터 컴포넌트입니다. 기본 기능 - 원래는 회원 발송용 뉴스레터 템플릿을 제공하기 위해 만들었던 컴포넌트입니다. GG님의 관리자 메일 모듈과 같이 쓰면 좋습니다.( 0.5 버전 https://xetown.com/rxe_point/278628 , 깃허브에는 0.6도 있습니다ㅎ ) - 그 외에도 컴포넌트 이용자가 템플릿을 직접 만들어 활용할 수 있으므로, 견적서, 증빙서류 등 정해진 서식을 출력할 때 활용하는 것도 좋을 것 같습니다. - 풀 페이지, 헤더, 섹션, 푸터 등 4가지 타입의 템플릿을 제공합니다. - 해당 템플릿을 에디터 내 원하는 위치에 삽입할 수 있으며, 전체 덮어쓰기도 할 수 있습니다. 사용 방법 - CKEditor4 기준으로 설명합니다. - 보라색 부분의 아이콘을 누릅니다. - 팝업창이 뜹니다. - 썸네일 리스트의 원하는 템플릿을 골라 에디터에 '추가'하거나 '덮어쓰기'를 하면 에디터에 이렇게 적용됩니다. (템플릿 요소(li)를 더블클릭하면 에디터 커서 위치에 '추가'가 됩니다) - 물론 이미지나 글 내용을 수정할 수도 있습니다. 템플릿 등록 방법 - 컴포넌트 폴더에 templates 이라는 폴더가 있는데요. 이 안에 템플릿 문서 파일이 있는 하위폴더들이 있습니다. - 하위폴더의 이름은 템플릿들의 이름이기도 합니다. - 각각의 하위폴더에는 기본 제공되는 폴더에 있는 것처럼 index.html, info.xml, thumb.jpg가 있어야 합니다. - index.html은 템플릿의 html 코드를 담고 있습니다. 참고로, 기본 제공되는 템플릿은 뉴스레터 이메일 용으로 제작 중인 것이어서 기본적으로 인라인 스타일을 일괄적용하고 있습니다. - info.xml은 템플릿의 정보를 담고 있습니다. 기존 파일을 열어보시면 아시겠지만, admin, full_page, header, section, footer에 관한 정보가 필수적으로 들어가야 합니다. admin 값이 Y면 관리자만 템플릿을 적용할 수 있습니다. N이면 에디터 이용자 모두가 볼 수 있구요. full_page 값이 Y면 전체 문서에 어울리는 템플릿 유형이라는 뜻입니다. N이면 아니구요. header 값이 Y면 문서의 머리말로 어울리는 템플릿 유형이라는 뜻입니다. N이면 아니구요. section 값이 Y면 문서의 본문으로 어울리는 템플릿 유형이라는 뜻입니다. N이면 아니구요. footer 값이 Y면 문서의 꼬리말로 어울리는 템플릿 유형이라는 뜻입니다. N이면 아니구요. - thumb.jpg는 팝업창에서 출력하는 템플릿 리스트에서 출력할 썸네일입니다. 크기는 대략 120*100px 정도가 좋습니다. => 이렇게 준비하시면 여러분도 템플릿을 등록해서 언제든 꺼내서 사용하실 수가 있게 되는 겁니다. 주의 사항 - 본 템플릿 컴포넌트는 CKEditor4와 FroalaEditor에서 작동합니다. - 단, 프로알라 에디터의 경우에는 요소가 삽입될 경우 요소 앞뒤로 p태그가 자동으로 추가되므로 CKEditor4와 에디터 반영 결과가 다소 다를 수 있습니다. 테스트 환경 - 크롬 66.0.3359.181 / IE 11.48.17134.0 / 엣지 42.17134.1.0 - 라이믹스 1.9.6 / PHP 버전: 7.0.22 ... CKEditor4 - XE 1.9.7 / PHP 버전: 5.5 ... FroalaEditor - 스포어 웹호스팅, 카페24 웹호스팅 히스토리 - 2017년 9월 11일 "신기하네요. 레이아웃 만들기" https://xetown.com/rxe_story/729982 - 2017년 9월 13일 "재미난 녀석을 만들고 있습니다 ... 템플릿 컴포넌트" https://xetown.com/rxe_story/731957 - 2018년 6월 14일 "템플릿 컴포넌트 순항 중ㅎㅎ" https://xetown.com/board/996760 - 2018년 6월 17일 "XE에서 컴파일이 안돼요ㅠ(라이믹스에서는 되구요)" https://xetown.com/qna/998893 데모 - 라이믹스 1.9.6 / CKEditor4 / PHP 7.0.22 https://bit.ly/2IECAeU (들어가서 -> 쓰기 버튼 -> 템플릿 컴포넌트 아이콘을 클릭하면 컴포넌트 팝업창이 뜸) 문하우스에서 만든 템플릿들 - http://moonhouse.co.kr/xe/index.php?mid=xemy&search_target=tag&search_keyword=MH+%ED%85%9C%ED%94%8C%EB%A6%BF
Category 기타 Data 2018.07.05 Views 89
제가 예전에 "위젯을 가로로 정렬했을때 모바일에서 반응형으로 적용하기" 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 부분과 폰트어썸 아이콘은 웹폰드 에드온을 사용했습니다.
Xedition 레이아웃을 사용해 오면서 별 불만이 없는데 상단에 위치한 검색창이 마음에 들지를 않아서 바꾸어 봤습니다. 생각보다 어렵더군요 ^.^! 1. xedition/layout.html 에서 search부분을 찾아서 수정합니다. 169줄 ~ 181줄 삭제 <div cond="$layout_info->enable_intergration_search === 'Y'" class="search_wrap"> <div class="search_area"> <!-- SEARCH --> <form action="{getUrl()}" method="get" class="search" no-error-return-url="true"> <input type="hidden" name="vid" value="{$vid}" /> <input type="hidden" name="mid" value="{$mid}" /> <input type="hidden" name="act" value="IS" /> <input type="text" name="is_keyword" value="{$is_keyword}" required="required" title="{$lang->cmd_search}" placeholder="Search" /> </form> <!-- /SEARCH --> <a href="#" class="btn_close" title="{$lang->cmd_xedition_search_close}" onclick="return false"><i class="xi-close"></i><span class="blind">{$lang->cmd_xedition_search_close}</span></a> </div> </div> 210줄 ~ 213줄 수정전 <!-- search --> <li cond="$layout_info->enable_intergration_search === 'Y'" class="click"> <a href="#" title="{$lang->cmd_search}"><i class="xi-magnifier"></i><span class="blind">{$lang->cmd_search}</span></a> </li> 수정후 <!-- Search --> <li cond="$layout_info->enable_intergration_search == 'Y'" class="click"> <load target="js/search.js" /> <div class="search-wrapper"> <form action="{getUrl()}" method="get" class="search" no-error-return-url="true"> <div class="input-holder"> <input type="hidden" name="vid" value="{$vid}" /> <input type="hidden" name="mid" value="{$mid}" /> <input type="hidden" name="act" value="IS" /> <input type="text" name="is_keyword" value="{$is_keyword}" required="required" placeholder="Search..." /> <button class="search-icon" title="{$lang->cmd_search}" onclick="searchToggle(this, event);"><i class="fas fa-search fa-2x"></i></button> </div> <span class="close" onclick="searchToggle(this, event);"><i class="fas fa-times fa-2x"></i></span> </form> </div> </li> <style> .search-wrapper .input-holder .search-icon { color:#777;} .search-wrapper.active .close { color:#777; } .search-wrapper.active .input-holder { background:#000; } .search-wrapper .input-holder input[type=text] { color:#fff } input::-webkit-input-placeholder { color:#888; } </style> 2. xedition/css/layout.css 에서 553줄 ~ 601줄 /* Search */ 부분을 아래 코드로 교체합니다. /* Search */ .search-wrapper { position:absolute; top:-7px; left:-25px; } .search-wrapper.active { position:absolute; top:25px; left:-200px; z-index:2: } .search-wrapper .input-holder { overflow:hidden; height:40px; } .search-wrapper.active .input-holder { border-radius:50px; width:200px; } .search-wrapper .input-holder input[type=text] { width:90%; height:20px; padding:0px 30px 0 10px; opacity:0; position:absolute; top:0px; left:10px; background:transparent; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box; border:none; outline:none; font-size:14px; } .search-wrapper.active .input-holder input[type=text] { opacity:1; -webkit-transform:translate(0, 10px); -moz-transform:translate(0, 10px); transform:translate(0, 10px); } .search-wrapper .input-holder .search-icon { background:transparent; position:relative; z-index:2; float:right; cursor:pointer; margin:8px 10px 0 0} .search-wrapper .input-holder .search-icon:focus { border:none; outline:none; color:#fff; } .search-wrapper .close { display:none; position:absolute; z-index:2; top:7px; left:210px; cursor:pointer; } .search-wrapper.active .close { display:block; } 3. search.js 파일을 다운 받아서 xedition/js 방에 업로드 합니다. 참고로 아이콘은 폰트어썸을 사용하였으며, layout.html 안에 <style>부분은 검색창의 색상부분입니다. 자기에 맞게끔 색상 변경하시면 됩니다.
서버에 요청 중입니다. 잠시만 기다려 주십시오...