css, js 파일의 수정 시간을 verison 에 적용하기 정보
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)가 아닌 다른 곳에 그누보드를 설치하셨다면 소스 수정을 하셔야 합니다.
4
댓글 2개
감사합니다.
-
변수 초기화: 코드에서
$file_ver변수는 조건문 내에서만 선언되고 있습니다. 만약file_exists($file_real_location)조건이 거짓이라면,$file_ver변수는 정의되지 않은 채로 사용될 것입니다. 이는 PHP 에러 또는 경고를 발생시킬 수 있습니다. 따라서$file_ver변수를 빈 문자열로 초기화하는 것이 좋습니다. -
조건문의 중복:
strpos()함수를 사용한 조건문이 중복되어 있습니다. 이 부분은 함수의 시작 부분에서 한 번만 확인하도록 개선할 수 있습니다. -
코드 재사용성:
add_css()함수와add_js()함수에 중복된 로직이 많습니다. 중복된 로직을 별도의 함수로 분리하여 코드의 재사용성을 높일 수 있습니다.
개선된 코드 :
function get_file_version($file) {
$file_location = '';
$file_prefix = strpos($file, G5_PATH) !== false ? G5_PATH : (strpos($file, G5_URL) !== false ? G5_URL : null);
if ($file_prefix) {
$file_location = str_replace($file_prefix, '', $file);
$file_real_location = G5_PATH.'/'.$file_location;
if (file_exists($file_real_location)) {
return $file_location . "?ver=" . date('YmdHis', filemtime($file_real_location));
}
}
return $file_location;
}
function add_css($file, $n) {
$file_with_ver = get_file_version($file);
$css = '<link rel="stylesheet" href="'.$file_with_ver.'">';
add_stylesheet($css, $n);
}
function add_js($file, $n) {
$file_with_ver = get_file_version($file);
$js = '<script src="'.$file_with_ver.'"></script>';
add_javascript($js, $n);
}
사용법은 같습니다
