RM 팁

스케치북 스킨 관리자 화면에 쉽게 접근할 수 있는 "위저드" 기능을 제거하면 성능이 눈에 띄게 개선

2025-12-31T20:30:30+09:00

Rhymix - 스킨에 쓰지 않는 부분 삭제하면 속도 향상에 도움이 될까요? 스케치북 스킨 같은거에서 html 소스의 사용하지 않는 기능 부분들을 다 삭제해버리면 로딩 속도나 서버 부하에 조금 도움이 될까요? 아니면 용량이 조금 줄어드는 정도 말고는 의미가 없는건지요 from RHYMIX.ORG

게시판을 꾸미다 보면 게시판 설정을 자주 사용합니다.

그래서 설정 Wizard 버턴을 적용하여 사용하면 편하죠.

근데 위의 글 에서 처럼 부하가 걸린다고 하니, 이 부분을 해소 하고자 게시판 상단에 Wizard 설정을 출력해서 해결하는 팁 입니다.

기능상 "사용 안함"만 적용되며 Wizard를 사용 설정 할려면 해당 게시판 설정으로 이동 합니다.

사용 안함 체크하면 Wizard 버턴 사라짐,

근데 사용할려면 "사용중"체크시 게시판 설정으로 이동합니다.

"위저드 사용 > 관리자만(기본)"에 체크하면 됩니다.

설정 화면은 10초후 자동으로 사라집니다.

<block cond="$grant->manager && !$mi->wizard=='N' && !$mo">
           <load target="css/wizard.css" />
           <include target="_wizard.php" />
       </block>
       <block cond="!$oDocument->isExists() && $grant->manager && !$mo">
           
           <include target="_wizardsetting.html" />
       </block>

<div class="wizard-setting-panel">
   <span class="setting-label">위저드 설정</span>
   <span class="radio-group">
       <label class="radio-label">
           <input type="radio" name="wizard_opt" value="" checked="checked"|cond="$mi->wizard != 'N'" onchange="location.href='<?php echo getUrl('act', 'dispBoardAdminSkinInfo'); ?>'">
           <span>사용중(✔ 설정 바로가기)</span>
       </label>
       <label class="radio-label">
           <input type="radio" name="wizard_opt" value="N" checked="checked"|cond="$mi->wizard == 'N'" onchange="exeWizardUpdate(this.value)">
           <span>사용 안함</span>
       </label>
   </span>
</div>

       var $ = jQuery;
       // 1. _wizard.php가 로드한 원본 폼을 찾습니다.
       var $originForm = $('#bd_wizard_scroll').find('form').first();

       if(!$originForm.length) {
           alert('원본 설정 폼을 찾을 수 없습니다. _wizard.php가 정상 로드되었는지 확인해주세요.');
           return;
       }

// 2. 폼 데이터를 복사하여 객체화합니다.
var formData = $originForm.serializeArray();

       // 3. 복사된 데이터에서 wizard 값만 사용자가 선택한 값으로 강제 교체합니다.
       var isReplaced = false;
       for (var i = 0; i < formData.length; i++) {
           if (formData[i].name === 'wizard') {
               formData[i].value = val;
               isReplaced = true;
               break;
           }
       }
       if(!isReplaced) formData.push({ name: 'wizard', value: val });

       // 4. 전송 (가장 범용적인 $.post 사용)
       $.post(request_uri, formData, function(data) {
           // 성공 시 페이지를 새로고침하여 적용된 내용을 확인합니다.
           alert('설정이 저장되었습니다.');
           location.reload();
       }).fail(function() {
           // 오류가 나더라도 실제로는 저장되었을 수 있으므로 확인을 위해 새로고침합니다.
           alert('요청을 완료했습니다.');
           location.reload();
       });
   }

   // 10초 후 패널 제거
   setTimeout(function() {
       var panel = document.querySelector('.wizard-setting-panel');
       if(panel) {
           panel.style.transition = 'opacity 0.5s';
           panel.style.opacity = '0';
           setTimeout(function() {
               panel.remove();
           }, 500);
       }
   }, 10000);
</script>

SketchBook5 게시판 스킨 공지사항을 폴딩 형식으로 출력하기 2탄

2025-12-30T13:32:30+09:00

https://moonhouse.co.kr/xetip/588063
위의 글에서 적용된 폴딩 기능에서 좀 더 발전한 옵션을 주는 벙법입니다.

<div style="float:left; border-top:1px solid #ddd; width:100%">
   <table class="bd_lst bd_tb_lst bd_tb common_notice">
       <tr loop="$notice_list=>$no,$document" class="notice">
           <td $list_config['no']><span class="sbtn_mini sbtn-orange">{$lang->notice}</span></td>
           <td scope="col" class="m_no" style="color:{$category_list[$document->get('category_srl')]->color}"|cond="$category_list[$document->get('category_srl')]->color!='transparent'"><span>{$category_list[$document->get('category_srl')]->title}</span></td>

<td class="title">
               
               <a cond="$mi->notice_view_slide ==''" href="{getUrl('document_srl',$document->document_srl, 'listStyle', $listStyle, 'cpage','')}">
                   <strong><include cond="$mi->notice_view_slide ==''" target="title.html" /></strong>
               </a>

<details cond="!$mi->notice_view_slide ==''" class="accordion">
                   <summary class="notice_fold">
                       <strong><include target="title.html" /></strong>
                   </summary>

<div class="slide-content">
                       <p style="margin-top:10px">
                           <span>{$document->getContent(false)}</span>
                           <div style="text-align:right; float:left; padding-bottom:5px; width:100%">
                               <div style="float:right">
                                   <a href="{getUrl('document_srl',$document->document_srl, 'listStyle', $listStyle, 'cpage','')}" class="btn"><span>공지글 보기</span></a>
                                   
                                       <a href="{getUrl('', 'mid', $mid, 'act','dispBoardWriteComment','document_srl',$document->document_srl)}" class="btn"><span>{$lang->cmd_comment_registration}</span></a>
                                   
                                   
                                       
                                           <a href="{getUrl('', 'mid', $mid, 'act','dispBoardWrite','document_srl',$document->document_srl,'comment_srl','')}" class="btn"><span>{$lang->cmd_modify}</span></a>
                                       
                                       
                                           <a href="{getUrl('', 'mid', $mid, 'act','dispBoardDelete','document_srl',$document->document_srl,'comment_srl','')}" class="btn"><span>{$lang->cmd_delete}</span></a>
                                       
                                   
                               </div>
                           </div>
                       </p>
                       
                       <div class="scroll-end-marker"></div>
                   </div>

<td cond="$list_config['nick_name']"><a href="#popup_menu_area" class="member_{$document->get('member_srl')}" onclick="return false">{$document->getNickName()}</a></td>
           <td cond="$list_config['regdate']">{$document->getRegdate('Y.m.d')}</td>
           <td cond="$list_config['last_update']">{getTimeGap($document->get('last_update'), "y.m.d")}</td>
           <td cond="$list_config['readed_count'] && $val->idx==-1">{$document->get('readed_count')>0?$document->get('readed_count'):'0'}</td>
           <td cond="$grant->manager" class="check m_no"><input type="checkbox" name="cart" value="{$document->document_srl}" class="iCheck" title="Check This Article" onclick="doAddDocumentCart(this)" checked="checked"|cond="$document->isCarted()" /></td>
       </tr>
   </table>
