Layouts Of MoonHouse

Mh Justice Layout V 1...

Mh Sideways Layout

Mh Gallery Layout & M...

문하우스 Simple 레이...

Mh Thomsander Layout ...

Mh White Layout V1.1

Mh LeftMenu 레이아웃 ...

MH FullPage 레이아웃 ...

MH Pointy Slider 레이...

MH_Sliding 레이아웃

사이트선택 전용 레이...

XE기본 Xedition레이아...

XE기본 Xedition레이아...

Widgets Of MoonHouse

Data Of MoonHouse

Layouts Of MoonHouse

    • Mh Justice Layout V 1.6 [ 2025. 06. 09 ] - Sale 제품
    • Mh Justice Layout is a one page html5 bootstrap template. This template comes with smooth a...
    • 2023.03.26
    • Mh Sideways Layout
    • [특징] •화면전환이 가로 방향으로 움직입니다. •홍보용 사이트 레이아웃에 적합합니다. •화면 좌...
    • 2022.05.16
    • Mh Gallery Layout & Mh Gallery Widget V2.2 [2022.05.22] - Sale 제품
    • [ V2.2 특징 ] •Colorbox Skin 추가 - 첫화면에 박스출력 - Auto Slide 지원 •본문 메뉴(GNB)를 ...
    • 2022.05.02
    • 문하우스 Simple 레이아웃 V 1.4 (2020.12.13 Up)
    • V1.4 수정내용(2020.12.13) 1. 코드정리 2. 자체 로그인 탑재 3. 메뉴 아래 "mh_simple 소식"은 M...
    • 2015.05.18
    • Mh Thomsander Layout V1.0
    • [특징] - 페이지안에서 부메뉴가 Box형식으로 열립니다. - 배경이미지를 슬라이드로 출력합니다. ...
    • 2019.09.12
    • Mh White Layout V1.1
    • [ V1.1 특징 ] 1. 본문 상단에 Accordions / TiltedContent 이미지박스 출력선택 - mwea.html 와 ...
    • 2019.04.04
    • Mh LeftMenu 레이아웃 V1.2
    • [특징] - Sub메뉴를 좌측 Wing영역에 배치하여 Sub메뉴의 활용도를 높였습니다. - 최대한으로 코...
    • 2019.01.07
    • MH FullPage 레이아웃 V1.2
    • 마우스 휠 한번 작동시 전체 화면 스크롤되는 FullPage 레이아웃입니다. [Tip] 페이지에 Youtube...
    • 2018.12.04
    • MH Pointy Slider 레이아웃
    • MH_Pointy-Slider 레이아웃을 공개합니다. 소스는 아래에서 제공 받아서 XE에서 작동하게끔 수정...
    • 2018.10.27
    • MH_Sliding 레이아웃
    • MH_Sliding 레이아웃을 공개합니다. 소스는 아래에서 제공 받아서 XE에서 작동하게끔 수정했습니...
    • 2018.10.20

