티스토리 뷰

카테고리 없음

티스토리 TTOC 목차 차례 스크롤 이동에 따라 움직이게 만들기

습관의중요성 2022. 11. 16. 16:58
728x90

스크롤 이동에 따라 움직이는 티스토리 목차(차례) 순서 만들기

워드프레스 블로그를 운영하면 대부분 영어로 된 버전이고 또 스타일변경을 하려면 손도 많이가고해서 직접 만들어보았습니다. 티스토리에서도 동작할꺼 같아 돌려보고 있는데 마음에 드신다면 보시고 설치하셔서 사용하시기 바랍니다.

지금은 수동으로 하나하나 목록을 만들어주고 있지만 곧 페이지 전체 소스를 프로그램으로 입력받아서 자동으로 TTOC 목록이 나오도록 만들어드리겠습니다.

 

티스토리 목차 차례 TTOC 만들기

1. 설치방법

우선 글쓰기 화면을 기본모드에서 HTML 코드 항목으로 변경해야합니다.

여러분들에게 조금 낯설긴 하겠지만 이 화면에 익숙해져야 합니다.

애드센스 수익 코드를 원하는 배너형태로 특정 위치에 넣을때에도 이 HTML 코드를 이용해야하거든요.

jquery 프레임워크를 티스토리 블로그 메인 Head 항목에 넣어도 되지만 그냥 각 글마다 넣어도 크게 문제는 없습니다. 대신 나중에 한꺼번에 수정할때 문제가 발생할수는 있는데...

저는 오히려 개별로 입력하더라도 괜찮을꺼같단 생각이 드네요. 한꺼번에 바꿔야 할때에는 같은 유형의 버전업데이트가 이루어진다거나 한꺼번에 공통적인 common 영역을 만들때에 필요하기때문입니다.

일단 여러분들은 초보라 생각들면 그냥 글 편집 HTML 코드항목에서 가장 상단에 입력하기만 하면됩니다.

 

첫번째.

TTOC 목록은 글 제일 상단에 HTML 형식으로 넣어주시면 됩니다.

<div id="navMenu"><b>목차</b>
	<div><a href="#makettoc">티스토리 목차 차례 TTOC 만들기</a>
		<ul style="list-style-type: disc;" data-ke-list-type="disc">
			<li><a href="#install">1. 설치방법</a></li>
			<li><a href="#method">2. 사용방법</a></li>
			<li><a href="#end">3. 마치며...</a></li>
		</ul>
	</div>
</div>

 

두번째.

테마 항목에서 HTML 수정모드 들어가면 head 제일 아랫쪽에 아래 스크립트를 그대로 넣으면 됩니다.