</div>

       const scrollEndObserver = new IntersectionObserver((entries, observer) => {
           entries.forEach(entry => {
               const details = entry.target.closest('details.accordion');
               if (!details || !details.open) return;

let currentOpenDetails = null;
let lastScrollDirection = 0; // 0: 정지, 1: 아래, -1: 위

       // window 스크롤 이벤트 리스너 (짧은 글용)
       window.addEventListener('wheel', function(e) {
           if (currentOpenDetails && currentOpenDetails.open) {
               const slideContent = currentOpenDetails.querySelector('.slide-content');
               const viewportHeight = window.innerHeight || document.documentElement.clientHeight;

               // "짧은 글"로 판단된 경우에만 wheel 로직 적용
               if (slideContent && slideContent.scrollHeight <= viewportHeight * 0.8) {
                   // 스크롤 방향 감지
                   const newScrollDirection = e.deltaY > 0 ? 1 : (e.deltaY < 0 ? -1 : 0);

                   // 스크롤 방향이 아래쪽일 때
                   if (newScrollDirection === 1) {
                       // 기존 타이머가 있다면 취소 (새로운 스크롤 이벤트 발생 시)
                       if (closeTimers.has(currentOpenDetails)) {
                           clearTimeout(closeTimers.get(currentOpenDetails));
                       }

                       // 1초 후에 닫히도록 타이머 설정
                       const timerId = setTimeout(() => {
                           if (currentOpenDetails && currentOpenDetails.open) { // 타이머 만료 시에도 열려있는지 확인
                               currentOpenDetails.open = false;
                               if (slideContent) {
                                   slideContent.style.maxHeight = '0';
                                   slideContent.style.opacity = '0';
                               }
                               closeTimers.delete(currentOpenDetails);

                               setTimeout(() => {
                                   const detailsTop = currentOpenDetails.getBoundingClientRect().top;
                                   window.scrollTo({
                                       top: window.pageYOffset + detailsTop - 200,
                                       behavior: 'smooth',
                                   });
                               }, 300);

                               currentOpenDetails = null; // 닫혔으므로 초기화
                           }
                       }, 1000); // 1초 = 1000ms

                       closeTimers.set(currentOpenDetails, timerId);
                   } else if (newScrollDirection === -1) { // 스크롤 방향이 위쪽일 때
                       // 위로 스크롤하면 타이머 취소
                       if (closeTimers.has(currentOpenDetails)) {
                           clearTimeout(closeTimers.get(currentOpenDetails));
                           closeTimers.delete(currentOpenDetails);
                       }
                   }
               }
           }
       });

       detailsElements.forEach(details => {
           const slideContent = details.querySelector('.slide-content');
           const scrollEndMarker = details.querySelector('.scroll-end-marker');

           details.addEventListener('toggle', function() {
               // details가 닫힐 때 타이머 및 currentOpenDetails 정리
               if (!this.open) {
                   if (closeTimers.has(this)) {
                       clearTimeout(closeTimers.get(this));
                       closeTimers.delete(this);
                   }
                   if (currentOpenDetails === this) {
                       currentOpenDetails = null;
                   }
                   // 닫힐 때 Intersection Observer도 해제
                   if (scrollEndMarker) {
                       scrollEndObserver.unobserve(scrollEndMarker);
                   }
               }

               if (this.open) {
                   currentOpenDetails = this;

                   // 다른 details 닫기
                   detailsElements.forEach(otherDetails => {
                       if (otherDetails !== this && otherDetails.open) {
                           if (closeTimers.has(otherDetails)) {
                               clearTimeout(closeTimers.get(otherDetails));
                               closeTimers.delete(otherDetails);
                           }
                           otherDetails.open = false;
                           const otherSlideContent = otherDetails.querySelector('.slide-content');
                           if (otherSlideContent) {
                               otherSlideContent.style.maxHeight = '0';
                               otherSlideContent.style.opacity = '0';
                           }
                           // 다른 details가 닫힐 때 해당 Observer도 해제
                           const otherMarker = otherDetails.querySelector('.scroll-end-marker');
                           if (otherMarker) {
                               scrollEndObserver.unobserve(otherMarker);
                           }
                       }
                   });

                   // 슬라이딩 효과
                   if (slideContent) {
                       slideContent.style.maxHeight = 'none';
                       const scrollHeight = slideContent.scrollHeight;
                       slideContent.style.maxHeight = '0';
                       requestAnimationFrame(() => {
                           slideContent.style.maxHeight = scrollHeight + 'px';
                           slideContent.style.opacity = '1';

                           // details가 열린 후, 내용의 길이를 판단하여 Observer 등록
                           const viewportHeight = window.innerHeight || document.documentElement.clientHeight;
                           if (scrollHeight > viewportHeight * 0.8) { // 긴 글인 경우
                               if (scrollEndMarker) {
                                   scrollEndObserver.observe(scrollEndMarker);
                               }
                           }
                       });
                   }

                   // 열린 details로 스크롤 이동
                   requestAnimationFrame(() => {
                       const detailsTop = this.getBoundingClientRect().top;
                       window.scrollTo({
                           top: window.pageYOffset + detailsTop - 200,
                           behavior: 'smooth',
                       });
                   });
               } else {
                   // details가 닫힐 때
                   if (slideContent) {
                       slideContent.style.maxHeight = '0';
                       slideContent.style.opacity = '0';
                   }
               }
           });
       });
   });
</script>

위의 스크립트는 공지글의 내용이 길어서 한 화면을 넘어서면 가장 아래줄에 도달시 3초가 지나면 자동으로 닫히고,
내용글이 짧아서 화면을 벗어나지 않으면 내용이 닫히지 않고, 마우스 스크롤시 1초가 지나면 닫히게 만든 스크립트 입니다.

시간은 자신에게 맞게끔 조절하면 됩니다.

별 기능이 아닌데 스크립트가 길다고 여겨지면 적용 안 하면 됩니다.(딴지 걸기 없기 ^.^)

위의 코드는 앨런 A.I가 만들어 줬습니다.

앨런 - 한국어 AI 검색엔진 | ChatGPT, Claude, Gemini, EXAONE 4개 모델 비교 최신 AI 모델 비교부터 논문·유튜브 요약까지. 한국어에 가장 강한 AI 검색엔진 앨런으로 검색, 글쓰기, 문서 작성에서 압도적인 생산성을 경험하세요. 모든 기능을 무료로 체험해보세요! from ALAN.ESTSOFT.AI

넥슨 Lv.2 고딕 NEXON Lv2 Gothic 웹 폰트 적용하기

2025-03-25T17:15:16+09:00

넥슨 Lv.2 고딕 NEXON Lv2 Gothic 웹 폰트 적용하기

NEXON Brand Identity Guide 넥슨은 항상 참신하고 함께 하는 재미를 통해 즐거움에 대한 신뢰를 주는 브랜드입니다 from BRAND.NEXON.COM

적용하고자하는 레이아웃이나 프로그램의 css파일을 불러와서 상단에 아래의 코드를 적용하면 됩니다.

@font-face {
   font-family: 'NEXON Lv2 Gothic';
   src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_20-04@2.1/NEXON Lv2 Gothic.woff') format('woff');
   font-weight: normal;
   font-style: normal;
}
@font-face {
   font-family: 'NEXON Lv2 Gothic';
   src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_20-04@2.1/NEXON Lv2 Gothic Bold.woff') format('woff');
   font-weight: bold;
   font-style: normal;
}

body, a, p, div, span, table, ul, li, img, h1, h2, h3, h4, h5, h6, header, textarea, form, footer, caption, section, button, select, html, i, nav, iframe, ol, strong, tbody, tfoot, thead, th, tr, abbr, object, acronym, address, applet, article, aside, audio, b, blockquote, big, center, canvas, cite, code, command, datalist, dd, del, details, dfn, dl, dt, em, embed, fieldset, figcaption, figure, font, hgroup, ins, kbd, keygen, label, legend, meter, output, pre, progress, q, s, samp, small, source, strike, sub, sup, tdvideo, tt, u, var { font-family: "NEXON Lv2 Gothic", sans-serif; font-size:14px; font-weight:400; }

font-size와 font-weight는 자신에세 맞게 조정하면 됩니다.

위젯에 확장변수에서 체크된 해당 글 리스트 불러오기 2탄

2025-03-11T08:46:01+09:00

1탄 에 이어서

기존 위젯에 간단히 확장변수로 출력하는 방법

카테고리는 각자 다르고 확장변수의 ID는 같을 경우에 적용하면 유용합니다.

<var id="eid_select">
   <name>📍확장변수 선택출력</name>
   <type>select</type>
   <description>확장변수에서 선택된 해당 글 리스트 불러오기</description>
   <options>
       <name>표시하지 않음</name>
       <value></value>
   </options>
   <options>
       <name>표시</name>
       <value>Y</value>
   </options>
</var>
<var id="eid_id">
   <name>확장 변수 ID</name>
   <type>text</type>
   <description>대상모듈을 해당 게시판으로 지정후 출력할 확장변수의 ID를 작성</description>
</var>
<var id="eid_id_select">
   <name>선택지</name>
   <type>text</type>
   <description>확장변수의 ID의 형식 선택지</description>
</var>

{@
       $eid = $oDocument->getExtraEidValueHTML($wi->eid_id);
       $eid_a = $oDocument->getExtraEidValueHTML($wi->eid_id)==$wi->eid_id_select;
   }
   <tbody cond="($wi->eid_select =='Y' && $eid && $eid_a) || ($wi->eid_select =='')">
~내용영역~

</tbody>

이렇게 하면 기존의 위젯도 그대로 사용 가능하고, 선택한 확장변수만으로도 출력을 할 수 있습니다.

랭킹 순서 위젯 만들기

2025-02-19T21:33:39+09:00

게시글 랭킹을 위젯에 추가하는 방법입니다.

• 일단 위젯의 정렬대상 선택이 아래와 같이 존재

랭킹을 정할 대상을 선택 - 주천수 or 조회수 or 댓글순

• 정렬 방법을 올림차순으로

• 수정하는 위젯의 info.xml 파일에 랭킹 출력 선택

<var id="rank_no">
   <name xml:lang="ko">랭킹 표시</name>
   <type>select</type>
   <description />
   <options>
       <name xml:lang="ko">표시하지 않음</name>
       <value></value>
   </options>
   <options>
       <name xml:lang="ko">표시</name>
       <value>Y</value>
   </options>
</var>

• 위젯의 html 에서 아래 부분을 찾아서 위에 {@$i=1} 추가

{@$i=1}

위젯 내용

{@$i++}

• 보통 제목앞에 랭킹을 붙이니 아래 부분을 찾아서 상단에 빨간색 부분 추가

<span class="rank-number rank-1">{$i}.</span>
   
       <span class="rank-number rank-2">{$i}.</span>
   
       <span class="rank-number rank-3">{$i}.</span>
   
       <span class="rank-number">{$i}.</span>

<a href="{$oDocument->getPermanentUrl()}" class="mtitle">
   {$oDocument->getTitleText($wi->subject_cut_size)}
</a>

<style>
   .rank-number { font-weight:bold; margin-right:8px; font-size:1.05em;}
   .rank-1 { color:#FFD700; /* 금색 */ font-size:1.2em;}
   .rank-2 { color:#C0C0C0; /* 은색 */ font-size:1.1em;}
   .rank-3 { color:#CD7F32; /* 동색 */ }
</style>

스타일은 자신이 원하는 모양이나 색상으로 꾸미면 됩니다.

각종 A.I 라이믹스 코딩 시켜본 소감

2025-02-08T12:50:08+09:00

php8.2 호스팅 사이트 수정을 의뢰 받아서 레이아웃과 게시판 스킨을 8.2에 작동하게끔 하기 위해서 A.I 들의 도움을 받았다.

생각보다 쉽게 수정을 해 주어서 조금 놀라웠다.

이제 정말 질문만 잘하면 웬만한 코딩이나 기능들은 A.I 가 해 주는 시대가 도래한 것 같다.

의뢰받은 사이트 수정을 마치고 본격적으로 A.I 들에게 질문들을 던졌다.

주로 내가 만들었던 위젯들을 중심으로 php8 이상으로의 호환성과 이제껏 사용해 오면서 불편했던 기능들을 중심으로 질문을 던지고 답을 구했다.

1월 20일쯤 부터 오늘이 2월 8일 이니까 근 20일 정도

매일 무료로 사용할 수 있는 시간동안 A.I 들을 괴롭히면서 답을 구했다.

먼저 사용해본 A.I 사이트 종류부터 나열하면

1. ChatGPT

https://chatgpt.com/

2. Claude

https://claude.ai/new

3. DeepSeek

https://chat.deepseek.com/

4. 그 외 별 도움되지 않은 마이크로소프트의 Copilot, 구글의 Gemini, 네이버의 Cue:등이 있다.

- 4번들은 이미지파일과 문서파일 들만 업로드가 되어 불편해서 사용을 잘 하지 않아서 이번에는 제외 합니다.

결론 부터 먼저 답을 하고 진행하면

저의 선택은 Claude 였습니다.

제가 올린 질문들에 가장 깨끗하고 알아보기 쉽게 답해 주었으며 거의 모든 답을 주었습니다.

MH Tab Slide 위젯의 어려운 기능들을 구현해 주었습니다.

라이믹스에 대한 이해도가 굉장히 뛰어납니다.

페이지기능 위젯들의 페이지기능을 완벽하게 수정해 주었으며

설정들을 빠짐 없이 재코딩에 반영해 주었습니다.

이것을 왜 말을 하냐면 ChatGPT 같은 경우는 설정들을 마음대로 생략해 버리는 경우가 많았습니다.

붙여 넣기후 프로그램 실행 후 확인해 보면 빠진 설정들이 수두룩 했습니다.

빠진 설정이나 기능들을 다시 물어야 답해 주는 정도 였습니다.

근데 Claude 단점도 있습니다.

ChatGPT의 경우는 압축파일도 지원해서 프로그램 전체를 압축해서 올리고 질문이 가능한데

Claude 의 경우는 html, css, js등의 파일을 따로 따로 올리거나 코드를 복사해서 붙여 넣기를 해야 합니다.

이 경우는 DeepSeek도 마찬가지 였습니다.

근데 파일을 붙여 넣기 해보면 Claude 의 경우는 일일이 화면에 붙여넣기한 코드를 나열하지 않고

파일형식으로 만들어 보여 주어서 깔끔하고 좋았습니다.

[붙여 넣기 한 화면]

[파일을 올린 화면]

DeepSeek의 경우는 답은 잘 해 주는 것 같은데 조금만 물어보면 아래의 메세지 내 보내고 종료해 버립니다.

The server is busy. Please try again later.

그래서 세밀하고 어려워서 질문을 많이 해야 하는 경우는 사용하기가 힘듭니다.

단순한 질문이나 css조정 같은 경우 사용할만 합니다.

ChatGPT의 경우는 위에서도 언급했지만 코드들을 생락해 버리는 경우가 많아서 믿음이 가지를 않았습니다.

그리고 너무 장황하고 화면이 보기 어려운 부분도 있습니다.

제가 느끼기에 이 정도는 네가 알아서 해라 하는 설명도 많았습니다.

거기에 비하면 Claude 나 DeepSeek 는 조금 자세한 설명을 하는 느낌이나 UI 입니다.

Claude 가 가장 친절한 느낌이랄까...

부연 설명으로 MH Tab Slide 위젯 의 기능들을 실현하면서 느낀 각 A.I 의 대응을 간략히 설명해 보겠습니다.

먼저 MH Tab Slide 위젯은 XE 초창기에 만들어졌던 tab_newest_document 위젯을 바탕으로

php8 이상에서 작동하고 목록들이 slick.js 이용하여 좌우로 슬라이드 되게 만들었습니다.

이전에 저 혼자 끙끙되며 구현해 볼려고 하다가 어려워 미완성 상태로 있는 것을 발견하고

A.I 들에게 물러보면 되겠다 싶어서 질문을 시작했습니다.

1. 제가 어려웠던 기능이 첫 Tab의 목록들은 좌우로 슬라이딩이 작동되는데 다른 Tab에서는 작동이 안되는 문제 였습니다.

이 부분은 ChatGPT 가 별로 시간들이지 않고 php8 이상에서의 호환성과 코드를 간결하게 해 주었습니다.

2. 근데 다음으로 질문한 "첫 Tab의 마지막까지 가면 다음 tab으로 가게 할 수 있나요?" 라는 질문에 답을 주지를 못하더라구요

계속 안되는 코드만 나열하고 크롬의 console.log()를 요구하면서 답을 주지를 못합니다. 그렇게 무료 이용 시간이 흘러 중단

3. DeepSeek 에게 물어니 몇번 답하다 안되다고 하니 바쁘다고 종료!!

4. Claude 에게 물어보니 답을 주는데 약간씩 문제를 일으키지만 답을 주는 느낌이 들었지만 무료 시간이 지나 종료

그렇게 한 3번의 무료 시간이 지날 동안 정답을 주지는 못하더라구요.

그래서 이놈 저놈에게 물어봐도 Claude 가 마지막에 준 답 보다도 못하더군요.

5. 마지막날 작동 안되는 기능과 console.log()를 주니 드디어 정답을 주네요. 으하하~~

정답 답변과 잔잔한 질문들

이상과 같이 Claude A.I 가 정답을 주어서 잘 작동하는 위젯을 하나 탄생 시켰네요.

참고로 처음 질문에 "한글로 답변줘" 안 붙이면 A.I 모두 영어로 답변 합니다.

그리고 질문시 좀더 정확하고 명확한 질문을 하지 않으면 잘못된 답변을 줍니다.

이런 경우 뻘짓하다가 무료 시간 다 갑니다.

질문을 잘하는 법을 배워야 겠습니다.

이제 어떤 분야이던 질문을 잘하는 학원이 생기지 않을까 예측해 봅니다.

다음에 새로운 A.l 기능들을 알아가면 다시 글 남기겠습니다.

Github에 새 보관소 만들기, 파일 올리기, Tag, Release 생성 방법

2025-01-25T19:03:58+09:00

홈페이지 작업이나 기타 작업시 요즘은 Github를 많이 사용합니다.

저 같은 경우는 라이믹스의 프로그램이나 용량이 좀 되는 프로그램의 다운 링크 로 이용중입니다.

Github 에 새 보관소 만들고 파일들 올리고 PC에 저장하고 Tag를 달고 Release생성등 관리하는 방법을 간략히 올리겠습니다.

Github에 접속하고 프로그램을 설치하는 방법은 인터넷에 널려 있는 관계로 생략합니다.

저는 Git Bash 사용(Dos 느낌)을 배제하고 Github 홈피와 GitHub Desktop만 이용하여 작업을 하겠습니다.

1. 깃허브 홈피에 접속해서 로그인을 합니다.

GitHub · Build and ship software on a single, collaborative platform Join the world's most widely adopted, AI-powered developer platform where millions of developers, businesses, and the largest open source community build software that advances humanity. from GITHUB.COM

바탕화면에 GitHub Desktop이 설치된 상태이고 홈피에 접속한 상태에서 + 를 누르고 "New repository"를 클릭합니다.

2. 보관소 제목과 설명, 개인(Private) or 공용(Public)을 선택

3. 보관소가 생성되었습니다.

"uploading an existing file" 클릭해서 프로그램이나 파일들을 올립니다.

4. 드래그 앤 드래그나 파일을 선택해서 올리면 됩니다.

5. 정상적으로 올라간 저장소 모습

6. GitHub Desktop을 사용해서 저장소를 PC로 가져오기

"Add > Clone repo..." 를 클릭해서 홈피의 내용과 동일한 내용을 PC로 가져옵니다.

7. Clone 생성

홈피에서 만든 보관소 이름으로 검색해서 찾고 "Local path"를 선택하는데

보관소 이름의 상위 폴더를 선택하면 자동으로 보관소 이름 폴더가 만들어 집니다.

8. Tag생성

Release를 생성할려면 Tag가 있어야 하는데

Tag 생성은 제가 아무리 이리 저리 알아봐도 홈피에서는 만드는 방법을 찾지를 못했습니다.

그래서 GitHub Desktop을 사용해서 Tag를 만듭니다.

"History" > "Create Tag..." 클릭

Tag를 만들고 나면 깃허브에 올리는 "remote"화면이 니옵니다.

"Push origin"을 눌러 동기화 시킵니다.

9. Release를 생성 하는 방법

Tag를 생성했으니 release를 만들 수 있습니다.

5번 이미지의 우측에 있는 "Create a new release"를 클릭

"Chose a tag" 눌러 GitHub Desktop 에서 만든 Tag를 클릭하고 내용을 작성하고 "Publish release" 합니다.

10. 릴리즈가 완성된 모습

* repository(보관소) 삭제하는 방법

보관소 우측에 "Settings"를 클릭 해서 가장 하단으로 가서 "Delete this repository" 클릭해서

마지막 화면에서 보관소 주소 이름을 입력후 삭제를 눌러주면

위와 같이 인증화면이 나옵니다.

자신에게 맞는 방법을 선택해주면 보관소가 삭제됩니다.

* 용량 큰 파일 올리는 방법

깃허브 홈피에서는 25M 이상의 파일은 올라가질 않습니다.

Yowza, that’s a big file. Try again with a file smaller than 25MB.

그리고 파일의 갯수도 한도가 있습니다.

GitHub Desktop을 이용하면 제가 알기로는 100M 까지는 올라가는 것으로 압니다.

저는 96.9MB자리 동영상까지 올렸습니다.

파일의 갯수도 별 문제가 되질 않네요

구글 에드센스 광고가 출력되지 않을때 리스트 항목에서 숨기기

2025-01-16T20:35:04+09:00

구글 애드센스 광고가 없을때 해당 영역 숨기게 하려면 보통 아래와 같이 숨깁니다.

<style>

ins.adsbygoogle[data-ad-status="unfilled"] {

display: none !important;

}

</style>

근데 구글 에드센스를 게시판 중간에 넣을려면 아무래도 테이블 태그가 들어갑니다.

https://moonhouse.co.kr/xetip/592403

그러면 에드센스는 사리지는데 태그가 사리지질 않습니다.

이런 경우에 태그 까지 사리지게 하는 방법입니다.

<tr class="w100">
<td colspan="10">{$mi->ads_code}</td>
</tr>

<style>
ins.adsbygoogle[data-ad-status="unfilled"] {
display: none !important;
}
</style>
{@$i++}
</tr>

위와 같이 게시판 목록 사이에 에드센스를 삽입한다고 치면 tr 칸이 보입니다.

<tr class="w100 adsense-container">
<td colspan="10">{$mi->ads_code}</td>
</tr>


<style>
ins.adsbygoogle[data-ad-status="unfilled"] {
display: none !important;
}
tr.adsense-container:has(ins.adsbygoogle[data-ad-status="unfilled"]) {
display: none !important;
}
</style>
{@$i++}
</tr>

빨간색 코드 넣어주면 tr 칸도 같이 사라집니다.

tr은 상황에 맞게 div도 되고 li등도 됩니다.

2,3,4줄에 에드센스 출력

3,4칸은 사라진 모습

위젯에 확장변수에서 체크된 해당 글 리스트 불러오기 1탄

2024-12-29T12:30:33+09:00

XeTown에 아래와 같은 질문이 올라와서 팁으로 남깁니다.

확장변수 슬픔 ,기쁨, 노여움 있다고 가정 할 때

슬픔을 선택한 글만 위젯으로 불러 올수 있는지요?

이미 구현되어 있는 위젯이 있다면 좀 알려주시고

어떦게 구현 해야 하는지 설명 주시면 감사하겠습니다

먼저 사용할 위젯을 선택합니다. 어떤 위젯이던 별 상관 없습니다.

지금 홈피에 사용중인 위젯 이라면 스킨을 따로 하나 만들어 적용하면 좋습니다.

보통 위젯의 skins 폴더에서 해당 스킨을 선택해 들어가면 외형틀.html 파일이 있습니다.

해당 파일이 list.html 이라고 가정하고 편집기로 열어보면 아래와 같은 foreach 문이 보입니다.(위젯별로 약간은 다를 수 있음)

이 부분 아래를 확장변수 ID 별로 선택 값 따라 출력되게 하는 방법입니다.

(확장변수 ID 가 select / 선택지가 슬픔, 기쁨, 노여움 3개)

{@
       $eid = $oDocument->getExtraEidValueHTML('select');
       $eid_a = $oDocument->getExtraEidValueHTML('select')=='슬픔';
       $eid_b = $oDocument->getExtraEidValueHTML('select')=='기쁨';
       $eid_c = $oDocument->getExtraEidValueHTML('select')=='노여움';
   }
   <div cond="$eid">
<div cond="$eid_a">
<span>내용 영역(해당 위젯에 따라 다르겠죠)</span>
</div>
</div>

위와 같이 편집후 위젯 설정에서 대상모듈을 해당 게시판으로 지정하면

확장변수 ID 가 "select" 이고 값이 "슬픔"인 내용글만 출력됩니다.

cond="$eid_a" 이 부분만 $eid_b, $eid_c 로 바꾸어 주면 해당 값의 내용이 출력됩니다.

Mh Multi Widget 에서 List형식으로 일반적인 출력 입니다.

적용부분이 확장변수 ID 이고 값으로 적용,변형, NO 중 "변형"값만 출력해 보면 아래와 같이 출력됩니다.

한가지 문제점이 리스트 목록수가 전체 목록수를 따라 갑니다.

더 나아가...

<div class="content-area">
   
       
           {@$document_count[$oDocument->getExtraEidValueHTML('select')]++}
               <div class="content-item" data-emotion="{$oDocument->getExtraEidValueHTML('select')}">
                   <span>내용 영역(해당 위젯에 따라 다르겠죠)</span>
               </div>
       
   
</div>

위와 같이 코드를 짜면 해당 버턴 클릭시 각각의 내용물이 5개씩 출력됩니다.
https://moonhouse.co.kr/wtest

[ 위젯으로 만듬 ]

https://moonhouse.co.kr/xemy/595959

확장변수 부분을 특정 폼형태(Table)로 구성하는 방법

2024-12-07T18:26:02+09:00

Xetown에서 아래 내용이 있어서 팁으로 남겨 봅니다.

왕초보입니다..홈페이지 게시판 검색창 키워드 변경 문의 홈페이지의 한 게시판입니다 여기 제목+내용 되어있는 곳 제가 원하는 검색 키워드로 바꾸고 싶은데 어디서 변경가능한가요..? by 박마리 from XETOWN

먼저 테이블을 만들어야 합니다. 아래 사이트를 활용하면 유용합니다.

HTML Tables generator – TablesGenerator.com Free and easy to use online HTML Tables generator -- enter table data and paste the generated code into your website from TABLESGENERATOR.COM

일단 사용하는 게시판 스킨에서 본문에서 확장변수가 출력되는 부분을 찾습니다.

xedition 스킨을 예로 들면 _read.html 파일의 아래 부분입니다.

<div class="exOut" cond="$oDocument->isExtraVarsExists() && $oDocument->isAccessible() && $module_info->data_form==''">
   <table border="1" cellspacing="0" summary="Extra Form Output">
       <tr loop="$oDocument->getExtraVars() => $key,$val">
           <th scope="row">{$val->name}</th>
           <td>{$val->getValueHTML()} </td>
       </tr>
   </table>
</div>



<include cond="$module_info->data_form=='Y' && $oDocument->isExtraVarsExists() && $oDocument->isAccessible()" target="_read_form.html" />

먼저 skin.xml를 열어서 설정을 추가합니다.

<var name="data_form" type="radio">
   <title>폼 형태</title>
   <description>확장변수를 폼형태로 출력합니다.</description>
   <options value="">
       <title>출력 안함(기본)</title>
   </options>
   <options value="Y">
       <title>출력</title>
   </options>
</var>

_read.html 파일에 빨간색 코드를 추가합니다.

그리고 아래의 내용으로 _read_form.html 새 파일을 만듭니다.

<div class="form_box">
   <table class="tg" loop="$oDocument->getExtraVars() => $key,$val">
       <thead cond="$val->getValueHTML()">
           <tr cond="$val->eid=='f0'">
               <td class="tg-21kx">
                   {$val->getValueHTML()}
               </td>
           </tr>
       </thead>
   </table>

   <div style="overflow-x: auto;">
       <table class="tg">
           <thead loop="$oDocument->getExtraVars() => $key,$val" cond="$val->getValueHTML()">
               {@
                   $bg1=$val->eid=='f1' || $val->eid=='f3' || $val->eid=='f5';
                   $bg2=$val->eid=='f2' || $val->eid=='f4' || $val->eid=='f6';
               }
               <tr cond="$bg1">
                   <td class="tg-yfhh form_n">{$val->name}</td>
                   <td class="tg-yfhh form_v">{$val->getValueHTML()}</td>
               </tr>
               <tr cond="$bg2">
                   <td class="tg-yfhh form_n bg">{$val->name}</td>
                   <td class="tg-yfhh form_v bg">{$val->getValueHTML()}</td>
               </tr>
           </thead>
       </table>
   </div>
</div>

확장변수 ID를 f0, f1, f2, f3... 으로 지정한 경우입니다. read_form.zip

작성자의 입맛에 맞게끔 수정하면 됩니다.

확장변수 검색을 Y로 선택하면 검색에서 해당 입력항목 이름으로 검색이 가능합니다.

f0의 경우는 "확장변수 업로드 모듈"을 사용하며 확장변수에 이미지를 출력하게 만들어줍니다.

출력화면 입니다.

Table의 폭이 디바이스 및 본문 가로 사이즈보다 더 넓을 때 마우스 휠 좌우 스코롤

2024-11-19T12:30:43+09:00

HTML Table이 디바이스 및 화면 가로사이즈보다 더 넓을 때

위의 팁을 적용한 후 테이블 위에 마우스 휠 위치시 스코롤이 좌우로 이동되게 하는 스크립트

참고로 마우스의 위치가 테이블 밖이면 상하 스코롤 적용되며 모바일에서 좌우 스와이프 지원합니다.

....

</table>

   // PC 마우스 이벤트 핸들러
   $('.bd_lst').on('mouseenter', function() {
       isOverTable = true;
   }).on('mouseleave', function() {
       isOverTable = false;
   });

   tableWrapper.on('wheel', function(event) {
       if (isOverTable) {
       event.preventDefault();
       const delta = event.originalEvent.deltaY;
       $(this).scrollLeft($(this).scrollLeft() + delta);
       }
   });

   // 터치 이벤트 핸들러
   tableWrapper.on('touchstart', function(event) {
       touchStartX = event.originalEvent.touches[0].clientX;
       scrollStartX = $(this).scrollLeft();

       // 세로 스크롤은 기본 동작 허용
       if ($(this)[0].scrollWidth <= $(this).width()) {
       return;
       }
   });

   tableWrapper.on('touchmove', function(event) {
       // 가로 스크롤이 가능한 상태에서만 기본 동작 방지
       if ($(this)[0].scrollWidth > $(this).width()) {
       event.preventDefault();

       const touchCurrentX = event.originalEvent.touches[0].clientX;
       const touchDeltaX = touchStartX - touchCurrentX;

       $(this).scrollLeft(scrollStartX + touchDeltaX);
       }
   });

   // 스타일 적용
   tableWrapper.css({
       'overflow-x': 'auto',
       '-webkit-overflow-scrolling': 'touch', // iOS 부드러운 스크롤
       'overflow-y': 'hidden' // 세로 스크롤 방지
   });

   // PC에서 커서 스타일
   $('.bd_lst').hover(
       function() {
       $(this).parent().css('cursor', 'grab');
       },
       function() {
       $(this).parent().css('cursor', 'default');
       }
   );

   // 모바일 터치 사용성 향상을 위한 부가 기능
   let scrollIndicator = $('<div class="scroll-indicator">').css({
       'position': 'absolute',
       'bottom': '0',
       'left': '0',
       'width': '0',
       'height': '3px',
       'background': 'rgba(0,0,0,0.3)',
       'transition': 'width 0.2s',
       'pointer-events': 'none'
   });

tableWrapper.css('position', 'relative').append(scrollIndicator);

   // 스크롤 인디케이터 업데이트
   function updateScrollIndicator() {
       const scrollPercentage = (tableWrapper.scrollLeft() /
       (tableWrapper[0].scrollWidth - tableWrapper.width())) * 100;
       scrollIndicator.css('width', scrollPercentage + '%');
   }

tableWrapper.on('scroll', updateScrollIndicator);

   // 반응형 대응
   $(window).on('resize', function() {
       updateScrollIndicator();
   });

   // 초기 인디케이터 설정
   updateScrollIndicator();
   });
</script>

NO	내 용
1	도메인 정보	도메인명
		등록업체
		아이디
		비번
		신청일

2	호스팅 정보	업체명
		아이디
		비번
		신청일

3	홈관리자	아이디
3	홈관리자	비번

4	Ftp 정보	주소
		아이디
		비번

5	DB 정보	Host명
		DB명
		아이디
		비번

6	금액



7	기타

게시판에서 글 작성시 확장변수에 Hidden 적용시 기본값이 적용되게 하는 법

2024-10-17T00:03:40+09:00

게시판 글 작성시 확장변수를 임의로 수정하여 글 작성시 관리자만 보이게 하고 일반 작성자는 볼수 없게 했었는데요.

https://moonhouse.co.kr/xetip/582252

이번에 2.1.18로 라이믹스가 업데이트 되면서 확장변수에 기본값을 줄 수가 있어서 더 유용해 져서 단일선택에 적용해 보니

일반 작성자가 글 작성후 본문글에는 Hidden된 확장변수 자체가 출력이 되지를 않네요(당연한 이야기 일 것 같네요)

그럼 Hidden도 적용하면서 일반 작성자가 글 작성시 본문글에도 출력되게 할려면 아래 코드중 빨간색 부분을 추가해 주면 됩니다.

그냥 단순하게 표 출력부분을 style="display:none" 으로 숨겨 주는거죠

스케치북 기준 write_form.html 파일에서 _admin으로 끝나는 확장변수 ID는 글 작성시 숨겨지는 기능입니다.

{@$match = preg_match('/_admin$/is', $val->eid)}

<th scope="row"><em cond="$val->is_required=='Y'">*</em> {$val->name}</th>
<td>{$val->getFormHTML()}</td>

<th scope="row" style="display:none"><em cond="$val->is_required=='Y'">*</em> {$val->name}</th>
<td style="display:none">{$val->getFormHTML()}</td>

게시판 목록의 원하는 칸에 에드센스들 삽입하는 방법

2024-07-13T11:35:44+09:00

sketchbook5 스킨의 _list_webzine.html (웹진형)에 목록의 원하는 칸에 에드센스를 삽입하는 방법

skin.xml 에 주가

<var name="list_ads" type="radio">
   <title>★웹진형 리스트에 광고 삽입</title>
   <description>웹진형 리스트에 광고 기능 사용하기</description>
   <options value="">
       <title>사용 안함(기본)</title>
   </options>
   <options value="Y">
       <title>사용</title>
   </options>
</var>
<var name="ad1" type="text">
   <title> ┖ 목록 순번1</title>
   <description>광고글이 순번1칸 다음 리스트줄에 출력</description>
</var>
<var name="ad2" type="text">
   <title> ┖ 목록 순번2</title>
   <description>광고글이 순번2칸 다음 리스트줄에 출력</description>
</var>
<var name="ad3" type="text">
   <title> ┖ 목록 순번3</title>
   <description>광고글이 순번3칸 다음 리스트줄에 출력</description>
</var>
<var name="ads_code" type="textarea">
   <title> ┖ 광고 코드</title>
   <description>광고(에드센스) 코드를 입력</description>
</var>

_list_webzine.html 수정

{@$i=0}
<li loop="$document_list=>$no,$document" class="bf-item select clear">

~ 생략 ~

<a class="hx" href="{getUrl('document_srl',$document->document_srl,'listStyle',$listStyle,'cpage','')}"href="{$document->getExtraEidValue('link_url')}" target="_blank" data-viewer="{getUrl('document_srl',$document->document_srl,'listStyle','viewer','page','')}"><span class="blind">Read More</span></a>

<li class="ads">
           {$mi->ads_code}
       </li>
   
<style>
           .bd_zine .ads { margin:0 !important; padding:0; }

           @media all and (max-width:480px) {
               .bd_zine .ads { margin:25px 0 0 0 !important; border-top:1px solid #f1f1f1; }
           }
       </style>
{@$i++}
</li>

빨간색 코드 추가 하고 게시판 설정에서 에드센스 항목들 선택하고 에드센스 코드 넣어주면 됩니다.
참고로 처음 설정하면 해당칸에 빈 칸만 출력됩니다. 넉넉하게 하루정도 지나면 광고가 출력됩니다.

게시판에 모듈번호를 출력하는 방법

2024-07-06T11:35:31+09:00

위젯을 코드생성으로 만들시 해당모듈의 번호로 생성되어집니다.

근데 모듈을 추가할때 마다 번거롭게도 모듈번호를 찾기 위해서 다시 코드생성 으로 가거나 다른 방법으로 찾아야 합니다.

그런데 야비어저씨의 OrangeDay_blog_layout 에 각 게시판 마다 모듈번호를 상단에 출력해 주는 코드가 있어서

그 부분만 뽑아서 팁으로 남깁니다.

해당 게시판의 list.html 파일을 편집기로 열어 적당한 위치에 아래 코드를 삽입합니다.

<div cond="$grant->manager" class="m_num" onclick="copyToClipboard('{$mi->module_srl}')">{$mi->module_srl}</div>
<script>
   function copyToClipboard(text) {
       navigator.clipboard.writeText(text).then(function() {
           alert('모듈 번호가 클립보드에 복사되었습니다: ' + text);
       }, function(err) {
           console.error('클립보드 복사 실패:', err);
       });
   }
</script>

// css
.m_num { z-index:99; position:absolute; top:0px; right:0px; font-weight:700; font-size:1em; clip-path:polygon(50% 0, 100% 0, 100% 80%, 50% 100%, 0 80%, 0 0); background-color:red; padding:5px 10px 10px 10px; color:white; cursor:pointer; }

화면에 보이는 모습 - 클릭시 클립보드에 자동 복사됩니다.

SketchBook5 게시판스킨에 특정 확장변수(price)에 천 단위 쉼표(number_format) 적용하기

2024-06-24T14:21:36+09:00

SketchBook5 게시판스킨에서 확장변수 ID가 price일때 천 단위 쉼표 적용(number_format)하는 방법

먼저 _list_webzine.html 파일에서 작업합니다. 오리지날 버전 기준 99줄 ~ 105줄

<block cond="$mi->zine_extra || $mi->link_board">
<block loop="$list_config=>$key,$val" cond="$val->idx!=-1">
<span cond="$val->eid!='rating' && $val->eid!='price' && $document->getExtraValueHTML($val->idx)" class="itm br link_url">{$val->name}<b>{$document->getExtraValueHTML($val->idx)}</b></span>
<span cond="$val->eid=='price' && $document->getExtraValueHTML($val->idx)">{$val->name} : ₩ {number_format($document->getExtraValueHTML($val->idx))}원</span>
<span cond="$val->eid=='rating'"><strong class="starRating"><span style="width:{$document->getExtraValueHTML($val->idx)*10}%">{$document->getExtraValueHTML($val->idx)}</span></strong></span>
</block>
</block>

빨간색 코드 추가하면 됩니다.

라이믹스 2.1.15 버전에서 "메뉴 아이콘" 사용방법

2024-05-23T22:13:54+09:00

https://moonhouse.co.kr/xetip/529895

위의 글에서 "메뉴 아이콘" 사용 방법을 설명 했었는데 라이믹스가 버전업 되면서 사용 방법이 변형되었습니다.

변형된 방법이 일반적으로 폰트 어썸을 아이콘으로 사용할려면 <i class="{$val1['icon']}"></i> {$val1['link']} 이런식으로 메뉴 작업을 해 주고 "메뉴 수정"에서 아래와 같이 작성하면 올바르게 출력됩니다.

그런데 이렇게 지정해 버리면 <img>와 폰트 어썸 두가지를 함께 사용할 수가 없어집니다.

그래서 함께 사용하는 방법입니다.

<i class="{$val1['icon']}"></i>

<img src="{$val1['icon']}" width="15" />

$val1['link']}

위에서 메뉴 아이콘이 폰트 어썸이 아니면 "fa"를 수정해 주면 됩니다.

그리고 이미지의 파일명과 확장자를 이미지 경로와 함께 작성합니다.

style 까지 적용한 main 페이지 메뉴 코드입니다.

<span cond="$val1['icon']" style="display:block; text-align:center; line-height:15px">
  {@$val_icon1 = strpos($val1['icon'], 'fa')}
{@$val_icon2 = strpos($val1['icon'], 'xi')}
   
       <i class="{$val1['icon']}"></i>
   
       <img src="{$val1['icon']}" width="15" align="absmiddle" />
   
</span>
{$val1['link']}

display:block은 줄바꿈 코드이며, 폰트 어썸 'fa' or Xeicon 'xi' 를 같이 사용도 가능합니다.

* 참고로 이미지 파일명에 fa 나 xi 가 들어간 경우 아이콘으로 인식해서 출력이 되지 않으므로 주의 바랍니다.

p.s 위의 코드와 비숫하게 작동되는 다른 코드 - 더 광범위함

preg_match 함수사용

웹폰트들이 거의 "-"를 사용한다는 전제 - <i class="fas fa-lightbulb"></i>

이미지파일들은 "."이 사용됨 - picture.svg

네이버 나눔스퀘어 네오 NanumSquareNeo 웹 폰트 적용하기

2024-05-02T19:35:14+09:00

네이버 나눔스퀘어 네오(NanumSquareNeo) 웹폰트를 적용하는 방법입니다.

네이버 나눔스퀘어 네오 문장을 더 돋보이게, 네이버의 새로운 브랜드 폰트 from CAMPAIGN.NAVER.COM

위의 링크에 접속해 보면 네이버 나눔스퀘어 네오의 특징들을 볼 수 있습니다.

적용하고자하는 레이아웃이나 프로그램의 css파일을 불러와서 상단에 아래의 코드를 적용하시면 됩니다.

@font-face{
   font-display: swap;
   font-family: NanumSquareNeo;
src: url(https://hangeul.pstatic.net/hangeul_static/webfont/NanumSquareNeo/NanumSquareNeoTTF-aLt.eot);
src: url(https://hangeul.pstatic.net/hangeul_static/webfont/NanumSquareNeo/NanumSquareNeoTTF-aLt.eot?#iefix) format("embedded-opentype"), url(https://hangeul.pstatic.net/hangeul_static/webfont/NanumSquareNeo/NanumSquareNeoTTF-aLt.woff) format("woff"), url(https://hangeul.pstatic.net/hangeul_static/webfont/NanumSquareNeo/NanumSquareNeoTTF-aLt.ttf) format("truetype");
   font-weight:100;

}
@font-face{
   font-display: swap;
   font-family: NanumSquareNeo;
src: url(https://hangeul.pstatic.net/hangeul_static/webfont/NanumSquareNeo/NanumSquareNeoTTF-bRg.eot);
src: url(https://hangeul.pstatic.net/hangeul_static/webfont/NanumSquareNeo/NanumSquareNeoTTF-bRg.eot?#iefix) format("embedded-opentype"), url(https://hangeul.pstatic.net/hangeul_static/webfont/NanumSquareNeo/NanumSquareNeoTTF-bRg.woff) format("woff"), url(https://hangeul.pstatic.net/hangeul_static/webfont/NanumSquareNeo/NanumSquareNeoTTF-bRg.ttf) format("truetype");
   font-weight:300;
}
@font-face{
   font-display: swap;
   font-family: NanumSquareNeo;
src: url(https://hangeul.pstatic.net/hangeul_static/webfont/NanumSquareNeo/NanumSquareNeoTTF-cBd.eot);
src: url(https://hangeul.pstatic.net/hangeul_static/webfont/NanumSquareNeo/NanumSquareNeoTTF-cBd.eot?#iefix) format("embedded-opentype"), url(https://hangeul.pstatic.net/hangeul_static/webfont/NanumSquareNeo/NanumSquareNeoTTF-cBd.woff) format("woff"), url(https://hangeul.pstatic.net/hangeul_static/webfont/NanumSquareNeo/NanumSquareNeoTTF-cBd.ttf) format("truetype");
   font-weight:400;
}
@font-face{
   font-display: swap;
   font-family: NanumSquareNeo;
src: url(https://hangeul.pstatic.net/hangeul_static/webfont/NanumSquareNeo/NanumSquareNeoTTF-dEb.eot);
src: url(https://hangeul.pstatic.net/hangeul_static/webfont/NanumSquareNeo/NanumSquareNeoTTF-dEb.eot?#iefix) format("embedded-opentype"), url(https://hangeul.pstatic.net/hangeul_static/webfont/NanumSquareNeo/NanumSquareNeoTTF-dEb.woff) format("woff"), url(https://hangeul.pstatic.net/hangeul_static/webfont/NanumSquareNeo/NanumSquareNeoTTF-dEb.ttf) format("truetype");
   font-weight:500;
}
@font-face{
   font-display: swap;
   font-family: NanumSquareNeo;
src: url(https://hangeul.pstatic.net/hangeul_static/webfont/NanumSquareNeo/NanumSquareNeoTTF-eHv.eot);
src: url(https://hangeul.pstatic.net/hangeul_static/webfont/NanumSquareNeo/NanumSquareNeoTTF-eHv.eot?#iefix) format("embedded-opentype"), url(https://hangeul.pstatic.net/hangeul_static/webfont/NanumSquareNeo/NanumSquareNeoTTF-eHv.woff) format("woff"), url(https://hangeul.pstatic.net/hangeul_static/webfont/NanumSquareNeo/NanumSquareNeoTTF-eHv.ttf) format("truetype");
   font-weight:700;
}

body, a, p, div, span, table, ul, li, img, h1, h2, h3, h4, h5, h6, header, textarea, form, footer, caption, section, button, select, html, i, nav, iframe, ol, strong, tbody, tfoot, thead, th, tr, abbr, object, acronym, address, applet, article, aside, audio, b, blockquote, big, center, canvas, cite, code, command, datalist, dd, del, details, dfn, dl, dt, em, embed, fieldset, figcaption, figure, font, hgroup, ins, kbd, keygen, label, legend, meter, output, pre, progress, q, s, samp, small, source, strike, sub, sup, tdvideo, tt, u, var { font-family: "NanumSquareNeo", sans-serif; font-size:14px; font-weight:400; }

font-size와 font-weight는 자신에세 맞게 조정하시면 됩니다.

OrangeDay 테마중 레이아웃 / 게시판스킨 - 문하우스 수정 V2.0 (25. 01. 11)

2024-04-30T19:54:28+09:00

야비아저씨님께서 공유해 주신 품질 좋은 레이아웃과 게시판스킨에 제가 살짝 숟가락 얹어 봅니다.

GitHub - moonhouse-80san/OrangeDay: MH 수정 MH 수정. Contribute to moonhouse-80san/OrangeDay development by creating an account on GitHub. from GITHUB.COM

야비아저씨님의 버전 2.0.3 (2025-01-10) 에 발 맞추어서 함께 버전업 합니다.

OrangeDay 테마 (레이아웃, 게시판 스킨, 멤버, 마이로그 기타) 블로그형식으로 사용할 수 있는 레이아웃 (게시판, 멤버, 검색 스킨 등 포함) by 야비아저씨 from XETOWN.COM

[ MH V2.0 수정 버전만의 특징 ]

* 게시판 기능

1. 프로필 미등록자도 이미지로 출력

2. 게시판 유형에 "처음만 썸네일형" 추가

2-1. "처음만 썸네일형"에 확장변수 사용하여 날짜시작 기능 추가

2-2. "처음만 썸네일형"에 리스트 내용글 아래에 댓글의 출력유무를 선택

3. 공지사항 폴딩으로 출력 추가

4. 게시판 설정 위저드 사용 추가

5. 첨부파일 확장자 필터기능 사용

6. 댓글 + 추천 버턴 출력

7. 광고 삽입 기능 추가

- https://moonhouse.co.kr/qa

8. 졸졸이스토커의 출력

9. 게시물 주소 복사 버턴 추가

10. 방명록형에 미세한 기능 추가 - 댓글창 폴딩, 좋아요, 스크랩 기능등

- https://moonhouse.co.kr/guest

11. 게시판 상단 카테고리 출력 선택과 출력시 접기기능 가능

- https://moonhouse.co.kr/total1

*레이아웃 기능

1. 폰트 선택 기능 - NanumSquareNeo폰터를 기본

2. 레이아웃 설정 버턴 추가

3. 라이믹스 버전 출력

4. 다른 게시판 스킨 사용시에도 배경색등 다크모드 지원

[ V 1.1.0 버전업에 따른 수정버전 특징 ]

1. 방명록 스킨 오리지널 버전에 준하여 수정

[ 수정버전 특징 ]

1. 레이아웃은 단순하게 "본문 최대 가로폭 추가" 설정만 수정

https://xetown.com/download/1817419#comment_1821256

2. 게시판 스킨

a. 방명록(_list_guest.html)스킨 수정

- 댓글과 대댓글 수정

- NO 프로필을 랜덤 이미지로 출력

b. 첫 게시글만 썸네일{_list_firstthumbs.html}스킨 추가

- 무한스크롤 사용

- D-day 기능 출력

- 평가 기능 출력
- Tag를 리스트에 출력

- 확장변수 출력

- 선택된 확장변수 10가지 색상 버턴으로 출력

위젯에 확장변수 이용하여 시작날짜 ~ 종료날짜 출력하기

2024-04-13T09:13:56+09:00

SketchBook5 게시판스킨 - 문하우스 수정버전 에서

확장변수를 이용해 진행버턴과 D-Day를 출력, 날짜 기간 출력하기등을 적용했었는데

위젯에 날짜 확장변수를 이용하여 시작날짜 ~ 종료날짜를 출력하는 방법입니다.

적용할 위젯의 info.xml에 추가

<var id="sname">
   <name xml:lang="ko">날짜시작 사용자정의 이름</name>
   <type>text</type>
   <description xml:lang="ko">날짜시작 확장변수 사용자정의 이름을 기재하세요</description>
</var>
<var id="ename">
   <name xml:lang="ko">날짜종료 사용자정의 이름</name>
   <type>text</type>
   <description xml:lang="ko">날짜종료 확장변수 사용자정의 이름을 기재하세요</description>
</var>
<var id="period_title">
   <name xml:lang="ko">기간</name>
   <type>text</type>
   <description xml:lang="ko">시작 날짜 ~ 끝 날짜 제목을 적어주세요</description>
</var>

적용할 스킨의 list.html의 적당한 곳에 추가

{@
   $start_day = date_create($oDocument->getExtraEidValueHTML($wi->sname));
   $start_date = date("Y m d",strtotime($start_day->format("Y-m-d")));
   $end_day = date_create($oDocument->getExtraEidValueHTML($wi->ename));
   $end_date = date("Y m d",strtotime($end_day->format("Y-m-d")));
}

<div cond="$oDocument->getExtraEidValue($wi->sname) || $oDocument->getExtraEidValue($wi->ename)">
   <span>{$wi->period_title} : </span><span cond="$oDocument->getExtraEidValue($wi->sname)">{$start_date} ~ </span>
   <span cond="$oDocument->getExtraEidValue($wi->ename)">{$end_date}</span>
</div>

적용된 위젯 - Mh BigSlider V2.1 위젯

SketchBook5 게시판 스킨 Tag 버그 수정

2024-04-10T21:20:54+09:00

기진곰님의 Tag 버그 수정이 기본 게시판 스킨에 적용 되어져 있습니다.

https://xetown.com/questions/1818810#comment_1818923

스케치북 게시판 스킨에 적용하는 방법입니다.

[SketchBook5 게시판스킨 - 문하우스 수정버전] - V3.0 에는 모두 적용 되어져 있음

• list.html 240줄

<a cond="@in_array('tag',$mi->btm_mn)" class="btn_img m_no" href="{getUrl('act','dispBoardTagList')}"><i class="fa fa-tag"></i> {$lang->tag}</a>

<a cond="@in_array('tag',$mi->btm_mn)" class="btn_img m_no" href="{getUrl('', 'mid', $mid, 'act', 'dispBoardTagList')}"><i class="fa fa-tag"></i> {$lang->tag}</a>

• _list_FirstThumb.html / _list_webzine.html / _list_normal.html - 스케치북5 기본 버전에는 없는 코드

<a href="{getUrl('search_target','tag','search_keyword',$v->tag,'document_srl','')}" rel="tag" class="tag"># {$v->tag}</a>

<a href="{getUrl('', 'mid', $mid, 'search_target','tag','search_keyword',$v->tag,'document_srl')}" rel="tag" class="tag"># {$v->tag}</a>

• _read.html 296줄 부터

{@ $tag=$tag_list[$i]; }
<li><a href="{getUrl('search_target','tag','search_keyword',$tag,'document_srl','')}">{htmlspecialchars($tag)}</a><span class="comma">,</span></li>

<a href="{getUrl('', 'mid', $mid, 'search_target', 'tag', 'search_keyword', $tag)}" class="tag" rel="tag">{escape($tag, false)}</a><span>,</span>

위의 5개 파일을 수정하면 됩니다.

https://moonhouse.co.kr/festival/page/3 페이지에 있는 강원도 Tag 선택해서 출력

SketchBook5 게시판스킨 공지사항을 폴딩 형식으로 출력하기 1탄

2024-03-21T18:01:50+09:00

SketchBook5 게시판스킨에서 공지글을 클릭시 본문으로 이동하지 않고 폴딩형태로 아래로 내용이 나오게 하는 방법입니다.

예전에 문하우스 게시판스킨에서는 js파일로 복잡하게 구현했었는데

이제는 <details> 와 <summary>로 간단하게 구현할 수가 있다.

스케치북에서 공지사항 부분을 담당하는 파일이 _notice.html 이다. - 한 줄 공지 형식으로 선택시

<table class="bd_lst bd_tb_lst bd_tb common_notice">
   <tr loop="$notice_list=>$no,$document" class="notice">
       <td cond="$list_config['no']">{$lang->notice}</td>
       <td class="title"><a href="{getUrl('document_srl',$document->document_srl, 'listStyle', $listStyle, 'cpage','')}"><strong>{$document->getTitle($mi->subject_cut_size)}</strong></a></td>
       <td cond="$list_config['nick_name']"><a href="#popup_menu_area" class="member_{$document->get('member_srl')}" onclick="return false">{$document->getNickName()}</a></td>
       <td cond="$list_config['regdate']">{$document->getRegdate('Y.m.d')}</td>
       <td cond="$list_config['last_update']">{getTimeGap($document->get('last_update'), "y.m.d")}</td>
   </tr>
</table>

getTitle($mi->subject_cut_size)} 이 부분이 공지글 부분이다.

그럼 이 부분을 폴딩 처리하겠습니다.

skin.xml 파일에 선택 추가

<var name="notice_view_slide" 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>

_notice.html 수정

<table class="bd_lst bd_tb_lst bd_tb common_notice">
   <tr loop="$notice_list=>$no,$document" class="notice">
       <td $list_config['no']">{$lang->notice}</td>
       <td class="title">
           
           <a cond="$mi->notice_view_slide ==''" href="{getUrl('document_srl',$document->document_srl, 'listStyle', $listStyle, 'cpage','')}"><strong>{$document->getTitle($mi->subject_cut_size)}</strong></a>

<details cond="!$mi->notice_view_slide ==''" class="accordion">
               <summary class="notice_fold">
                   <strong>{$document->getTitle($mi->subject_cut_size)}</strong>
               </summary>

<p style="margin-top:10px">
<span>{$document->getContent(false)}</span>

<div style="text-align:right; float:left; padding-bottom:5px; width:100%">
<div style="float:right">
<a href="{getUrl('document_srl',$document->document_srl, 'listStyle', $listStyle, 'cpage','')}" class="btn"><span>공지글 보기</span></a>

<a href="{getUrl('act','dispBoardWriteComment','document_srl',$document->document_srl)}" class="btn"><span>{$lang->cmd_comment_registration}</span></a>
                       

                       
                       
                       <a href="{getUrl('act','dispBoardWrite','document_srl',$document->document_srl,'comment_srl','')}" class="btn"><span>{$lang->cmd_modify}</span></a>
                       
                       
                       <a href="{getUrl('act','dispBoardDelete','document_srl',$document->document_srl,'comment_srl','')}" class="btn"><span>{$lang->cmd_delete}</span></a>
                       
                   
                   </div>
                   </div>
                   <style>
                       summary.notice_fold::-webkit-details-marker { display: none; }
                       summary.notice_fold { display: block; }
                       summary.notice_fold { position: relative; padding-left: 1.2em; cursor: pointer; }
                       summary.notice_fold::before { content: ""; position: absolute;   border-top: 0.5em solid transparent; border-bottom: 0.5em solid transparent; border-left: 0.75em solid yellowgreen;   top: 0.2em; left: 0; transition: .25s transform; }
                       details[open] summary:before { transform: rotateZ(90deg); }
                   </style>
           </details>
       </td>
       <td cond="$list_config['nick_name']"><a href="#popup_menu_area" class="member_{$document->get('member_srl')}" onclick="return false">{$document->getNickName()}</a></td>
       <td cond="$list_config['regdate']">{$document->getRegdate('Y.m.d')}</td>
       <td cond="$list_config['last_update']">{getTimeGap($document->get('last_update'), "y.m.d")}</td>
   </tr>
</table>

   for (const details of detailsList) {
   details.addEventListener('click', () => {
       if (details.open) {
           // 현재 열려 있는 details가 아닌 다른 details를 찾아 닫습니다.
           for (const otherDetails of detailsList) {
           if (otherDetails !== details && otherDetails.open) {
               otherDetails.open = false;
           }
       }

// 화면 최상단으로 스크롤
// window.scrollTo({ top: 0, behavior: 'smooth' });

// 현재 열려 있는 details의 상단 위치를 계산합니다.
const detailsTop = details.getBoundingClientRect().top;

       // 스크롤 위치를 details 상단에서 30px 위로 이동합니다.
       window.scrollTo({
           top: detailsTop - 30,
           behavior: 'smooth',
       });
       }
   });
   }

const $_details = $(".accordion");
   const $_summary = $_details.find(".notice_fold");

$_summary.on("click", function(e) {
e.preventDefault();

       const $_this = $(this);
       const $_this_details = $_this.parent("details");
       const $_this_details_p = $_this_details.find("p");
       const $_this_details_open = $_this_details.attr("open");

       if (! $_this_details_open) {
           $_this_details.prop("open", true);
           $_this_details_p.stop().slideDown(1000);
       } else {
           $_this_details_p.stop().slideUp(500, function() {
               $_this_details.prop("open", false);
           });
       }
   });
</script>

css와 script는 예제로 만들어 본 것입니다. 참조하시면 됩니다.

Rhymix(라이믹스) 알림설정에 네이버 이메일로 지정하는 방법

2024-01-15T19:11:24+09:00

Rhymix(라이믹스) 관리자설정 > 시스템설정 > 알림설정 > 이메일 설정에 네이버 아이디로 SMTP 설정하는 방법

1. 네이버에 자신의 ID로 접속해서 메일 > 환경설정 > POP3/IMAP 설정

2. 라이믹스 관리자설정 > 시스템설정 > 알림설정을 엽니다.

네이버 정보에 있는 내용들을 라이믹스 설정에 작성합니다.

3. 라이믹스 관리자설정 > 고급 > 설치된 모듈 > 알림센터 설정을 합니다.

4. 알림 메일을 받을 해당 게시판 > 설정 > 관리자 e-mail에 해당 게시판에 글이 작성될시 알림을 받을 이메일을 작성합니다.

다수의 이메일도 등록이 가능합니다.

구글 번역 기능 추가하는 법

2024-01-09T16:24:52+09:00

구글에서 제공하는 홈페이지 다국어 번역 기능을 추가 하는 방법입니다.

번역 기능을 추가하고자 하는 레이아웃 최상단에 아래의 코드를 추가하면 됩니다.

<div id="google_translate_element"></div>
<script type="text/javascript">
function googleTranslateElementInit() {
new google.translate.TranslateElement({pageLanguage: 'ko', includedLanguages: 'en,ja,ko,vi,zh-CN,zh-TW', layout: google.translate.TranslateElement.InlineLayout.SIMPLE}, 'google_translate_element');
}
</script><script type="text/javascript" src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>

en,ja,ko,vi,zh-CN,zh-TW 이 부분에 추가하고자 하는 언어를 더 적어주면 언어가 추가됩니다.

라이믹스 최신버전에서 "바로 업로드 에드온" 사용시 문제 수정

2023-12-15T13:36:11+09:00

라이믹스 최신버전에서 "바로 업로드 에드온" 사용시

글 작성창에 이미지 업로드시 파일 첨부 안되고 소스보면 <img src="data:image/png;base64, 이런 긴 코드가 작성되는 경우

해결 방법을 윤삼님이 올려 주셨네요.

/addons/baro_upload/js/_ckeditor.js 파일에서 아래 부분을 찾아서

if ( data.getTypes().indexOf('Files') < 0 ) {
return;
}

아래 부분으로 수정하면 됩니다.

if ( data.getTypes().indexOf('Files') < 0 ) {
var img_regex = /^<img[^>]+src=[\"']?([^>\"']+)[\"']?[^>]*>?/;
var img_result = img_regex.exec(event.data.dataValue);
if ( img_result.length ) {
event.stop();
var dropped_file = getFileObjByDataURL(img_result[1]);
var notification = event.editor.showNotification('파일 업로드 중...', 'progress', 0);

form_data.append('Filedata', dropped_file);
procFileUpload(form_data, dropped_file.type, notification, event);
}
return;
}

수정 파일 첨부합니다.

게시판 리스트 목록에 확장변수중 url변수를 버턴형식으로 출력

2023-07-29T08:41:21+09:00

XeTown에 작업의뢰로 올라온 글 중에 어렵지 않게 스케치북에 적용이 가능해서 올립니다.

1. skin.xml 에 아래 설정 추가

<var name="icon_url" type="text">
   <title>★게시판 리스트에 버튼 형식으로 출력할 확장변수 ID</title>
   <description>게시판 리스트 목록에 확장변수중 url변수를 버턴형식으로 출력할 확장변수 ID(웹진형, ft, 갤러리)</description>
</var>
<var name="icon_urlt" type="text">
   <title> ┖ 확장변수 대처할 문구</title>
   <description>확방변수 url을 대처할 문구</description>
</var>

2. 적용할 게시판형식에 아래 빨간색 코드 적용 (스케치북 갤러리형에 적용 _list_gallery.html)

<input cond="$grant->manager" type="checkbox" name="cart" value="{$document->document_srl}" title="Check this" onclick="doAddDocumentCart(this)" checked="checked"|cond="$document->isCarted()" />

<block loop="$list_config=>$key,$val" cond="$val->idx!=-1">
   <span cond="$val->eid==$mi->icon_url && $document->getExtraValueHTML($val->idx)" style="cursor:pointer; margin-left:10px">
       <a href="{$document->getExtraEidValue($mi->icon_url)}" target="_blank">{$mi->icon_urlt}<img src="img/link.png" style="margin-left:5px"></a>
   </span>
</block>

랑크 이미지 부분은 적당한 이미지 적용하면 됩니다.

내 도메인 메일로 라이믹스에서 관리자 이메일 설정 방법

2023-07-21T09:07:41+09:00

호스팅케이알 https://hosting.kr 에서 Daum 스마트워크 설정하기 - 내 도메인으로 메일 계정 생성하기

이 글을 보기전에 위 링크의 글을 먼저 꼭 탐독하고 오세요.

위의 글에서 만들어진 내도메인 이메일을 라이믹스의 시스템설정 > 알림설정에 적용하는 방법입니다.

여기서 비밀번호은 2차 인증이 없는 경우는 Daum 로그인시 비밀번호 이며,

2차 인정이 있는 경우는 위의 링크글에서 임의로 부여 받은 비밀번호를 입력해야 합니다.

레이아웃 배경 이미지 좌로 흐르는 기법 적용

2023-07-18T20:27:33+09:00

레이아웃에 배경이미지를 적용하고 배경 이미지가 좌로 슬라이딩 되면서 흘러가게 적용하는 방법입니다.

먼저 사용하고자 하는 레이아웃의 layout.html 파일을 편집기로 엽니다.

제일 하단에 아래 소스를 추가합니다.

<block cond="$li->back_img">
   <load target="css/back.css" />
   <block cond="!$li->back_col">{@ $li->back_col = 'transparent'}</block>
   <block cond="!$li->back_opacity">{@ $li->back_opacity = '0.2'}</block>

info.xml 파일에 아래 코드 추가

<var name="back_img" type="image">
   <title xml:lang="ko">★배경이미지</title>
   <description xml:lang="ko">배경 이미지 등록(가로 1500px 정도의 크기가 적당)</description>
</var>
<var name="back_col" type="text">
   <title xml:lang="ko"> ┖ 배경 색상</title>
   <description xml:lang="ko">배경 색상을 선택 (기본 투명 transparent) </description>
</var>
<var name="back_opacity" type="text">
   <title xml:lang="ko"> ┖ 배경 투명도</title>
   <description xml:lang="ko">배경 투명도를 선택 (기본 0.2) </description>
</var>

css폴더에 back.css 파일 업로드 합니다.

#bg {
   -moz-animation: bg 60s linear infinite;
   -webkit-animation: bg 60s linear infinite;
   -ms-animation: bg 60s linear infinite;
   animation: bg 60s linear infinite;
   -moz-backface-visibility: hidden;
   -webkit-backface-visibility: hidden;
   -ms-backface-visibility: hidden;
   backface-visibility: hidden;
   -moz-transform: translate3d(0,0,0);
   -webkit-transform: translate3d(0,0,0);
   -ms-transform: translate3d(0,0,0);
   transform: translate3d(0,0,0);
   height: 100%;
   left: 0;
   position: fixed;
   top: 0;
   z-index:-1
}

@-moz-keyframes bg {
   0% {
       -moz-transform: translate3d(0,0,0);
       -webkit-transform: translate3d(0,0,0);
       -ms-transform: translate3d(0,0,0);
       transform: translate3d(0,0,0);
   }

   100% {
       -moz-transform: translate3d(-2250px,0,0);
       -webkit-transform: translate3d(-2250px,0,0);
       -ms-transform: translate3d(-2250px,0,0);
       transform: translate3d(-2250px,0,0);
   }
}

@-webkit-keyframes bg {
   0% {
       -moz-transform: translate3d(0,0,0);
       -webkit-transform: translate3d(0,0,0);
       -ms-transform: translate3d(0,0,0);
       transform: translate3d(0,0,0);
   }

@-ms-keyframes bg {
   0% {
       -moz-transform: translate3d(0,0,0);
       -webkit-transform: translate3d(0,0,0);
       -ms-transform: translate3d(0,0,0);
       transform: translate3d(0,0,0);
   }

@keyframes bg {
   0% {
       -moz-transform: translate3d(0,0,0);
       -webkit-transform: translate3d(0,0,0);
       -ms-transform: translate3d(0,0,0);
       transform: translate3d(0,0,0);
   }

#bg {
background-size: 2250px auto;
width: 6750px;
}

샘플 이미지

배경 색상 #348cb2 적용해 보세요

확장변수(날짜)로 위젯 정렬하기

2023-07-03T13:01:30+09:00

위젯에서 확장변수(날짜)로 정렬하는 방법을 Mh Multi Widget 에 적용해 봅니다.

1. info.xml에 추가

<var id="ext_order_id">
   <name xml:lang="ko">★확장변수로 정렬 ID</name>
   <type>text</type>
   <description xml:lang="ko">게시판 정열을 확장변수 ID기준으로 정렬</description>
</var>
<var id="ext_order_type">
   <name xml:lang="ko">확장변수 정렬 방법</name>
   <type>select</type>
   <description xml:lang="ko">확장변수 정렬대상을 최근 또는 오랜순으로 정렬할 수 있습니다.</description>
   <options>
       <name xml:lang="ko">최근 날짜순</name>
       <value>asc</value>
   </options>
   <options>
       <name xml:lang="ko">오랜 날짜순</name>
       <value>desc</value>
   </options>
</var>

2. /widgets/mh_multi/skins/mh_sketchbook5_list/tables.html 에 추가

{@ $new_sort[$key] = $item->getExtraEidValue($wi->ext_order_id); }


   {@ array_multisort($new_sort,SORT_ASC,$wi->document_list); }

   {@ array_multisort($new_sort,SORT_DESC,$wi->document_list); }

3. 위젯 설정

4. 정렬된 위젯

확장변수 사용하여 날짜 기간 출력하기

2023-06-18T14:03:45+09:00

스케치북 게시판 기준으로 _read.html을 엽니다

[수정전]

<tr loop="$oDocument->getExtraVars() => $key,$val" cond="$val->getValueHTML() && $val->eid!='rd_preview'" class="bg{$etIdx%2}">
~~ 내용 ~~
</tr>

[수정후]

<tr loop="$oDocument->getExtraVars() => $key,$val" cond="$val->getValueHTML() && $val->eid!='rd_preview' && $val->eid!='work_start' && $val->eid!='work_stop'" class="bg{$etIdx%2}">
~~ 내용 ~~
</tr>

<tr loop="$oDocument->getExtraVars() => $key,$val" cond="$val->getValueHTML() && $val->eid=='work_start'">
   <th valign="center">총날짜</th>
       <td valign="center" colspan="3">
           {@$today = date('Y-m-d')}
           <block loop="$oDocument->getExtraVars() => $key,$val" cond="$val->eid=='work_start'">
           {$val->name} : {$val->getValueHTML()}
           {@$startDate = new DateTime($val->getValueHTML())}
           </block>
           <block loop="$oDocument->getExtraVars() => $key,$val" cond="$val->eid=='work_stop'">
           <span style="margin:0 10px; color:#f60; font-weight:bold">|</span>{$val->name} : {$val->getValueHTML()}{$today}
           {@$endDate = new DateTime($val->getValueHTML())}
           </block>
           <span style="margin:0 10px; color:#f60; font-weight:bold">|</span>총일수 :
           {@$interval = $startDate->diff($endDate);}
           {$interval->y}년 {$interval->m}월 {$interval->d}일
       </td>
</tr>

적용할 게사판에 확장변수 ID를 "work_start'" "work_stop" 두개를 만들어주면 됩니다.

work_stop 확장변수 ID에 날짜를 입력하지 않으면 현재일이 기준이 되며 자동으로 하루씩 늘어납니다.

- 확장변수 입력모습

- 확장변수 출력모습

확장변수명이 _hidden으로 끝날때 숨김처리 하기를 응용

2023-06-15T13:50:05+09:00

똑띠님의 홈피에 있는 Tip인데 너무 유용해서 응용해 봅니다.

원본 소스의 핵심입니다. 스케치북 기준 write_form.html 파일에서 _admin으로 끝나는 확장변수 ID는 글 작성시 숨겨지는 기능입니다.

{@$match = preg_match('/_admin$/is', $val->eid)}

<th scope="row"><em cond="$val->is_required=='Y'">*</em> {$val->name}</th>
<td>{$val->getFormHTML()}</td>

근데 이렇게만 하면 글 작성시 누구도 확장변수가 보이질 않아서 확장변수가 있으나마나죠

그래서 관리자는 글작성시 보이게 수정

그리고 본문글에서도 확장변수를 숨깁니다. _read.html 파일에서 _hidden으로 끝나는 확장변수 ID는 본문글 출력시 숨겨지는 기능

{@$match = preg_match('/_hidden$/is', $val->eid)}

<th scope="row">{$val->name}</th>
<td cond="$val->eid!='rating">{$val->getValueHTML()}</td>

여기서 한발 더 나아가서 글작성, 본문출력 둘다 관리자외는 숨겨지는 기능

•write_form.html

{@$match1 = preg_match('/_admin$/is', $val->eid)}
{@$match2 = preg_match('/_both$/is', $val->eid)}

<th cond="" scope="row"><em cond="$val->is_required=='Y'">*</em> {$val->name}</th>
<td cond="$val->eid!==$mi->etc_name">{$val->getFormHTML()}</td>

•_read.html

{@$match1 = preg_match('/_hidden$/is', $val->eid)}
{@$match2 = preg_match('/_both$/is', $val->eid)}

<th scope="row">{$val->name}</th>
<td cond="$val->eid!='rating">{$val->getValueHTML()}</td>

글 작성자에게도 권한을 줄려면 $oDocument->isEditable() 추가

이렇게 적용하면

확장변수 ID가 _admin으로 끝나는 경우는 글작성시 숨겨지고,

확장변수 ID가 _hidden으로 끝나는 경우는 본문출력시 숨겨지고,

확장변수 ID가 _both으로 끝나는 경우는 두 경우 전부 숨겨집니다.

[확장변수 ID 설정]

[글 작성시]

- 관리자 화면

- 일반 화면

[본문글]

- 관리자 화면

- 일반 화면

Tip] 게시판에서 글 작성시 확장변수에 Hidden 적용시 기본값이 적용되게 하는 법

레이아웃 다크모드 설정시 sketchbook5 웹진형 박스 내용물 투명화 수정

2023-06-03T11:06:22+09:00

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 에 추가

.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};}

.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 }

4. _list_webzine.html 파일에서 빨간색 코드로 썸네일, 제목, 본문요약 부분을 감싸줍니다.

<div class="rt_area is_tmb">

<div onclick="location.href='{getUrl('document_srl',$document->document_srl, 'listStyle', $listStyle, 'cpage','')}';" style="cursor: pointer;">
~~ 기존 코드 ~~
</div>


<div class="info">

글 정보 까지 감싸지 않는 이유는 "게시판 목록에서 확장변수 바로 수정 애드온" 이 작동되게 하기 위해서 입니다.

[적용된 모습]

- 다크모드가 적용된 레이아웃에서 다크모드 적용

- 게시판 설정에서 다크모드를 선택

최대한 원본의 모습에 비숫하게 구현했습니다.

확장변수 "URL 형식" 주소란 에 텍스트 Link 출력하는 방법

2023-04-15T12:24:01+09:00

XeTown에 올라온 질문중에 재미있는 것이 있어서 팁으로 남깁니다.

[질문내용]

게시판 사용자정의항목에 text 형식에 html 이 적용되게 하려면 어디를 수정해야 할까요?

이렇게 입력해서 링크를 걸고 싶습니다.

위의 질문을 역으로 해석해서 확장변수 "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 파일 확장변수 부분

빨간색 부분 추가하면 됩니다.

[설정화면)

[출력화면]

확장변수가 자동으로 제목으로 대체되는 진짜 방법

2023-04-11T18:00:35+09:00

이전글 에 "확장변수가 자동으로 제목으로 대체되는 방법"을 제가 팁으로 올렸는데

임시로 제목을 바꿔 주는 방법이라 DB로 치환이랑, 검색엔진 노출등의 문제가 발생합니다.

똑띠님이 댓글로 확실한 방법을 남겨서 정리해 봅니다.

1. skin.xml 파일에 아래 코드 추가

2. write_form.html 파일을 불러옵니다. 최하단에 아래 코드를 작성합니다.

위의 코드는 확장변수를 한개로 지정 할때이고, 팁 처럼 두개를 원할시는 위의 방법대로 하나 더 적용하면 됩니다.

이 팁으로 적용하면 위젯 수정도 필요 없고 정말 간단하게 됩니다.

팁을 적용후 글 작성시 해당 확장변수 번호란에 글을 작성하면 제목이 자동으로 작성 되어지는 것이 보입니다.

참고로 확장변수 형식을 일자, 전화번호, 주소, 단일 선택등을 선택하면 적용이 안됩니다.

한줄 입력칸, URL 형식, 이메일 형식은 적용됩니다.

확장변수가 자동으로 제목으로 대체되는 방법

2023-03-29T00:43:52+09:00

아래글 작성후에 올라온 좋은 방법입니다.

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 수정 - 빨간색 부분 추가

<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>

   <input type="hidden" name="content" value=" " />

3. _read.html 수정 - 빨간색 부분 추가

<h1 class="np_18px">
   <a href="{$oDocument->getPermanentUrl()}">
       
           {$oDocument->getTitle()}
       
           {$oDocument->getExtraEidValueHTML($mi->title_name)}
       
   </a>
</h1>

4. 게시판형식(_list_normal.html) 수정 - 빨간색 부분 추가

{$document->getTitle($mi->subject_cut_size)}

{$document->getExtraEidValueHTML($mi->title_name)}

위와 같이 수정하고 "게시판 설정 > 확장변수 > 확장변수 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 수정 - 빨간색 부분 추가

{$oDocument->getTitle($mi->subject_cut_size)}

{$oDocument->getExtraEidValueHTML($wi->title_name); }

https://moonhouse.co.kr/multi

Slide Pro 슬라이드 레이아웃에 추가

2023-03-26T09:21:40+09:00

이 프로그램은 개별적으로는 작동을 하지 않습니다.

자기가 원하는 레이아웃에 수정을 통하여 적용하는 방식입니다.

[ Slide pro(SP)를 본인이 원하는 레이아웃(LY)에 적용하는 방법 ]

1. SlidePro.zip 압축파일을 풀면 아래와 같은 구성으로 이루어져 있습니다.

2. 파일들을 해당 레이아웃에 올려주세요.

3. 레이아웃의 "layout.html "파일을 편집기로 불러옵니다.

- 본문 상단에 SP를 위치시키고 싶다면 {$content} 부분을 찾아서 바로 위에 아래의 코드를 추가합니다.(위치시키는 곳은 본인의 의지입니다.)

<div style="margin:0 auto">
<include cond="!$layout_info->sliderpro_use == ''" target="sliderpro.html" />
</div>

{$content}

4. conf폴더에 들어가면 "info_sp.xml" 파일이 있습니다.

편집기로 열어서 전체 복사를 합니다.

해당 레이아웃의 "info.xml" 파일을 편집기로 열어서 붙여 넣기 하시면 됩니다.

5. 레이아웃설정에 가서 하단에 "케시파일 재생성" 하시고 "F5"하시면 메뉴 상단에 "Slide pro"라는 메뉴가 생성된 것을 확인하실 수 있을 것 입니다.

6. "★Slider Pro 슬라이드 출력"을 출력으로 설정하고 아래의 여러 옵션들을 지정하시면 됩니다.

참고로

- "이미지 기울기" "이미지 원근"은 기본설정이 "0"으로 되어 있습니다. 기본 설정대로 하면 이미지가 반듯하게 보입니다. 이것을 상단 이미지에서와 같이 약간 기울이는 것이 보기에 좋으신 분들은 적정값으로 해 보시길 권합니다.

- 배경이미지나 썸네일 이미지들을 만들때 슬라이드와 동일한 가로/세로 크기로 만드는 것이 보기에 좋습니다.

파일목록을 자료실 목록 형태로 꾸미기 - 스케치북 게시판스킨

2023-03-24T15:44:44+09:00

Sketchbook5 게시판스킨에서 업로드 파일 목록을 XETown 자료실과 비슷한 형태로 꾸며보는 방법입니다.

1. skin.xml 파일에 추가 - 첨부파일 그룹밑에 두면 좋겠죠

<var name="data_files" type="radio">
   <title xml:lang="ko">★자료실 형태</title>
   <description xml:lang="ko">자료실 형태의 파일의 출력 여부를 선택합니다.</description>
   <options value="">
       <title xml:lang="ko">출력 안함(기본)</title>
   </options>
   <options value="Y">
       <title xml:lang="ko">출력</title>
   </options>
</var>

2. _read_data.html 파일을 하나 만들어 아래와 같이 코드를 적용합니다 - 다운 받으셔도 됩니다

다운받은 read_data.zip 파일 압축을 풀어서 _read_data.html 사용해도 됩니다.

<div id="files_{$oDocument->document_srl}" class="rd_fnt rd_file">
   <table class="et_vars bd_tb cont">
       <thead>
           <tr cond="$oDocument->hasUploadedFiles()" class="tb">
               <th>파일명</th>
               <th cond="!Mobile::isMobileCheckByAgent()" class="tc"> 업로드 일자 </th>
               <th cond="!Mobile::isMobileCheckByAgent()" class="tc"> 파일 크기 </th>
               <th class="tc"> 다운 수 </th>
           </tr>
       </thead>

       <tbody>
           {@ $re_files = array_reverse($oDocument->getUploadedFiles())}
           <tr loop="$re_files=>$key,$file">
               {@
                   $ext = substr($file->source_filename, -4);
                   $ext = strtolower($ext);
                   $ext_img = in_array($ext,array('.jpg','jpeg','.gif','.png'));
                   $ext_video = in_array($ext,array('.mpg','mpeg','.avi','.wmv','.mp4','.mov','.mkv','.swf','.flv','.ogv','webm'));
                   $ext_audio = in_array($ext,array('.mp3','.ogg','.wma','.wav','.ape','flac','.mid'));
               }
               <block cond="!$ext_img && !$ext_video && !$ext_audio">
                   <td><a href="{getUrl('')}{$file->download_url}">{$file->source_filename}</a></td>
                   <td cond="!Mobile::isMobileCheckByAgent()" class="tc">{zdate($file->regdate, 'Y.m.d')}</td>
                   <td cond="!Mobile::isMobileCheckByAgent()" class="tc">{FileHandler::filesize($file->file_size)}</td>
                   <td class="tc">{number_format($file->download_count)}</td>
               </block>
           </tr>
       </tbody>
   </table>
</div>

•업로드 파일 역순으로 정렬은 기진곰님의 팁으로 완성했습니다 - 빨간색 https://xetown.com/questions/1753244

•이미지, 오디오, 동영상 파일을 제외한 파일만 출력됩니다 - 파란색

3. _read.html 파일안에 적당한 위치에 빨간색 코드를 삽입 - 저는 확장변수 출력칸 바로 위에 위치했습니다.

<div class="rd_body clear">

<include cond="$oDocument->hasUploadedFiles() && $mi->data_files=='Y'" target="_read_data.html" />

4. "첨부파일 표시 방법"

"숨기고 버턴 표시(기본)" 선택하면 자료실 형태만 출력되고(버턴 클릭시 하단에 파일목록 출력되지 않음)

"표시 안함" 이외에 선택하면 해당 방법대로 출력됩니다.(확장자 필터 기능도 적용됨)

완성된 모습 https://moonhouse.co.kr/xemy/539975

확장변수 이용해 진행버턴과 D-day를 함께 출력

2023-03-22T19:46:50+09:00

마감일자가 있는 성격의 게시물 제목에 자동으로 상태(종료, 오늘종료, 진행중 등등 ) 반영하기 팁

D-day 계산

위의 두 팁을 합쳐서 확장변수를 이용해 진행버턴과 D-Day를 함께 출력하는 팁입니다.

게시판 스킨은 sketchbook5 입니다.

1. skin.xml 파일 수정

<var name="end_name" type="text">
   <title xml:lang="ko">★종료출력 사용자 정의 이름</title>
   <description xml:lang="ko">종료 출력을 원하는 확장변수의 사용자 정의 이름을 적어주세요(기본 end)</description>
</var>
<var name="end_title" type="text">
   <title xml:lang="ko"> ┖ 종료</title>
   <description xml:lang="ko">종료 제목을 적어주세요(기본 종료)</description>
</var>
<var name="ing_title" type="text">
   <title xml:lang="ko"> ┖ 진행중</title>
   <description xml:lang="ko">진행중 제목을 적어주세요(기본 진행중)</description>
</var>
<var name="approach_title" type="text">
   <title xml:lang="ko"> ┖ 종료임박</title>
   <description xml:lang="ko">종료임박 제목을 적어주세요(기본 종료임박)</description>
</var>
<var name="today_title" type="text">
   <title xml:lang="ko"> ┖ 오늘종료</title>
   <description xml:lang="ko">오늘종료 제목을 적어주세요(기본 오늘종료)</description>
</var>
<var name="a_d" type="text">
   <title xml:lang="ko"> ┖ 종료임박 날수</title>
   <description xml:lang="ko">종료임박 날 수를 적어주세요(기본 +1 day / 진행중 날 수와 동일 설정)</description>
</var>
<var name="i_d" type="text">
   <title xml:lang="ko"> ┖ 진행중 시작 날수</title>
   <description xml:lang="ko">진행중 시작 날수를 적어주세요(기본 -1 days / 종료임박 날 수와 동일 설정)</description>
</var>
<var name="d_day" type="radio">
   <title xml:lang="ko">D-Day출력</title>
   <description xml:lang="ko">D-Day를 출력표시합니다.</description>
   <options value="">
       <title xml:lang="ko">표시 안함(기본)</title>
   </options>
   <options value="Y">
       <title xml:lang="ko">표시</title>
   </options>
</var>
<var name="d_day_title" type="text">
   <title xml:lang="ko"> ┖ D-Day</title>
   <description xml:lang="ko">D-Day 제목을 적어주세요</description>
</var>

2. _list_normal.html 파일 수정 {$document->getTitle($mi->subject_cut_size)} 부분을 찾아서 아래와 같이 수정

{@
   if(!$mi->end_name) $mi->end_name = end;
   if(!$mi->end_title) $mi->end_title = 종료;
   if(!$mi->d_day_title) $mi->d_day_title = '';
   if(!$mi->ing_title) $mi->ing_title = 진행중;
   if(!$mi->approach_title) $mi->approach_title = 종료임박;
   if(!$mi->today_title) $mi->today_title = 오늘종료;
   if(!$mi->i_d) $mi->i_d = '-1 days';
   if(!$mi->a_d) $mi->a_d = '+1 day';

$now = date("Y-m-d");
$date = $document->getExtraEidValueHTML($mi->end_name);

   $this_day = date_create($document->getExtraEidValueHTML($mi->end_name));
   $date1 = date("Y-m-d",strtotime($this_day->format("Y-m-d").($mi->i_d)));
   $datetime = new DateTime($now);
   $date2 = $datetime->modify($mi->a_d);

$w_d_day_text = str_replace('.', '-', $date);// D-day 날짜 설정
   $w_d_day = strtotime($w_d_day_text);
   $w_today = time();// 오늘 날짜 설정
   $w_diff = $w_d_day - $w_today;// D-day와 오늘 날짜 차이 계산
   $w_days = floor($w_diff / (60 * 60 * 24))+1;// 초를 일 수로 변환
}

<span>

   <span style="color:#a6a6a6; text-decoration:line-through !important;"><span class="sbtn_mini sbtn-dark" style="margin-right:5px">{$mi->end_title}</span>

   <span style="color:red"><span class="sbtn_mini sbtn-red" style="margin-right:5px">{$mi->today_title} <span cond="$mi->d_day">[{$mi->d_day_title} - 0]</span></span>

   <span><span class="sbtn_mini sbtn-yellow" style="margin-right:5px">{$mi->ing_title} <span cond="$mi->d_day">[{$mi->d_day_title} - {$w_days}]</span></span>

   <span><span class="sbtn_mini sbtn-blue" style="margin-right:5px">{$mi->approach_title} <span cond="$mi->d_day">[{$mi->d_day_title} - {$w_days}]</span></span>

{$document->getTitle($mi->subject_cut_size)}
   </span>

3. 게시판 설정에서 확장 변수 ID를 "end"로 형식은 "일자(연월일)"로 추가하고 게시판 글 작성시 마감일시를 적용하면 됩니다.

https://moonhouse.co.kr/map

4. mh_multi 위젯 mh_sketchbook5_list 스킨에 적용한 모습 https://moonhouse.co.kr/multi

참고로 버턴이미지는 웹폰트 에드온 의 폰트어썸과 Sexy Button을 적용했습니다.

비밀글일때 제목글 감추는 방법

2023-03-15T20:13:04+09:00

비밀글로 작성된 문서의 경우 내용글은 보이질 않지만 제목의 경우는 출력이 되어서 완전한 비밀글로서의 기능을 가지질 못합니다.

[게시판에 적용]

게시판스킨에서 해당 리스트 파일을 불러옵니다.

스케치북5 스킨 "첫 글만 썸네일 출력 웹진"인 경우 /modules/board/skins/sketchbook5_MH/_list_FirstThumb.html 파일

{$document->getTitle($mi->subject_cut_size)} 부분을 아래와 같이 모두 수정합니다.

비밀글은 제목및 내용을 볼수 없습니다.{$document->getTitle($mi->subject_cut_size)}

[위젯에 적용]

위젯의 list.html파일에서

{$oDocument->getTitleText($wi->subject_cut_size)} 부분을 아래와 같이 수정합니다.

비밀글은 제목및 내용을 볼수 없습니다.

{$oDocument->getTitleText($wi->subject_cut_size)}

모바일 레이아웃에 통합 검색기능 적용하기

2023-01-26T08:56:19+09:00

검색버턴을 클릭하면 바로 하단에 토글로 검색바가 출력되게 적용하는 방법입니다.

1. 적용할 레이아웃의 적당한 위치에 "검색"버턴을 만듭니다.

2. 하단에 통합검색 코드를 작성합니다.

<div id="srch">
   <form action="{getUrl()}" method="get">
       <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}" title="검색" class="itx" accesskey="S" />
       <input type="image" src="img/bs_white.png" alt="Search" class="is" />
   </form>
</div>

"srch" id는 통일시켜야 합니다.

이미지를 레이아웃의 img폴더에 업로드

3. 최하단에 스크립트 추가

4. css파일에 아래 코드 추가

/* 검색 */
.show_srch { background-position:-240px 8px; cursor:pointer; }
#srch { display:none; position:relative; width:85%; margin:0 0 5px 20px; }
#srch.open { display:block; }
#srch .itx { width:100%; height:30px; padding:0; line-height:16px; font-size:16px; border:1px solid #999; border-radius:3px; -webkit-box-shadow:inset 1px 1px 2px #DDD; box-shadow:inset 1px 1px 2px #DDD; -moz-transition:all .5s; -webkit-transition:all .5s; transition:all .5s; position:relative; }
#hd .srch .itx:focus { border-color:#333; }
#srch .is { position:absolute; top:4px; right:0; padding:3px 5px; }

라이믹스 CKEditor에 Spolier 플러그인 적용하기

2023-01-15T11:32:07+09:00

안녕하세요!

처음으로 팁 게시판에 글을남겨봅니다.

운영하고있는 사이트의 한 회원님께서 Spoiler관련 문의를주셔서 적용하려고 이것저것하다가 잘적용되어서

타운에 필요하신분이 있을까해서 공유해봅니다.

선 설명드리자면 에디터에 스포일러라는 툴바가 추가되고 해당 툴바로 내용을 추가할시

토글할때만 내용이보이도록 설정할 수 있습니다.

플러그인 다운로드는 링크에서 다운로드받아주시고

https://ckeditor.com/cke4/addon/spoiler

다운로드를 받으셨다면 압축을해제하시고 Spoiler폴더는

라이믹스의 /common/js/plugins/ckeditor/ckeditor/plugins 에 업로드해주세요.

그리고 include의 css js파일을 사용하시는 게시판 스킨의 js와 css폴더에 업로드해주시고

글 읽기를 담당하는 _read.html과 같은 파일에서 해당 js와 css를 포함시켜줍니다.

문하우스의 Tip

그리고 관리자페이지에서 해당 스포일러 플러그인을 추가해주시면됩니다.

관리자페이지 -> 에디터 -> 추가 플러그인 로드에서 spoiler를 추가해주세요.

그리고 나면 잘적용됩니다!

상세 적용기 및 테스트는 아래 가이드를 참조해주시면 됩니다.

https://svrforum.com/svr/610275

관리자는 필수 확장변수 프리패스 (아이디어에서 '팁'으로 발전했습니다)

2022-12-01T20:20:00+09:00

앞서서 "관리자는 필수 확장변수를 입력하지 않아도 되는" 글을 아이디어 수준에서 남겨봤는데요.

관리자는 필수 확장변수 입력을 프리패스하기 위한 아이디어 코어를 수정하면 되는데 하지는 마세요 ㅎㅎㅎ if($val->is_required == 'Y') $js_code[] = sprintf('validator.cast("ADD_EXTRA_FIELD", ["extra_vars%s", { required:true }]);', $idx); 이 부분을 if($val->is_required == 'Y' && $this->user->is_admin != 'Y') $js_code[] = sprintf('validator.cast("ADD_EXTRA_FIELD", ["extra_vars%s", { required:true }]);', $idx); 이렇게 바꿔주면 되기는 하는데요. 이와 같은 방식으로... by 윤삼 from XETOWN

심플코드님이 힌트도 알려주시고 해서 뚝딱거려보다가 대강 구현을 한 것 같습니다.

코어 수정을 하지 않고 스킨단에서 처리를 했어요. (심플코드님 감사해요!)

글쓰기 템플릿 파일(보통 write_form.html) 제일 밑에 아래와 같은 스크립트 코드를 넣어보세요~

그럼 이제 관리자는 필수 확장변수를 입력하지 않아도 글쓰기가 가능해집니다.

특별히 공지 글을 남길 때 확장변수를 입력하거나 출력하지 않을 수 있답니다.

<script>

(function() {

var validator = xe.getApp("validator")[0];

if(!validator) return false;

validator.cast('DEL_EXTRA_FIELD', ['extra_vars{$idx}']);

})();

</script>

예약발행모듈 구버전 위젯에서 정상작동 되게 하기

2022-11-30T22:00:48+09:00

윤삼님의 예약발행모듈 을 적용하니 contact위젯에서는 정상적으로 작동을 하는데

구버전의 위젯에서는 비정상적으로 출력이 되어서 윤삼님이 주신 답변들로 팁을 납깁니다.

먼저 예약발행모듈 을 설치합니다.

예약발행 등록된 문서를 대기상태로 만들고, 정해진 일시에 또는 수동으로 공개 및 발행합니다. by 윤삼 from XETOWN

게시판의 추가설정에서 "예약발행 설정"을 합니다.

출력하고자 하는 구버전의 위젯의 위젯명.class.php 파일에서 아래 코드를 추가합니다.

if($args->show_secret == 'Y')
{
$obj->statusList = array('PUBLIC', 'SECRET');
}
else
{
$obj->statusList = array('PUBLIC');
}

위젯명/queries/.xml 파일에 아래 코드를 추가합니다.

레이아웃 배경 슬라이드 적용법

2022-06-14T09:11:10+09:00

레이아웃 제작시 바탕배경으로 이미지를 적용시 배경 이미지들을 슬라이드로 출력하면서 기타 옵션들을 적용하는 방법입니다.

예전 부터 문하우스 레이아웃 스킨에 꾸준히 사용해 오던 방법인데 이번에 정리해 봅니다.

1. /layouts/Skin 이름/conf/info.xml 에 아래 코드 추가

<group>
<title xml:lang="ko">배경 슬라이더</title>
   <var name="bgimg_slide" type="select">
       <title xml:lang="ko">배경이미지 슬라이더</title>
       <description xml:lang="ko">배경이미지 슬라이드 선택.</description>
       <options value="">
           <title xml:lang="ko">출력안함</title>
       </options>
       <options value="Y">
           <title xml:lang="ko">출력</title>
       </options>
   </var>
   <var name="slide_interval" type="text">
       <title xml:lang="ko">슬라이딩 시간 간격</title>
       <description xml:lang="ko">슬라이드 이미지간의 시간 간격(기본 5000(5초))</description>
   </var>
   <var name="slide_transition" type="select">
       <title xml:lang="ko">슬라이딩 전개방식</title>
       <description xml:lang="ko">슬라이딩의 전개방식을 선택해 주세요.(기본 Fade)</description>
       <options value="1">
           <title xml:lang="ko">Fade</title>
       </options>
       <options value="2">
           <title xml:lang="ko">Slide Top</title>
       </options>
       <options value="3">
           <title xml:lang="ko">Slide Right</title>
           </options>
       <options value="4">
           <title xml:lang="ko">Slide Bottom</title>
       </options>
       <options value="5">
           <title xml:lang="ko">Slide Left</title>
       </options>
       <options value="6">
           <title xml:lang="ko">Carousel Right</title>
       </options>
       <options value="7">
           <title xml:lang="ko">Carousel Left</title>
       </options>
       <options value="0">
           <title xml:lang="ko">None</title>
       </options>
   </var>
   <var name="transition_speed" type="text">
       <title xml:lang="ko">전개방식 시간</title>
       <description xml:lang="ko">슬라이딩 전개방식의 시간(기본 2000(2초))</description>
   </var>
   <var name="slide_content" type="select">
       <title xml:lang="ko">슬라이더 출력형태</title>
       <description xml:lang="ko">슬라이더의 출력형태를 선택</description>
       <options value="1">
           <title xml:lang="ko">기본</title>
       </options>
       <options value="2">
           <title xml:lang="ko">썸네일</title>
       </options>
   </var>
   <var name="s_img_loc" type="select">
       <title xml:lang="ko">슬라이더 화면출력</title>
       <description xml:lang="ko">슬라이더 화면 출력을 선택</description>
       <options value="fixed">
           <title xml:lang="ko">화면고정</title>
       </options>
       <options value="absolute">
           <title xml:lang="ko">이미지고정</title>
       </options>
   </var>
   <var name="s_img_top" type="text">
       <title xml:lang="ko">이미지의 상단 높이</title>
       <description xml:lang="ko">이미지의 상단 높이를 지정, 뭔밍?은 기본^.^(기본 0)</description>
   </var>
   <var name="s_img_left" type="text">
       <title xml:lang="ko">이미지의 좌측 간격</title>
       <description xml:lang="ko">이미지의 좌측 간격을 지정, 뭔밍?은 기본^.^(기본 0)</description>
   </var>
   <var name="s_img_b" type="text">
       <title xml:lang="ko">슬라이딩 배경 칼라</title>
       <description xml:lang="ko">슬라이딩 배경영역의 색상을 지정(기본 #fff)</description>
   </var>
   <var name="slider1_image" type="image">
       <title xml:lang="ko">이미지1</title>
   </var>
   <var name="slider1_description_en" type="text">
       <title xml:lang="ko">이미지1 영문</title>
   </var>
   <var name="slider1_description_kr" type="text">
       <title xml:lang="ko">이미지1 한글</title>
   </var>
   <var name="slider2_image" type="image">
       <title xml:lang="ko">이미지2</title>
   </var>
   <var name="slider2_description_en" type="text">
       <title xml:lang="ko">이미지2 영문</title>
   </var>
   <var name="slider2_description_kr" type="text">
       <title xml:lang="ko">이미지2 한글</title>
   </var>
   <var name="slider3_image" type="image">
       <title xml:lang="ko">이미지3</title>
   </var>
   <var name="slider3_description_en" type="text">
       <title xml:lang="ko">이미지3 영문</title>
   </var>
   <var name="slider3_description_kr" type="text">
       <title xml:lang="ko">이미지3 한글</title>
   </var>
   <var name="slider4_image" type="image">
       <title xml:lang="ko">이미지4</title>
   </var>
   <var name="slider4_description_en" type="text">
       <title xml:lang="ko">이미지4 영문</title>
   </var>
   <var name="slider4_description_kr" type="text">
       <title xml:lang="ko">이미지4 한글</title>
   </var>
</group>

2. /layouts/Skin 이름/layout.html 에 코드 추가

{@ $li = $layout_info; }

<block cond="$li->bgimg_slide == 'Y'"><include target="bgslide.html" /></block>

3. 첨부파일을 내려 받아 압축을 풀어서 해당 스킨에 업로드

4. 레이아웃 설정에서 "배경 슬라이더" 옵션들 설정

[ Tip! ]

1. 이미지 숫자 추가하는 법

info.xml 과 bgslide.html 파일안에 slider_image 부분들을 추가

2. 이미지 영문 / 한글 (이미지 caption) 부분 수정

/css/supersized.shutter.css 의 18줄 ~ 20줄 부분이 이미지의 캡션 부분 css입니다.

칼라, 크기, 투명도, 에니메이션을 수정하면 됩니다.

bgslide.html 의 79줄(웹) 83줄(모바일)은 캡션영역의 위치입니다.

3. 참고로 supersized 소스 코드는 라이선스가 MIT License / GPL License 이므로 마음껏 수정하셔도 됩니다.

GitHub - buildinternet/supersized: Full screen background slideshow plugin for jQuery Full screen background slideshow plugin for jQuery - GitHub - buildinternet/supersized: Full screen background slideshow plugin for jQuery from GITHUB

Colorbox 사용법 2탄

2022-05-26T20:02:00+09:00

기본적인 이미지 팝업 Colorbox 사용법을 이전 게시글에 작성했는데

이번에는 레이아웃이나 게시판에 일반적인 팝업창을 띄우는 방법을 남깁니다.

먼저 설치방법은 이전 게시글 에 있는 방법으로 따라하세요.

1. 일반적인 레이아웃에 적용방법

•/layouts/해당레이아웃/conf/info.xml 에 아래 코드 추가

<group>
   <title xml:lang="ko">PopUp 설정</title>
   <var name="popup_use" type="select">
       <title xml:lang="ko">PopUp 출력</title>
       <description xml:lang="ko">PopUp창 출력</description>
       <options value="">
           <title xml:lang="ko">출력하지 않음</title>
       </options>
       <options value="Y">
           <title xml:lang="ko">출력</title>
       </options>
   </var>
   <var name="cb_width" type="text">
       <title xml:lang="ko">박스 넓이</title>
       <description xml:lang="ko">%, vw, px 사용가능(빈칸시 Auto)</description>
   </var>
   <var name="cb_height" type="text">
       <title xml:lang="ko">박스 높이</title>
       <description xml:lang="ko">%, px 사용가능(빈칸시 Auto)</description>
   </var>
   <var name="popup_start" type="select">
       <title xml:lang="ko">PopUp 자동출력</title>
       <description xml:lang="ko">PopUp 첫화면 자동출력</description>
       <options value="">
           <title xml:lang="ko">출력하지 않음</title>
       </options>
       <options value="Y">
           <title xml:lang="ko">출력</title>
       </options>
   </var>
   <var name="popup_time_close" type="select">
       <title xml:lang="ko">PopUp 시간 닫기</title>
       <description xml:lang="ko">PopUp을 지정 시간이 지나면 자동닫기</description>
       <options value="">
           <title xml:lang="ko">닫지 않음</title>
       </options>
       <options value="Y">
           <title xml:lang="ko">닫기</title>
       </options>
   </var>
   <var name="popup_time" type="text">
       <title xml:lang="ko">닫기 시간</title>
       <description xml:lang="ko">PopUp창 자동 닫는 시간 (기본 3000 - 3초 )</description>
   </var>
   <var name="cop" type="text">
       <title xml:lang="ko">배경 투명도</title>
       <description xml:lang="ko">ColorBox 출력시 배경과의 투명도(기본 0.9 / 불투명 1)</description>
   </var>
   <var name="cb_img1" type="image">
       <title xml:lang="ko">이미지1</title>
   </var>
   <var name="cb_img2" type="image">
       <title xml:lang="ko">이미지2</title>
   </var>
</group>

•layout.html 적당한 곳에 아래의 코드를 추가

<div cond="!$li->popup_use == ''">
<load target="css/colorbox.css" />
<load target="js/jquery.colorbox.js"/>

   <block cond="!$li->popup_time">{@ $li->popup_time = '3000'}</block>
   <block cond="!$li->cop">{@ $li->cop = '0.9'}</block>
   <script>
       $(document).ready(function(){
           $(".cb")
           .colorbox({rel:'cb',
               inline: true,
               opacity: {$li->cop},
               slideshow: true,
               slideshowAuto: true,
               closeButton: false,
               current: false,
               slideshowStart: false,
               slideshowStop: false,
               slideshowSpeed: 3000,
               width: "{$li->cb_width}",
               height: "{$li->cb_height}",
           })

.click(function(){
                   setTimeout(function(){
                       $.colorbox.close();
               },{$li->popup_time});
               })

.trigger('click');
           
       });
   </script>

1. 빨간색 부분이 팝업창이 자동으로 닫히는 시간을 나타냅니다.

2. 초록색 부분이 팝업창이 자동으로 열리는 기능을 나타냅니다.

둘다 적용하면 자동으로 팝업이 열리고 닫기 시간이 되면 팝업이 사라집니다.

3. a class="cb" 전체영역은 필요에 따라 추가하거나 제거하면 됩니다.

4. 이미지 출력 부분 <img src="{$li->cb_img}">은 일반 텍스트나 Html로 작성하셔도 됩니다.

5. 회색 부분은 메뉴를 적어 넣어면 레이아웃에 해당 메뉴가 출력됩니다. 빈칸으로 두면 당연히 보이지 않겠죠.

5. 옵션 부분들을 자신에게 맞게 수정하시면 됩니다.

저 같은 경우는 모든 버턴들을 숨기고 바탕색을 투명하게 하고 이미지들을 투명 gif png파일을 선택했습니다.

6. colorbox.css 수정.

/* 배경을 투명하게 설정*/
#cboxContent{margin-top:20px;background:transparent;}
#cboxLoadedContent{border:0px solid #000; background:transparent; }

/* 이전, 다음 버턴 제거*/
#cboxPrevious{position:absolute; top:50%; left:5px; margin-top:-32px; background:url(./images/controls.png) no-repeat top left; width:28px; height:65px; text-indent:-9999px;}
#cboxPrevious:hover{background-position:bottom left;}
#cboxNext{position:absolute; top:50%; right:5px; margin-top:-32px; background:url(./images/controls.png) no-repeat top right; width:28px; height:65px; text-indent:-9999px;}
#cboxNext:hover{background-position:bottom right;}

Colorbox 사용법

2022-05-24T23:17:26+09:00

이미지를 팝업으로 화면에 띄우는 대표적인 플러그인이 LightBox 입니다.

데모 : https://moonhouse.co.kr/lb

원소스 : https://lokeshdhakar.com/projects/lightbox2

지금껏 주로 사용을 해 오다.

Mh Gallery 프로그램을 만들다 좀더 나은 것을 찾다가 발견한 플러그인이 Colorbox 입니다.

데모 : https://moonhouse.co.kr/cb

원소스 : http://www.jacklmoore.com/colorbox

두 플러그인을 간략하게 비교를 하자면 LightBox는 기본에 충실하고,

Colorbox는 세부적인 옵션들이 굉장히 많습니다.

1. Colorbox의 세부옵션 소개
•slideshowAuto를 지원

- Auto에 따르는 부수적인 기능들 -- 속도, 수동 / 자동, 버턴

•transition 지원

- fade, elastic, none 지원

•첫화면 출력지원

- LightBox의 경우는 썸네일을 클릭시 화면이 출력되는 반면

Colorbox의 경우는 첫화면을 자동으로 띄울 수 있습니다.

•팝업의 위치를 조절 가능 - top, bottom, left, right, 기본은 가로 세로 중앙위치

- LightBox의 경우는 가로는 중앙이나 세로는 상단에 위치합니다.

•그 외에도 많은 옵션들을 가지고 있습니다.

2. Colorbox 설치방법 (Rhymix를 기준으로)

•원본소스 를 다운 받습니다.

•소스중 colorbox.css & jquery.colorbox.js 그리고 해당 이미지들을 지정 폴더에 업로드 합니다.

•적용할 html 위에 코드 적용

•script를 작성합니다.

•적용할 html(위젯)

class="cb" 를 위의 script에 $(".cb").colorbox({rel:'cb', 에 class적용합니다.

•원본소스는 vh, vw가 적용 이 되지를 않는데 적용되게끔 수정

jquery.colorbox.js 245줄

[수정전]
function setSize(size, dimension) {
return Math.round((/%/.test(size) ? ((dimension === 'x' ? $window.width() : winheight()) / 100) : 1) * parseInt(size, 10));
}

[수정후]
function setSize(size, dimension) {
       return Math.round((/%/.test(size) ? ((dimension === 'x' ? $window.width() : winheight()) / 100) : 1) * parseInt(size, 10)) *
           Math.round((/vw/.test(size) ? (document.documentElement.clientWidth / 100) : 1)) *
           Math.round((/vh/.test(size) ? (document.documentElement.clienHeight / 100) : 1));
   }

•jquery.colorbox.js 를 열어보면 옵션들이 보입니다.

// behavior and appearance
transition: "elastic",
speed: 500,
fadeOut: 500,
width: false,
initialWidth: "1000",
innerWidth: false,
maxWidth: false,
height: false,
initialHeight: "800",
innerHeight: false,
maxHeight: false,
scalePhotos: true,
scrolling: true,
opacity: 0.9,
preloading: true,
className: false,
overlayClose: true,
escKey: true,
arrowKey: true,
top: false,
bottom: false,
left: false,
right: false,
fixed: false,
data: undefined,
closeButton: true,
fastIframe: true,
open: true,
reposition: true,
loop: true,
slideshow: false,
slideshowAuto: true,
slideshowSpeed: 5000,
slideshowStart: "start slideshow",
slideshowStop: "stop slideshow",
photoRegex: /\.(gif|png|jp(e|g|eg)|bmp|ico|webp|jxr|svg)((#|\?).*)?$/i,

위의 옵션들중에 js에서 수정시 작동을 안하는 경우가 있습니다.

html의 script에 적용을 해야 합니다.

height, width와 관련된 옵션들에는 " "사이에 px, %, 500, vh, vw를 사용할 수 있습니다.

•colorbox.css 설명

#cboxOverlay { background-color:#333; opacity:0.9; filter:alpha(opacity = 90); }
#cboxContent { margin-top:20px; background:#fff; }
#cboxLoadedContent { border:5px solid #fff; background:#000; }

- 배경색상, 컨탠트색상, 보드라인 색상을 결정하는 코드

#cboxTitle { ... } /* 게시글제목 */
#cboxCurrent { ... } /* 이미지 넘버 */
#cboxSlideshow { ... } /* 슬라이드 시작/멈춤 텍스트*/

- 참고로 아래 코드에서 팝업의 상하좌우 여백을 조절 할 수 있습니다.

#colorbox { outline:0; margin-left:-11em; }

다크모드를 구현해 보면서...

2022-04-29T11:47:02+09:00

다크모드가 대세인 요즘

레이아웃을 다크모드로 한번 꾸며 보고자 도전을 해 보았는데

이게 생각보다 쉽지를 않네요.

웹지기님의 팁 을 기초 삼아서 처음엔 mh_justice 레이아웃에 접목해 봤는데

justice 레이아웃이 선택 할 수 있는 칼라 선택의 조건이 너무 많아서 포기!!!

그래서 가장 간단한 레이아웃인 mh_white 레이아웃으로 재도전 해 보았습니다.

이건 설정들이 거의 없어서 쉽게 적용이 되더군요.

그런데 레이아웃은 적용이 잘 되는데 스케치북 게시판이나 위젯들도 설정을 해 줘야 되더군요.

그래서 약간의 변형을 적용해서 코드에 * 를 붙이니 거의 모든 게시판이나 위젯들도 수정없이 다크모드로 적용이 됩니다.

사용해 보실 분은 첨부파일 다운 받으시면 됩니다.

body.color_scheme_dark * { color:var(--color-black) !important; background-color:var(--color-white) !important; border-color:#555 !important; }

그런데 * 를 적용하고 나니 문제가 생깁니다.

라이트모드일때 위젯들의 썸네일이 잘 보이는데

다크모드로 전환하면 잘 출력되는 위젯들도 있는 반면 특정 위젯들의 썸네일들이 다크모드의 배경색으로 바뀌어 버립니다.

이것뿐만 아닌라 게시판에서도 지도 출력하는 부분의 배경이 다크모드로 바뀌어 버리네요.

그런데 * 를 제거하면 게시판이나 위젯들이 다크모드로 전환이 완벽히 되지를 않습니다.

[ * 붙인 경우 ]

[ * 땐 경우 ]

그런다고 일일이 게시판이나 위젯들을 손 보는 것은 너무나 많은 작업을 거쳐야 하고 거의 불가능에 가깝습니다.

그래서 저의 결론은 다크모드를 레이아웃에 적용하는 것 보다,

다크모드를 원하는 접속자들의 브라우즈를 다크모드로 변경해서 접속을 유도하는 것이 더 좋은 선택이 아닐까 하는 생각이 듭니다.

( 비겁한 변명입니다, 탕!탕!탕! ) -- 누군가의 외침이 들리는 것만 같네요 ^.^!

크롬에서 제가 사용하는 다크모드 확장프로그램으로 아래 것을 추천합니다.

https://chrome.google.com/webstore/detail/dark-mode/fpneimadkgmbkijjeomfgchpbjblepnp/related

간단하면서도 완벽에 가까운 기능을 발휘합니다.

원댓글/대댓글 따로따로 애드온 && 적용방법

2022-03-29T20:24:21+09:00

- 게시판 문서 로드시에는 원댓글만 로드했다가, 대댓글은 별도의 링크를 통해 ajax로 따로 로드하는 애드온입니다.

- 바로 실사용하기보다는, 충분한 테스트를 거쳐 버그 정보 및 개선 사항을 공유하고 함께 버전업을 한 뒤 실사용하시기를 권합니다.

- 이런 방식의 댓글 로딩은 몇 가지 장단점이 있을 것 같습니다.

- 장점 : 체계화된 댓글 출력, 포럼식 소통의 강화, 리소스 절약

- 단점 : 댓글 관련 서드 파티 자료들의 링크 방식을 대대적으로 손볼 필요가 있음(url에 comment_srl 파라미터가 있어야 좋습니다), 검색 엔진의 대댓글 접근 약화(이건 그냥 예상입니다)

- 애드온의 작동 방식, 적용 방법, 스킨 활용 등에 대한 보다 자세한 사항은 아래의 링크를 참고해주세요.

- 미리보기 : https://dev.aporia.blog/board_fKje47/40977

- 적용 방법 : https://dev.aporia.blog/board_fKje47/41206

업데이트 0.1.0 (2022.03.28)

- 코어의 dispBoardCommentPage 액션을 통해 사용 중인 스킨의 comment.html 부분을 직접 불러들임

1) 더 이상 애드온 스킨을 사용하지 않음

2) 0.1.0에서는 애드온 설정을 사용하지 않음

3) 외부 php 파일을 사용하지 않음

: 람보님 덕분에 애드온 구조가 훨씬 깔끔해졌습니다 :D

4) 다른 서드파티 자료들과의 호환성 강화

- 대댓글을 로드할 때 스크롤 이동을 하지 않음

- url에 comment_srl 파라미터만 있고 댓글번호에 해당하는 해시(#)가 없을 경우 자동으로 해시 첨가

- 기타 코드 및 파일 정리

* 기존 0.0.1 버전 사용자는 게시판 스킨의 _comment.html의 대댓글 링크에서 onclick 속성을 다음과 같이 바꿔주어야 합니다.

onclick="getRecommentList(this, {$comment->comment_srl}); return false;"

[문하우스 sketchbook5_MH 와 댓글위젯에 적용팁]

애드온 설치를 하고 제법 해 줘야 할 일이 많습니다.

https://dev.aporia.blog/board_fKje47/41206 에 있는 방법을 따라 합니다.

1) 대댓글 열기 링크 삽입

<a cond="$comment->recomment_count > 0" class="ico_secret" href="#" onclick="getRecommentList(this, {$comment->comment_srl}); return false;" style="text-decoration: none;color: white;font-weight: normal;">대댓글({$comment->recomment_count})</a>
보통은 id="comment_{$comment->comment_srl}"라는 속성이 있는 태그 안쪽이면 어디든 괜찮을 것입니다.
참고로 이곳 게시판 스킨에서는 <div class="meta"> 태그 안에서 맨 마지막 줄에 삽입했습니다.

2) 댓글 페이지네이션 수정

- a 태그 안의 href 속성 값에 들어가 있는 getUrl 함수를 찾아 괄호 안을 살짝 수정

보통은 href="{getUrl('cpage',1)}#{$oDocument->get('document_srl')}_comment"이런 식으로 되어 있는데,

=> 이것을 href="{getUrl('comment_srl', '', 'cpage',1)}#{$oDocument->get('document_srl')}_comment" 같은 식으로 수정

마찬가지로 href="{getUrl('cpage',$page_no)}#{$oDocument->get('document_srl')}_comment" 이것도

=> href="{getUrl('comment_srl', '', 'cpage',$page_no)}#{$oDocument->get('document_srl')}_comment" 으로

href="{getUrl('cpage',$oDocument->comment_page_navigation->last_page)}#{$oDocument->get('document_srl')}_comment" 이것도

=> href="{getUrl('comment_srl', '', 'cpage',$oDocument->comment_page_navigation->last_page)}#{$oDocument->get('document_srl')}_comment" 으로

3) 스킨 자체 변수의 대댓글 열기 링크 삽입

- 대댓글을 로드할 때는 스킨의 comment.html만 가져옵니다. 따라서 스케치북처럼 __setting.html에 자체 변수를 선언하고 있는 스킨들은 변수 전달에 문제가 있을 수 있습니다.

- 따라서, 스케치북의 경우에는 _comment.html 상단에

<include target="__setting.html" cond="$comment_head" />

- 라고 다시 한번 선언해주어야 원활한 페이지 구현이 가능합니다.

- 참고로 위 구문에서 $comment_head라는 변수는 대댓글이 있을 경우 애드온에서 전달하는 대댓글들의 헤드, 즉 원댓글의 댓글 번호를 가리킵니다.

1. sketchbook5_MH 수정 - /modules/board/skins/sketchbook5_MH/_comment.html

최상단에 아래 코드 삽입
<include target="__setting.html" cond="$comment_head" />
~ 생략 ~

~ 생략 ~
대댓글 버턴이 댓글의 최하단에 위치하도록 설치 - 댓글의 내용을 읽은 후 대댓글 버턴 클릭

<div style="float:right; margin:10px 0 0 0">
               <a cond="$comment->recomment_count > 0" class="ico_secret sbtn_mini sbtn-green" href="#" onclick="getRecommentList(this, {$comment->comment_srl}); return false;" style="text-decoration:none; color:white"><i class="ri-question-answer-line"></i> 대댓글 <span style="font-weight:bold">({$comment->recomment_count})</span></a>
           </div>
       </li>
   </block>
</ul>

<block cond="$oDocument->comment_page_navigation">
   <div class="bd_pg clear {$mi->fdb_hide}">
       <a href="{getUrl('comment_srl', '', 'cpage',1)}#{$oDocument->get('document_srl')}_comment" class="direction" title="{$lang->first_page}"><i class="fa fa-angle-double-left"></i> <span>First</span></a>
       <block loop="$page_no=$oDocument->comment_page_navigation->getNextPage()">
           <strong cond="$cpage==$page_no" class="this">{$page_no}</strong>
           <a cond="$cpage!=$page_no" href="{getUrl('comment_srl', '', 'cpage',$page_no)}#{$oDocument->get('document_srl')}_comment">{$page_no}</a>
       </block>
       <a href="{getUrl('comment_srl', '', 'cpage',$oDocument->comment_page_navigation->last_page)}#{$oDocument->get('document_srl')}_comment" class="direction" title="{$lang->last_page}"><span>Last</span> <i class="fa fa-angle-double-right"></i></a>
   </div>
</block>

• 댓글 주소 복사의 코드를 수정 - https://xetown.com/download/1670320#comment_1671151

<div style="margin-top:5px">
   
   <load target="./js/clipboard.min.js" />
   <a class="copycomLink" style="font-size:12px; color:#aaa" href="#" data-clipboard-text="{getFullUrl('', 'mid', $mid, 'document_srl', $comment->document_srl, 'comment_srl', $comment->comment_srl)}#comment_{$comment->comment_srl}" onclick="return false;">#comment_{$comment->comment_srl}</a>
</div>

https://moonhouse.co.kr/free/553952?comment_srl=553979#comment_553979 이런 형식의 주소가 복사되어야 합니다.

https://도메인/모듈명/게시판NO?comment_srl=코멘트NO#comment_코멘트NO

2. 댓글 위젯에서 대댓글 클릭시 대댓글로 이동하는 코드로 수정 - https://xetown.com/download/1670320#comment_1671395

댓글위젯에서 module_srl(모듈번호)은 출력이 되는데 모듈명이 출력이 안되는 위젯인 경우(위젯 마다 약간씩 차이가 남)

{@ $target_mid = ModuleModel::getModuleInfo($val->get('module_srl'))->mid; }
   <ul>
       <li>
           <a href="{getUrl('', 'mid', $target_mid, 'document_srl',$val->get('document_srl'), 'comment_srl', $val->comment_srl)}#comment_{$val->get('comment_srl')}">{$val->getSummary($wi->subject_cut_size)}</a>
       </li>
   </ul>

3. content 위젯에 적용 - https://xetown.com/download/1670320#comment_1671286

[수정전]
<a href="{$item->getLink()}" target="_blank"|cond="$widget_info->new_window">{$item->getTitle($widget_info->subject_cut_size)}</a>

[수정후]
<a href="{getUrl('', 'mid', $item->get('mid'), 'document_srl', $item->get('document_srl'), 'comment_srl', $item->get('comment_srl'))}" target="_blank"|cond="$widget_info->new_window">{$item->getTitle($widget_info->subject_cut_size)}</a>

4. 회원 정보 보기의 작성댓글보기 수정

• 관리자설정 > 회원설정 > 디자인 > 스킨 확인 - 회원 기본 스킨(default)

- /modules/member/skins/default/comment_list.html

- /modules/member/m.skins/default/comment_list.html (모바일스킨도 함께)

[수정전]
<tr loop="$comment_list => $no,$comment">
   <td>{$no}</td>
   <td>
       <a href="{getUrl('','document_srl',$comment->document_srl)}#comment_{$comment->comment_srl}" target="_blank">{$comment->getSummary() ?: $lang->msg_no_text_comment}</a>
   </td>
   <td>{$comment->getRegdate("Y-m-d")}</td>
</tr>

[수정후]
<tr loop="$comment_list => $no,$comment">
   <td>{$no}</td>
   <td>
       {@ $target_mid = ModuleModel::getModuleInfo($comment->get('module_srl'))->mid; }
       <a href="{getUrl('', 'mid', $target_mid, 'document_srl',$comment->get('document_srl'), 'comment_srl', $comment->comment_srl)}#comment_{$comment->get('comment_srl')}" target="_blank">{$comment->getSummary() ?: $lang->msg_no_text_comment}</a>
   </td>
   <td>{$comment->getRegdate("Y-m-d")}</td>
</tr>

댓글 목록 중 원글 작성자일 경우 조건문을 적용하려고 합니다.

2022-03-25T23:07:32+09:00

비회원 댓글 작성이 가능한 게시판에서 원글 작성자가 댓글을 남길 경우 댓글 닉네임옆에 (글쓴이)라고 표시를 하려고 합니다.

공개된 팁을 댓글 관련 페이지 댓글 닉네임을 표시하는 부분에서 아래 소스 코드를 적용했습니다.

<div class="ed comment-content">
<div>
<div class="ed flex flex-middle margin-bottom-xxsmall">
<div class="ed inline-flex flex-middle margin-right-small">
<h6 class="ed text-bold text-row-medium margin-right-xsmall margin-bottom-remove text-primary">
<a class="ed link-reset" cond="!$comment->member_srl && $comment->homepage" href="{$comment->getHomepageUrl()}" target="_blank">{$comment->getNickName()}</a>
<span cond="!$comment->member_srl && !$comment->homepage">{$comment->getNickName()}</span>
<a cond="$comment->member_srl" href="#popup_menu_area" class="ed link-reset member_{$comment->member_srl}" onclick="return false">{$comment->getNickName()}</a>


<span style="font-weight: normal;">( 글쓴이 )</span>

정상적으로 잘 작동 ( 글작성자가 댓글을 남길경우 닉네임옆에 (글쓴이 )표시 )이 되는데요.

한가지 비회원이 댓글을 남길경우 해당 글작성자가 아님에도 불구하고 댓글 닉네임옆에 (글쓴이)가 표시되는 문제가 있습니다.

여러가지 시도를 해봤는데 해결이 안되는데요. 혹시 도움 좀 받을 수 있을까요?

[답변] https://xetown.com/questions/1669674#comment_1669797

<span style="margin-left:10px; padding:2px 3px; border-radius:3px; color:#fff; background:#ff6600; font-size:11px">질문자</span>


  
  <span style="margin-left:10px; padding:2px 3px; border-radius:3px; color:#fff; background:#ff6600; font-size:11px">질문자</span>

table을 좌우 스크롤(수평 스크롤, 스와이프)할 때 특정 컬럼을 고정하고 싶다면

2022-03-22T13:29:25+09:00

앞선 팁에서 table을 div로 wrap해서 화면사이즈에 반응성을 높여주는 디자인을 소개했는데요.

사실 table을 스와이핑 또는 수평 스크롤하더라도 모바일 세로 화면에 컬럼 수(열)가 많다면 자신이 어떤 내용을 보고 있는지 파악하기 어려울 때가 많습니다.

그럴 때 '제목'과 특정열을 고정시켜주면 이용자들의 테이블 내용 파악에 큰 도움을 줄 수 있습니다.

크게 두 가지 방법이 있습니다.

1) 해당 열(컬럼)의 position을 absolute, fixed 등을 지정해주고 그에 대응해 js로 스크롤 이벤트를 걸어주기. 다만 절차가 좀 복잡합니다.

2) 해당 열(컬럼)의 position을 sticky로 걸어주기. 매우매우 간단합니다!!

테이블형 게시판 스킨을 기준으로 예시해보겠습니다.

1. 목록 파일 html 수정

- 우선 앞선 팁에서처럼 수평스크롤이 작동할 수 있게 table 코드 위 아래로 div로 wrapping을 해줘야겠죠? 이에 대해서는 앞선 팁을 참고해주세요 :)

- 그리고 고정시킬 열을 식별할 수 있도록 클래스 속성을 붙여줍니다. 사용자정의의 확장변수 일련번호(idx)가 3번이고 변수명(eid)은 name이라고 가정해보겠습니다. 그러면 아래처럼 th 태그와 td 태그를 수정해주시면 됩니다.

- 테이블 헤더 부분

<th scope="col" cond="$val->idx != -1" class="fixed"|cond="$val->idx==3"><span><a href="{getUrl('sort_index', $val->eid, 'order_type', $order_type)}" rel="nofollow">{$val->name}</a></span></th>

- 테이블 바디 부분 (공지사항도 동일합니다^^)

<td cond="$val->idx != -1" class="fixed"|cond="$val->idx==3">{$document->getExtraValueHTML($val->idx)|noescape} </td>

=> 이렇게 하면 고정시킬 테이블 열에 fixed라는 클래스가 붙게 됩니다.

=> 위에는 일련번호를 기준으로 한 것이구요. 번호(idx)가 아니라 변수명(eid)에 따라 클래스명을 붙여주고 싶다면 class="fixed"|cond="$val->idx==3 대시 class="fixed"|cond="$val->eid === 'name'" 이라고 하면 됩니다.

... 아울러 사용자정의가 아니라 기본 변수(제목, 등록일 등)에 클래스 값을 줄 수도 있을 텐데 어렵지 않게 하실 수 있을 거라 봅니다.

2. css 수정

- 이제 fixed에 적용할 스타일을 첨가해야겠습니다.

- 다음과 같이 적용하겠습니다.

.board_list th.fixed, .board_list td.fixed {
   position: sticky;
   left: 0;
   z-index: 1;

background-color: #f6f6f6;
}

- left값과 z-index값은 위의 값을 기준으로 각자 사정에 맞게 조절하시면 될 겁니다.

- background-color는 테이블 배경색이 지정되어 있는데 th나 td의 색상이 투명일 경우에 대비해서 지정해놓은 것입니다. 스크롤 이동에 따라 투명 배경의 th나 td 요소가 고정되어 있다면 그 아래로 다른 th나 td가 겹쳐서 보일 수가 있거든요. 이 점도 참고해보시면 좋을 겁니다.

3. 결과

- 이렇게 하면 대략 다음과 같은 모양새가 나오게 됩니다 ;) 어때요? 참 쉽죠?

[문하우스 Tip]

/modules/board/skins/sketchbook5/skin.xml

<var name="sticky_select" type="radio">
   <title xml:lang="ko">목록(거래장형) 게시판 좌우 스크롤 기능 고정칸 선택</title>
   <description xml:lang="ko">
  게시목록의 항목이 많아서 좌우 수평 스크롤, 스와이프 기능적용시 고정칸을 선택하는 방법
* https://xetown.com/tips/1183430
</description>
   <options value="">
       <title xml:lang="ko">적용안함(기본)</title>
   </options>
   <options value="e">
       <title xml:lang="ko">확장변수</title>
   </options>
   <options value="t">
       <title xml:lang="ko">제목</title>
   </options>
</var>
<var name="sticky" type="text">
   <title xml:lang="ko"> ┖ 확장 변수 선택시 고정칸 적용 확장 변수 ID</title>
   <description xml:lang="ko">게시목록 좌우 수평 스크롤, 스와이프 설정시 고정 변수 ID</description>
</var>
<var name="sticky_bcolor" type="text">
   <title xml:lang="ko"> ┖ 고정칸 배경색상</title>
   <description xml:lang="ko">고정 확장변수칸 배경색상을 지정.(기본 #fff)</description>
</var>

/modules/board/skins/sketchbook5/_list_normal.html 에서 상위 설명

class="fixed"|cond="$val->idx==3" 부분을 아래 빨간색으로 수정 - 총3군데 확장변수 부분

class="fixed"|cond="$val->eid == $mi->sticky" <!--@end--

제목컬럼을 고정칸으로 적용하는 방법은 아래와 같이 수정하면 됩니다.

class="title" // 부분들을 찾아서 - 총 3군데

class="title t_fixed"

     .board_list th.t_fixed,
     .board_list td.t_fixed,
     .board_list th.fixed,
     .board_list td.fixed {
position: sticky; left: 0;

z-index: 1;

background-color:#fff;
}
</style>

다른 항목으로 바꾸어도 되겠죠(이름, 날짜등)

게시판 목록에서 카테고리/확장변수 바로 수정 애드온 and 모바일도 적용 방법

2022-03-18T11:17:12+09:00

XeTown에서 윤삼님이 만드신 게시판 목록에서 카테고리/확장변수 바로 수정 애드온

좀더 자세한 설정 방법과

SketchBook5 게시판스킨 - 문하우스 수정버전 에 적용하는 방법입니다.

1. https://xetown.com/download/1666779 에 접속해서 해당 에드온을 다운로드후 페이지 설명대로 합니다.

2. /modules/board/skins/sketchbook5_MH/skin.xml 파일에 추가

<var name="eid_up1" type="text">
   <title xml:lang="ko">게시판수정 확장 변수 ID One</title>
   <description xml:lang="ko">게시판목록에서 확장변수를 직접 수정할수 있는 확장변수의 ID를 작성(기본 update)</description>
</var>
<var name="eid_up2" type="text">
   <title xml:lang="ko">게시판수정 확장 변수 ID Two</title>
   <description xml:lang="ko">게시판목록에서 확장변수를 직접 수정할수 있는 확장변수의 ID를 작성(기본 update1)</description>
</var>

3. /modules/board/skins/sketchbook5_MH/_list_normal.html 파일에서 빨간색 부분 추가 - Notice(공지), Normal(게시글) 2군데

<td cond="$val->idx!=-1" onclick="showUpdateExtraModal(this, {$document->document_srl}, {$val->idx})"|cond="$grant->manager && in_array($val->eid, array($mi->eid_up1, $mi->eid_up2))" class="link_urlm_no">

4. 게시판설정 > 확장변수에서 수정할 확장변수를 생성합니다. 기존의 것을 수정해도 됩니다.

5. 게시판설정 > 스킨설정에서 수정할 "확장변수 ID"를 에드온에서 작성한 eid중에서 작성합니다.

6. 게시판설정 > 게시판정보 > 목록설정 에서 해당 확장변수를 추가합니다.

7. 게시판목록에서 주문확인란을 클릭하면 확장변수를 수정할 수 있는 팝업창이 출력됩니다.

획장변수를 사용해서 선택전,후 / 날짜변경등의 기능으로 멋진 애드온이 만들어진 것 같습니다.

이런 멋진 작품을 무료로 배포해 주신 윤삼님에게 감사드립니다.

8. V 0.1.3 에서는 카테고리 입력 부분도 수정할 수가 있습니다.

/modules/board/skins/sketchbook5_MH/_list_normal.html 파일에서 빨간색 부분 추가 - Notice(공지), Normal(게시글) 2군데

<td cond="!$mi->show_cate && $mi->use_category=='Y'" onclick="showUpdateExtraModal(this, {$document->document_srl}, {$document->get('category_srl')}, 'category')"|cond="$grant->manager && $use_category_update" class="cate" style="color:{$category_list[$document->get('category_srl')]->color}"|cond="$category_list[$document->get('category_srl')]->color!='transparent'"><strong>{$category_list[$document->get('category_srl')]->title}</strong></td>

[ SketchBook5 게시판스킨 - 문하우스 수정버전 1.9.3 에서 확장변수 바로 수정 애드온 모바일에 적용하는 방법}

1. 위의 내용대로 준비 합니다.

2. 게시판설정 > 스킨설정 > 목록 유형을 "거래장형"으로 선택하면 됩니다.

목록형에서도 작동되게끔 수정 - 2022. 03. 21

3. 확장변수 전체를 출력할려면 게시판설정 > 스킨설정 > 웹진형 설정 (*표시 : '모바일(목록)형'과 공통) > "확장변수 출력(*)" 을 출력으로 선택하면 됩니다.

4. 스마트폰에 적용한 화면

5. 스케치북 모바일 스킨 수정방법

/modules/board/skins/sketchbook5_MH/_list_m.html 파일 하단 아래 부분 삭제

빨간색 추가 수정

<li loop="$document_list=>$no,$document" class="select clear">
   
   <div class="rt_area is_tmb" style="text-decoration:none" onclick="location.href='{getUrl('document_srl',$document->document_srl,'listStyle',$listStyle,'cpage','')}';">
       <div cond="$mi->list_m_tmb" class="tmb_wrp">

~ 생략~

삭제한 부분에 추가

~ 생략~
</div>
</div>


<div style="margin-top:10px; line-height:30px">
   <block loop="$list_config=>$key,$val" cond="$val->idx!=-1" >
       <span onclick="showUpdateExtraModal(this, {$document->document_srl}, {$val->idx})"|cond="$grant->manager && in_array($val->eid, array($mi->eid_up1, $mi->eid_up2))" style="margin-right:10px">
           
               {$val->name} : <b>{$document->getExtraValueHTML($val->idx)}</b>
           
           
               {$val->name} : <b>{$document->getExtraValueHTML($val->idx)}</b>
           
       </span>
   </block>
   <span cond="$mi->use_category=='Y' && $document->get('category_srl')" onclick="showUpdateExtraModal(this, {$document->document_srl}, {$document->get('category_srl')}, 'category')"|cond="$grant->manager && $use_category_update">
       <span>분류 : </span><b>{$category_list[$document->get('category_srl')]->title}</b>
   </span>
</div>

p.s SketchBook5 게시판스킨 - 문하우스 수정버전 1.9.3 버전에는 수정부분 기본으로 포함 되어져 있습니다.

• 확장변수 바로 수정 애드온 mh스킨 /addons/ap_extra_update/skins/mh.zip

레이아웃에 언어선택 버턴을 설치하는 방법

2022-01-08T16:15:04+09:00

예전 XE 버전에서는 많은 레이아웃들에 언어를 선택할 수 있는 메뉴들이 있었는데

최근 라이믹스로 넘어오면서 이 기능이 거의 없어져 버렸습니다.

요번에 다국어 사이트 작업을 하면서 꼭 필요한 기능이라서 작업후 방법을 남깁니다.

먼저 사용중인 레이아웃의 layout.html 파일을 열어서

최상단에 아래의 코드들을 적용하면 됩니다.

* 레이아웃스킨/layout.html

<block cond="$li->lang_Use =='Y' && !Mobile::isMobileCheckByAgent()"><include target="language.html" /></block>

*레이아웃스킨/conf/info.xml

<var name="lang_Use" type="select">
   <title xml:lang="ko">★ 상단 언어영역 출력</title>
   <description xml:lang="ko">상단에 언어영역 출력</description>
   <options value="">
       <title xml:lang="ko">출력 안함</title>
   </options>
   <options value="Y">
       <title xml:lang="ko">출력</title>
   </options>
</var>
<var name="lang_Flag" type="select">
   <title xml:lang="ko"> ┖ 언어영역 국기출력</title>
   <description xml:lang="ko">상단에 언어영역에 각 국기 출력</description>
   <options value="">
       <title xml:lang="ko">출력 안함</title>
   </options>
   <options value="Y">
       <title xml:lang="ko">출력</title>
   </options>
</var>
<var name="account_colorset" type="select">
   <title xml:lang="ko"> ┖ 언어영역 컬러셋</title>
   <description xml:lang="ko">원하시는 배경 컬러셋을 선택해주세요.</description>
   <options value="a_white">
       <title xml:lang="ko">흰색바탕</title>
   </options>
   <options value="a_black">
       <title xml:lang="ko">검정바탕</title>
   </options>
</var>

*레이아웃스킨/language.html

<load target="css/account.css" />
<load cond="$li->account_colorset=='a_white'" target="css/a_white.css" />
<load cond="$li->account_colorset=='a_black'" target="css/a_black.css" />

<ul class="account">
   <li class="language">
       
       <em class="{$lang_type}"><span>{$lang_supported[$lang_type]}</span></em>
       <button type="button" class="sLanguage" onclick="jQuery('.language').toggleClass('open'); return false;"><span>Select Language</span></button>
       <ul class="languageList">
           
               <li class="{$key}"><button type="button" onclick="doChangeLangType('{$key}');return false;"><span>{$val} {$lang_type} </span></button></li>
           
       </ul>
   </li>

<a href="#" onclick="doChangeLangType('{$key}');return false;"><img src="img/flag/flag.{$key}.gif" width="20px" height="11px" style="margin-top:-15px"></a>
       
   
</ul>

* 첨부파일안 내용물

a_black.css / a_white.css / account.css 3개의 css파일

국기이미지 img/flag

language.html

Language.zip 첨부파일을 다운 받아서 레이아웃스킨 폴더에 덮어 씌우면 됩니다.

글작성시 특정 확장변수를 관리자만 체크할 수 있게 하는 방법

2022-01-04T13:16:19+09:00

글 작성 시나 수정 시 특정 확장 변수를 관리자만 보이고 수정할 수 있게 하는 방법입니다.

[sketchbook5 게시판을 기준]

/modules/board/skins/sketchbook5/write_form.html 아래 부분을

<table cond="count($extra_keys)" class="et_vars exForm bd_tb">
   <caption><strong><em>*</em></strong> <small>: {$lang->is_required}</small></caption>
   <tr loop="$extra_keys=>$key,$val">
       <th scope="row"><em cond="$val->is_required=='Y'">*</em> {$val->name}</th>
       <td>{$val->getFormHTML()}</td>
   </tr>
</table>

아래와 같이 수정하면 됩니다.

<table cond="count($extra_keys)" class="et_vars exForm bd_tb">
   <caption><strong><em>*</em></strong> <small>: {$lang->is_required}</small></caption>
   <tr loop="$extra_keys=>$key,$val">
       
       
           <th scope="row"><em cond="$val->is_required=='Y'">*</em> {$val->name}</th>
           <td>{$val->getFormHTML()}</td>
       
           
               <th scope="row"><em cond="$val->is_required=='Y'">*</em> {$val->name}</th>
               <td>{$val->getFormHTML()}</td>
           
       
   </tr>
</table>

확장 변수ID를 admin_select로 해야 합니다.

빨간테두리 부분은 글작성시나 수정시 관리자만 보입니다.

[ 다른 간단한 방법 ] - 똑띠님이 남기신 간단한 방법

write_form.html 파일에서 빨간색 부분만 추가하고 _secret 로 끝나는 확장변수 ID를 작성하면 됩니다.

{@$match = preg_match('/_secret$/is', $val->eid)}

<th cond="" scope="row"><em cond="$val->is_required=='Y'">*</em> {$val->name}</th>
<td cond="$val->eid!==$mi->etc_name">{$val->getFormHTML()}</td>

mediafire.com 사이트를 자료 다운로드 링크로 이용하기

2021-11-22T18:27:36+09:00

https://moonhouse.co.kr/xetip/457183

위의 자료를 보면 구글 드라이브의 자료들을 사이트에 링크시키는 방법을 알려드렸는데

오늘은 mediafire.com 사이트에 자료를 올리고 링크시키는 방법을 알려드립니다.

먼저 https://www.mediafire.com 에 접속해서 회원가입을 해야겠죠

"SIGN UP" 버턴 클릭

언어선택을 한국어로 선택

적당한 답변을 작성합니다.

메일로 인증하고 이런거 없습니다.

"계정만들기 및 계속" 버턴 클릭하면 끝입니다.

마음대로 활용할 수 있는 총 10G의 용량이 주어집니다.

그렇게 작은 용량은 아니죠.

"UPLOAD" 버턴을 클릭해서 파일을 올려도 되고 "This foldre is empty" 영역에 파일이나 폴더를 마우스로 드레그해서 갇다 놓아도 됩니다.

70M의 동영상파일을 올려 보았습니다.

업로드속도도 엄청 빠릅니다. 70M 올리는데 한 2~3초 걸립니다.

올린 fax.mp4파일을 클릭하면 다운로드 페이지가 열립니다.

화살표를 클릭하면 자료링크가 복사됩니다.

이 링크를 사이트에 연결해서 다운로드 링크로 사용하면 됩니다.

Rhymix 2.0.15 를 적용하니 게시판 글 작성시 확장변수란 문제 발생

2021-11-05T17:00:41+09:00

Rhymix 2.0.15 를 적용하고 나니 확장변수란에 문제가 생기네요.

확장변수 형식이 "한줄 입력칸(text)"으로 적용시 위의 이미지와 같이 칸의 넓이가 짧게 적용이 되고,

URL, 이메일, 전화변호형식은 css가 적용이 되지를 않습니다.

아마 2.0.15 버전에서 아래부분의 수정이 문제를 일으키는 것 같습니다. https://rhymix.org/news/260

자동 생성되는 확장변수 입력 태그에 rx_ev_checkbox, rx_ev_select 등의 class명을 추가하여 서드파티 자료에서 보다 쉽게 조작할 수 있도록 개선

2.0.15 버전을 적용하고 확장변수란을 올바르게 출력할려면 보드의 css를 위의 수정사항에 맞게 일일이 적용해 주면 되지만 귀찮죠.

쉬운 방법은 2.0.14 버전의 /classes/extravar/Extravar.class.php 파일을 덮어 씌우면 됩니다.

Extravar.class.php 파일을 덮어 씌우지 않고 스케치북 게시판스킨을 수정할려면

/modules/board/skins/sketchbook5_MH/css/board.css 파일안에 /* Extra Form */을 찾아서 아래와 같이 수정하면 됩니다.

/* Extra Form */
.exForm{display:block}
.exForm caption{padding:8px 4px 2px;text-align:left;font-size:13px}
.exForm th,.exForm td{background:#FFF}
.exForm td{padding:6px}
.exForm .bd_btn{vertical-align:top}
.exForm .text,.exForm .email_address {width:100%}
.exForm .tel{width:40px}
.exForm .date{width:120px}
.exForm p{margin:2px 0 0 0;font-size:11px}
.exForm ul{margin:0;padding:0}
.exForm li{display:inline;list-style:none}
.exForm input[type=radio],.exForm input[type=checkbox]{margin:0 4px 0 0;vertical-align:middle}
.exForm li label{margin:0 15px 0 0;vertical-align:middle}

.exForm .rx_ev_url,
.exForm .rx_ev_email,
.exForm .rx_ev_tel1,
.exForm .rx_ev_tel2,
.exForm .rx_ev_tel3,
.exForm .password { height:20px; display:inline-block;margin:0;padding:3px 6px;background:#FAFAFA;border-radius:3px;border:1px solid;border-color:#BBB #DDD #DDD #BBB;*display:inline;*zoom:1}
.exForm .rx_ev_text { width:100% }
.exForm .rx_ev_url { width:98.5% }
.exForm .rx_ev_url:hover,
.exForm .rx_ev_email:hover,
.exForm .rx_ev_tel1:hover,
.exForm .rx_ev_tel2:hover,
.exForm .rx_ev_tel3:hover,
.exForm .password:hover {background-color:#FFF;border-color:#AAA}

라이믹스 게시판스킨 시간대별 댓글 출력 방법

2021-09-05T19:19:49+09:00

SketchBook5 게시판스킨 - 문하우스 수정버전 을 작업하면서

댓글리스트 부분에 날짜 및 시간대별로 설정을 따로 출력하는 방법입니다.

<td cond="$mi->display_regdate!='N'" class="date">{zdate($val->regdate, 'y.m.d')}</td>

위의 코드가 일반적으로 댓글에 날짜를 출력하는 코드입니다.

이 부분을 분별, 시간별, 날짜별로 분류하는 코드입니다.

{@
$x_date = strtotime($val->regdate);
$time_calc = time() - $x_date;
}
<td cond="$mi->display_regdate!='N'" class="date">
   
       <span style="color:red">New <img src="img/new.gif" border="0" title="" alt=""></span>
   
       <span style="color:orange">{floor($time_calc/60).' 분전'}</span>
   
       <span style="color:orange">{floor($time_calc/3660).' 시간전'}</span>
   
       <span style="color:black">하루전</span>
   
       <span style="color:#777">2 일전</span>
   
       {zdate($val->regdate, 'y.m.d')}
   
</td>

Mh Appoint PopUp 위젯을 레이아웃에 적용하는 방법

2021-07-13T15:42:18+09:00

Mh Appoint PopUp 위젯 을 출력하고자 할때 위젯을 직접 입력할 수 있는 위젯페이지에서는 쉽게 팝업위젯을 띄울 수 있으나,

게시판이나 문서페이지등에서는 위젯을 입력하기가 쉽지 않습니다.

해당 레이아웃에 직접 위젯코드를 복사해서 붙여넣기를 하면 되나, 해당 레이아웃 전체에 적용이 되므로 불편합니다.

그럼 해당 레이아웃에 위젯코드를 작성할 수 있는 란을 만드는 방법입니다.

1. 팝업을 출력할 게시판이나 기타페이지에 적용할 레이아웃을 따로 복사본생성으로 만드시는 편이 좋습니다.

2. 해당 레이아웃의 layouts/해당 레이아웃/conf/info.xml 파일을 편집기로 열어서 아래와 같이 추가합니다.

<var name="popup_wg" type="select">
   <title xml:lang="ko">★ 팝업위젯출력</title>
   <description xml:lang="ko">외부팝업위젯(Mh Appoint PopUp 위젯등)의 출력를 결정하세요.</description>
   <options value="">
       <title xml:lang="ko">출력안함</title>
   </options>
   <options value="Y">
       <title xml:lang="ko">출력</title>
   </options>
</var>
<var name="popup_wgc" type="textarea">
   <title xml:lang="ko"> ┖ 팝업위젯 코드</title>
   <description xml:lang="ko">Mh PopUp 위젯등의 코드를 작성</description>
</var>

3. layouts/해당 레이아웃/layout.html 파일을 편집기로 열어서 아무곳에나 아래의 코드를 추가합니다.

<div cond="$layout_info->popup_wg == 'Y'">{$layout_info->popup_wgc}</div>

4. 관리자메뉴 > 고급 > 설치된 위젯 에서 팝업으로 띄울 위젯에서 "코드생성"을 해서 코드를 복사합니다.

5. 해당 레이아웃의 설정에서 코드를 붙여넣기 하면 됩니다.

참고로 팝업을 종료할려면 여러 방법이 있지만 레이아웃 설정에서 팝업위젯츨력의 유무를 선택하시면 편리하며

다음에 팝업을 다시 재개 할려면 팝업위젯코드를 약간식만 손 보면 됩니다.

예로 팝업이 다른 게시글일 경우 document_srl="게시글번호",

board_top="10" board_left="50" popup_width="640" 는 위치와 팝업 크기

close_y="2021" close_m="07" close_day="14" 는 팝업 닫는 날짜 설정

popup_no="n" 추가시는 한페이지에 여러 팝업 출력도 가능합니다.

타임라인 모듈을 이용하여 게시글별로 회원권한 따로 지정하는 방법

2021-07-07T11:04:34+09:00

구매게시판 을 만들다 보니 각 게시글별로 회원권한을 주는 방법이 만만치가 않아서 고심하다가

타임라인모듈 을 이용하여 권한이 다른 게시판을 하나의 게시글로 모아서 구현하는 방법을 선택했습니다.

1. 먼저 회원권한이 다른 게시판을 각각 생성합니다.

한개의 게시판을 생성해서 모든 설정을 맞게 한 다음 "복사" "붙여넣기"로 총 4개의 게시판을 회원권한을 달리해서 생성합니다.

2. 각 게시판의 "분류관리" 에서 분류를 입력

3. 타임라인모듈에서 통합할 게시판을 생성해서 1번에서 만든 4개의 게시판을 불러 모읍니다.

기본 설정에서 "원래 게시판으로 이동"을 "아니오"로 해 주면 정말 한개의 게시판처럼 보입니다.

4. 각각의 게시판에서 글을 작성하면

타임라인 게시판으로 글은 모여지며 각 분류별로 선택도 가능하고 게시글별로 회원권한도 다르게 적용됩니다.

스케치북게시판에 스티커모듈 적용법 (라이믹스2.0 이상 전용)

2021-05-26T23:30:53+09:00

후하니님의 스티커모듈 을 evergreen님이 포크한 버전 을 문하우스에서 조금 수정해서 올립니다.(라이믹스 2.0 이상 전용)

SketchBook5 게시판스킨 - 문하우스 수정버전 Pro ver. 1.8.3 (라이믹스전용)

상기 스케치북을 다운 받아서 설치하고 다운받은 스티커모듈 sticker.zip 을 설치하고

아래와 같이 게시판설정에서 적용하면 끝!

[댓글과 대댓글에 적용]

[모바일에 적용]

• 스티커숍 의 모습입니다. 공지사항은 "모듈설정"에서 "공지사항"에 입력하면 됩니다.

• 스킨설정

• 모듈설정

• 모듈설정에서 기본적으로 출력되는 스티커 등록하는 방법

• 참고로 배경투명한 png파일을 등록시 "이미지 리사이징"을 사용하면 jpg파일로 저장되며 배경투명설정이 사라집니다.

• /modules/sticker/sticker.class.php - 모듈설정 수정파일

• /modules/sticker/tpl/config.html 하단에 40숫자를 변경하시면 최소이미지 설정 가능합니다.

       if(maxPx < 40){
           return alert('이미지 최대 사이즈 값이 너무 작습니다.'), false;
       }

중간생략

       if(image_min_width < 40 || image_min_height < 40){
           return alert('이미지 최소 크기 값이 너무 작습니다.'), false;
       }

• /modules/sticker/sticker.controller.php 228줄 width:120px height:120px는 댓글란에 보여지는 이미지의 크기입니다. 조절하시면 됩니다.

기존 코드로 스티커가 높낮이 가득 채워져 출력 - 원소스 크기가 높낮이 보다 큰 경우

<a href="/?mid=sticker&sticker_srl='.$data->sticker_srl.'" title="'.$data->title.'" style="display:block;background-image:url('.$data->url.');background-size:cover;background-position:50% 50%;width:120px !important;height:120px !important;border-radius:3px;" alt="'.$file_name.'"></a>

스티커가 원소스 사이즈로 출력 - 원소스 크기가 높낮이 보다 작은 경우

<a href="/?mid=sticker&sticker_srl='.$data->sticker_srl.'" title="'.$data->title.'" style="display:block;background-image:url('.$data->url.');background-repeat:no-repeat;background-position:0 50%;min-width:200px !important;min-height:120px !important;border-radius:3px;" alt="'.$file_name.'"></a>

• 댓글위젯 수정방법 https://xetown.com/questions/494632#comment_494707

{@ $length = mb_strlen(trim(preg_replace('/\s+/', ' ', strip_tags($item->getTitle()))), 'UTF-8'); $sticker = 'sticker'; $pos = strpos($item->getTitle(), $sticker);}

<a href="{$item->getLink()}" target="_blank"|cond="$widget_info->new_window">스티커 댓글입니다.{$item->getTitle($widget_info->subject_cut_size)}{$lang->no_text_comment}</a>

• 모바일에 적용 팁[기븐님]

https://xetown.com/topics/494430

• /modules/sticker/sticker.model.php 47줄
$list_count = 9999; 으로 지정시 - 보유한 스티커 전체 출력 sticker.js.zip
$list_count = Mobile::isMobileCheckByAgent() ? 10 : 10; 으로 지정시 - 앞부분은 모바일, 뒷부분은 웹에서 보여지는 스티커 숫자

위의 설정에 따라 스티커창 좌우 화살표 유무를 sticker.js에서 편집해 주면 됩니다.
내려받은 두 프로그램 그대로 설치시 15개 스티커창 까지 지원합니다.
그 이상은 스티커 전체 출력이나 숫자들을 잘 조절하시면 됩니다.

• /modules/board/skins/sketchbook5_MH/js/sticker.js - 위의 설정에 따라 수정

54줄
//blank
for(i=1-sticker_length; i>0; i--){
html += '<li class="sticker_icon srl">';
html += '</li>';
}
• i=1 부분이 기본으로 보여지는 스티커 빈창 숫자 - 모바일 때문에 1으로 지정

64줄
html += '<a href="javascript:;" onclick="'+(sticker_length < 8 ? 'alert(\'마지막 페이지입니다.\')'
• +(sticker_length < 8 - 숫자부분을 적절히 조절

• /modules/board/skins/sketchbook5_MH/css/sticker.css

- 스티커입력창 부분들 스케치북 디자인으로 수정

.stk_display { padding:0; min-height:200px; width:100%; margin:15px auto 0 auto; line-height:0; background:#FCFCFC; border:1px solid #DDD; border-bottom-color:#CCC; border-radius:8px; box-shadow:0 1px 3px -1px rgba(0,0,0,.1); *zoom:1}

.srl { margin:5px; padding:5px; border:1px solid #DDD; border-bottom-color:#CCC; border-radius:8px; box-shadow:0 1px 3px -1px rgba(0,0,0,.1); *zoom:1 }

• /modules/sticker/sticker.view.php 53줄

$args->list_count = 16; /// - 스티커 구매페이지에 보이는 스티커메뉴 수
$args->page_count = 10; /// - 스티커 구매페이지에 보이는 페이지의 수

• 헤드, 바디부분 아이콘들 중앙정렬

확장변수 "내용 복사" 버턴 적용하기

2021-04-30T20:29:15+09:00

XETOWN에 질문글 이 올라와서 구현해 보았습니다.

'한 줄 입력칸' 확장 변수 사용중입니다.

입력칸에 내용을 넣었을 경우 해당 내용은 보이지 않고 대신 '내용 복사' 버튼만 출력되게 수정하려고 합니다.

어떻게 수정하면 좋을까요?

스케치북게시판을 샘플로 작성합니다.

/modules/board/skins/sketchbook5_MH/_read.html 파일을 엽니다.

<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!=='copy'">{$val->getValueHTML()}</td>


<td cond="$val->eid=='copy'">
{$val->getValueHTML()} <a href="#" onclick="ExtLink(); return false;"><span class="sbtn_mini sbtn-dark" style="margin-left:10px">내용복사</span><input type="text" value="{$val->getValueHTML()}" id="extcopy" readonly style="position:absolute; top:-100px; width:1px; padding:0px; border:0px; display:inline-block;" /></a></td>
<script>
   function ExtLink(){
       var copyText = document.getElementById("extcopy");
       copyText.select();
       copyText.setSelectionRange(0, 99999)
       document.execCommand("copy");
       alert("확장변수 내용이 클립보드에 복사되었습니다.");
   }
</script>

       <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>

빨간색코드를 작성후 저장합니다.

해당게시판의 설정 > 확장변수 > 확장 변수 ID 를 "copy"로 하는 "한줄 입력칸(text)"을 만듭니다.

파란색 {$val->getValueHTML()} 부분은 확장변수가 출력되는 부분입니다. 필요 없어면 생략해도 됨

녹색 sbtn_mini sbtn-dark 부분은 Web Fonts 애드온 의 Sexy Button을 적용한 것입니다.

게시글주소 클립보드 복사 기능 만들기

2021-04-14T11:02:09+09:00

게시글주소를 클릭시 자동으로 클립보드로 복사되는 기능을 설명합니다.

코드는 여기 저기서 가져 와서 특별하게 어디서 가져 왔다고 하기는 애매합니다만,

XNS님의 SNS 공유버튼 삽입 애드온 에서 포인트를 가져 왔습니다.

.스케치북 기준

.이 코드는 js 파일이 필요 없습니다.

1. 게시글주소 가져 오는 방법

/modules/board/skins/sketchbook5/_read.html 파일안에 적당한 위치를 잡아서

<button class="btn"><a href="#" onclick="copyItemLink(); return false;">게시물 주소복사<input type="text" value="{$oDocument->getPermanentUrl()}" id="address" readonly style="position:absolute; top:-100px; width:1px; padding:0px; border:0px; display:inline-block;" /></a></button>

이상과 같이 빨강색 & 파랑색 코드만 변경해서 적용하면 됩니다.

SketchBook5 게시판스킨 - 문하우스 수정버전에 "Book Gallery 형태" 유형 추가

2021-02-08T12:36:47+09:00

SketchBook5 게시판스킨 - 문하우스 수정버전

https://moonhouse.co.kr/xemy/530374

Book Gallery 형태를 추가했습니다.

특수한 경우만 사용 하겠지만 응용하기에 따라 "판매게시판" 형태로도 활용이 가능합니다.

1. 확장변수를 이용해야 합니다.

- 신상(new), 품절(soldout), 베스트셀러(best), 평가 부분(rating)은 위와 같이 필히 작성하셔야 정상 작동합니다.

2. 게시판 설정 부분

a. "목록 유형"을 "Book 갤러리형"으로 선택

b. "(Book)갤러리 형 (*표시 : '클라우드 갤러리'와 공통)"

- 1번 : 썸네일의 가로 세로 크기를 150*220 크기 설정으로 맞추어 주면 보기가 적합

- 2번 : 썸네일 넓이를 적당히 조정 300이 적당 - 간격은 이리 저리 바꾸어 보면 어떻게 변하는지 감이옵니다.

- 3번 : "데코레이션"을 "테이프 스타일"로 지정 - 만약 "데코레이션 이미지"를 파일로 Up시 이미지의 세로, 가로크기를 아래에 기재

[Sample] https://moonhouse.co.kr/youtube

위의 이미지의 경우 가로 250, 세로 255 입니다. 아래와 같이 출력됩니다. - 썸네일 넓이는 적당히 조절하면 됩니다.

- "좌측상단 리본"에서 "새 글 > 업데이트 > 날짜"선택시 새 글만 리본 형태로 출력됩니다

새 글의 기한은 "목록 공통 설정"에 "새 글 표시 시간"으로 정해 집니다.(기본 12시간)

- 그리고 새 글은 확장변수에서 "신상 > Y"를 선택해도 유지 됩니다. 단 이경우는 날짜 기한이 없습니다.

3. New, Sold out, Best Seller 확장변수 선택시 리본형태로 출력됩니다.

4. 평가(rating)및 기타 항목

- 게시판 설정 > 게시판 정보 > 목록 설정 > 표시 항목 및 순서대로 출력됩니다.

- 마우스 오버시 썸네일 위에 출력됩니다.

공통설정에서 "별점 기능 사용"을 사용으로 해줘야 적용됩니다.

아니면 _list_book_gallery.html 파일에 124줄과 129줄을 삭제하면 됩니다.

124줄 - <block cond="$mi->zine_extra || $mi->rating_output == 'Y'">
~ 안의 내용은 삭제하면 안됨 ~
129줄 - </block>

# 위젯도 만들었어요 🤗~

- Book Skin 위젯 : http://moonhouse.co.kr/xemy/530666

라이믹스 2.0.6 에 추가된 "메뉴 아이콘" 사용방법

2021-02-05T11:56:14+09:00

라이믹스 2.1.15 버전에서 "메뉴 아이콘" 사용방법

라이믹스가 2.0.6 버전으로 Release되면서 메뉴에 추가되는 아이콘을 사용할 수 있게 되었습니다.

예전에는 메뉴이름에 코드를 같이 넣거나, 몌뉴설명을 가져오는 방법을 사용했는데 편해졌습니다.

근데 이것을 적용하는 방법이 잘 나와 있지를 않습니다.

"아이콘 코드를 어떻게 해석하는지는 레이아웃에 따라 다를 수 있습니다." 이 문구만 설정칸 아래에 보입니다.

[적용방법]

1. 자신이 사용하고 있는 레이아웃을 수정해야 합니다 - xedition 레이아웃을 예로 듭니다

./layouts/xedition/layout.html 파일을 열어서 메뉴부분을 찾습니다. 270줄 부터 ~

<ul>
   <li loop="$GNB->list => $key1, $val1">
       <a href="{$val1['href']}" target="_blank"|cond="$val1['open_window'] == 'Y'">{$val1['link']}</a>
       <block cond="$val1['selected']">{@ $_selected_menu = $val1}</block>
       <ul cond="$val1['list']" class="depth2">
           <li loop="$val1['list'] => $key2, $val2" class="more"|cond="$val2['list']">
               <a href="{$val2['href']}" target="_blank"|cond="$val2['open_window'] == 'Y'">{$val2['link']}</a>
               <ul cond="$val2['list']" class="depth3">
                   <li loop="$val2['list'] => $key3, $val3">
                       <a href="{$val3['href']}" target="_blank"|cond="$val3['open_window'] == 'Y'">{$val3['link']}</a>
                   </li>
               </ul>
           </li>
       </ul>
   </li>
</ul>

{$val1['link']} 이 부분이 메뉴명을 나타내는 코드입니다.

{$val1['icon']} {$val1['link']}

위와 같이 하늘색 부분을 추가해 주면 됩니다.

2. 관리자페이지 > 사이트 메뉴 편집 > 메뉴수정 에서 "메뉴 아이콘"에 아이콘 코드를 입력하면 됩니다.

a. 위의 이미지와 같이 폰트어썸을 사용하셔도 되고, Xeicon등을 사용하시면 됩니다.

b. 이미지를 넣을 수도 있습니다. <img src="./img/1.png" alt="" />

c. 특수문자나 마크등을 넣을 수도 있습니다.

3. 근데 약간 더 나아가서

{$val1['icon']} {$val1['link']} 이부분에 class=""를 주고 style을 주는 방법입니다.

레이아웃의 사항에 맞게 style을 수정하시면 더욱 보기 좋은 아이콘이 출력되겠죠

그룹별로 위젯 노출 유무 적용하기

2021-02-04T15:26:43+09:00

위젯을 만들다 보면 회원그룹별로 위젯 노출을 선택해야 하는 경우가 생깁니다.

그런 경우 그룹별로 변수를 주어서 그룹을 칸에 작성하는 방법으로 적용 했었는데

그룹의 이름을 알아야 하고 그룹이 많은 경우 불편했습니다.

[위젯샘플명을 mh_widget 이라고 가정하고 진행]

1. widgets/mh_widget/mh_widget.class.php 파일을 열어서 적당한 위치에 아래 코드를 붙여 넣기 합니다.

//회원그룹 권한 확인
if(Context::get('is_logged'))
{
$logged_info = Context::get('logged_info');

   if(!$args->group_srls)
   {
       $widget_info->permission = true;
   }
   else
   {
       $widget_info->permission = false;
       $group_array = explode (',', $args->group_srls);
       foreach($logged_info->group_list as $key => $value)
       {
           if(in_array($key, $group_array))
           {
               $widget_info->permission = true;
               break;
           }
       }
   }
}

2. widgets/mh_widget/conf/info.xml 파일을 열어서 적당한 위치에 아래 코드를 붙여 넣기 합니다.

<var id="select_view">
   <type>select</type>
   <name xml:lang="ko">Group지정별 표시</name>
   <description xml:lang="ko">Group을 지정해서 위젯의 노출을 나타냅니다.</description>
   <options>
       <value></value>
       <name xml:lang="ko">Group지정안함(기본)</name>
   </options>
   <options>
       <value>Y</value>
       <name xml:lang="ko">Group지정사용</name>
   </options>
</var>
<var id="group_srls">
   <type>member_group</type>
   <name xml:lang="ko"> ┖ Group지정사용시 선택한 그룹만 노출</name>
   <description xml:lang="ko">선택한 그룹의 사용자에게만 노출 됩니다. (선택하지 않으면 모든 그룹 노출 가능)</description>
</var>
<var id="point_p">
   <type>text</type>
   <name xml:lang="ko"> ┖ Group지정안함시 포인트로 노출설정</name>
   <description xml:lang="ko">Group지정하지 않고 지정한 포인트이상에서만 위젯이 노출됩니다.(기본 0)</description>
</var>
<var id="level_p">
   <type>text</type>
   <name xml:lang="ko"> ┖ Group지정안함시 레벨로 노출설정</name>
   <description xml:lang="ko">Group지정하지 않고 지정한 레벨이상에서만 위젯이 노출됩니다.(기본 0)</description>
</var>

3. widgets/mh_widget/skins/mh_skin/list.html 파일을 열어서

위젯내용 코드
        
    

    
    {@ $oPointModel = &getModel('point'); $point = $oPointModel->getPoint($logged_info->member_srl); $oModuleModel = &getModel('module'); $config = $oModuleModel->getModuleConfig('point'); $level = $oPointModel->getLevel($point, $config->level_step); }
    
        위젯내용 코드

원래의 "위젯내용 코드"를 위와 같이 감싸주면 됩니다.

"Group지정안함"으로 선택하면 모든이에게 노출 되고, Group지정안함시 "포인트" "레벨"로도 노출이 가능합니다.

"Group지정사용"으로 선택하고 아래에 있는 그룹들을 지정하면 선택된 그룹에게만 노출됩니다.

그룹을 선택하지 않으면 로그인한 모든 그룹에게 노출됩니다.

라이믹스 2.0 통합게시판 기능에 게시판명 출력 방법

2020-12-22T11:55:06+09:00

라이믹스가 2.0 으로 버전업 되면서 새로 생긴 기능중에 "통합 게시판"설정이 추가 되었습니다.

게시글들을 모아서 출력해주는 "타임라인 모듈"과 비슷한 기능입니다.

그런데 여기서도 게시판명이 출력 되지 않습니다.

타임라인 모듈의 경우는 "타임라인모듈 사용시 게시판명 나오게 수정하기" 에 팁이 있습니다.

[라이믹스 자체적인 통합게시판에 게시판명 나오게 하는 방법]

이 방법도 모듈을 수정하는 것이 아니라 통합게시판으로 사용할 게시판의 스킨을 수정해 주어야 합니다.

게시판스킨은 sketchbook5스킨의 목록형입니다.

이런 경우는 modules/board/skins/sketchbook5/_list_normal.html 을 아래와 같이 수정해 주시면 됩니다.

테이블 헤더에서 아래내용을 찾아 빨간부분 추가

<block cond="$val->type=='title' && $val->idx==-1">
<th scope="col" cond="$timeline_info"><span>{$lang->board}</span></th>
<th scope="col" cond="$module_info->include_modules"><span>{$lang->board}</span></th>
<th scope="col" cond="!$mi->show_cate && $mi->use_category=='Y'" class="m_no"><span>{$lang->category}</span></th>
<th scope="col" class="title"><span><a href="{getUrl('sort_index','title','order_type',$order_type)}">{$lang->title}{$lang->link_site}<i cond="$sort_index=='title'" class="arrow {$order_icon}"></i></a></span></th>
</block>

공지목록과 일반목록에서 아래내용을 찾아 빨간부분 추가

<block cond="$val->type=='title' && $val->idx==-1">
<td class="mid" cond="$timeline_info"><a href="{getUrl('module_srl', $document->get('module_srl'))}"><strong>{htmlspecialchars($modules_info[$document->get('module_srl')]->browser_title)}</strong></a></td>
<td cond="$module_info->include_modules"><td cond="$module_info->include_modules"><a href="{$document->get('mid')}"><strong>{$document->get('module_title')}</strong></a></td></td>
<td cond="!$mi->show_cate && $mi->use_category=='Y'" class="cate" style="color:{$category_list[$document->get('category_srl')]->color}"|cond="$category_list[$document->get('category_srl')]->color!='transparent'"><strong>{$category_list[$document->get('category_srl')]->title}</strong></td>
<td class="title">
~~ 내용 생략 ~~
</td>
</block>

간단히 설명하자면

cond="$module_info->include_modules" 이 부분이 통합게시판 기능을 사용하면

{$document->get('module_title')} 게시판명을 출력 하라는 뜻입니다.

Rhymix 2.0 UP 후기

2020-12-19T15:50:31+09:00

rhymix_version : 2.0.0

php : 7.0.33 (64-bit)

server : Apache

os : Linux 3.10.0-1127.el7.x86_64

호스팅환경입니다.

오늘 라이믹스를 2.0으로 업데이트 했습니다.

XE 사용시에는 코어를 약간씩 손 보면서 사용하다가, 라이믹스로 넘어 오면서 코어는 건더리지 않고 운영해 왔습니다.

업데이트하고 나서 "대쉬보드"에서 모듈들 업데이트 버턴들 눌러주고 "캐시파일 재생성" 누르고 홈피 접속하니 "서버오류" 팝업창이 딱 뜨네요.

내용을 보니 menu에 문제가 있어서 에러난 코드를 보니 "메뉴 새글 표시"(menunew)모듈에서 에러를 출력해서 일단 menunew모듈을 삭제하고 "캐시파일 재생성"하니 정상적으로 홈피 접속됩니다.

이리저리 둘러보고 설정들을 만져 보니 제가 생각했던 것 보단 표면상으로는 큰 변화는 없는 것 같습니다.

내면적으로는 엄청난 변화가 있었겠죠~

그리고 타임라인 모듈의 통합게시판 기능이 문제가 있다고 들었는데,

저 같은 경우는 그냥 단순하게 글만 모아서 봐서인지 별 문제를 일으키지 않네요.

https://moonhouse.co.kr/total

한가지 문제는 "설치된 모듈"에서 "게시판"부분입니다.

위와 같이 출력되어서 업데이트를 해버리면 문제를 일으킵니다.

"게시판설정" - "추가설정"에 가면 2.0으로 업 되면서 바뀐부분이 아래 이미지에서 보이듯 "통합게시판"부분이 추가되었는데

업데이트를 해 버리면 이 부분이 사라집니다.

그리고 "사이트 기본 스킨 사용"으로 적용된 게시판들이 "XE Default"로 변경되어 버립니다.

만약 업데이트를 했는 경우는 오리지날 코어의 modules\board 를 다시 업로드 하시고

ftp로 접속해서 files/cache 폴더를 삭제하고 "캐시파일 재생성"하고 나면

"설치된 모듈"에서 "게시판"부분이 "업데이트 하시겠습니까?"라는 문구가 나오면 정상으로 돌아갑니다.

지금까지 발견한 부분은 이 정도입니다.

제가 스티커모듈은 사용을 하지 않아서 잘 모르겠고, 다른 부분은 별 문제가 없네요

[문제해결 방법]

1. "메뉴 새글 표시"(menunew)모듈 사용가능

menu.admin.controller.phps

파일을 내려 받아서 phps를 php로 바꾸고 /modules/menu/ 방안에 덮어 씌우기 하세요.

2. "소셜 XE 로그인"(socialxe)모듈 로그인 오류

/modules/socialxe/conf/module.xml 파일을 아래 파일로 교체

module.xml

3. 아래 모듈들 업데이트 하지 마세요.

게시판 본문의 분류 제목을 출력할 때 상위 카테고리의 제목도 같이 출력하기

2020-11-30T11:52:26+09:00

그냥 저냥 소소한 팁입니다.

카테고리가 계층형 구조를 이루고 있을 때, 게시판 문서가 (상위의 1차 카테고리가 아니라) 하위 카테고리에 소속되어 있을 때가 있죠.

아래 그림 같은 구조를 연상하시면 됩니다ㅎㅎ

이때 게시판 본문에서 게시물의 분류를 표현하고 싶을 수 있습니다.

이를테면 스케치북 게시판에서 본문의 제목을 '블로그 스타일'로 출력할 때가 그렇죠.

해당 문서의 분류가 '노트'로 되어 있다고 쳐볼게요.

그러면 해당 카테고리뿐 아니라 상위 카테고리(이 경우엔 '장르'겠죠?)도 출력하고 싶을 때가 있지 않겠어요?(아님 말구요ㅋ)

그런 고로 이번 글은 게시판 본문에서 분류제목을 출력할 때 해당 카테고리뿐 아니라 상위 카테고리도 함께 출력해주는, 필수는 아니지만 어쩌면 도움이 될 수도 있는 팁입니다.

요렇게요.

게시판 본문에서 분류의 출력은 보통 이렇게 합니다.

{$category_list[$oDocument->get('category_srl')]->title}

쉽게 설명하자면, 카테고리 목록($category_list)에서 게시물의 분류 번호($oDocument->get('category_srl'))를 인덱스로 해서 분류를 뽑아낸 뒤 그 제목(title)을 뽑아오는 거죠.

여기서 {$category_list[$oDocument->get('category_srl')]->depth} 그리고 {$category_list[$oDocument->get('category_srl')]->parent_srl} 등을 출력해보면 알 수 있는데요,

전체 카테고리 계층 구조에서 해당 분류의 심도(depth), 그리고 해당 분류가 2차 분류 이상일 때(즉, depth가 1 이상일 때) 부모 분류의 카테고리 번호(parent_srl)를 확인할 수 있습니다.

그렇다면, 해당 게시물의 분류뿐 아니라 보다 상위의 카테고리 제목을 출력하는 것도 가능하다는 사실을 알 수 있을 겁니다.

바로 이렇게 하는 거죠.

{$category_list[$category_list[$oDocument->get('category_srl')]->parent_srl]->title}

굵은 글씨는 문서의 '상위' 카테고리 번호입니다.

해당 문서가 2차 카테고리로 지정되어 있다면, 이 카테고리가 소속되어 있는 1차 카테고리의 고유 번호에 해당하는 셈입니다.

굵은 글씨는 $oDocument->get('category_srl') 대신 들어간 거죠.

즉, 문서의 분류번호를 가지고 title을 출력하는 게 아니라, 상위의 분류번호를 가지고 title을 가져온 겁니다.

참말로 소소한 팁이죠? ㅎㅎ

암튼, 이 점에 착안해서 스킨의 본문 출력 파일 적당한 곳에서 활용하시면 될 겁니다~

[문하우스 Tip]

sketchbook게시판의 _read.html에서 아래와 같이 수정하면 상위분류도 출력되고 링크도 연결됩니다.

<div cond="!$mi->rd_style" class="board clear {$mi->rd_board_style}" style="{$mi->rd_css};">
<div class="top_area {$mi->rd_tl_font}" style="{$mi->rd_tl_css};">
<strong cond="!$mi->rd_cate && $mi->use_category=='Y' && $oDocument->get('category_srl')" class="cate fl" title="Category"><a href="{getUrl('category',$category_list[$oDocument->get('category_srl')]->parent_srl, 'document_srl', '')}">{$category_list[$category_list[$oDocument->get('category_srl')]->parent_srl]->title}</a><span cond="$category_list[$category_list[$oDocument->get('category_srl')]->parent_srl]->title"> > </span><a href="{getUrl('category',$oDocument->get('category_srl'), 'document_srl', '')}" >{$category_list[$oDocument->get('category_srl')]->title}</a></strong>

노토 산스 (Noto Sans) 적용해보기 - 구글, 어도비에서 개발한 가독성 좋은 폰트

2020-11-01T12:59:49+09:00

가독성이 좋은 폰트 노토 산스 (Noto Sans)를 홈페이지에 적용하는 방법에 대해 알아 보겠습니다.

전체적인 폰트 제작은 구글에서 진행하였고 어도비는 본고딕이란 명칭으로 배포하고 있습니다.

그리고. 노토 산스 (Noto Sans CJK KR)은 산돌커뮤니케이션에서 제작되었습니다.

노토 산스 한글을 사용하시려면 KR 버전(Noto Sans CJK KR)을 받으셔야 한글이 적용됩니다.

https://fonts.google.com/noto/specimen/Noto+Sans+KR

Thin, Lignt, DemiLignt, egular, Medium, Bold, Black 총 6가지 폰트 굵기로 구성되어져 있습니다.

[외부링크로 적용방법]

적용하고자하는 레이아웃이나 프로그램의 css파일을 불러와서 상단에 아래의 코드를 적용하시면 됩니다.

@import url(https://fonts.googleapis.com/earlyaccess/notosanskr.css);

font-family: 'Noto Sans KR', sans-serif;

a, abbr, acronym, address, applet, article, aside, audio,b, blockquote, big, body,center, canvas, caption, cite, code, command,datalist, dd, del, details, dfn, dl, div, dt, em, embed,fieldset, figcaption, figure, font, footer, form, header, hgroup, html,i, iframe, img, ins,kbd, keygen,label, legend, meter,nav,object, ol, output,p, pre, progress,q, s, samp, section, small, span, source, strike, strong, sub, sup,table, tbody, tfoot, thead, th, tr, tdvideo, tt,u, ul, var, li
{ font-family: "Noto Sans Korean", "Open Sans", "malgun gothic", "Nanum Gothic", dotum, arial, sans-serif; font-size:14px; font-weight:400; }

font-size:14px; font-weight:400; 은 적당한 크기로 바꾸어 주시면 됩니다.

위젯 메이커시 게시글안의 전체 이미지를 썸네일로 출력하는 방법

2020-09-15T11:34:52+09:00

이미지출력을 주로 하는 위젯들은 게시글의 대표 이미지만 썸네일로 생성됩니다.

근데 엑스엔님의 위젯을 들여다 보니 게시글에 올린 전체 이미지들을 위젯에 출력하는 방법이 있더군요.

엑스엔님의 허락을 받지는 않았지만 일부의 소스만 가져 오는 것이니 별 문제는 없을 듯하네요!!!(나 만의 생각^.^)

Mh All Pictures 위젯 V1.0 예로 들어서 설명합니다.

► /widgets/mh_all_pictures/mh_all_pictures.class.php

function proc($args) {

$oModuleModel = &getModel('module');
$oDocumentModel = &getModel('document');
Context::set('oModuleModel',$oModuleModel);
Context::set('oDocumentModel',$oDocumentModel);

-- 중략 --

Context::set('widget_info', $widget_info);
Context::set('gallery_list',$output->data);

빨간색 부분들을 추가합니다.

►/widgets/mh_all_pictures/skins/default/list.html

<div class="mh_apbox">
   
       {@ $oDocument = $oDocumentModel->getDocument($val->document_srl)}
       {@ $uploaded_images = array()}

{@ $filename = strtolower($val->uploaded_filename)}
               
                   {@ $uploaded_images[] = $val->uploaded_filename}

-- 중략 --

<div class="apbox" style="max-height:{$wi->of_h}px; overflow:auto">

<img src="{$f_val}" style="width:{$wi->thumbnail_width}px; height:{$wi->thumbnail_height}px;" alt="" />

-- 중략 --

</div>

파란색 부분들이 모든 이미지를 썸네일로 출력하는 코드인데요.

위젯따라 약간씩은 변형을 해야 됩니다.

그리고 img 링크에 {$f_val} 이 부분이 중요합니다.

[단점]

썸네일들이 원본을 축소해서 보여 주는 방법이라 위젯에서도 트래픽이 원본의 사이즈대로 나옵니다.

특별한 경우가 아니면 사용을 자재하는 것이 좋을 듯 합니다.

스케치북 게시판에 카카오지도 출력 V1.2

2020-04-25T01:05:42+09:00

이온디님의 [EOND] Georo2 - 카카오지도 기반 게시판스킨 을 참고하였고,

마트몬님의 https://xetown.com/questions/1382778 글도 참고 하였습니다.

기존의 스케치북게시판에 적용하는 방법입니다.

원래 이온디님의 게시판도 스케치북을 기반으로 만들어졌더군요 따로 게시판을 두기 싫어서 기존의 스킨에 적용해 봅니다.

[ V 1.2 특징 ]
1. 주소가 없는 위치(바다 or 강 or 외국)를 클릭시 좌표로 입력되며 위치명이 Info 에 출력

- 주소가 없는 위치의 경우는 List 상단에 출력되는 전체출력 Map 에는 나타나지 않습니다.

2. 모바일로 글 작성시는 현재위치의 좌표가 자동으로 찍힙니다.

- PC의 경우는 현재위치가 정확하지 않으므로 좌표가 자동으로 찍히지 않습니다.

[ V 1.1 특징 ]
1. 지도 클릭으로 위치 생성시 좌표로 입력되던 방법을 주소입력으로 수정
- List 상단에 출력되는 전체출력 Map 에 마크 표시 가능
- "사용자 정의 이름" "addess" 의 형식을 "한국 주소"에서 "한줄 입력칸"으로 부득이 수정(약간은 불편)
- "위치명"을 작성하지 않으면 "상세주소"로 대치
- Info 판넬안에 "우편번호" 대신 "전화번호"로 변경 ("사용자 정의 이름" "tel" 생성한후 형식을 "전화번호 형식")

1. 기존의 스케치북 스킨에도 설정에 가면 "카카오톡 앱키 입력"칸이 있습니다.

이곳에 카카오톡 "Javascript 키"를 입력하셔야 합니다.

[ https://developers.kakao.com 에 접속해서 발급 ]

[ 스케치북 모바일설정 ]

2. 지도에 필요한 앱키 설정을 합니다.

3개의 파일에 모두 작성하는게 싫어서 __setting.html 아래에 넣었습니다.

<script type="text/javascript" src="//dapi.kakao.com/v2/maps/sdk.js?appkey={$mi->kakao_key}&libraries=services,clusterer"></script>

3. skin.xml 에 설정을 등록합니다.

<group>
<title xml:lang="ko">본문 Map 출력</title>
   <var name="extra_map" type="radio">
       <title xml:lang="ko">Map 출력</title>
       <description xml:lang="ko">사용자정의 이름 shop, address 등으로 한줄입력칸으로 등록 / 목록, 웹진, 거래장형에만 적용</description>
       <options value="">
           <title xml:lang="ko">출력 않음(기본)</title>
       </options>
       <options value="Y">
           <title xml:lang="ko">출력</title>
       </options>
   </var>
   <var name="list_map" type="select">
       <title xml:lang="ko">리스트상단에 Map 출력</title>
       <description xml:lang="ko">리스트 상단에 지도 출력</description>
       <options value="">
           <title xml:lang="ko">출력</title>
       </options>
       <options value="N">
           <title xml:lang="ko">출력 않음</title>
       </options>
   </var>
   <var name="extra_img_title" type="text">
       <title xml:lang="ko">이미지출력칸 제목</title>
       <description xml:lang="ko">미기재시 이미지출력칸 출력안함 (Ex : 업종사진)</description>
   </var>
   <var name="shop_name_title" type="text">
       <title xml:lang="ko">상호출력칸 제목</title>
       <description xml:lang="ko">미기재시 상호출력칸 출력안함 (Ex : 업종명)</description>
   </var>
   <var name="shop_name_e" type="text">
       <title xml:lang="ko">상호출력칸 확장변수 No</title>
       <description xml:lang="ko">(기본 1)</description>
   </var>
   <var name="getAdd" type="text">
       <title xml:lang="ko">주소 확장변수 No</title>
       <description xml:lang="ko">(기본 2)</description>
   </var>
   <var name="getLat" type="text">
       <title xml:lang="ko">위도 확장변수 No</title>
       <description xml:lang="ko">(기본 7)</description>
   </var>
   <var name="getLng" type="text">
       <title xml:lang="ko">경도 확장변수 No</title>
       <description xml:lang="ko">(기본 8)</description>
   </var>
   <var name="getLevel" type="text">
       <title xml:lang="ko">레벨 확장변수 No</title>
       <description xml:lang="ko">(기본 9)</description>
   </var>
</group>

4. write_form.html 파일에 추가

<include cond="$mi->extra_map =='Y'" target="write_map.html" />

<div class="editor">{$oDocument->getEditor()}</div>

5. _read.html 파일에 추가

<block cond="!$mi->extravar_print">
   <table cond="!$mi->et_var && $oDocument->isExtraVarsExists() && (!$oDocument->isSecret() || $oDocument->isGranted())" class="et_vars bd_tb cont">
       <caption class="blind">Extra Form</caption>
       ~~ 중략 ~~
   </table>
</block>

<include cond="$mi->extra_map =='Y'" target="_read_map.html" />

6. list.html 파일에 추가

<include cond="$mi->default_style=='viewer' && $grant->view" target="_viewer.html" />
<block cond="$mi->default_style!='viewer'">
<load target="js/jquery.masonry.min.js" type="body" />

<include cond="$mi->extra_map =='Y'" target="map.html" />

7. Map 1.2.zip 압축파일을 내려 받아 압축을 풀어서

kmap.css - css폴더에

eond.js - js폴더에

_read_map.html / map.html / write_map.html - 스케치북 폴더에

img폴더 이미지 - img폴더에

각각 업로드 합니다.

8. 게시판설정에서 "사용자 정의"를 추가합니다.

"사용자 정의 이름"은 동일하게 작성하여야 작동합니다.

9. "스킨 관리"에서 설정

10. 글 작성시 주소 직접 입력시 지도 클릭은 하지 마세요. 둘 다 선택시 [주소 칸 입력]이 우선합니다.

위치명 입력하지 않으면 상세주소로 대치됩니다.

- 주소 검색으로 지도에 표시

상호, 마크, 주소, 전화번호, 마크 클릭시 홈피 바로가기, 큰지도 보기, 업종으로 검색도 가능

- 지도 클릭으로 표시

등록하고 싶은 위치를 클릭하면 주소, 위도, 경도, 레벨이 자동으로 지도 상단의 칸에 자동으로 입력됩니다.

이 경우 위도,경도는 출력에 필요가 없지만 아래의 경우를 위해서 그냥 둡니다.

- 주소가 존재하지 않는 지도 클릭

(Ex : 바다, 강)

등록하고 싶은 위치를 클릭하면 위도, 경도, 레벨이 자동으로 지도 상단의 칸에 자동으로 입력됩니다.

~~그러나 Info판넬은 생성되지 않습니다.(차후 보완 예정이나 잘 될지~)~~

10. 글 목록상단에 전체 리스트 출력

- 스케치북 게시판 검색 기능을 사용가능합니다.

- 검색된 상호를 클릭시 본문이 츨력됩니다.

- 주소가 존재하지 않는 리스트는 출력되지 않습니다.

p.s 이온디님의 자료는 "재배포 금지"인데 이렇게 수정해서 팁으로 남겨도 될지 모르겠네요...

근데 제가 다음에 사용시 사용법을 잊어 버리지 않으려고 작성해 봅니다.

혹시 문제가 된다면 내리겠습니다.

그리고 마트몬님의 질문에 대한 정확한 답변은 되지를 못했지만 ~~수동으로는 구현했습니다.^.^~~

~~어떻게 하면 자동으로 위도, 경도에 들어갈 수 있을까... 으! 하수의 비애ㅠㅠ~~

p.s 1. 마트몬님의 가르침이 있어서 자동으로 위도, 경도, 레벨 자동으로 추가하는 방법 적용했습니다.

마트몬님 감사합니다^.^

p.s 2. 이 팁 적용하면서 카카오지도에 대해서 많이 배웠습니다.

근데 며칠 팠더니 힘드네요~ 휴

LightBox 출력시 하이퍼링크 적용하기

2020-04-14T20:45:39+09:00

위젯에서 썸네일 클릭시 LightBox로 출력되게 하는 경우

게시판으로 바로 접속하게하는 기능을 추가하는 방법입니다.

data-title="<a href='접속 Url'>Women's▲</a><span>\ 70,000</span>"

data-title 부분에 <a href='접속 Url'>바로가기</a> 추가하면 됩니다.

사용자정의(확장변수) 형식선택 출력방법

2020-04-13T18:44:40+09:00

위젯에 확장변수를 출력할때

"사용장 정의 이름"을 "new"로 하고 "형식"을 "한줄 입력칸"으로 해서 글 작성시 확장변수에 'Y'를 입력하면 아래 코드가 적용이 됩니다.

<span><img cond="$oDocument->getExtraEidValue('new') == 'Y'" src="img/new.png"></span>

"형식"을 "단일 선택"으로 하고 기본값에 'Y,N'을 두고 글 작성시 확장변수를 'Y'로 선택하는 방법

[웹지기님의 답변]

<span><img cond="in_array('Y', $oDocument->getExtraEidValue('new'))" src="img/new.png"></span>

[sejin7940님의 답변]

getExtraEidValue 대신 getExtraEidValueHTML 을 쓰시면 됩니다.

getExtraEidValue 는 radio, checkbox, select 모두 선택값이 몇개든 상관없이 무조건 배열로 반환합니다
getExtraEidValueHTML 는
단일값이면 ( selectbox 나 radio 또는 checkbox 하나만 선택시 ) 그 값만 출력해주고
checkbox 중 복수 값이면 콤마(,)가 붙어서 값이 나옵니다.
( tel 의 경우는 전화번호에 - 가 중간에 붙어나오고요 )

반응형 햄버거(삼선)안 메뉴 만들기

2020-03-24T11:20:22+09:00

요즘은 레이아웃을 만들때 반응형으로 제작하는 것이 추세입니다.

반응형으로 레이아웃을 제작하다보면 메뉴처리 부분이 항상 고민입니다.

sweetMobile 레이아웃같이 상단에 스와프 기능으로 메뉴를 줄 수도 있지만,

메뉴의 종류가 많거나 2차, 3차메뉴가 존재 한다면 아무래도 힘들죠.

그래서 PC모드에서는 상단에 가로로 나열 처리하고 마우스 오버시 2차, 3차 메뉴가 드롭방식으로 출력되게 하고,

모바일이나 좁은 화면에서는 상단 좌/우측에 일명 햄버거(삼선)형태를 만들어서 터치시 화면을 차지하면서 메뉴들을 출력되게 하는 방식을 많이 사용합니다.

PC모드의 메뉴 방식은 다영한 소스가 공개되어 있고 적용하기도 그다지 어렵지 않습니다.

그런데 햄버거 형태안의 메뉴출력 방식은 그다지 많이 공개 되어져 있지 않습니다.

그리고 보통은 1차메뉴 부분을 2차메뉴 출력을 나타내는 기능으로 많이 사용하여 XE나 라이믹스 메뉴 체계와는 잘 맞지를 않습니다.

아니면 모든 1,2,3차 메뉴를 한번에 다 출력하는 식이죠.

이런 불편함을 극복하고자 여러 소스들을 받아서 테스트하고 실험하면서 적용도 해 보았지만 만족스러운 결과를 얻지는 못했습니다.

그래도 가장 좋았던 결과가 1차메뉴 아래/옆에 + 영역을 만들어서 적용한 방법이 제일 만족스러운 결과였던 것 같습니다.

그러다 서핑중에 디자인이 예쁜 형태의 소스를 얻게 되어서 적용해 보았습니다.

https://www.blueb.co.kr/?c=1/4&p=3&uid=3914

처음 접했을때 메뉴명을 터치하면 1차메뉴로 연결되고 우측의 숫자부분을 터치하면 2차메뉴들이 드롭되게 하면 되겠다 싶었죠.

그래서 최근에 만든 유료 레이아웃인 Mh_Justice 에 적용해 보았습니다.

원소스를 간단히 요약하면 아래와 같이 됩니다.

   <ul class="mainmenu">
       <li><img src="images/envelope.png" alt="Envelope icon" class="icon"><span>Messages</span><div class="messages">23</div></li>
           <ul class="submenu">
               <div class="expand-triangle"><img src="images/expand.png"></div>
               <li><span>New</span></li>
           </ul>
   </ul>

jquery.min.js는 XE에서 기본 제공하므로 삭제

retina.min.js는 이미지들에 옵션을 주는 스크립트 파일인 것 같은데 이미지들을 최소하 하므로 삭제

style.css 와 script.js 파일을 해당 폴더에 업로드합니다.

기존에 사용하던 반응형메뉴 소스를 열어서 위의 원본 소스와 결합합니다.

상단의 멤버/로그인 부분과 햄버거 소스 부분은 생략하고 설명합니다.(각자가 사용하는 코드가 다를 수 있으므로)

<nav class="navbar navbar-inverse navbar-fixed-top" id="sidebar-wrapper" role="navigation">
<ul class="nav sidebar-nav {$li->smenu_color}">

           <ul class="mainmenu" loop="$Smart->list=>$key1,$val1" class="active"|cond="$val1['selected']">
               <li cond="$val1['href']">
                   <i class="fas fa-align-left icon"></i>
                   <span><a href="{$val1['href']}" target="_blank"|cond="$val1['open_window']=='Y'">{$val1['link']}</a></span>
                   <span cond="$val1['list']" class='submenu-indicator'>+</span>
               </li>
                   <ul cond="$val1['list']" class="submenu">
                       <div class="expand-triangle"><img src="img/underline.png"></div>
                           <li loop="$val1['list']=>$key2,$val2" class="active"|cond="$val2['selected']">
                               <span><a href="{$val2['href']}" target="_blank"|cond="$val2['open_window']=='Y'">{$val2['link']}</a></span>
                                   <ul cond="$val2['list']" class="submenu2">
                                       <li loop="$val2['list'] => $key3, $val3">
                                           <span><a href="{$val3['href']}" target="_blank"|cond="$val3['open_window'] == 'Y'"><i class="fa fa-reply-all fa-rotate-180" style="margin-right:5px"></i>{$val3['link']}</a></span>
                                       </li>
                                   </ul>
                           </li>
                   </ul>
           </ul>

</ul>
</nav>

</div>

붉은색 코드들이 원본에 XE코드 적용한 형태

파란색부분이 1차메뉴, 2차메뉴가 Hidden이거나 존재 하지 않을때 숨기는 조건문

그리고 이미지 부분들을 폰터어썸이나 css로 커버했으며 1차메뉴 아래의 bar만 이미지 사용

style.css를 수정

.sidebar-nav li { display:inline-block; line-height:20px; position:relative; width:100%;}
.sidebar-nav li a { color:#fff !important; }
.sidebar-nav .plus { text-align:right; color:#fff; padding:5px; margin-right:10px; font-size:12px; }
.sidebar-nav .plus span { color:#fff; }
.mainmenu { font-size:16px; position:relative; margin:0px auto; padding:10px; box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);}
.mainmenu > li { box-sizing:border-box; height:48px; color:#fff; }
.mainmenu > li span { line-height:48px; display:block;}
.mainmenu > li span a { color:#fff !important; }
.mainmenu > li .icon { display:block; float:left; padding:16px 20px 0 20px;}
.mainmenu .submenu-indicator { font-size:18px; background:#444; color:#fff; line-height:19px; display:block; float:right; width:20px; height:20px; margin-top:-33px; margin-right:19px; padding:0; text-align:center; border-radius:10px; -o-transition:transform .3s linear; -moz-transition:transform .3s linear; -webkit-transition:transform .3s linear; -ms-transition:transform .3s linear; }
.mainmenu .submenu-indicator:hover { -ms-transform:rotate(45deg); -moz-transform:rotate(45deg); -webkit-transform:rotate(45deg); transform:rotate(45deg)}
.expand-triangle { width:220px; height:10px; content:" ";}
.expand-triangle img { width:inherit; height:inherit; vertical-align:top;}
.submenu { font-size:13px; box-sizing:border-box; content:" "; }
.submenu li { line-height:30px; margin-left:-40px; padding-top:11px; transition:border-left 220ms ease-in; }
.submenu li span a { color:#eee !important; }
.submenu .chosen,.submenu .chosen:hover { border-left:solid 6px #fff;}
.submenu li:hover { border-left:solid 6px #fff;}
.submenu li span { margin-left:30px;}
.submenu2 { font-size:13px; box-sizing:border-box; content:" "; }
.submenu2 li { margin-left:-40px; padding-top:0px; transition:border-left 220ms ease-in; }

.blue, .blue .sidebar-nav li a:hover, .blue .mainmenu , .blue .mainmenu > li, .blue .submenu li, .blue .submenu2 li
{ background:#2980B9; }

.red, .red .sidebar-nav li a:hover, .red .mainmenu , .red .mainmenu > li, .red .submenu li, .red .submenu2 li
{ background:#e4644b; }

.black, .black .sidebar-nav li a:hover, .black .mainmenu, .black .mainmenu > li, .black .submenu li, .black .submenu2 li
{ background:#444; }
.black .mainmenu .submenu-indicator { background:#000; color:#fff; }

.gray, .gray .sidebar-nav li a:hover, .gray .mainmenu, .gray .mainmenu > li, .gray .submenu li, .gray .submenu2 li
{ background:#aaa; }

붉은색 코드는 마우스 오버시 + 부분이 회전되게한 코드(별거 아님~)

파란색 코드는 메뉴영역의 색상을 지정한 부분입니다.

DB를 건더리면... 1탄 - 세밀한 페이지 복사

2020-03-06T08:24:24+09:00

홈페이지 작업을 하다보면 DB를 건더려야 할때가 종종 있습니다.

그런 경우 작업전 백업은 필수 입니다.(중요! 또 중요!)

쿼리문 작성하지 않고 DB작업으로 손쉽게 할 수 있는 일들 1탄 - XE나 라이믹스 기준입니다

[ 세밀한 페이지 복사 ]

관리자페이지에서 페이지 복사를 하면 디자인이나 세부 옵션은 복사가 되지만

내용(Contant)부분은 복사가 되지를 않죠, 그런데 내용부분을 복사해야 하는 경우도 있습니다.

예를 들면 기존의 페이지는 건들이지 않고 내용부분(위젯이나 기타)은 그대로 두고 디자인을 바꾸어 보는 테스트를 해 보고 싶거나, 페이지나 로딩에 문제가 생겨서 위젯들을 지워보고 싶을때 복사한 mid에서 작업해 보는 방법입니다.

먼저, 관리자 페이지에서 해당 페이지를 복사합니다. (예로 원본 mid명은 home, 복사한 mid명은 test)

가장 많이 사용하는 DB프로그램인 phpMyAdmin를 가지고 설명하겠습니다.

DB에 접속후 "xe_modules" 을 찿아서 "보기"를 클릭
잡깐! DB복사는 하셨나요~ xe_modules만 "내보내기" 하시면 됩니다.(중요!!!)

위의 이미지에서 home을 찾아서 "content"부분을 더블클릭합니다.

내용을 전부 복사합니다.

test mid를 찾아서 "content"에 가서 붙여 넣기를 합니다.

모바일까지 복사할려면 "mcontent"도 복사

관리자 페이지에서 "캐시 비우기"를 하고 test 페이지에 접속해보면 똑 같이 복사된 페이지를 보실 수 있습니다.

여기서 디자인도 바꾸어 보고 위젯도 지우거나 수정해 보고 테스트해서 안전하면 기존의 home페이지에 적용하면 됩니다.

참고로 모바일페이지는 "mcontent" 입니다.

XE보드에서 getTimeGap을 하루전, 2일전, 1달전 등으로 바꾸고 싶습니다

2020-02-01T10:06:56+09:00

날짜 출력할 곳보다 위쪽에

{@
$x_date = strtotime($document->getRegdate(YmdHi));
$time_calc = time() - $x_date;
}

{@ $_atc_date = '방금'}
{@ $_atc_date = floor($time_calc/60).'분 전'}
{@ $_atc_date = floor($time_calc/3600).'시간 전'}
{@ $_atc_date = floor($time_calc/86400).'일 전'}


시간경과에 따른 출력 형태를 선언해 놓구요.

실제 작성일자 출력 부분에
{$_atc_date}
로 하시면 될 것 같네요. 제 스킨에 적힌 코드를 참조했습니다.

[문하우스 Tip]

위의 팁을 댓글 위젯에 적용해 보았습니다.

적용 위젯은 최근댓글출력위젯에 new아이콘과 시간별로 칼라로 분류 에 적용했습니다.

mh_c_comment 스킨의 list.html 파일 수정

<ul class="board">
   
       {@
           $x_date = strtotime($val->getRegdate(YmdHi));
           $time_calc = time() - $x_date;
       }
       <li class="c_area">
           
               <span cond="$wi->display_regdate == 'Y'" class="date" style="color:{$wi->day_a_color}">{floor($time_calc/60).'분 전 :'}
               <a href="{getUrl('','document_srl',$val->get('document_srl'))}#comment_{$val->get('comment_srl')}" style="color:{$wi->day_a_color}">{$val->getSummary($wi->subject_cut_size)}<img src="images/new.gif" border="0"></a></span>
           
               <span cond="$wi->display_regdate == 'Y'" class="date" style="color:{$wi->day_a_color}">{floor($time_calc/3660).'시간 전 :'}
               <a href="{getUrl('','document_srl',$val->get('document_srl'))}#comment_{$val->get('comment_srl')}" style="color:{$wi->day_a_color}">{$val->getSummary($wi->subject_cut_size)}<img src="images/new.gif" border="0"></a></span>
           
               <span cond="$wi->display_regdate == 'Y'" class="date" style="color:{$wi->day_b_color}">{floor($time_calc/86400).'일 전 :'}
               <a href="{getUrl('','document_srl',$val->get('document_srl'))}#comment_{$val->get('comment_srl')}" style="color:{$wi->day_b_color}">{$val->getSummary($wi->subject_cut_size)}</a></span>
           
               <span cond="$wi->display_regdate == 'Y'" class="date" style="color:{$wi->day_c_color}">{zdate($val->regdate, "m-d")}
               <a href="{getUrl('','document_srl',$val->get('document_srl'))}#comment_{$val->get('comment_srl')}" style="color:{$wi->day_c_color}">{$val->getSummary($wi->subject_cut_size)}</a></span>
           
       </li>
       <li>
           <span cond="$wi->display_author == 'Y'" class="name">
               <i class="fa fa-user"></i> {cut_str($val->getNickName(), 6, "")}
           </span>
       </li>
   
</ul>

빨간색 부분이 팁을 적용한 부분입니다.

1시간 이전은 '분 전'

1시간 이후 24시간 이전은 '시간 전'

24시간(1일) 이후 72시간(3일) 이전은 '일 전'으로 출력되게 하였습니다.

프로필 이미지가 없는 경우 물음표(?)가 아닌 닉네임 앞자리 + 개별 배경색 표시

2020-01-07T21:04:19+09:00

프로필 이미지가 없는 유저의 경우 프로필 이미지 출력 부분이 물음표로 출력이 되는것을 아래와 닉네임의 첫 글자 + 배경색으로 표시합니다.

아래와 같은 차이가 있습니다.

#기존

#변경후

적용 예 보기 : https://xeplus.io/testboard_tp/57498

1.배경 닉네임 데이터 업로드

다운로드 : nick_bg_color.phps

해당 파일을 XE 설치 경로에 업로드합니다.

2.게시판 스킨 수정 (스케치북 게시판 스킨 기준)

수정할 파일 : modules/board/skins/sketchbook5/_comment.html

1)파일 제일 상단에 아래의 코드를 추가합니다.

{@
$nickBgPath = _XE_PATH_.'nick_bg_color.php';
include_once($nickBgPath);
$oNickBgUtil = new nickBgUtil();
}

2)프로필 이미지가 없는 작성자의 프로필 출력 부분 수정

21라인 (라인수는 스킨 커스터마이징 혹은 버전에 따라 다를수 있습니다)

변경전

<span cond="!$comment->getProfileImage()" class="profile img no_img">?</span>

변경후

{@ $fisrt_nick_str = mb_substr($comment->getNickName(),0,1)}
<span cond="!$comment->getProfileImage()" class="profile img no_img " style="background-color:{$oNickBgUtil->getNickBgColor($comment->getNickName())};color:white">{$fisrt_nick_str}</span>

다른 게시판 스킨은 위 코드를 참고하셔서 적용하시면 되겠습니다.

소스코드를 더 멋지게 개선하셨다면 다시 공유해주세요^^

[문하우스의 Tip]

색상대신 랜덤으로 이미지 아이콘이 출력되게 수정했습니다.

# 수정한 파일 - nick_bg_color.phps

다운받은 nick_bg_color.phps 파일을 nick_bg_color.php로 확장자를 바꾸어 주어야 합니다.

# 이미지 아이콘 30개 - icon_30.zip

- /modules/board/skins/sketchbook5/img 폴더안에 풀어주시면 됩니다.

# _comment.html 파일 수정

{@ $second_nick_str = mb_substr($comment->getNickName(),0,2)}
<span cond="!$comment->getProfileImage()" class="profile img no_img " style="background:url('{$tpl_path}/img/{$oNickBgUtil->getNickBgColor($comment->getNickName())}') 2px 2px no-repeat; width:50px; height:50px; font-size:12px; color:#fff">{$second_nick_str}</span>

P.S 주의 사항

"1.배경 닉네임 데이터 업로드" 를 설치하지 않고 이 팁을 적용하면 게시판내용에 들어가 지질 않습니다,

이점 유의 하세요.

mh_fullpage 레이아웃과 sketchbook5 게시판스킨의 충돌 해결

2020-01-06T23:14:16+09:00

mh_fullpage 레이아웃을 이용해서 홈피를 꾸밀때 게시판스킨으로 sketchbook5을 사용하면

동일 class 이름이 존재해 충돌을 일으킵니다.

지금껏 mh_fullpage 레이아웃으로 게시판을 사용해 보질 않아서 몰랐었는데

어떤 분이 메일을 주셔서 확인해 보니 문제를 일으키네요.

근데 fullpage 레이아웃은 게시판을 사용하는 용도의 레이아웃은 아닌데...

먼저 동일 class="section" 명이 두 군데 다 존재합니다.

1. sketchbook5 게시판스킨(수정이 간단합니다)

- write_form.html / board.css 두 파일에 있는 "section"을 다른 이름으로 변경하시면 됩니다.

write_form.html 의 경우는 안에 4군데

board.css 는 /* Write */의 .opt_chk .section 부분입니다.

2. mh_fullpage 레이아웃의 경우는 총 4개의 파일을 수정해야 합니다.

- layout.html / mf_style.html / fullpage.css / fullpage.min.js

해당 파일안의 "section" 부분을 찾아서 다른 이름으로 변경하시면 됩니다.

특히 fullpage.min.js 파일안에는 다수 있습니다.

수정파일 : https://moonhouse.co.kr/pointdata/506739

제목에 마우스 Hover시 썸네일 출력하기

2019-12-24T13:52:22+09:00

스케치북게시판 리스트형에 제목에 마우스 Hover시 썸네일이 보여지는 기능이 있습니다.

그래서 위젯에도 적용해 볼려고 하니 쉽지가 않아서 저 나름대로 다르게 출력해 봅니다.

이 기능을 작동할려면 말풀선 애드온 이 필수입니다.

먼저 위젯에 썸네일 기능이 있고 제목도 출력된다고 가정하고 Mh Brickfolio위젯 에 적용한 방법입니다.

list.html 파일을 열어서 아래와 같이 수정합니다.

[수정전]

<div cond="$wi->title == 'Y'" class="mb_title">
<a href="{getUrl('','document_srl',$oDocument->document_srl)}"
{$oDocument->getTitleText($wi->subject_cut_size)}
</a>
</div>

[수정후}

<div cond="$wi->title == 'Y'" class="mb_title">
   <a href="{getUrl('','document_srl',$oDocument->document_srl)}"


class="pr_tooltip" pr_color="warning" pr_position="b_right" title="<img src=“{$oDocument->getThumbnail($wi->thumbnail_width,$wi->thumbnail_height,$wi->thumbnail_type)}”&frasl;>">

class="pr_tooltip" pr_color="dark" pr_position="b_right" title="No Image">


{$oDocument->getTitleText($wi->subject_cut_size)}
   </a>
</div>

설명을 하면 게시글에 이미지가 있으면 썸네일의 가로 세로 크기로 말풍선 애드온을 적용하여 "오렌지" 색상의 툴팁을 "우측 하단"에 출력시킵니다. 만약 이미지가 없다면 "No Image"문구를 출력합니다.

색상과 위치는 말풍선 애드온을 보시고 적용하면 됩니다.

그런데 말풍선 애드온을 적용하지 않고 title에만 적용하면 썸네일이 출력되지 않고 소스만 보입니다.

썸네일 출력의 경우 Html Character Entities를 사용했습니다.

마감일자 있는 게시판 내용을 위젯으로 출력해 보기

2019-12-07T13:07:14+09:00

"마감일자가 있는 성격의 게시물 제목에 자동으로 상태(종료, 오늘종료, 진행중 등등 ) 반영하기 팁"

을 적용한 게시물들을 위젯상에서 출력되게 한번 수정해 봤습니다.

먼저 Sample 위젯으로 MH Multi V3.3 위젯에 있는 MH sketchbook5 List스킨에 적용해 봅니다.

근데 어떤 위젯이던 수정 방법은 거의 동일합니다.

/widgets/mh_multi/skins/mh_sketchbook5_list/tables.html 파일을 열어서

{$oDocument->getTitleText($wi->subject_cut_size)} 코드를 아래와 같이 수정합니다.

{@
   if(!$wi->end_title) $wi->end_title = 종료;
   if(!$wi->ing_title) $wi->ing_title = 진행중;
   if(!$wi->approach_tItle) $wi->approach_title = 종료임박;
   if(!$wi->today_tItle) $wi->today_title = 오늘종료;

$now = date('Y-m-d');
$date = $oDocument->getExtraEidValueHTML('end');

   $this_day = date_create($oDocument->getExtraEidValueHTML('end'));
   $date1 = date('Y-m-d',strtotime($this_day->format('Y-m-d').'-1 days'));
   $datetime = new DateTime($now);
   $date2 = $datetime->modify('+1 day')
}

<span>

<span style="color:#a6a6a6; text-decoration:line-through !important;"><span style="margin-right:5px">{$wi->end_title}</span>

<span><span style="margin-right:5px">{$wi->today_title}</span>

<span><span style="margin-right:5px">{$wi->ing_title}</span>

<span><span style="margin-right:5px">{$wi->approach_title}</span>

{$oDocument->getTitle($wi->subject_cut_size)}</span>

참고로 게시판의 확장변수는 아래 참조하세요.

[게시판의 확장변수를 이용하여 설정]

먼저 적용할 게시판에

"설정" - "사용자정의" 에 사용자정의 이름을 end로 하고

"형식"을 "일자(연월일)"로 확장변수를 하나 만듭니다.

B. 게시판에 글 작성시 확장변수의 종료일을 지정합니다.

(종료일을 지정하지 않으면 종료 기능이 작동하지 않습니다)

참고로 종료임박의 날짜는 숫자를 같이 변경하면 됩니다.(종료임박이 2일이면)

- 진행중 $date1 = date('Y-m-d',strtotime($this_day->format('Y-m-d').'-2 days'));

- 종료임박 $date2 = $datetime->modify('+2 day')

* 코알못이 코드를 짜다 보니 이게 정상적인 코드인지는 모르겠네요, 어째거나 작동은 됩니다.ㅎㅎㅎ

p.s 이 기능을 이용하여 해당 게시물을 팝업으로 띄우고 해당 날짜에 팝업을 종료할려면

포인트자료실의 Mh Appoint PopUp Pro 를 사용하시면 편리합니다.

마감일자가 있는 성격의 게시물 제목에 자동으로 상태(종료, 오늘종료, 진행중 등등 ) 반영하기 팁

2019-12-03T23:19:55+09:00

게시물의 성격에 따라 마감일자가 있는 게시물이 있습니다. 예를 들면 각종 이벤트나 쿠폰 정보같은 게시물입니다.

이와 같은 게시물의 경우 게시물 작성 시 확장변수에 마감일을 기재한 후 현재일자와 비교해서 제목에 자동으로 현재 게시물의 상태( 종료, 오늘종료, 진행중 등등 )를 변경 해 주고 싶은 경우 사용할 만한 팁입니다.

에덴게시판 스킨기준 입니다.

[ table.html ] 목록 제목이 표시되는 위치쯤에 아래 코드를 넣어주세요.

코드 중 {@ $date = $document->getExtraEidValue('end')}

// 'end'는 게시판에 설정한 확장변수명을 기입 해 주세요.

<td class="title" cond="$val->type=='title' && $val->idx==-1">
<a href="{getUrl('document_srl',$document->document_srl, 'listStyle', $listStyle, 'cpage','')}" class="ed link-reset" style="padding-top: {$module_info->list_table_row_height}; padding-bottom: {$module_info->list_table_row_height}">
<strong class="ed margin-right-xsmall" cond="$document->get('category_srl')" style="color:{$category_list[$document->get('category_srl')]->color}"|cond="$category_list[$document->get('category_srl')]->color!='transparent'">[{$category_list[$document->get('category_srl')]->title}]</strong>

{@ $now = date("Ymd");}

{@ $date = $document->getExtraEidValue('end')}

<span class="ed title-link">{$document->getTitle($module_info->list_title_limit)}</span>

<span class="ed title-link" style="color:#a6a6a6;text-decoration: line-through !important;">[종료] {$document->getTitle($module_info->list_title_limit)}</span>

<span class="ed title-link">[진행중] {$document->getTitle($module_info->list_title_limit)}</span>

<span class="ed title-link">[오늘종료] {$document->getTitle($module_info->list_title_limit)}</span>

<span class="ed text-primary" cond="$document->getCommentCount()">{$document->getCommentCount()}</span>

[ 결과 ]

입력한 게시물의 마감일 확장변수에 입력된 값이 오늘과 같을 때 : [ 오늘종료 ] 제목으로 출력

입력한 게시물의 마감일 확장변수에 입력된 값이 오늘 보다 이전날자일 때 : ~~[ 종료 ] 제목~~으로 출력

입력한 게시물의 마감일 확장변수에 입력된 값이 오늘 보다 이후 날자일 때 : [ 진행중 ] 제목으로 출력

입력한 게시물의 마감일 확장변수에 입력된 값이 없을 때 : 제목으로 출력

[문하우스의 응용]

마트몬님이 올려 주신 팁이 에덴게시판 스킨 기준이라

스케치북게시판 스킨에 적용하는 방법과 더블어 게시판설정을 약간 변경합니다.

1. skin.xml 파일에 추가

2. 유형을 목록형에 적용 _list_normal.html

- 중략 -
<td class="title">

- 중략 -
{$document->getTitle($mi->subject_cut_size)}

{$document->getTitle($mi->subject_cut_size)} 부분이 두군데 있습니다.

아래와 같이 수정하면 됩니다.

{@
   if(!$mi->end_name) $mi->end_name = end;
   if(!$mi->end_title) $mi->end_title = 종료;
   if(!$mi->ing_title) $mi->ing_title = 진행중;
   if(!$mi->today_title) $mi->today_title = 오늘종료;
}
{@ $now = date("Ymd");}
{@ $date = $document->getExtraEidValue($mi->end_name)}

<span>{$document->getTitle($mi->subject_cut_size)}</span>

<span style="color:#a6a6a6; text-decoration:line-through !important;"><span style="border:1px solid #000; padding:3px; background:#999; color:#fff; border-radius:3px; margin-right:5px">{$mi->end_title}</span> {$document->getTitle($mi->subject_cut_size)}</span>

<span><span style="border:1px solid #000; padding:3px; background:#00ccff; color:#fff; border-radius:3px; margin-right:5px">{$mi->ing_title}</span> {$document->getTitle($mi->subject_cut_size)}</span>

<span><span style="border:1px solid #000; padding:3px; background:#ff0000; color:#fff; border-radius:3px; margin-right:5px">{$mi->today_title}</span> {$document->getTitle($mi->subject_cut_size)}</span>

Html안에서 이미지 경로 설정 방법

2019-11-24T13:18:21+09:00

XE 나 라이믹스에서 레이아웃이나 위젯등의 코드를 짤때 이미지들을 배치할려면 보통 css안에다 소스를 넣습니다.

background:url(../img/no_image.gif) no-repeat 이런 코드로 생성하죠.

그런데 html안에 style이나 직접 이미지를 배치할려고 하면 ../img/no_image.gif 상대경로는 적용이 되지를 않습니다.

절대경로로 작성해야 됩니다. widgets/위젯명/skins/스킨명/img/no_image.gif

이미지가 하나 정도이면 위와 같이 작성해도 별 문제가 되지를 않지만 여기 저기 이미지들을 배치할려면 코드도 길어지고

수정시 전체를 찾아서 개별적으로 수정해야 하는 불편함이 있습니다.

이런 경우 2가지의 방법이 있습니다.

1. Html 상단에 변수설정

{@ $imgPath = "widgets/위젯명/skins/스킨명/img"}

위의 변수선언 코드를 상단에 작성하고 각각의 이미지 배치 부분에 아래와 같이 적용하면 됩니다.

{$imgPath}/no_image.gif

2. XE의 경로설정 변수 적용하기

XE에는 스킨경로를 출력하는 변수인 {$tpl_path}를 사용할 수 있습니다.(간단합니다)

{$tpl_path}/img/no_image.gif

근데 해당 스킨안의 이미지가 아닌 경우는 1번으로 적용해야 됩니다.

로그인 회원만 파일 다운로드 되게 스케치북 게시판 수정방법

2019-11-23T00:11:43+09:00

파일 다운로드 권한을 주는 변수는 없는 것 같아서

다운로드 권한을 그룹 전체에 주면 로그인 회원은 다운이 되는 경우와 일치하므로

그것을 기반으로 스케치북 게시판에서 로그인하지 않는 경우 파일을 다운 받지 못하게 하면서

파일 클릭시 라이믹스 or XE의 기본 팝업이 뜨는 것을 수정해서 경고 창이 뜨면서 확인을 클릭시 지정한 로그인화면으로 바로가게 수정하는 작업을 Tip으로 남깁니다.

(위에 글을 작성하고 나니 무슨 말인지 나도 햇갈리는데 아래 설명을 보면 이해 하시리라 생각이 듭니다...)

먼저 기존의 경우 파일 다운로드 그룹 권한을 주면 권한이 없는 유저가 파일 클릭시

"권한이 없습니다" 라는 팝업창만 덩그라니 뜹니다. 먼가 어색하고 불편합니다.

그래서 스케치북 게시판을 수정해 봅니다.

1. skin.xml 추가

<var name="down_mid" type="text">
   <title xml:lang="ko">★파일 다운 권한 mid</title>
   <description xml:lang="ko">파일 다운로드 권한 적용의 mid(게시판명)를 적어주세요.
   </description>
</var>
<var name="down_permitted_msg" type="text">
   <title xml:lang="ko">파일다운로드 권한 미달시 문구</title>
   <description xml:lang="ko">파일다운로드 권한 미달시 출력할 문구</description>
</var>

- 게시판설정에서 해당 mid 이름과 문구를 작성합니다.

2. _read_files.html

- 수정전

<ul cond="!$mi->files_type">
<li loop="$oDocument->getUploadedFiles()=>$key,$file"><a class="bubble" href="{getUrl('')}{$file->download_url}" title="[File Size:{FileHandler::filesize($file->file_size)}/Download:{number_format($file->download_count)}]">{$file->source_filename}</a><span class="comma">,</span></li>
</ul>

- 수정후

<ul cond="!$mi->files_type">
<li loop="$oDocument->getUploadedFiles()=>$key,$file"><a class="bubble" href="#" title="{$lang->msg_not_permitted} {$mi->down_permitted_msg}" onClick="alert('{$lang->msg_not_permitted} {$mi->down_permitted_msg}'); return false">href="{getUrl('')}{$file->download_url}" title="[File Size:{FileHandler::filesize($file->file_size)}/Download:{number_format($file->download_count)}]">{$file->source_filename}</a><span class="comma">,</span></li>
</ul>

$mi->files_type 파일 타입을 지정해서 출력되게 하는 옵션을 사용하고 있다면 아래에 있는 각각의 코드에도 위의 소스를 붙여 넣어면 됩니다.

붉은색 코드의 경우 해당 mid 에 로그인 하지 않은 유저는 파일에 마우스 Hover시 아래의 문구가 뜹니다.

그래도 파일을 클릭하면 상단에 팝업창이 뜹니다.

여기서 확인을 클릭하면 로그인 화면이 뜹니다. 문하우스 홈피는 소셜XE 통합로그인 을 변형해서 적용하고 있습니다.

여기서 상단 우측에 빨간색 화살표는 뒤로 가는 버턴입니다.(로그인 하지 않고 이전 페이지로 가는 기능)

p.s 참고로 파일이 아예 클릭이 되지 않고 팝업이 뜨지 않게 할려면 아래와 같이 수정하면 됩니다.

title="{$lang->msg_not_permitted} {$mi->down_permitted_msg}">

게시판 상단에 풀립형식으로 위젯이나 기타글 등록하는 방법

2019-11-16T11:05:10+09:00

Xetown에서 맥스터님이 질문하신 내용이 제가 커스텀해서 사용하는 스케치북 게시판에 적용되어 있어서 그 부분만 빼서 Tip으로 남깁니다.

1. skin.xml 파일에 추가

<var name="top_panel" type="radio">
   <title xml:lang="ko">★게시판최상단 풀립식 판넬</title>
   <description xml:lang="ko">게시판최상단에 폴더식 판넬의 출력</description>
   <options value="">
       <title xml:lang="ko">사용안함(기본)</title>
   </options>
   <options value="N">
       <title xml:lang="ko">사용</title>
   </options>
</var>
<var name="panel_auto" type="radio">
   <title xml:lang="ko"> ┖ 판넬 자동 접기 / 펼치기</title>
   <description xml:lang="ko">판넬을 처음부터 접기 / 펼치기</description>
   <options value="">
       <title xml:lang="ko">접기(기본)</title>
   </options>
   <options value="N">
       <title xml:lang="ko">펼치기</title>
   </options>
</var>
<var name="top_panel_btn" type="text">
   <title xml:lang="ko"> ┖ 버턴안 문구</title>
<description xml:lang="ko">버턴안의 문구를 적어주세요(기본 Click)</description>
</var>
<var name="top_panel_text" type="textarea">
   <title xml:lang="ko"> ┖ 판넬안에 들어갈 내용</title>
<description xml:lang="ko">판넬안에 들어갈 문구나 이미지, 위젯을 넣어시면 됩니다.(Html지원됨)</description>
</var>
<var name="top_panel_bcolor" type="text">
   <title xml:lang="ko"> ┖ 판넬박스의 배경색상</title>
<description xml:lang="ko">판넬박스안의 배경색상을 지정.(기본 투명 ex:#ffffff)</description>
</var>

2. list.html 파일안에 추가

상단부분에 "뷰어로 보기" 아래에 "풀립 판넬" 부분 추가합니다.

<div cond="!$mi-> top_panel=='' && !$document_srl">
<load target="js/panel.js" />

<div class="flip"><span class="btn"><i class="fa fa-plus-square fa-lg" style="margin-right:5px; color:#ff6600;"></i>{$mi->top_panel_btn}</span></div>
<div class="panel">{$mi->top_panel_text}</div>
</div>

3. panel.js 파일을 다운 받아서 js 폴더에 업로드합니다.

4. 게시판 설정에서 "판넬안에 들어갈 내용"안에 위젯코드를 넣거나 문구들을 넣어 주시면 됩니다.

위젯에 닫기 버턴을 달아보자

2019-11-08T13:48:24+09:00

바탕 슬라이드로 작동하는 레이아웃의 경우 화면에 위젯을 띄우면 슬라이드 이미지들이 가려서 어색한 경우가 생깁니다.

이럴때 위젯은 띄우고 싶고 슬라이드 이미지들도 보이게 하고 싶을때

위젯에 Close기능을 추가해서 Close버턴 클릭하면 위젯이 사라지게 하는 Tip입니다.

먼저 띄우고 싶은 해당 위젯의 위젯명.class.php 파일에 아래 선택 코드 추가 (위젯 마다 코드가 다를 수 있음)

[mh_elegant_accordion 위젯의 경우]

1. mh_elegant_accordion.class.php 에 아래 코드 추가

$args->widget_close = isset($args->widget_close) ? $args->widget_close : '';

2. conf/info.xml 에 아래 코드 추가

3. skins/default/list.html 에 아래 코드 추가

<style>

.mwa-box .w_close { position:absolute; margin:-32px 0 0 -2px; font-size:14px; color:#fff; background-color:#000; border:2px solid #000; padding:5px 10px; border-radius:10px 10px 0 0}

</style>

<a cond="$wi->widget_close == 'Y'" href="javascript:void(xHide('mwaClose'))" onMouseOver="window.status=(':: 보드 닫기 ::');return true;" onMouseOut="window.status=('');return true;" class="w_close" title="Widget 닫기">Close X</a>

id명과 xHide안에 이름을 같이 지정하고 Close버턴의 색상과 크기는 style 에서 수정하시면 됩니다.

아래 화면은 Close버턴을 이미지로 만들어서 적용한 것 입니다.

레이아웃에 Elegant Accordion 갤러리 적용하는 방법

2019-11-05T00:31:18+09:00

Mh Elegant Accordion 위젯 을 만들기전 테스트용으로 레이아웃에 적용한 방법인데 이 부분만으로도 꽤 쓸모가 있는 것 같아서 Tip으로 남깁니다.

1. 먼저 적용하고 싶은 레이아웃의 layout.html을 편집기로 열어서 {$content}위에 추가합니다.

<include cond="!$li->mwea_use == ''" target="mwea.html" />
{$content}

2. 내려받은 mwea.zip의 압축을 풀어서 mwea.html 와 css/mwea.css, img/bgDescription.png 파일들을 ftp로 적용할 레이아웃에 업로드 합니다.

3. conf/info.xml을 편집기로 열어서 아래와 같이 추가해 줍니다.

<group>
   <title xml:lang="ko">아코디언 메뉴</title>
   <var name="mwea_use" type="select">
       <title xml:lang="ko">상단 아코디언 메뉴 출력</title>
       <options value="">
           <title xml:lang="ko">출력하지 않음</title>
       </options>
       <options value="Y">
           <title xml:lang="ko">출력</title>
       </options>
   </var>
   <var name="main_height" type="text">
       <title xml:lang="ko">슬라이드 높이</title>
       <description xml:lang="ko">기본 480px (숫자만)</description>
   </var>
   <var name="box_width" type="text">
       <title xml:lang="ko">슬라이드박스 넓이</title>
       <description xml:lang="ko">기본 480px (숫자만)</description>
   </var>
   <var name="a_width" type="text">
       <title xml:lang="ko">책갈피 넓이</title>
       <description xml:lang="ko">기본 115px (숫자만)</description>
   </var>
   <var name="title_height" type="text">
       <title xml:lang="ko">제목위치 높이</title>
       <description xml:lang="ko">기본 0px (숫자만)</description>
   </var>
   <var name="text_height" type="text">
       <title xml:lang="ko">설명문구 폭 높이</title>
       <description xml:lang="ko">기본 130px (숫자만)</description>
   </var>
   <var name="text_line" type="text">
       <title xml:lang="ko">설명문구 줄수</title>
       <description xml:lang="ko">기본 3</description>
   </var>
   <var name="box_line" type="text">
       <title xml:lang="ko">박스테두리 칼라</title>
       <description xml:lang="ko">기본 #fff</description>
   </var>
   <var name="shadow_use" type="select">
       <title xml:lang="ko">박스 그림자</title>
       <options value="">
           <title xml:lang="ko">Normal</title>
       </options>
       <options value="Y">
           <title xml:lang="ko">그림자 출력</title>
       </options>
   </var>
   <var name="slide_img0" type="image">
       <title xml:lang="ko">배경 이미지</title>
   </var>
   <var name="slide_bc0" type="text">
       <title xml:lang="ko">배경칼라</title>
       <description xml:lang="ko">이미지 미등록시 기본색상 #9C4998</description>
   </var>
   <var name="b_text" type="text">
       <title xml:lang="ko">바탕 문구</title>
       <description xml:lang="ko">바탕 문구를 입력합니다.</description>
   </var>
   <var name="b_color" type="text">
       <title xml:lang="ko"> ┖ 바탕 문구 컬러</title>
       <description xml:lang="ko">바탕 문구 컬러를 선택.(기본 #444)</description>
   </var>
   <var name="b_size" type="text">
       <title xml:lang="ko"> ┖ 바탕 문구 크기</title>
       <description xml:lang="ko">바탕 문구 글자의 크기를 설정합니다. (기본값: 2em, css 형식의 사이즈 모두 OK)</description>
   </var>
   <var name="slide_title4" type="text">
       <title xml:lang="ko">슬라이드 제목 4</title>
       <description xml:lang="ko">제목4를 등록해야 슬라이드 출력됨</description>
   </var>
   <var name="slide_img4" type="image">
       <title xml:lang="ko">슬라이드 이미지 4</title>
       <description xml:lang="ko">우측에서 부터 4번째 이미지</description>
   </var>
   <var name="slide_bc4" type="text">
       <title xml:lang="ko">슬라이드 배경칼라 4</title>
       <description xml:lang="ko">이미지 미등록시 기본색상 #5b927d</description>
   </var>
   <var name="slide_text4" type="textarea">
       <title xml:lang="ko">슬라이드 설명 4</title>
   </var>
   <var name="slide_url4" type="text">
       <title xml:lang="ko">슬라이드 more 4</title>
   </var>
   <var name="slide_title3" type="text">
       <title xml:lang="ko">슬라이드 제목 3</title>
       <description xml:lang="ko">제목3을 등록해야 슬라이드 출력됨</description>
   </var>
   <var name="slide_img3" type="image">
       <title xml:lang="ko">슬라이드 이미지 3</title>
       <description xml:lang="ko">우측에서 부터 3번째 이미지</description>
   </var>
   <var name="slide_bc3" type="text">
       <title xml:lang="ko">슬라이드 배경칼라 3</title>
       <description xml:lang="ko">이미지 미등록시 기본색상 #a8ae7e</description>
   </var>
   <var name="slide_text3" type="textarea">
       <title xml:lang="ko">슬라이드 설명 3</title>
   </var>
   <var name="slide_url3" type="text">
       <title xml:lang="ko">슬라이드 more 3</title>
   </var>
   <var name="slide_title2" type="text">
       <title xml:lang="ko">슬라이드 제목 2</title>
       <description xml:lang="ko">제목2를 등록해야 슬라이드 출력됨</description>
   </var>
   <var name="slide_img2" type="image">
       <title xml:lang="ko">슬라이드 이미지 2</title>
       <description xml:lang="ko">우측에서 부터 2번째 이미지</description>
   </var>
   <var name="slide_bc2" type="text">
       <title xml:lang="ko">슬라이드 배경칼라 2</title>
       <description xml:lang="ko">이미지 미등록시 기본색상 #f3b96c</description>
   </var>
   <var name="slide_text2" type="textarea">
       <title xml:lang="ko">슬라이드 설명 2</title>
   </var>
   <var name="slide_url2" type="text">
       <title xml:lang="ko">슬라이드 more 2</title>
   </var>
   <var name="slide_title1" type="text">
       <title xml:lang="ko">슬라이드 제목 1</title>
       <description xml:lang="ko">제목1을 등록해야 슬라이드 출력됨</description>
   </var>
   <var name="slide_img1" type="image">
       <title xml:lang="ko">슬라이드 이미지 1</title>
       <description xml:lang="ko">우측에서 부터 1번째 이미지</description>
   </var>
   <var name="slide_bc1" type="text">
       <title xml:lang="ko">슬라이드 배경칼라 1</title>
       <description xml:lang="ko">이미지 미등록시 기본색상 #835531</description>
   </var>
   <var name="slide_text1" type="textarea">
       <title xml:lang="ko">슬라이드 설명 1</title>
   </var>
   <var name="slide_url1" type="text">
       <title xml:lang="ko">슬라이드 more 1</title>
   </var>
</group>

3. 적용할 이미지들의 세로높이를 슬라이드 높이(480ox)와 같이 만들거나 아님 10~20px정도 작게 만들어서 올리면 됩니다. 작게 만드는 이유는 이미지 아래에 배경색이 살짝 보이게 하기 위해서... 그렇게 하니 예뼈서^.^

게시판목록 제목 뒤에 붙는 아이콘 제어하기

2019-10-23T00:16:19+09:00

XE타운에 튜닝셀프님이 올린 질문에 구름이님이 답변을 한 내용을 제가 응용해서 올립니다.

[질문]

위 그림의 첨부파일 아이콘만 없애고 싶은데요, 어디를 수정해야 하나요? 스케치북 게시판입니다.

스케치북 폴더는 다 뒤져봤는데, file.gif에 관련된 내용은 없더라구요...

몇시간째 찾고 있는데 못 찾겠네요 ㅠㅠ

[답변]

코어 수정 없이 처리하시려면 css를 이용하는게 좋겠습니다.
게시판 스킨의 css 파일에 아래를 추가해보세요.

.extraimages img[alt~="file"] {
display:none;
}

[응용]

스케치북 게시판에 적용하는 방법

1. skin.xml 추가

<var name="file_icon" type="radio">
   <title xml:lang="ko"> ┖ 파일 아이콘 출력</title>
   <description xml:lang="ko">게시판 파일아이콘을 출력할 것인지를 결정합니다.</description>
   <options value="">
       <title xml:lang="ko">출력(기본)</title>
   </options>
   <options value="N">
       <title xml:lang="ko">출력 안함</title>
   </options>
</var>
<var name="new_icon" type="radio">
   <title xml:lang="ko"> ┖ New 아이콘 출력</title>
   <description xml:lang="ko">게시판 New아이콘을 출력할 것인지를 결정합니다.</description>
   <options value="">
       <title xml:lang="ko">출력(기본)</title>
   </options>
   <options value="N">
       <title xml:lang="ko">출력 안함</title>
   </options>
</var>
<var name="update_icon" type="radio">
   <title xml:lang="ko"> ┖ Update 아이콘 출력</title>
   <description xml:lang="ko">게시판 Update아이콘을 출력할 것인지를 결정합니다.</description>
   <options value="">
       <title xml:lang="ko">출력(기본)</title>
   </options>
   <options value="N">
       <title xml:lang="ko">출력 안함</title>
   </options>
</var>
<var name="image_icon" type="radio">
   <title xml:lang="ko"> ┖ Image 아이콘 출력</title>
   <description xml:lang="ko">게시판 Image아이콘을 출력할 것인지를 결정합니다.</description>
   <options value="">
       <title xml:lang="ko">출력(기본)</title>
   </options>
   <options value="N">
       <title xml:lang="ko">출력 안함</title>
   </options>
</var>

2. __setting.html <style>~</style> 사이에 추가

<block cond="!$mi->file_icon == ''">
   .extraimages img[alt~="file"] {display:none;}
</block>
<block cond="!$mi->new_icon == ''">
   .extraimages img[alt~="new"] {display:none;}
</block>
<block cond="!$mi->update_icon == ''">
   .extraimages img[alt~="update"] {display:none;}
</block>

3. _list_normal.html 수정

<span class="extraimages">{$document->printExtraImages(60*60*$mi->duration_new)}<i cond="$document->thumbnailExists() && $mi->image_icon == ''" class="attached_image" title="Image"></i></span>

4. 각 게시판형식에 printExtraImages부분을 찾아서 수정하시면 됩니다.

[위젯에 응용]

content 위젯참조

1. info.xml 추가

<var id="file_icon" type="select">
   <name xml:lang="ko">파일아이콘 표시</name>
   <name xml:lang="en">Icon</name>
   <options>
       <value></value>
       <name xml:lang="ko">출력</name>
       <name xml:lang="en">Display</name>
   </options>
   <options>
       <value>N</value>
       <name xml:lang="ko">출력하지 않음</name>
       <name xml:lang="en">No Display</name>
   </options>
</var>

2. content.class.php 추가

$widget_info->file_icon = $args->file_icon;

3. normal.html 추가 및 수정

<span class="c_icon">{$item->printExtraImages()}</span>

적용하고 나니 게시판이나 위젯이 깨끗해진 느낌이랄까~

좋네요!

사이트의 특정파일(이미지,동영상,압축파일)들을 타 사이트에서 링크 금지 시키는 방법

2019-10-19T19:23:04+09:00

XETOWN에서 튜닝셀프님이 질문하고 직접 올리신 방법을 공유합니다.

[질문]

가뜩이나 호스팅이라 트래픽이 넉넉치 않은데, 제 사이트에 있는 gif이미지가 타 사이트에 주소 그대로 링크되어

트래픽이 급증했습니다..

이거 막을 수 있는 애드온같은거 있을까요? 아니면 어떻게 대처해야 하나요? gif이미지만 5개정도 링크주소 그대로 링크하여 트래픽이 장난 아니네요.

[방법]

흐흐 되네요 ㅋㅋ xe위치한 폴더의 .htaccess 파일에 아래처럼 추가하니 되네요. ^^
RewriteCond %{HTTP_REFERER} !^$
RewriteCond %{HTTP_REFERER} !^http(s)?://(www.)?tuningself.net [NC]
RewriteRule .(gif|jpg|jpeg|png|mp4|zip|GIF|JPG|JPEG|PNG|MP4|ZIP)$ – [NC,F,L]

"게시판 전체 검색 모듈"을 스케치북에 적용하는 방법

2019-10-15T13:50:28+09:00

라르게덴님의 "게시판 전체 검색 모듈"을 스케치북게시판에 적용하는 방법입니다.

https://moonhouse.co.kr/xedata/502018

라르게덴님이 알려주신 modules/board/skins/default/list.html방법은 default게시판을 기준으로 설명한 것이라 스케치북 게시판과는 약간의 차이가 있어서 팁을 남깁니다.

modules/board/skins/sketchbook5/list.html 에서 수정전 부분을 수정후로 교체하시면 됩니다.

이 부분은 게시판의 목록아래 검색을 담당하는 부분입니다.

[수정전]

<select name="search_target">
<option loop="$search_option=>$key,$val" value="{$key}" selected="selected"|cond="$search_target==$key">{$val}</option>
</select>

[수정후]

<select name="search_target">
   <option loop="$search_option=>$key,$val" value="{$key}" selected="selected"|cond="$search_target==$key">{$val}</option>
   <option value="all_content" selected="selected"|cond="$search_target=='all_content'">{$lang->total}{$lang->cmd_search}</option>
   <option value="title_content_comment" selected="selected"|cond="$search_target=='title_content_comment'">{$lang->title}+{$lang->content}+{$lang->comment}</option>
   <option value="extra_vars" selected="selected"|cond="$search_target=='extra_vars'">{$lang->extra_vars}</option>
</select>

modules/board/skins/sketchbook5/_search.html 에서 수정전 부분을 수정후로 교체하시면 됩니다.

이 부분은 게시판의 목록 상단 검색을 담당하는 부분입니다.

이렇게 수정하고 나면 검색목록에 "전체검색" "제목+내용+댓글" "사용자 정의" 가 추가됩니다.

Lightbox 적용 위젯에서 원본 파일 출력

2019-09-22T21:58:24+09:00

https://moonhouse.co.kr/index.php?mid=xemy&search_target=tag&search_keyword=Lightbox

위젯작업 Lightbox적용시 썸네일 클릭시 원본이미지를 불러오는 코드를 짜기가 어렵네요.

그래서 확장변수를 활용해서 원본이미지를 가져오는 방법입니다.

1. 게시판 "설정"에서 "사용자정의"에서 확장변수를 "url 형식"으로 하나 만듭니다.

2. 게시글 작성시 원본이미지의 url을 4번째 확장변수에 붙여 넣기 하세요.

3. Lightbox가 적용된 위젯에 list.html파일에서 이미지를 불려오는 코드를 아래와 같이 수정합니다.

- 원본

<a cond="$wi->view_type =='lightbox'" class="image-link" href="{$oDocument->getThumbnail($wi->thumbnail_width*$wi->thumbnail_zoom,$wi->thumbnail_height*$wi->thumbnail_zoom,ratio)}" data-lightbox="lightbox" data-title="{$oDocument->getTitleText()}">

-수정

<a cond="$wi->view_type =='lightbox'" class="image-link" href="{$oDocument->getExtraValue(4)}" data-lightbox="lightbox" data-title="{$oDocument->getTitleText()}">

{$oDocument->getExtraValue(4)} 에서 (4)부분에 확장변수의 번호를 적어 주시면 됩니다.

p.s 위와 같이 적용하면 움직이는 gif파일도 Lightbox안 에서 원본대로 gif파일로 보입니다.

에니메이션(-webkit-animation) 효과 쉽게 적용하는 방법

2019-09-19T22:01:31+09:00

레이아웃이나 기타 다른 부분에도 에니메이션 효과를 쉽게 적용하는 방법입니다.

https://moonhouse.co.kr/423394

https://moonhouse.co.kr/433413

위 사이트를 먼저 보고 오면 도움이 됩니다.

https://daneden.github.io/animate.css 사이트에 접속해 보면

효과 이름이 있고 "Animate it"버턴을 눌러보면 해당 효과를 볼 수 있습니다.

[적용방법]

1. animate.css 파일을 다운받아서 적용을 원하는 레이아웃의 css폴더에 업로드합니다.

2. layout.html 에 animate.css를 로드합니다. 아래와 같이 편집합니다.

3. style.css파일을 열어서 에니메이션을 적용하고 싶은 id나 class에 코드를 적용합니다.

id과 gnd인 메뉴 부분에 아래로 5초 동안 내려 오는 코드입니다.

#gnb { -webkit-animation-duration:5s; animation-duration:5s; -webkit-animation-fill-mode:both; animation-fill-mode:both; -webkit-animation-name:fadeInDown; animation-name:fadeInDown }

fadeInDown 이 부분에 적용하고 싶은 효과의 이름을 적어 넣으시면 됩니다.

.contentbox .sh { -webkit-animation-duration:5s; animation-duration:5s; -webkit-animation-fill-mode:both; animation-fill-mode:both; -webkit-animation-name:fadeInRight; animation-name:fadeInRight }
.contentbox .notice { -webkit-animation-duration:10s; animation-duration:10s; -webkit-animation-fill-mode:both; animation-fill-mode:both; -webkit-animation-name:flash; animation-name:flash }

<div class="contentbox">
{$content}
</div>

위의 코드는 {$content} 영역(위젯 추가영역) 안의 각각의 "위젯"이나 "내용직접추가" 설정에서 "위젯크기"의 "위젯 CSS class"부분에 class 이름을 적어 주고 효과를 지정하면 됩니다. (ex : .sh .notice)

조금 더 자세한 옵션을 부여 할려면 https://moonhouse.co.kr/423394 내용을 참조하시면 됩니다.

#menu li {
-webkit-animation-name:rollIn;
-webkit-animation-iteration-count:1;
-webkit-animation-duration:3s;
-webkit-animation-timing-function:ease-in-out;
-webkit-animation-direction:normal;
-webkit-animation-fill-mode:forwards;
animation-name:rollIn;
animation-iteration-count:1;
animation-duration:3s;
animation-timing-function:ease-in-out;
animation-direction:normal;
animation-fill-mode:forwards;
}

위젯에 특정 카테고리글만 출력하기

2019-09-10T17:20:29+09:00

위젯을 만들다 보니 content위젯에 있는 카테고리로 문서를 출력하는 팁이 필요해서 찾다보니

XE사이트에 앙띠2님이 2010년도에 올려 주신 팁이 있어서 제가 간추려 정리해서 올립니다.

https://www.xpressengine.com/tip/18862050

1. 위젯의 xxx.class.php 파일을 편집기로 열어서 파란색 부분을 찾아서 코드에 빨간색 소스 추가합니다.

$obj->category_srl = $args->category_srl;
$output = executeQueryArray("widgets.xxx.getCategories", $obj);
$output = executeQueryArray('widgets.xxx.getxxx', $obj);

2. info.xml 파일에 아래 설정 추가

<var id="category_srl">
   <type>text</type>
   <name xml:lang="ko">대상 분류 srl값</name>
   <description xml:lang="ko">표시하고 싶은 분류만 나타나도록 할 경우 해당 분류 srl값을 입력해 주세요. (비워두시면 모든 분류 대상)</description>
</var>

2. queries폴더안에 getCategories.xml 첨부파일 추가하면 됩니다.

게시판으로 간단한 거래장부 만들기

2019-03-27T00:37:41+09:00

홈페이지 의뢰를 받고 작업중 클라이언트로 부터 간단한 거래장부 프로그램을 구할 수 없을까 하는 문의를 받고 생각을 해 보다.

간단한 거래장부 정도는 홈피 게시판으로도 만들 수 있을 것 같아서 꾸며 보았습니다.

참고로 고객의 거래 장부라 보여 드릴 수는 없습니다.

먼저 스케치북게시판 과 게시판 확장변수 다중검색 애드온 이 필요하며 스케치북게시판도 수정을 합니다.

1. 스케치북게시판에서 목록형을 약간 개조합니다.

만약 전체 홈피에서 목록형게시판을 사용하지 않는다면 "_list_normal.html" 파일을 직접 수정하셔도 되고,

아니면 임의의 게시판형식을 하나 만드셔도 됩니다.

23줄 부분 {$lang->title}부분(제목)을 적당히 수정합니다.

<th scope="col" class="title"><span><a href="{getUrl('sort_index','title','order_type',$order_type)}">작업내역{$lang->link_site}<i cond="$sort_index=='title'" class="arrow {$order_icon}"></i></a></span></th>

85줄 <a>에 style을 추가합니다.

<a style="color:orange; font-weight:bold; text-overflow:ellipsis; white-space:nowrap; word-wrap:normal; overflow:hidden"

119줄 <td>에 style을 추가합니다.

max-width:100px는 적당한 사이즈를 적어 넣어시고,

아래 부분은 확장변수란에 마우스 hover시 전체 확장변수명이 출력되는 옵션으로 말풍선(툴팁) 애드온이 설치되어 있어야 작동합니다.
class="pr_tooltip" pr_color="dark" pr_position="top" title="{$document->getExtraValueHTML($val->idx)}"

<td cond="$val->idx!=-1" style="max-width:100px; text-overflow:ellipsis; white-space:nowrap; word-wrap:normal; overflow:hidden" class="pr_tooltip" pr_color="dark" pr_position="top" title="{$document->getExtraValueHTML($val->idx)}" class="link_urlm_no">

위와 같이 수정하시면 확장변수란들이 max-width보다 넓어지지 않고 작업내역의 넓이가 보장되며, 글이 1줄이상 출력되지 않습니다. 그리고 "말풍선 애드온" 설치하시면 줄어 들었던 확장변수들도 마우스 hover시 전체를 볼 수도 있습니다.

2. 게시판수정 작업을 완료 했으면 거래처에 필요한 주요 내용들을 확장변수로 만듭니다.

항목작성중 검색부분을 "예"로 선택하시면 이 확장변수들로 "게시판 확장변수 다중검색 애드온"에서 상세검색을 할 수 있습니다.

참고로 형식을 전화번호형식으로 지정하면 애드온에서 오류를 일으킵니다.

3. "게시판 확장변수 다중검색 애드온"을 설치하고 해당 mid를 지정합니다.

게시판관리 - 고급설정 - 목록설정 에서 검색할 확장변수 이름을 추가하시면 목록게시판에 출력됩니다.

4. 게시판설정에서 "글 작성시 미리 입력된 글 출력"란에 기본이 될 장부 형식의 테이블을 짜 넣습니다.

http://tablesgenerator.com/html_tables 에서 자신이 필요한 테이블을 짜시면 편리합니다.

Table을 만들때 테이블의 전체넓이를 675px정도로 맞추시면 스케치북에서 인쇄시 A4용지에 가로사이즈가 맞습니다.

인쇄할일이 없어면 굳이 전체넓이를 맞출 필요는 없고요.

"Copy to clipboard"를 해서 에디터편집기에 붙여 넣기를 합니다.

상단의 </style>바로 밑에 보면 아래 table코드가 시작되는데

<div style="overflow-x: auto;">을 추가합니다.

모바일에서 테이블의 넓이가 화면 범위를 넘어설때 스와이프기능이 작동되게 하는 코드입니다.

참조 https://moonhouse.co.kr/html/480352

그리고 table의 width를 100%로 하시면 PC에서는 게시판전체폭으로 모바일에서는 설정한 가로폭으로 출력됩니다.

</style>

<div style="overflow-x: auto;">
<table class="tg" style="undefined;table-layout: fixed; width: 100%">
<colgroup>
<col style="width: 44px" />
~ 생략 ~

</table>

</div>

에디터에서 편집한 코드를 "글 작성시 미리 입력된 글 출력"란에 붙여넣기 하시면 글 작성시 자동으로 내용입력란에 테이블이 출력됩니다.

5. 만약 거래장마다 테이블을 다른게 적용해야 되는 경우는 템플릿 컴포넌트 를 활용하시면 편합니다.

그리고템플릿 컴포넌트 스마트테이블 MH 템플릿을 참고하시여 테이블코드를 넣어서 각각의 테이블을 만들어서

글 작성시 출력해 주면 편합니다.

6. 모바일의 경우는 리스트형으로 게시판을 선택하면 아무래도 가로폭의 제약이 있으므로 웹진형으로 선택하면 보기가 편합니다.

위의 이미지와 같이 성명: ~ 내역:~ 부분이 상단에 출력되게 할려면

/modules/board/m.skins/sketchbook5/_list_webzine.html을 아래와 같이 코드를 첨부해 주시면 됩니다.

<h3 class="name">
{@ $mi->extra_val_no1 = 1; }

   
       {@$extravar_list = $document->getExtraVars()}{$extravar_list[1]->name} : {$document->getExtraValue(1)}
   
   

<span style="font-size:0.8em; color:#888">내역 : {$document->getTitle($mi->subject_cut_size)}</span>
</h3>

<h3 class="ngeb" cond="$mi->guest_name == ''">{$document->getTitle($mi->subject_cut_size)}</h3>

7. 최종적으로 거래장을 작성한 모습입니다.

[PC에서 출력]

[모바일에서 출력]

모바일의 경우는 테이블부분이 스와이프 작동됩니다.

끝으로 위와 같이 홈피에서 거래장을 만들면 인터넷이나 와이파이가 작동되는 어떤 곳에서도 PC나 테블릿, 모바일로 거래명부를 쉽게 볼 수 있고 작성할 수 있습니다.

p.s 이후에 게시판 스킨을 따로 분리해서 만들었습니다.

거래장+Map 게시판스킨 Mh Books - https://moonhouse.co.kr/xemy/529922

호스팅 이전 하면서 /xe 떼고 SSL설치한 경험기 입니다.

2019-03-16T01:32:41+09:00

http://moonhouse.co.kr/gongi/483001

위의 글에서 처럼 호스팅을 https://ivyro.net 으로 이전하면서

/xe꼬리표 떼고, SSL설치로 https:// 로 주소줄 바꾸는 작업기록 입니다.

먼저 호스팅을 이전 하는데 요즘은 랜섬웨어 및 악성코드의 지속적인 피해를 방지하기 위해 SSH접속들을 호스팅사 에서 보통 막고 있어서 부득이하게 이전 호스팅에서 데이터와 DB를 압축으로 내려 받아서 이사가는 호스팅에서 복원하는 방법을 사용하는 것이 가장 빠르고 편리합니다.

그런데 아이비호스팅에서는 백업메뉴는 있는데 복원메뉴가 없네요, 그리고 자동 백업기능도 없는 듯ㅠㅠ

싼게 비지떡인가 봅니다. 혹시 아이비호스팅을 선택하시는 분은 이점 참조하세요.

또 한가지 중요한 단점은 계정과 DB를 백업하는데 자신의 계정용량을 초과하면 홈피가 뻗어버립니다.

보통의 호스팅들은 계정용량과 상관없이 백업파일들을 생성해 주는데 아이비는 백업파일들까지 용량에 추가해 버립니다. 저 같은 경우는 데이터가 1.5G정도 되는데 백업파일 1G정도 되어서 계정용량 2G를 초과해서 홈피가 뻗어 버리네요. 물론 백업파일 내려 받고 지우면 다시 원상태로 돌아가지만...

그래서 저는 일일이 ftp로 접속해서 데이터 백업하고 DB에 직접 연결해서 sql내려 받아서 ftp로 파일 올리고 DB에서 sql 올리는 방법을 택했습니다. 그래서 시간적으로나 폴더와 파일들의 권한문제가 생기기도 해서 불편했습니다.

자! 지금까지는 호스팅 이전하는 일반적인 내용이었구요

/xe 꼬리표 떼는 것은 의외로 간단합니다.

이전설치후 "관리자 페이지" - "설정" - "시스템 설정" - "사이트설정" - "도메인" 에서 /xe 지우시고 저장후 관리자 페이지 닫지 않고 ftp에서 xe안에 파일들 모두 root로 이전하신 후 "캐시파일 재생성" 눌러주시면 일단은 성공입니다.

그 다음 DB에서 작업은 SSL적용후 https:// 로 바꾸고 나서 한꺼번에 하는 걸로...

Let’s Encrypt FreeSSL/TLS 무료 인증서 설치를 신청하고 기다려도 답이 없길래 이것 저것 만지다가 홈피도 죽고

https://xetown.com/questions/1188607

하루가 지나고 설치 언제쯤 되냐고 질문글을 다시 올리니 그때서야 답변글이 달리네요.

안녕하십니까. 아이비호스팅입니다.

해당 도메인에 ssl설치중에 문제가 있어 설치가 지연되고있습니다. 현재 확인중에 있으며,

이용에 불편을 드려 죄송하며 최대한 빨리 문제 해결 후 설치 도와드리도록하겠습니다.

여러번 설치 시도 시 ssl설치가 막힐 수 있어 느리게는 다음주 중에 설치가 가능 할 수 있는점 양해부탁드립니다.

설치 후에 바로 연락드리도록 하겠습니다.

감사합니다.

이 글을 받고 느긋하게 기다리니 5일만에 설치 완료 되었다고 답글이 달렸네요.

연락 준다고 했으면 메일정도로는 연락해 주어야 하지 않나?

게시판에 들어가 보지 않으면 설치 된 것인지도 모를뻔 했네요.

참고로 SSL이 설치가 되어도 관리자설정에서 설정 수정해 주지 않으면 일반 http:// 로도 잘 접속됩니다.

괜히 저 같이 설치되었나 안 되었나 테스트 한답시고 "HTTPS 사용" 건드리지 마세요.

http://도, https://도 모두 홈피 접속 안됩니다.

SSL설정도 간단합니다.

"관리자 페이지" - "설정" - "시스템 설정" - "사이트설정" - "HTTPS 사용" 에서 "항상 사용(권장)" 선택하시면 끝입니다.

그럼 무엇이 문제 일까요?

바로 시스템으로 이뤄지는 주소들 이외에 게시판이나 문서에 직접 입력한 http:// 주소들이 문제가 됩니다.

이런 경우 브라우저 주소창에 https:// 앞에 열쇠가 붙지 않고 느낌표가 뜨면서 클릭하면 안전하지 않다고 메세지가 나옵니다.

그럼 DB안에 존재하는 모든 http:// 를 https:// 바꾸는 방법을 설명하겠습니다.

1. https://xetown.com/point_contents/22661 "SSL지원 애드온" 사용하시면 가장 쉽게 된다고 합니다.

저는 1번이 잘 되지 않아서

2. phpMyAdmin로 들어가서 모두 선택후 sql로 내려받습니다.

내려 받은 sql파일을 Editplus 에디터기로 열어서

"바꾸기(Ctrl + H)"로 http://moonhouse.co.kr/xe 를 https://moonhouse.co.kr로 모두 바꾸어 주었습니다.

그러면 /xe 꼬리표 떼기와 https:// 로 한번에 수정이 가능하겠죠.

근데 문제가 특정 레이아웃이 깨어지는 현상이 생기네요. 이래 저래 하다보니

DB중에 xe_sites를 제외하고 sql로 내려 받아서 수정하니 정상적으로 작동이 되네요.

근데 xe_sites에 들어가 보면 domain에 정상적으로 https:// 붙어 있고

별 내용이 없는데 이상합니다???

그렇게 해서 홈피 접속시 주소 왼쪽에 자물쇠 보이면 성공한 것입니다.

근데 안 보일 걸요~~

"캐시파일 재생성" 눌러주시고 사용 브라우즈의 "인터넷 사용기록"도 지워주셔야 정상적으로 보일 것입니다.

3.그런데 저 같은 경우 sql파일의 크기가 그리 크지를 않아서(한 20M) 에디터기로 열어서 편집을 할 수가 있지만,

용량이 무지 큰 경우는 에디터기로 열기가 쉽지는 않을 것 입니다.

그런 경우는 phpMyAdmin에서 쿼리문을 직접 작성하시면 됩니다.

https://www.xpressengine.com/tip/21740199 참조하세요.

마지막으로 예전 주소인 http://moonhouse.co.kr/xe 로 들어와도 https://moonhouse.co.kr 로 접속되게 만들어야겠죠.

/xe폴더안에 아래 내용이 포함된 .htaccess파일을 만들어서 올리면 됩니다.

RewriteEngine On

RewriteRule (.*) https://moonhouse.co.kr/$1 [R=301,L]

SSL을 적용하고 나면

구글과 네이버 웹마스터도구 에서 주소를 새로 등록해야 합니다.

변경하는 옵션은 없습니다.

괜히 찾지마세요.

"소셜XE 모듈" 로그인을 사용중이라면 사용중인 sns계정에 접속해서 접속주소를 수정해 주어야 정상 작동됩니다.

그리고 각종 API들(지도맵, Youtube, reCAPTCHA, 카카오링크등)도 수정해 주어야 합니다.

게시글보기 링크문구 바로가기 아이콘 출력

2019-02-23T14:29:19+09:00

게시글 보기시 Url링크 바로가기 뒤에 아이콘을 출력하는 Tip입니다.

sketchbook5 게시판스킨을 수정합니다.

1. list.html 파일을 열어서 빨간색 부분 추가합니다.

<block cond="$mi->url_link_img == ''">
   <load target="js/link_external_icon.js" />
   <script>
       $(function() {
           $(".rd.rd_read").link_external_icon({
               icon_path:"/modules/board/skins/sketchbook5/img/link_external.png"
           });
       });
   </script>
</block>
<include cond="$oDocument->isExists()" target="_read.html" />

2. skin.xml 파일 열어서 "본문 일반 설정"그룹안에 아래의 설정을 넣습니다.

3. link_external_icon.js 파일을 js폴더에

이미지를 img폴더에 업로드합니다.

4. "관리자설정"에서 "캐시파일 재생성" 하시고 "게시판설정"에서 설정하시면 됩니다.

p.s 애드온으로 만들면 좋을 것 같은데 제가 애드온에는 약합니다. ㅠㅠ

시간 나면 도전해 봐야지요...

[애드온 만들었어요^.^]

https://moonhouse.co.kr/xemy/479310

게시판 글쓰기시 Tag부분 출력 유무 설정방법

2019-02-17T12:03:21+09:00

Xetown에 질문글이 올라 왔길래 스케치북5 게시판 옵션을 보니 없길래 추가하는 방법입니다.

1. /modules/board/skins/sketchbook5/skin.xml 아래 코드 추가

<var name="tag_view" type="radio">
 <title xml:lang="ko">태그입력부분출력</title>
 <options value="Y">
 <title xml:lang="ko">출력</title>
 </options>
 <options value="N">
 <title xml:lang="ko">출력하지 않음</title>
 </options>
 <description xml:lang="ko">태그입력부분의 출력을 선택합니다.</description>
 </var>

2. write_form.html 에 빨간색부분 코드 추가

<div class="tag itx_wrp" cond="$mi->tag_view!=='N'">
<span class="itx_wrp">
<label for="tags">{$lang->tag} : {$lang->about_tag}</label>
<input type="text" name="tags" id="tags" value="{htmlspecialchars($oDocument->get('tags'))}" class="itx" />
</span>
</div>

"드래그하여 페이지/문서 이동 애드온" 적용팁

2019-02-14T21:45:29+09:00

드래그하여 페이지/문서 이동 애드온

[스케치북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">


   
   <include target="_list_normal.html" />
   
   <include target="_list_m.html" />
   

<include target="_list_webzine.html" />
- 중략 -

<include target="_list_normal.html" />

</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파일 추가

<div cond="$mi->srch_window!='N'" class="bd_faq_srch clear" 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 파일 최하단에 아래 스크립트 추가

/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 rd_nav_style2 rd_blog {$mi->blog_style} clear" style="padding:{$mi->rd_padding};" data-docSrl="{$oDocument->document_srl}">

XE 위젯을 반응형으로 적용하자

2018-12-31T14:43:50+09:00

제가 예전에 "위젯을 가로로 정렬했을때 모바일에서 반응형으로 적용하기" 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 위젯스타일에 적용해 보았습니다.

https://moonhouse.co.kr/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%로 배치됩니다.

댓글이 2줄 이상일 경우 접고 펴는 기능추가하기

2018-11-27T13:08:25+09:00

게시글에 댓글이 여러줄로 달릴 경우 댓글란들이 길게 나열되는 것이 싫어실 경우 적용하시면 됩니다.

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 부분과 폰트어썸 아이콘은 웹폰드 에드온을 사용했습니다.

Sketchbook5 게시판 글작성시 상단에 빵조각메뉴 부분 삭제하기

2018-11-02T22:19:58+09:00

Sketchbook5 게시판을 사용하여 글 작성시 상단에 빵조각 메뉴 부분이 설정과 상관없이 출력됩니다.

이 부분이 마음에 들지 않는 경우 무조건 출력되지 않게 수정하는 방법입니다.

_header.html 파일을 아래와 같이 수정합니다.

<div class="bd_hd clear">
 <!--// 빵조각 메뉴 -->
 <include cond="!$mi->breadcrumb || $act=='dispBoardWrite'" target="_breadcrumb.html" />
 </div>

<div cond="!$act=='dispBoardWrite'" class="bd_hd clear">
 <!--// 빵조각 메뉴 -->
 <include cond="!$mi->breadcrumb" target="_breadcrumb.html" />
 </div>

RM 팁

스케치북 스킨 관리자 화면에 쉽게 접근할 수 있는 "위저드" 기능을 제거하면 성능이 눈에 띄게 개선

SketchBook5 게시판 스킨 공지사항을 폴딩 형식으로 출력하기 2탄

넥슨 Lv.2 고딕 NEXON Lv2 Gothic 웹 폰트 적용하기

위젯에 확장변수에서 체크된 해당 글 리스트 불러오기 2탄

랭킹 순서 위젯 만들기

각종 A.I 라이믹스 코딩 시켜본 소감

Github에 새 보관소 만들기, 파일 올리기, Tag, Release 생성 방법

구글 에드센스 광고가 출력되지 않을때 리스트 항목에서 숨기기

위젯에 확장변수에서 체크된 해당 글 리스트 불러오기 1탄

확장변수 부분을 특정 폼형태(Table)로 구성하는 방법

Table의 폭이 디바이스 및 본문 가로 사이즈보다 더 넓을 때 마우스 휠 좌우 스코롤

게시판에서 글 작성시 확장변수에 Hidden 적용시 기본값이 적용되게 하는 법

게시판 목록의 원하는 칸에 에드센스들 삽입하는 방법

게시판에 모듈번호를 출력하는 방법

SketchBook5 게시판스킨에 특정 확장변수(price)에 천 단위 쉼표(number_format) 적용하기

라이믹스 2.1.15 버전에서 "메뉴 아이콘" 사용방법

네이버 나눔스퀘어 네오 NanumSquareNeo 웹 폰트 적용하기

OrangeDay 테마중 레이아웃 / 게시판스킨 - 문하우스 수정 V2.0 (25. 01. 11)

위젯에 확장변수 이용하여 시작날짜 ~ 종료날짜 출력하기

SketchBook5 게시판 스킨 Tag 버그 수정

SketchBook5 게시판스킨 공지사항을 폴딩 형식으로 출력하기 1탄

Rhymix(라이믹스) 알림설정에 네이버 이메일로 지정하는 방법

구글 번역 기능 추가하는 법

추천+댓글 동시에 등록 하는 버튼

라이믹스 최신버전에서 "바로 업로드 에드온" 사용시 문제 수정

게시판 리스트 목록에 확장변수중 url변수를 버턴형식으로 출력

내 도메인 메일로 라이믹스에서 관리자 이메일 설정 방법

레이아웃 배경 이미지 좌로 흐르는 기법 적용

확장변수(날짜)로 위젯 정렬하기

확장변수 사용하여 날짜 기간 출력하기

확장변수명이 _hidden으로 끝날때 숨김처리 하기를 응용

레이아웃 다크모드 설정시 sketchbook5 웹진형 박스 내용물 투명화 수정

확장변수 "URL 형식" 주소란 에 텍스트 Link 출력하는 방법

확장변수가 자동으로 제목으로 대체되는 진짜 방법

확장변수가 자동으로 제목으로 대체되는 방법

Slide Pro 슬라이드 레이아웃에 추가

파일목록을 자료실 목록 형태로 꾸미기 - 스케치북 게시판스킨

확장변수 이용해 진행버턴과 D-day를 함께 출력

비밀글일때 제목글 감추는 방법

모바일 레이아웃에 통합 검색기능 적용하기

라이믹스 CKEditor에 Spolier 플러그인 적용하기

관리자는 필수 확장변수 프리패스 (아이디어에서 '팁'으로 발전했습니다)

예약발행모듈 구버전 위젯에서 정상작동 되게 하기

레이아웃 배경 슬라이드 적용법

Colorbox 사용법 2탄

Colorbox 사용법

다크모드를 구현해 보면서...

원댓글/대댓글 따로따로 애드온 && 적용방법

업데이트 0.1.0 (2022.03.28)

댓글 목록 중 원글 작성자일 경우 조건문을 적용하려고 합니다.

table을 좌우 스크롤(수평 스크롤, 스와이프)할 때 특정 컬럼을 고정하고 싶다면

1. 목록 파일 html 수정

2. css 수정

3. 결과

게시판 목록에서 카테고리/확장변수 바로 수정 애드온 and 모바일도 적용 방법

레이아웃에 언어선택 버턴을 설치하는 방법

글작성시 특정 확장변수를 관리자만 체크할 수 있게 하는 방법

mediafire.com 사이트를 자료 다운로드 링크로 이용하기

Rhymix 2.0.15 를 적용하니 게시판 글 작성시 확장변수란 문제 발생

라이믹스 게시판스킨 시간대별 댓글 출력 방법

Mh Appoint PopUp 위젯을 레이아웃에 적용하는 방법

타임라인 모듈을 이용하여 게시글별로 회원권한 따로 지정하는 방법

스케치북게시판에 스티커모듈 적용법 (라이믹스2.0 이상 전용)

확장변수 "내용 복사" 버턴 적용하기

게시글주소 클립보드 복사 기능 만들기

SketchBook5 게시판스킨 - 문하우스 수정버전에 "Book Gallery 형태" 유형 추가

라이믹스 2.0.6 에 추가된 "메뉴 아이콘" 사용방법

그룹별로 위젯 노출 유무 적용하기

라이믹스 2.0 통합게시판 기능에 게시판명 출력 방법

Rhymix 2.0 UP 후기

게시판 본문의 분류 제목을 출력할 때 상위 카테고리의 제목도 같이 출력하기

노토 산스 (Noto Sans) 적용해보기 - 구글, 어도비에서 개발한 가독성 좋은 폰트

위젯 메이커시 게시글안의 전체 이미지를 썸네일로 출력하는 방법

스케치북 게시판에 카카오지도 출력 V1.2

추천수로 제목에 효과주기

LightBox 출력시 하이퍼링크 적용하기

사용자정의(확장변수) 형식선택 출력방법

반응형 햄버거(삼선)안 메뉴 만들기

DB를 건더리면... 1탄 - 세밀한 페이지 복사