[최신글 9/13] 개발 ② 새 스킨 만들기 실습 (mycard) — DXCMS

키워드: 새 스킨, mycard, 테마, theme.json, CSS, dx_theme_url, 중복 방지 표기: (소스)=코드 확인·실행 검증, (README)=README 기재, (일반)=일반 지식

themes/mytheme/board_latest/mycard.php 를 만들어 봅니다. (실행 검증: 테마를 mytheme 로 설정하고 두 번 호출해

1단계 스킨 파일

<?php
if (!defined('DX_CMS')) exit('Direct access not allowed.');
if (!defined('DX_LT_MYCARD_CSS')) {                       // 같은 페이지에서 여러 번 불러도 CSS 는 한 번만
    define('DX_LT_MYCARD_CSS', 1);
    echo '<link rel="stylesheet" href="' . htmlspecialchars(dx_theme_url('board_latest/mycard.css'), ENT_QUOTES, 'UTF-8') . '">' . "\n";
}
?>
<section class="mycard">
  <header class="mycard-head">
    <h3><?php if ($icon) echo htmlspecialchars($icon, ENT_QUOTES, 'UTF-8') . ' '; echo htmlspecialchars($title, ENT_QUOTES, 'UTF-8'); ?></h3>
    <a href="<?php echo htmlspecialchars($more_url, ENT_QUOTES, 'UTF-8'); ?>">더보기</a>
  </header>
  <?php if (empty($posts)): ?>
    <p class="mycard-empty">게시글이 없습니다.</p>
  <?php else: foreach ($posts as $p): $secret = !empty($p['is_secret']); ?>
    <a class="mycard-item" href="<?php echo htmlspecialchars($p['url'], ENT_QUOTES, 'UTF-8'); ?>">
      <?php if (!$secret && !empty($p['thumb_url'])): ?><img src="<?php echo htmlspecialchars($p['thumb_url'], ENT_QUOTES, 'UTF-8'); ?>" alt="" loading="lazy"><?php endif; ?>
      <strong><?php echo $secret ? '비밀글입니다' : htmlspecialchars($p['title'], ENT_QUOTES, 'UTF-8'); ?></strong>
      <?php if ($show_excerpt && !$secret && $p['excerpt'] !== ''): ?><span><?php echo htmlspecialchars($p['excerpt'], ENT_QUOTES, 'UTF-8'); ?></span><?php endif; ?>
      <small><?php echo htmlspecialchars($p['date_short'], ENT_QUOTES, 'UTF-8'); ?></small>
    </a>
  <?php endforeach; endif; ?>
</section>

2단계 CSS (themes/mytheme/board_latest/mycard.css)

.mycard{border:1px solid var(--border);border-radius:12px;background:var(--bg-card)}
.mycard-head{display:flex;justify-content:space-between;padding:12px 16px}
.mycard-item{display:block;padding:10px 16px;text-decoration:none;color:var(--text-main)}

3단계 테마 준비와 호출

• themes/mytheme/theme.json 에 name, version, author, description 을 넣습니다. (소스 DxTheme 주석)
• 관리자 테마 설정에서 mytheme 를 선택합니다. 폴더가 없으면 default 로 처리됩니다.
• 호출:
• dx_theme_url('board_latest/mycard.css') 는 현재 테마 기준 전체 주소를 돌려줍니다.

다음: 10/13 개발 ③ 확장 조회 ① 결과 형식

@디엑스