<script>		
	//====================================================================================================
	// 재미있는 소스코드를 만들어주셔서 감사합니다.
    // 티스토리 TTOC v1.0
	// 
	// 기능1. 책깔피 기능1 -> #으로 클릭하면 그 위치로 부드럽게 이동
	// 기능2. 책깔피 기능2 -> #으로 URL 접근시 그 위치로 부드럽게 이동
	// 기능3. 메뉴바 기능 -> PC에서 해상도 1500px 이상일때 자동접히지 않도록 설정
	// 기능4. 메뉴바 기능 -> 모바일에서 자동으로 메뉴가 접히도록 설정
	// 기능5. 설정값 변수로 조절 가능
	// 기능6. 강제닫기 기능 -> 클릭토글 (해상도 크지 않을 경우 메뉴길이가 너무 길때를 위해)
	// 기능7. 목차 or 차례 글자를 클릭하면 가장 위로 스크롤 (홈,HOME,차례,목차,순서,안내,순번,순차,목록,목표)
	// 
	// 사용방법:
	// <div id="navMenu"> 목차 <div> <ul> <li>제목1</li> <li>제목2</li> <li>제목3</li> </ul> </div> </div>
	// 목차 글자 뒤에 꼭 <div></div> 들어가야합니다.
	// 
	// 
	// 프로그래머 문호영
	// 010-2168-9962
	// 
	// 감사한 마음으로 커피 기프티콘 한장 정도는 보내주세요. 
	// 우린 멋진 개발자입니다. 더욱 성장하시고 잘 사용하세요.             제작일. 2022-11-16 / 새벽1시17분
	//====================================================================================================
	
	
	var scroll_margin_height_init = 20;
	var scroll_margin_height = 50;
	
	var navMenuChild = "div";
	
	var navMenuTop = 0;
	var navMenuTopPC = 35;
	var navMenuTopMobile = 250;
	var navMenuLeft = 3;
	var navMenuPadding = 10;
	var navMenuAutoHideSize = 1500;
	
	
	
	var navMenuFlag = false;
	
	var navWidth = 0;
	var navHeight = 0;	
	var navMinWidth = 70;
	var navMinHeight = 50;
	
	var indexCount = 0;

	var isFirst = true;
	var isClick = true;
	
	var aTagClick = false;
	
	var closeTimeForMenu = 300;
	var opacity = 0.9;
	
	$(document).on("click", "a", function(){	

		aTagClick = true;
		if($(this).attr("href").indexOf('#') == 0)
		{
			$('html,body').animate({scrollTop:$(this.hash).offset().top - scroll_margin_height_init}, 1000);
			$('html,body').animate({scrollTop:$(this.hash).offset().top - scroll_margin_height}, 1000);
			
			if($(".area_view").width() > navMenuAutoHideSize)
			{
				navMenuTop = navMenuTopPC;
			}
			else
			{
				navMenuTop = navMenuTopMobile;
				setTimeout(ani, closeTimeForMenu);
			}	
		}			
	});		
	
	$(document).on("click", "strong", function(){	

		if($(this).text() == "홈" || 
		   $(this).text() == "HOME" || 
		   $(this).text() == "차례" || 
		   $(this).text() == "목차" || 
		   $(this).text() == "순서" || 
		   $(this).text() == "안내" || 
		   $(this).text() == "순번" || 
		   $(this).text() == "순차" || 
		   $(this).text() == "목록" || 
		   $(this).text() == "목표")
		{
			aTagClick = true;

			$('html,body').animate({scrollTop:0 - scroll_margin_height_init}, 1000);
			$('html,body').animate({scrollTop:0 - scroll_margin_height}, 1000);	
		}
		
	});	
	
	function ani(){
		$('#navMenu').animate({width:navMinWidth+"px", height:navMinHeight+"px"}).css({});
		$('#navMenu').children(navMenuChild).hide();
		
		isClick = true;
		navMenuFlag = true;
	}
		
	function showMenu(w, h)
	{
		$('#navMenu').width(w);
		$('#navMenu').height(h);
		
		$('#navMenu').css({"position":"fixed", "top":navMenuTop, "left":navMenuLeft, "z-index":"99999", "background-color":"rgba(59,151,211," + opacity + ")", "padding":navMenuPadding, "cursor":"move", "box-sizing":"border-box"});		
		$('#navMenu').children(navMenuChild).show();	
	
		navMenuFlag = false;
	}
	
	
	$(document).ready(function(){
				

		if($(".area_view").width() > navMenuAutoHideSize)
		{
			navMenuTop = navMenuTopPC;
		}
		
		navHeight = $('#navMenu').outerHeight(true);
		
		var url = window.location.href;
		var moveToId = url.substring(url.lastIndexOf("#") + 1);
		
		if(moveToId.includes("http"))
		{
				
		}
		else
		{
			if(moveToId.length > 0)
			{
				window.scrollTo(0,0);	
				$('html,body').animate({scrollTop:$("#" + moveToId).offset().top - scroll_margin_height}, 200);
			}		
		}

		$(document).on("click", "#navMenu", function(){	
			
			if(navMenuFlag)
			{				
				if($('#navMenu').width() <= navMinWidth)
				{					
					showMenu(navWidth, navHeight);					
				}
			}
			else
			{				
				if(aTagClick)
				{
					aTagClick = false;
				}
				else
				{
					isClick = false;
					setTimeout(ani, closeTimeForMenu);
				}
				
			}
			console.log(navMenuFlag);
		});			
		
		var contentv = $(".area_view").position();
		$(document).scroll(function () {
						
			var scrollv = $(this).scrollTop();
			
			if (scrollv > contentv.top) {
				indexCount++;
				$('#navMenu').css({"position":"fixed", "top":navMenuTop, "left":navMenuLeft, "z-index":"99999", "background-color":"rgba(59,151,211," + opacity + ")", "padding":navMenuPadding, "cursor":"move", "box-sizing":"border-box"});				
				if(isFirst)
				{
					navWidth = $('#navMenu').outerWidth();
					isFirst = false;
					
					
				}
				
				
				if($(".area_view").width() > navMenuAutoHideSize)
				{
					navMenuTop = navMenuTopPC;

				}
				else
				{			
					navMenuTop = navMenuTopMobile;
					if($('#navMenu').outerWidth() >= navWidth && isClick)
					{
						isClick = false;
						setTimeout(ani, closeTimeForMenu);
					}
				}
				
			}
			else
			{
				if(navWidth == 0)
				{
					
				}
				else
				{
					showMenu(navWidth, navHeight);			
					$('#navMenu').css({"position":"static","top":"auto"});	
				}
				
			}
			

		});
	});	

