사이트 링크 메뉴는 티스토리 스킨 북클럽의 소스 코드 이용
관련 사이트 메뉴는 티스토리 스킨 오딧세이의 소스 코드 이용
HTML 페이지에 사용한 티스토리 치환자
** 티스토리 사이트의 서버가 비정상적으로 작동하여 치환자 소스 코드를 첨부하면 페이지에서 바로 실행됩니다.
** 불가피하게 소스 코드 대신 이미지 파일로 대체합니다. 추후에 서버가 정상화 되면 정상적인 코드를 등록합니다.
** 치환자 소스 코드의 ##를 **로 교체하여 실행을 막아 놓았습니다.
** 고객센터에 코드 블럭 실행 문제를 문의하였습니다. 아직 해결 안 된 상태입니다.
** CSS와 Javascript 코드는 정상입니다.
1. 현재 접속 페이지 종류 출력 치환자
[**_body_id_**]
위 코드가 아직도 실행되면 요렇게 보입니다. ㅠ..ㅠ
tt-body-page
티스토리 서버 오류 신고하고 답장 받은 후 며칠 지났는 데,
휴일 끼고 검토하고 계속 기다려야 하는 것 같습니다.
/* 2024년 2월 23일
*
* 티스토리 고객센터에서 문제애 대한 답장이 왔습니다.
* 현재 코드블럭 내부의 치환자는 실행되도록 설정이 되어 있으며,
* 추후에 변경할지 검토하고 있다는 내용입니다.
*
*/
2. 사이트 링크 리스트 출력 치환자.
- 블로그 관리 홈의 "메뉴"에 편집 기능
[**_blog_menu_**]
3. 관련 사이트 리스트 주소 출력 치환자
- 블로그 관리 홈 "나의 링크"에 편집 기능
[**_link_url_**]
4. 관련 사이트 리스트 제목 출력 치환자
- 블로그 관리 홈 "나의 링크"에 편집 기능
[**_link_site_**]
<!-- 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 파일의 관련 코드 필요
댓글