Book Club 스킨 NavBar(GNB) 오류 수정

블로그의 대표 페이지 정보를 찾기 쉽게 상단에 배치하는 GNB 메뉴바의 오류 수정

티스토리 Book Club 스킨 (MIT License)

파일: "script.js"

20210402 본문 하단 "5. 추가 수정"

- 로딩 속도 향상을 위한 구문 변경

20210403 본문 하단 "6. (아마도) 마지막 수정"

- 내비게이션 메뉴바, #GNB의 오류를 모두 수정한 것으로 추측합니다.

1. "홈" 메뉴 이중 링크 수정

2. "홈" 메뉴를 삭제할 경우 처음 메뉴가 잘못 "current" 표시되는 오류 수정

3. 카테고리 경로뿐만 아니라 파일을 메뉴에 등록할 경우에도 "current" 표식 가능

4. 조건문을 하나로 단축하여 로딩 속도 단축

기본 코드의 오류 증상

1. 북클럽 스킨의 기본 코드

스킨 데모 페이지에서 캡처한 이미지입니다.
밑줄 친 부분은 현재("current") 접속한 카테고리나 초기 페이지("홈")를 강조하는 기본 디자인 요소입니다.

이 상태에서 '블로그관리 홈', '메뉴'에 접속하여 '홈' 링크 버튼을 추가합니다. 그러면 오류 증상이 나타납니다.

① 홈 버튼을 강조하기 위한 밑줄이 항상 표시됩니다.

② 상단 메뉴에서 다른 카테고리를 클릭하여 해당 카테고리 페이지가 뜨면 '홈'과 '해당 카테고리' 메뉴에 하단 밑줄이 생기는 복수 표시 오류가 있습니다.

③ '홈' 버튼을 삭제하여 사용하지 않는 상태에서 블로그 첫 페이지를 띄우면 상단 메뉴바의 처음 메뉴에 강조 밑줄이 표시되는 오류가 있습니다. 항상 "홈" 메뉴를 등록해서 사용해야 합니다.

※ 마지막 오류는 사용자마다 다르게 나타납니다. 주로 블로그의 디자인을 바꿀 때 "index.xml"과 "style.css" 파일의 "#gnb" 관련 코드를 수정하였을 경우 발생합니다.

2. 개인 개발자 상단 메뉴(GNB) 수정 코드의 오류

티스토리 블로그를 운영하는 개인 개발자의 여러 가지 수정 코드를 최근까지 만족스럽게 사용하였습니다. 그중에는 현재 접속 카테고리 강조 표시를 먼저 표시하게 수정한 코드도 있습니다. 모두 동일하게 ③ 항목의 오류가 있습니다.

모든 개발자의 수정 코드를 적용해 본 것은 아니기 때문에 혹시 좋은 소스 코드 자료를 알고 계시는 분은 같이 공유하면 좋겠습니다.

3. 오류 수정 방법

코드를 공부하지 않고 검색을 통해서 비교 분석하여 오류를 수정했습니다. 대략 어떤 상황인지 짐작이 갈 것입니다. 수정한 코드에 대하여 정확하게 기술하겠습니다. 잘못된 곳이 반드시 있을 것으로 생각합니다. 수정 부탁드립니다.

북클럽 스킨 "script.js"의 기본 코드

Line 12 ~ 18