</script>
<style>
	
div #navMenu {

	border-bottom: 1px solid black;
	cursor: move;
}

</style>

적용을 누르고 나오면 됩니다.

두번째 항목은 테마에 1번만 입력하면 됩니다.

스크롤 속도라던지 간력, 스타일 변경이 필요할때에만 테마 들어가셔서 HTML 수정을 하면됩니다.

 

2. 사용방법

각 글마다 TTOC 목록 [ 첫번째 ] 항목이 설치되면

PC와 모바일에서 글 작성후에 위아래로 올렸다 내렸다 해보세요.

정상적으로 동작한다면 아래 움짤처럼 보이게됩니다.

 

지금은 모든 과정이 수작업이 필요합니다.

베타테스트 혹은 v1.0 이라고 생각해주세요.

어제 밤새서 만든건데 어떻게 자동화까지 만들겠어요. ㅎㅎ

시간적 여유를 두고 기다리시면 제가 완전 자동화버전까지 만드러드리겠습니다.

각 페이지마다 프로그램이에 HTML 태그를 입력만 하면 자동으로 TTOC 목록을 만들어주도록 그정도까지 만들 자신이 있습니다. 티스토리 블로그에 대한 불신이 사실 많긴했지만 제가 제대로 하지 않는 상태에서 불평이 더 많았던것 같더군요. 막상생각해보니 과거 글 작성해놓은것만 보더라도 창피하고 부끄럽습니다.

티스토리 블로그 글 쓸 시간이 없단 핑계로 관리대행을 맡겼는데 지금 읽어보니 지우고 싶은 글이 많네요.^^

 

3. 마치며...

이번에 워드프레스 TTOC 목차를 개발하면서 많은 생각을 하게 되었습니다.

저도 이 부분을 유료화로 만들어서 1년에 단돈 만원이라도 받으면 자동화 수익이 발생하는 부분인데...

이를 포기하고 그냥 무료로 배포하기로 결심했습니다.

그 이유는 블로그를 하는 많은 분들에게 도움이 되었으며 해서 그렇습니다.

많은 사람들이 이런 말을 많이 하시더라고요.

사람들은 무료로 제공해봐야 고마운줄을 몰라서 사용만 하고 고맙단 말 한마디 안한다고 많이들 이야기 하시더군요. 그런데 우리 티스토리 블로그 운영하시는 분들은 그런분들 단 한명도 안계시잖아요.

모두 각자 삶에 감사하고 이렇게 밤을 새가며 만든 프로그램을 고맙다는 말 한마디씩은 해주실꺼잖아요^^

 

 

제가 요즘 현재 누리고 있는것들에 대해서 감사함으로 생각하다보니 저의 재능을 많은 사람들에게 아낌없이 나누어주는것 또한 감사한 일이라는것을 깨닫게 되었습니다. 

이제는 어느정도 경제적으로 자유로워진 상태라보니 더 많은 분들을 도와드려서 저처럼 하고 싶은일을 마음껏 하실 수 있도록 도와드리고 싶습니다. 

저는 워드프레스 블로그와 티스토리 블로그 운영에 필요한 모든 정보와 수익이 더 많이 늘어나실수 있도록 도움이 되는 프로그램 많이 만들어드리겠습니다.

 

혹시라도 고마움을 표현하실분들은 커피 기프티콘이라도 한장 보내주세요.

저도 카페에 자주 가서 프로그램을 개발하다보니 그분들의 선물 하나하나가 정말 큰 도움이 되고 있습니다.

 

티스토리 TTOC 목록 사용하시다가 불편하시거나 개선했으면 하는 부분이 있으면 저에게 꼭 알려주시고요.

기능추가라던지 CSS 예쁜것들이 있으면 저에게도 꼭 보내주세요.

그럼 제가 또 다른 분들도 함께 공유하실수 있도록 여러분들의 이름을 걸어서 소개해드리도록 하겠습니다.

 

서로 윈윈하는 구조로 상생하며 돕는 그런 분들이 많이 모였으면 좋겠습니다.

 

감사합니다.

 

 

 

 

728x90
저작자표시 비영리 변경금지
댓글