XE 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 (들어가서 -> 쓰기 버튼 -> 템플릿 컴포넌트 아이콘을 클릭하면 컴포넌트 팝업창이 뜸) 문하우스에서 만든 템플릿들 - https://moonhouse.co.kr/index.php?mid=xemy&search_target=tag&search_keyword=MH+%ED%85%9C%ED%94%8C%EB%A6%BF
똑띠님의 홈피에 있는 Tip인데 너무 유용해서 응용해 봅니다. 원본 소스의 핵심입니다. 스케치북 기준 write_form.html 파일에서 _admin으로 끝나는 확장변수 ID는 글 작성시 숨겨지는 기능입니다. {@$match = preg_match('/_admin$/is', $val->eid)} <!--@if($match != 1)--> <th scope="row"><em cond="$val->is_required=='Y'">*</em> {$val->name}</th> <td>{$val->getFormHTML()}</td> <!--@end--> 근데 이렇게만 하면 글 작성시 누구도 확장변수가 보이질 않아서 확장변수가 있으나마나죠 그래서 관리자는 글작성시 보이게 수정 <!--@if($match != 1 || $grant->is_admin)--> 그리고 본문글에서도 확장변수를 숨깁니다. _read.html 파일에서 _hidden으로 끝나는 확장변수 ID는 본문글 출력시 숨겨지는 기능 {@$match = preg_match('/_hidden$/is', $val->eid)} <!--@if($match != 1 || $grant->is_admin)--> <th scope="row">{$val->name}</th> <td cond="$val->eid!='rating">{$val->getValueHTML()}</td> <!--@end--> 여기서 한발 더 나아가서 글작성, 본문출력 둘다 관리자외는 숨겨지는 기능 •write_form.html <!--// 확장변수명이 _admin, _both로 끝날때 숨김처리 하기(관리자는 예외) --> {@$match1 = preg_match('/_admin$/is', $val->eid)} {@$match2 = preg_match('/_both$/is', $val->eid)} <!--@if(($match1 != 1 && $match2 != 1) || $grant->is_admin)--> <th cond="" scope="row"><em cond="$val->is_required=='Y'">*</em> {$val->name}</th> <td cond="$val->eid!==$mi->etc_name">{$val->getFormHTML()}</td> <!--@end--> •_read.html <!--// 확장변수명이 _hidden, _both로 끝날때 숨김처리 하기(관리자는 예외) --> {@$match1 = preg_match('/_hidden$/is', $val->eid)} {@$match2 = preg_match('/_both$/is', $val->eid)} <!--@if(($match1 != 1 && $match2 != 1) || $grant->is_admin)--> <th scope="row">{$val->name}</th> <td cond="$val->eid!='rating">{$val->getValueHTML()}</td> <!--@end--> 글 작성자에게도 권한을 줄려면 $oDocument->isEditable() 추가 <!--@if(($match1 != 1 && $match2 != 1) || $grant->is_admin || $oDocument->isEditable())--> 이렇게 적용하면 확장변수 ID가 _admin으로 끝나는 경우는 글작성시 숨겨지고, 확장변수 ID가 _hidden으로 끝나는 경우는 본문출력시 숨겨지고, 확장변수 ID가 _both으로 끝나는 경우는 두 경우 전부 숨겨집니다. [확장변수 ID 설정] [글 작성시] - 관리자 화면 - 일반 화면 [본문글] - 관리자 화면 - 일반 화면 Tip] 게시판에서 글 작성시 확장변수에 Hidden 적용시 기본값이 적용되게 하는 법
sketchbook5 게시판 스킨에서 레이아웃 다크모드 사용시 - https://moonhouse.co.kr/xetip/556950 웹진형 게시판에서 박스안의 내용물들이 출력되지 않습니다. 웹지기님의 사이트나 XeTown사이트도 List게시판을 수정해서 사용하는 것 같습니다. [수정방법] 1. skin.xml 파일에 추가 - 일반모드 게시판과 다크모드 게시판을 분리하기 위한 설정 <var name="dark_mode" type="radio"> <title>다크모드</title> <description>레이아웃의 다크모드 설정시 웹진형에서의 문제수정</description> <options value=""> <title>일반</title> </options> <options value="Y"> <title>다크모드</title> </options> </var> 2. css/board.css 에서 아래줄 삭제 .bd_zine>li>a{display:block;position:absolute;top:-1px;bottom:-1px;left:-1px;right:-1px;border:2px solid transparent;background-image:url(../img/blank.gif);text-decoration:none} 3. __setting.html 에 추가 <!--@if(!$mi->dark_mode=='Y')--> .bd_zine>li>a{display:block;position:absolute;top:-1px;bottom:-1px;left:-1px;right:-1px;border:2px solid transparent;background-image:url(../img/blank.gif);text-decoration:none} .bd_zine a:hover,.bd_zine a:focus,.bd_zine .select a{border-color:#{$mi->color};} <!--@else--> .bd_zine li,.bd_zine li{border:2px solid transparent; } .bd_zine li:hover,.bd_zine li:focus, .bd_zine .select {border:2px solid #{$mi->color}; border-radius:5px } <!--@end--> 4. _list_webzine.html 파일에서 빨간색 코드로 썸네일, 제목, 본문요약 부분을 감싸줍니다. <!--// 썸네일 영역 --> <div class="rt_area<!--@if($list_config['thumbnail'] && $document->thumbnailExists())--> is_tmb<!--@end-->"> <div onclick="location.href='{getUrl('document_srl',$document->document_srl, 'listStyle', $listStyle, 'cpage','')}';" style="cursor: pointer;"> ~~ 기존 코드 ~~ </div> <!--// 글 정보 --> <div class="info"> 글 정보 까지 감싸지 않는 이유는 "게시판 목록에서 확장변수 바로 수정 애드온" 이 작동되게 하기 위해서 입니다. [적용된 모습] - 다크모드가 적용된 레이아웃에서 다크모드 적용 - 게시판 설정에서 다크모드를 선택 최대한 원본의 모습에 비숫하게 구현했습니다.
XeTown에 올라온 질문중에 재미있는 것이 있어서 팁으로 남깁니다. [질문내용] 게시판 사용자정의항목에 text 형식에 html 이 적용되게 하려면 어디를 수정해야 할까요? <a href="url"> text </a> 이렇게 입력해서 링크를 걸고 싶습니다. 위의 질문을 역으로 해석해서 확장변수 "URL 형식" 주소란 에 텍스트로 Link 출력하는 방법입니다. 1.sketchbook5 게시판 스킨을 기준으로 skin.xml 파일에 추가 <var name="e_url" type="text"> <title xml:lang="ko">★URL 형식 주소 대신 텍스트 출력 확장변수 ID</title> <description xml:lang="ko">URL 형식 확장변수란 주소 대신 텍스트(Link) 출력할 확장변수 ID를 적어주세요.</description> </var> <var name="e_urlt" type="text"> <title xml:lang="ko"> ┖ 주소대신 출력할 텍스트</title> <description xml:lang="ko">URL 형식 확장변수 주소란에 대신 출력될 텍스트 입력(기본 Link)</description> </var> 2. _read.html 파일 확장변수 부분 <!--// Extra Var --> <table cond="!$mi->et_var && $oDocument->isExtraVarsExists() && (!$oDocument->isSecret() || $oDocument->isGranted())" class="et_vars bd_tb"> <caption class="blind">Extra Form</caption> {@ $etIdx=1 } <tr loop="$oDocument->getExtraVars() => $key,$val" cond="$val->getValueHTML() && $val->eid!='rd_preview'" class="bg{$etIdx%2}"> <th scope="row">{$val->name}</th> <td cond="$val->eid!='rating' && $val->eid!==$mi->e_url">{$val->getValueHTML()}</td> {@ if(!$mi->e_urlt) $mi->e_urlt = Link; } <td cond="$val->eid==$mi->e_url"><a href="{$oDocument->getExtraEidValue($mi->e_url)}" target="_blank">{$mi->e_urlt}</a></td> <td cond="$val->eid=='rating'" class="rating"><span class="starRating" title="{$val->getValueHTML()}{$lang->score}"><span style="width:{$val->getValueHTML()*10}%">{$val->getValueHTML()}</span></span></td> {@ $etIdx++ } </tr> </table> 빨간색 부분 추가하면 됩니다. [설정화면) [출력화면]
아래글 작성후에 올라온 좋은 방법입니다. https://moonhouse.co.kr/xetip/579242 XETown에 "확장변수를 입력하면 자동으로 제목으로 치환되게 가능할까요?" 질문글이 올라와서 sketchbook5 게시판스킨에 적용해 보았습니다. 1. skin.xml 파일안에 추가 <var name="display_title" type="radio"> <title xml:lang="ko">★본문 제목 출력</title> <options value=""> <title xml:lang="ko">출력</title> </options> <options value="N"> <title xml:lang="ko">출력하지 않음</title> </options> <description xml:lang="ko"> 본문제목의 출력여부를 선택합니다. 출력하지 않을시 문서의 내용이 없이도 글이 작성됩니다. </description> </var> <var name="extra_title" type="radio"> <title xml:lang="ko"> ┖ 확장변수로 제목 대체</title> <options value=""> <title xml:lang="ko">기본 제목</title> </options> <options value="Y"> <title xml:lang="ko">확장변수 제목</title> </options> <description xml:lang="ko">지정한 확장변수로 제목을 대체 합니다.</description> </var> <var name="title_name" type="text"> <title xml:lang="ko"> ┖ 제목 대체 확장변수 ID</title> <description xml:lang="ko">제목으로 대체할 확장변수 ID를 작성</description> </var> 2. write_form.html 수정 - 빨간색 부분 추가 <!--@if($mi->display_title =='')--> <td width="100%"> <span class="itx_wrp"> <label for="postTitle">{$lang->title}</label> <input type="text" name="title" class="itx" id="postTitle" title="{$lang->title}" value="{(!$oDocument->isExists()&&$mi->title_default_text)?htmlspecialchars($mi->title_default_text):$oDocument->getTitleText()}"/> </span> </td> <td cond="$is_logged && !$oDocument->isExists() || $oDocument->get('status')=='TEMP'" class="m_no"><button type="button" class="bd_btn" onclick="doDocumentLoad(this);">{$lang->cmd_load}</button></td> <!--@else--> <input type="hidden" name="content" value=" " /> <!--@end--> 3. _read.html 수정 - 빨간색 부분 추가 <h1 class="np_18px"> <a href="{$oDocument->getPermanentUrl()}"> <!--@if($mi->extra_title =='')--> {$oDocument->getTitle()} <!--@else--> {$oDocument->getExtraEidValueHTML($mi->title_name)} <!--@end--> </a> </h1> 4. 게시판형식(_list_normal.html) 수정 - 빨간색 부분 추가 <!--@if($mi->extra_title =='')--> {$document->getTitle($mi->subject_cut_size)} <!--@else--> {$document->getExtraEidValueHTML($mi->title_name)} <!--@end--> 위와 같이 수정하고 "게시판 설정 > 확장변수 > 확장변수 ID" 를 제목으로 출력할 "확장변수 ID"를 만들고 "스킨설정 > 제목 대체 확장변수 ID"에 적어 주면 됩니다. 참고로 일반위젯에서는 제목이 확장변수로 출력이 되지는 않습니다. 적용되게 할려면 위젯에서도 수정을 해야합니다. [위젯 수정 방법] 1. 수정할 위젯의 info.xml에 추가 <var id="extra_title"> <name>★확장변수로 제목 대체</name> <type>select</type> <description>지정한 확장변수로 제목을 대체 합니다. </description> <options> <name>기본 제목</name> <value></value> </options> <options> <name>확장변수 제목</name> <value>Y</value> </options> </var> <var id="title_name"> <name xml:lang="ko"> ┖ 제목 대체 확장변수 ID</name> <type>text</type> <description xml:lang="ko">제목으로 대체할 확장변수 ID를 작성</description> </var> 2. 해당 스킨의 list.html 수정 - 빨간색 부분 추가 <!--@if($wi->extra_title =='')--> {$oDocument->getTitle($mi->subject_cut_size)} <!--@else--> {$oDocument->getExtraEidValueHTML($wi->title_name); } <!--@end--> https://moonhouse.co.kr/multi