$(window).load(function(){
	$gnb.find("li").each(function(){
		gnbWidth  = gnbWidth + $(this).outerWidth() + 1;
		if ( window.location.pathname.indexOf($(this).find("a").attr("href")) != -1 ){
			$(this).addClass("current");
		}
	});

오류 정정 코드

Line 12 ~ 19

$(window).on("load", function(){
	$gnb.find("li").each(function(){
		gnbWidth  = gnbWidth + $(this).outerWidth() + 1;
		var href = $(this).find("a").attr("href");
		if ( href !== "/" && window.location.pathname.indexOf(href) != -1 ) {
			$(this).addClass("current");
		}
	});

"script.js" 파일의 라인 12 ~ 18의 해당 부분을 수정한 코드로 교체해 주면 됩니다.

북클럽 스킨 코드 수정 방법.txt

0.00MB

4. 수정한 코드 설명

수정 전 (라인 12)

$(window).load(function(){

수정 후 (라인 12)

$(window).on("load", function(){

둘 다 jQuery 명령어(?)입니다. 수정 전 코드는 초기 버전이고, 수정 후 코드는 최근 버전입니다. 최근 버전이 수정 전 코드를 지원하지 않습니다. 버전이 맞지 않을 경우 작동하지 않습니다. 그래서 교체하였습니다. jQuery 구 버전만 사용 중이라면 변경하지 마세요.

A page can't be manipulated safely until the document is "ready." jQuery detects this state of readiness for you. Code included inside $( document ).ready() will only run once the page Document Object Model (DOM) is ready for JavaScript code to execute. Code included inside $( window ).on( "load", function() { ... }) will run once the entire page (images or iframes), not just the DOM, is ready.

'$( window ).on( "load", function() { ... })'는 DOM 뿐만 아니라 이미지와 iframes를 포함한 전체 페이지가 준비된 상태에서 실행되지만,

'$( document ).ready()'는 페이지의 DOM이 준비되면 바로 코드를 실행합니다.

실행 시점이 빠릅니다.

[출처] jQuery, $( document ).ready() | jQuery Learning Center

수정 전 (라인 15 ~ 17)

if ( window.location.pathname.indexOf($(this).find("a").attr("href")) != -1 ){
	$(this).addClass("current");
}

수정 후 (라인 15 ~ 18)

var href = $(this).find("a").attr("href");
if ( href !== "/" && window.location.pathname.indexOf(href) != -1 ) {
	$(this).addClass("current");
}

첫 줄은 변수(var)를 지정하여 코드를 간략하게 정리한 것입니다.

var href = ...

그리고 오류 발생의 원인인 "홈" 버튼을 밑줄 대상에서 제외하기 위하여 조건식에 짧은 코드를 추가하였습니다.

href !== "/"

"홈" 버튼의 강조 기능("current" 클래스 추가)을 제외하였기 때문에 블로그 초기 페이지를 접속하여도 "홈" 메뉴 하단에 밑줄이 생기지 않습니다.

"홈" 버튼을 메뉴바에서 사용하지 않을 때 무조건 처음 메뉴에 밑줄이 생기는 오류가 발생하지 않습니다.

별로 수정한 곳은 없으니까 원본 파일을 백업하고 간단하게 테스트할 수 있습니다.

5. 추가 수정

※ 20210402 작성

(1) Line 12 수정 구문

$(window).on("load", function() {

(2) Line 12 대체 가능 구문 (jQuery)

$(document).ready(function() {

인터넷을 검색해 보니까

코드 (1)의 "onload" 이벤트는 HTML 문서가 로딩되고 이미지와 같은 모든 콘텐츠의 로딩이 끝난 후에 실행되고,

코드 (2)의 "ready" 이벤트는 HTML 문서가 로딩되고 바로 실행된다는 글을 우연히 보았습니다.

반대 의견을 제시하는 사용자도 있는 관계로 정확한 사실인지는 알 수 없습니다. 그리고 이벤트가 먼저 실행된다고 하여 페이지 전체의 로딩 속도가 상대적으로 빠르다는 의미는 아닙니다. 단지 프로세싱 시점이 다르다는 것입니다.

정확한 진위 확인은 못했습니다. 단지 제가 실험한 결과로는 코드 (2)를 담고 있는 내비게이션 바(#gnb)의 로딩 속도가 확실하게 빨랐습니다. 제 사용 환경에서 그렇다는 의미입니다. 페이지 전체의 로딩 속도는 논의에서 배제합니다.

.ready();

A function to execute after the DOM is ready.

The .ready() method offers a way to run JavaScript code as soon as the page's Document Object Model (DOM) becomes safe to manipulate.

코드 (2)로 다시 수정한 자료를 등록합니다.

$(document).ready(function() {
	$gnb.find("li").each(function() {
		gnbWidth  = gnbWidth + $(this).outerWidth() + 1;
		var gnbHref = $(this).find("a").attr("href");
		if ( gnbHref !== "/" && window.location.pathname.indexOf(gnbHref) != -1 ) {
			$(this).addClass("current");
		}
	});

북클럽 스킨 코드 수정 방법_종합.txt

0.00MB

6. (아마도) 마지막 수정

마지막 수정 코드

"5. 추가 수정"과 비교

- "홈" 메뉴의 현재 접속 페이지("current") 인식 기능 다시 추가

- "홈" 메뉴를 삭제하여 사용하지 않을 때 다른 메뉴가 홈 페이지로 잘못 지정되는 오류 수정

- 카테고리뿐만 아니라 블로그 페이지 파일의 현재 접속 페이지("current") 인식 기능 추가

- 관련 조건식을 1개만 사용하여 코드와 연산 과정 짧게 정리

Line 12 ~ 19

$(document).ready(function() {
	$gnb.find("li").each(function() {
		gnbWidth  = gnbWidth + $(this).outerWidth() + 1;
		if ( $(this).find("a").prop("href") == window.location.href ) {
			$(this).addClass("current");
		}
	});

북클럽 스킨 코드 수정 방법_종합.txt

0.00MB