Grid Layout으로 사이트 링크와 관련 사이트 리스트 병합

사이트 리스트 메뉴 병합

 

사이트 링크 메뉴는 티스토리 스킨 북클럽의 소스 코드 이용

관련 사이트 메뉴는 티스토리 스킨 오딧세이의 소스 코드 이용

 

HTML 페이지에 사용한 티스토리 치환자

 

** 티스토리 사이트의 서버가 비정상적으로 작동하여 치환자 소스 코드를 첨부하면 페이지에서 바로 실행됩니다.
** 불가피하게 소스 코드 대신 이미지 파일로 대체합니다. 추후에 서버가 정상화 되면 정상적인 코드를 등록합니다.
** 치환자 소스 코드의 ##를 **로 교체하여 실행을 막아 놓았습니다.
** 고객센터에 코드 블럭 실행 문제를 문의하였습니다. 아직 해결 안 된 상태입니다.
** CSS와 Javascript 코드는 정상입니다.

 

1. 현재 접속 페이지 종류 출력 치환자

 

[**_body_id_**]

위 코드가 아직도 실행되면 요렇게 보입니다. ㅠ..ㅠ 
tt-body-page

티스토리 서버 오류 신고하고 답장 받은 후 며칠 지났는 데,
휴일 끼고 검토하고 계속 기다려야 하는 것 같습니다.

/* 2024년 2월 23일
 *
 * 티스토리 고객센터에서 문제애 대한 답장이 왔습니다.
 * 현재 코드블럭 내부의 치환자는 실행되도록 설정이 되어 있으며, 
 * 추후에 변경할지 검토하고 있다는 내용입니다.
 *
 */

 

티스토리 고객센터 최종 답변

 

현재 접속 페이지 종류

 

2. 사이트 링크 리스트 출력 치환자.

- 블로그 관리 홈의 "메뉴"에 편집 기능

 

[**_blog_menu_**]

 

블로그 관리 홈의 메뉴

 

3. 관련 사이트 리스트 주소 출력 치환자

- 블로그 관리 홈  "나의 링크"에 편집 기능

 

[**_link_url_**]

 

블로그 관리 홈의 나의 링크

 

4. 관련 사이트 리스트 제목 출력 치환자

- 블로그 관리 홈  "나의 링크"에 편집 기능

 

[**_link_site_**]

 

---

 

HTML(치환자 포함) 소스 코드

 

 

<!-- HTML 코드 -->

<nav role="navigation" class="nav-bar" title="current location, site links and family sites">
	<!-- indicator -->
	<button type="button" data-toggle="xe-dropdown" aria-expanded="false" title="site path and links">[**_body_id_**] </button>
	<!-- site links -->
	[**_blog_menu_**]
	<!-- family sites -->
	<ul data-title="관련 사이트">
		<s_link_rep>
			<li><a href="[**_link_url_**]" target="_blank">[**_link_site_**]</a></li>
		</s_link_rep>
	</ul>
</nav>

 

/* CSS 코드
 * 애니메이션을 위한 코드 추가
 */

.nav-bar {
	position: relative;
	display: grid;
	grid-auto-rows: 0fr;
	align-items: start;
	z-index: 21;
	-webkit-transition: .4s;
	transition: .4s;
	}

.nav-bar button {
	min-height: 48px;
	min-width: 48%;
	padding-right: 16px;
	}

.nav-bar button::before {
	content: "\2228";
	display: inline-block;
	padding: 0 16px;
	}

.nav-bar > ul {
	height: auto;
	padding: 0 16px;
	overflow: hidden;
	font-size: 14px;
    visibility: hidden;
	-webkit-transition: .4s;
	transition: .4s;
	}

.nav-bar > ul::before {
	content: "사이트 링크";
	display: block;
	font-weight: 700;
}

.nav-bar > ul[data-title]::before {
	content: attr(data-title);
}

.nav-bar > ul > li {
	display: inline-block;
	}

.nav-bar > ul > li > a {
	display: block;
	padding: 0.2em 1em;
	}

.nav-bar.on {
	grid-auto-rows: minmax(min-content, max-content);
	}

.nav-bar.on button::before {
	content: "\2227";
	}

.nav-bar.on > ul {
	padding: 16px;
    visibility: visible;
	}

 

// 리스트를 펼치기 위한 버튼 코드
// Javascript

const navBTN = document.querySelector('.nav-bar button');
navBTN.addEventListener('click', function(){
	this.parentElement.classList.toggle('on');
}, false);

 

아코디언처럼 접었던 두 개의 사이트 리스트 메뉴를 접거나 펼치는 버튼에 적용한 자바스크립트 코드

이벤트 리스너 함수를 사용하여 마우스 클릭 이벤트가 발생하면 응답 처리하는 구문 

토글 스위치로 'on' 클래스를 추가 혹은 제거하며 한 번 누르면 펼쳐지고 다시 누르면 원래 상태로 복귀

CSS 파일의 관련 코드 필요