css, js 파일의 수정 시간을 verison 에 적용하기

그누보드에서 스킨이나 웹사이트의 디자인을 css로 변경하는 경우,

add_stylesheet 로 임베드되는 파일의 버전이 자동으로 붙도록 구성되어 있는데요.

이 버전 관리는 /extend/version.extend.php 에서 하게 되어 있더라고요.

저는 css 수정이 꽤 잦은 편이라… 

파일의 수정시간을 version 으로 적용하는 다른 팁들을 참고하여 적용하고 있었습니다.

그런데, add_stylesheet 나 add_javascript 로 파일을 임베드 할 때, 코드가 좀 복잡해지는 것 같아서요.

조금 바꿔서 적용을 해봤습니다.

1. /extend/version.extend.php 하단에 아래의 코드 추가

다음의 코드(숫자는 다를 수 있습니다.) 하단에 그 아래의 코드를 추가합니다.

function add_css($file,$n) {
    if (strpos($file, G5_PATH) !== false) {
        $file_location = str_replace(G5_PATH, '', $file);
    } else if(strpos($file, G5_URL) !== false) {
        $file_location = str_replace(G5_URL, '', $file);
    }
    $file_real_location = G5_PATH.'/'.$file_location;
    if (file_exists($file_real_location)) {
        $file_ver = "?ver=".date( 'YmdHis', filemtime( $file_real_location) );
    }
    $css = '<link rel="stylesheet" href="'.$file_location.$file_ver.'">';
    add_stylesheet($css, $n);
}

function add_js($file,$n) {
    if (strpos($file, G5_PATH) !== false) {
        $file_location = str_replace(G5_PATH, '', $file);
    } else if(strpos($file, G5_URL) !== false) {
        $file_location = str_replace(G5_URL, '', $file);
    }
    $file_real_location = G5_PATH.'/'.$file_location;
    if (file_exists($file_real_location)) {
        $file_ver = "?ver=".date( 'YmdHis', filemtime( $file_real_location) );
    }
    $js = '<script src="'.$file_location.$file_ver.'"></script>';
    add_javascript($js, $n);
}

2. 그리고 css 또는 js 에서 적용해야 하는 코드를 변경해줍니다.

예를 들어,
add_stylesheet('<link rel="stylesheet" href="'.$member_skin_url.'/style.css?ver='.G5_CSS_VER.'">', 10);
같은 코드를,

add_css("$member_skin_url/style.css",0);

로 변경해주면 됩니다.

js는

add_js(G5_THEME_PATH.'/js/common.js',11);

같은 형태로 변경해주면 됩니다.

이렇게 적용하면, 

<link rel="stylesheet" href="http://{도메인}/theme/{skin url}/skin.css?ver=220608">

로 출력되던 코드가

<link rel="stylesheet" href="http://{도메인}/theme/{skin url}/skin.css?ver=20220609153302">

로 변경됩니다.

/extend/version.extend.php 파일의 버전을 바꿀 필요도 없고,

파일을 수정하게 되면 그 수정한 시간을 기반으로 version 을 붙여서 출력해주니, 브라우저 캐쉬를 비울 필요 없이 바꾼 css 나 js 가 적용된 화면을 볼 수 있습니다.

다만 이 코드는 cafe24 호스팅에서만 확인했고요. 만약 도메인과 연결되는 기본 디렉토리 (카페24의 경우 {아이디}/www)가 아닌 다른 곳에 그누보드를 설치하셨다면 소스 수정을 하셔야 합니다.