코드를 머리로 짜는 것이 아니라 필요한 코드를 인터넷 검색하여 수정 작업을 진행하고 있습니다. 모르니까!
티스토리의 블로거들이 북클럽 스킨의 내비게이션 메뉴 GNB의 코드를 별다르게 유용한 목적으로 사용하지 않는 듯하여 새로운 기능을 추가하여 본래의 기능을 개선하고 있습니다.
이 페이지는 새로 만든 코드를 분실하면 처음부터 맨발로 다시 만들어야 하므로 그 변경 과정을 기록하는 것입니다.
※ 아무것도 모르는 상태에서 코드를 발로 작성하기 때문에 티스토리 블로그 서버에 악영향을 미칠 수도 있습니다. 클라이언트 처리 코드이므로 괜찮을 수도 있겠네요. 그래도 계속해서 개선해 나가야 합니다. 잘못된 코드 발견하시면 조언 부탁드립니다.
1. GNB NavBar의 현재 페이지 표시 코드 수정
// script.js
$(document).ready(function() {
$gnb.find("li").each(function() {
if ($(this).find("a").prop("href") == window.location.href) {
$(this).addClass("current");
$("#gnb ul").prepend($(this));
return false;
}
});
})
북클럽 스킨 원본 파일에서 많이 수정하고 불필요한 기능은 제거하였습니다.
예를 들어 현재 접속 페이지에 해당하는 링크 메뉴를 NavBar의 중앙으로 이동하는 코드는 예전에 삭제하였습니다. NavBar에 등록된 여러 링크 리스트들의 width을 계산하고 전체 폭의 center로 현재 페이지 링크를 위치시키는 작업은 클라이언트 PC에 가볍지 않은 부담을 줍니다.
오직 현재 페이지를 표시하는 기능만 남아 있습니다. 그리고 현재 페이지 링크를 NavBar의 처음으로 이동하는 코드로 교체하였습니다.
2. GNB NavBar의 현재 페이지 표시 기능을 다른 element로 이동하는 코드 추가
// script.js
$(document).ready(function() {
$gnb.find("li").each(function() {
if ($(this).find("a").prop("href") == window.location.href) {
$("#pre-header .gnb_current").prepend($(this));
return false;
}
});
})
"#pre-header" 상단 바를 추가하여 GNB NavBar의 현재 페이지를 별도로 표시하는 방법입니다. 일부 블로그에 현재 페이지의 URI 표시 기능을 흉내내기 위한 목적입니다.
3. GNB NavBar의 현재 페이지 표시 기능 완전 제거
// script.js
$(document).ready(function() {
$("#pre-header .gnb_current").prepend('<li>'+decodeURIComponent(window.location.pathname).replace(/\//g," \/ ")+'</li>');
})
GNB NavBar는 단순하게 인터넷 주소를 메뉴로 링크하는 기능만 사용합니다. 관련된 코드는 모두 삭제했습니다. 그래도 GNB NavBar의 링크 기능은 표시하고 있습니다. skin.html 페이지의 GNB 치환자가 티스토리 서버에서 받은 html 코드를 출력하기 때문입니다.
// skin.html 원본 코드
<nav id="gnb">
[ ##_blog_menu_## ]
</nav>
대신, 현재 접속한 페이지 URI의 pathname을 별도로 표시합니다. 일부 블로그의 현재 페이지 주소 표시 방법을 채택한 것입니다.
decodeURIComponent() 함수는 인코딩 되어 읽기가 힘든 string을 다시 디코딩합니다.
이 함수의 리턴 값은, "This value contains textual data, therefore it is classified as a string."
- 인코딩된 데이터:
https%3A%2F%2Fwww.bitdegree.org%2Fcourse%2Flearn-solidity-space-doggos
http%3A%2F%2Fwww.testing.com%2F
- 디코딩된 데이터:
https://www.bitdegree.org/course/learn-solidity-space-doggos
https://www.testing.com/
참고한 인터넷 페이지는 아래와 같이 decodeURIComponent의 기능에 대하여 설명하고 있습니다.
"It decodes a string previously encoded by encodeURIComponent() function. It returns a decoded URI Component by replacing each UTF-8 escape sequence with the characters it represents. It can decode any value between %00 and %7F."
%00부터 %7F 범위의 UTF-8 이스케이프 문자로 시작되는 문자열을 디코딩한다는 뜻이겠죠?
※ UTF-8은 유니코드를 위한 가변 길이 문자 인코딩 방식
[참고] Get to Know decodeURIComponent(): an Example for Rookies (bitdegree.org)
[참고] Difference between decodeURIComponent() and decodeURI() functions in JavaScript - GeeksforGeeks
현재 접속한 페이지 인터넷 주소를 GNB NavBar에 등록한 메뉴 주소와 각각 비교하는 과정이 불필요하니까 블로그가 조금 가벼워질 것 같습니다.
페이지 URI 표시 기능으로 그 목적을 대신하는 것입니다. 2022년 4월 6일 현재 본 블로그 상단에 그 기능을 사용하고 있습니다.
댓글