search

gnuboard / gnuboard5

그누보드5 (영카트 포함) 공개형 Git
Other
299 stars 244 forks source link

컨텐츠 영역에 공통된 CSS Class와 다크모드를 위한 CSS Class #281

Closed kkigomi closed 2 months ago

kkigomi commented 10 months ago

개요

이 제안은 글, 댓글 등의 컨텐츠 영역과 html, body 태그 등에 공통된 CSS 클래스를 지정하고, 플러그인 등에서 이와 같은 특정 영역에 CSS Class를 지정할 수 있도록하는 API를 제공하기 위함입니다. 또한, darkmode 쿠키를 이용해 다크모드 활성화를 구분하여 <html> 태그에 다크모드임을 표시합니다.

예로,

그누보드5의 컨텐츠 표현의 일관성과 유연성을 높이기 위한 제안입니다. 컨텐츠 영역의 스타일을 정돈하고, DHTML 에디터 편집 모드와의 호환성을 개선할 수 있으리라 기대합니다. 또한, 다양한 테마, 스킨 제작자들이 다크모드 지원 시 CSS Class(dark)를 활용하도록 유도할 수 있습니다.

영역 공통 클래스

common.lib.php 파일에 있는 html_process 클래스에 관련 기능을 모아서 추가했습니다. 적절한 별개의 클래스로 분리할 수도 있었지만 네임스페이스도 사용할 수 없고, 별개의 파일을 로드하거나 common.lib.php 파일에 또 클래스를 끼워 넣느니 html_process 클래스를 활용했습니다.

section_class()

특정 영역의 공통된 클래스 출력을 위해 section_class() 함수를 사용할 수 있습니다. 두번째 파라미터에 배열로 덧붙일 클래스를 지정할 수 있습니다.

<!-- html 태그 -->
<html class="<?= section_class('html') ?>">

<!-- body 태그 -->
<body class="<?= section_class('body') ?>">

<!-- 글 -->
<div class="<?= section_class('article') ?>">글 내용</div>

<!-- 댓글 + 커스텀 클래스(my-comment) -->
<div class="<?= section_class('comment', ['my-comment']) ?>">댓글 내용</div>

섹션 이름의 대체

이름이 모호한 문제와 g5-content 클래스의 중복으로 인해 다음과 같이 영역 이름과 클래스를 대체했습니다.

add_section_class()

특정 영역에 클래스를 추가할 수 있습니다. 플러그인 등에서 특정 영역에 클래스를 지정해야할 때 유용합니다. g5-로 시작하는 클래스는 추가할 수 없습니다.

add_section_class('html', 'theme--pastel');
add_section_class('article', 'ckeditor-default');
add_section_class('body', 'page-type--board-list');
add_section_class('body', 'page-type--board-view');

에디터의 컨텐츠 편집 영역에서는 아래와 같이 사용할 수 있습니다.

<div class="<?= section_class('content', [], /** @param $editable bool */ true); ?>" contenteditable>

// 결과
<div class="g5-content g5-content--editable g5-article" contenteditable>

기타

html_process 클래스에 다음과 같은 메소드를 사용할 수 있습니다.

다크모드

다크모드 지원은 darkmode 쿠키를 이용해 <html> 태그에 dark 클래스를 추가해주는 역할을 합니다.

다크모드를 변경하는 인터페이스는 제공하지 않습니다. 다크모드는 서비스 제공자가 아닌 사이트 이용자의 선호나 선택에 의존하므로 프론트엔드에서 사이트 이용자의 선택에 따라 쿠키를 제어하도록 구현해야 합니다.

is_darkmode()

쿠키를 확인하여 다크모드를 판단합니다. <html> 태그에 다크모드임을 표시하거나 필요한 CSS 파일을 먼저 로드하기위해 사용할 수 있습니다.

darkmode 쿠키의 값이 'dark', 'on', 'y', 'yes', 'true', '1' 중에 하나이면 다크모드로 판단합니다.

add_stylesheet('<link rel="stylesheet" href="layout.css">');
if (is_darkmode()) {
    // 다크모드
    add_stylesheet('<link rel="stylesheet" href="layout-darkmode.css">');
}

add_darkmode_class()

다크모드 시 <html> 태그에 다크모드임을 나타내는 클래스룰 추가로 지정할 수 있습니다. 기본 값은 dark이며, 필요에 따라 tw-dark, theme-dark 등의 클래스를 추가할 수 있습니다.

add_darkmode_class('tw-dark');

레이아웃과 스킨에 적용 함

그누보드에 내장된 스킨 모두에 section_class() 함수를 사용하여 컨텐츠 영역과 html, body 태그에 적용했습니다.

kkigomi commented 10 months ago

프론트엔드에서 다크모드를 설정할 수 있도록 백엔드를 개선하고, 레이아웃 파일에서 프론트엔드에서 참조할 전역변수를 추가했습니다.

프론트엔드에서 아래와 같이 활용할 수 있습니다.

/**
 * 다크모드 설정
 * @param string mode 
 */
function set_darkmode(mode = 'dark') {
    if (mode === '' || mode === null) {
        delete_cookie('darkmode');
    } else if (mode === 'dark' || mode === 'light') {
        set_cookie('darkmode', mode);
    }

    window.g5_darkmode_classes?.dark?.forEach(function (classname) {
        $('html').toggleClass(classname, mode === 'dark');
    });
    window.g5_darkmode_classes?.light?.forEach(function (classname) {
        $('html').toggleClass(classname, mode === 'light');
    });
}

// dark 고정
set_darkmode('dark');

// light 고정
set_darkmode('light');

// 시스템 설정에 따르도록 설정 해제
set_darkmode(null);