Mellow Apricot
Read more →
Read more →
Read more →
post-img
Read more →

| 티스토리에서 관리자(블로그 주인)인지 확인하는 스크립트

※ 2차 도메인에서는 다 guest로 취급합니다 (1차 x)

 

document.addEventListener("DOMContentLoaded", function() {
function checkRole() {
	const pageRole = window.T.config.ROLE;
	if ( pageRole === "owner") {
		const adminPageDiv = document.createElement("div");
		adminPageDiv.classList.add("owner-check");
		adminPageDiv.insertAdjacentHTML("beforeend", "Go to Admin Page");
		document.querySelector(".menu").appendChild(adminPageDiv);
	}
}
checkRole();
});


//스위치 버전

document.addEventListener("DOMContentLoaded", function() {
function checkRole() {
	const pageRole = window.T.config.ROLE;
	switch (pageRole) {
		case "owner":
			const adminPageDiv = document.createElement("div");
			adminPageDiv.classList.add("owner-check");
			adminPageDiv.insertAdjacentHTML("beforeend", "Go to Admin Page");
			document.querySelector(".menu").appendChild(adminPageDiv);
			break;
		case "user":
		case "connected":
			//user,connected에 필요한 내용
			break;
		default:
		break;
	}
}
checkRole();
})

(위나 아래나 동일한 스크립트임 if문에서 오류가 날 때 switch문을 이용하면 된다

switch문에서는 default를 적어주는 게 좋음)

 

 

<div class="owner-check"><a href="/admin">Go to Admin Page</a></div>

스키마 마크업에서 ROLE을 체크하여, owner라면 .menu에 해당 태그를 추가시킨다

guest라면 해당 html이 생성되지 않아 보이지 않음.

 

반대로 guest만 체크하고 싶으면 !=="owner"로 바꿔주면 됨

*값은 user, connected(구독자), guset, owner

 

사용하기 위해서 해당 스크립트는 html의 </head> 위 혹은 </s_t3> 밑에 넣어주면 되고,

html 내부에 menu 클래스가 존재하고 있어야 함

 

여러 응용 가능, 어드민 페이지 이동 버튼 등 방문자에게 불필요한 내용 생성 시 유용함

 

단, 모든 스크립트가 그렇듯 훗날 티스토리 자체적으로 변경이 있다면 호출이 안 될 수도 있으니 참고!

기존 티스토리 측에서 지원하던 날짜 치환자는 [★##_article_rep_date_##] 이 치환자 하나 뿐이었지만, 연도, 월, 일, 시 ,분, 초까지 하나씩 나타내는 새로운 치환자가 생겼다.

 

 

1 : 글에서 보여지는 날짜

https://tistory.github.io/document-tistory-skin/list/list.html

 [★##_article_rep_date_##]  글 발행 날짜/시간 (yyyy.mm.dd HH:MM)
 [★##_article_rep_simple_date_##]  글 발행 날짜 (yyyy.mm.dd)
 [★##_article_rep_date_year_##]  글쓴 세부시간 - 연도 (yyyy)
 [★##_article_rep_date_month_##]  글쓴 세부시간 - 월 (mm)
 [★##_article_rep_date_day_##]  글쓴 세부시간 - 일 (dd)
 [★##_article_rep_date_hour_##]  글쓴 세부시간 - 시 (HH)
 [★##_article_rep_date_minute_##]  글쓴 세부시간 - 분 (MM)
 [★##_article_rep_date_second_##]  글쓴 세부시간 - 초 (SS)

 

아래처럼 출력 방식을 변경할 수 있다.

 

(1) 기존 치환자

<div class="date">[★##_article_rep_date_##]</div> 

= 2019.06.29 12:00

 

(2) 새로운 치환자를 이용한 배열

<div class="date">[★##_article_rep_date_month_##]/[★##_article_rep_date_day_##]</div>

=06/29

 

(3) 새로운 치환자를 이용한 배열 

<div class="date">[★##_article_rep_date_month_##]월 [★##_article_rep_date_day_##]일 [★##_article_rep_date_hour_##][★##_article_rep_date_minute_##]분</div>

=06월29일 12시00분

 

다만 연도가 기본 yyyy형태(2019)라서 4자리 형식으로 출력된다. yy형태(19)로 출력하려면 또 스크립트를 써야 함..ㅎㅎ 또 월을 영어나 한글 등으로 표시하려면 역시 스크립트를 써야 함..

 

 

 

2 : 리스트에서 보여지는 발행 날짜

https://tistory.github.io/document-tistory-skin/list/list.html

 [★##_list_rep_date_##]  글 발행 날짜/시간 (yyyy.mm.dd HH:MM)
 [★##_list_rep_simple_date_##]  글 발행 날짜 (yyyy.mm.dd)
 [★##_list_rep_date_year_##]  글쓴 세부시간 - 연도 (yyyy)
 [★##_list_rep_date_month_##]  글쓴 세부시간 - 월 (mm)
 [★##_list_rep_date_day_##]  글쓴 세부시간 - 일 (dd)
 [★##_list_rep_date_hour_##]  글쓴 세부시간 - 시 (HH)
 [★##_list_rep_date_minute_##]  글쓴 세부시간 - 분 (MM)
 [★##_list_rep_date_second_##]  글쓴 세부시간 - 초 (SS)

 

방식은 위와 동일

 

 

3 : 공지사항에서 보여지는 발행 날짜

https://tistory.github.io/document-tistory-skin/contents/notice.html

 [★##_notice_rep_date_##]  글 발행 날짜/시간 (yyyy.mm.dd HH:MM)
 [★##_notice_rep_simple_date_##]  글 발행 날짜 (yyyy.mm.dd)
 [★##_notice_rep_date_year_##]  글쓴 세부시간 - 연도 (yyyy)
 [★##_notice_rep_date_month_##]  글쓴 세부시간 - 월 (mm)
 [★##_notice_rep_date_day_##]  글쓴 세부시간 - 일 (dd)
 [★##_notice_rep_date_hour_##]  글쓴 세부시간 - 시 (HH)
 [★##_notice_rep_date_minute_##]  글쓴 세부시간 - 분 (MM)
 [★##_notice_rep_date_second_##]  글쓴 세부시간 - 초 (SS)

 

방식은 위와 동일

 

 

아직 댓글과 방명록에서는 지원하지 않고 요일 표시도 지원하지 않는다.

현재 블로그 이전부터 많은 분들께서 이용해주신 스킨이었지만 너무 오래 전 만들었고,

제 스킨을 간단하게 즐기기에는 티스토리에도 많은 변화가 있었기에 배포를 중단합니다.

더이상 업데이트도 이루어지지 않습니다.

 

기존 스킨은 어느 곳에서든 재배포 금지합니다.

 

 

또한 배포 (1) 스킨에서 갑자기 댓글 창 펼쳐지는 것이 안되고, 스크립트가 막혔다면

html에서

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

이 제이쿼리를 찾아 삭제 후

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

이걸로 적용하시면 됩니다. 

entry-thumbnail

https://mellowapricot.tistory.com/234

 

스크립트 없이 티스토리 신고버튼, 좋아요버튼 커스텀하기

아주 예전에 올렸던 내용과 다르게 스크립트를 사용하지 않고 간단히 CSS로만 본문 포스트 버튼을 커스텀하는 내용으로 업데이트해서 업로드합니다. 결과물 | 기본 CSS 버전 /***************************

mellowapricot.tistory.com

 

해당 글을 참고하세요

 

 

 

 

 

 


 

 

혹시 모를 오류가 있을 수 있으니 적용 전 백업은 필수입니다.

 

신고버튼 디자인 변경으로 인한 불이익은 제가 책임지지 않습니다.

이러한 방법은 티스토리 측에서 치환자를 제공하기 전까지만 사용하시기를 권장드립니다.

<이 글은 신고 버튼 삭제하는 법이 아닌 디자인을 바꾸는 법을 안내하는 것임을 알려드립니다. 

신고 버튼을 노출하지 않을 시 티스토리 이용에 제한이 있을 수 있습니다.>

 

안녕하세요. TISTORY입니다.

신고 기능 제공은 법률에 따른 의무 사항이어서 플러그인 등으로 선택 노출할 수 있도록 지원하기는 어렵습니다. 

신고 기능 제공은 법률에 따른 의무 사항이어서 사용자가 임의로 노출을 제한할 경우 문제가 될 수 있습니다. 

치환자 제공 등을 검토 중이나, 신고 기능은 법적 의무 사항으로 늘 노출하는 게 원칙이라서 다각도로 고려 중입니다. 이점 양해 부탁드립니다.

http://notice.tistory.com/2328 티스토리 측 댓글 발췌

 

(1) 현재 티스토리 신고버튼 html

여기서 취해야 할 것은 17번째 줄 UrlID 부분이다.

신고버튼 html에서는 각 글의 고유 id가 저장되어 있음

(주소 location 속성을 이용해서 따와도 되겠지만 그냥 html에서 추출하는 걸로..)

 

 

(2) 티스토리 글 url

해당 숫자가 해당 블로그의 고유 글 url id다. 글을 작성하는 순서대로 부여됨

 

 

http://티스토리주소.tistory.com/toolbar/popup/abuseReport/?entryId=글 url id

(3) 현재 신고하기 버튼의 주소

글 id에 따라서 어떤 글을 신고할 것인지 결정된다.

 

(2)티스토리 글url에 따르면 (3)신고하기 버튼의 글id값은 112가 되는 것임

ex) http://mellowapricot.tistory.com/toolbar/popup/abuseReport/?entryId=112

 

티스토리가 제공하는 기본 신고 버튼을 누른다면,

(2)티스토리 글url과 (3)신고하기 버튼에 부여되어 있는 글id가 자동으로 일치되어 있기 때문에 

 

112번째로 작성한 해당 글을 신고하게 해준다.

 

 

 

 

본 글에서는 못생긴 신고 버튼의 html(<div class="container_postbtn">~</div>)을 전부 날려버릴 것이므로 

꼭, id의 값을 저장해두어야 한다.

 

(저장해두어야 신고 버튼 주소가 글 id 주소와 일치함.

값을 저장시키지 않고 display:none과 함께 신고버튼의 주소만 임의로 바꾸는 경우에는 

1번 글의 신고버튼을 눌러도 2번 글의 신고 창이 뜸)

 

 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
//apricot abuse script
	$(".container_postbtn").each(function () {
		var postbtnID =  $(this).find(".wrap_btn_etc").attr("data-entry-id");
		$(this).html("<div class='a_report'><a href='/toolbar/popup/abuseReport/?entryId=" + postbtnID + "' onclick='window.open(this.href, \"tistoryThisBlogPopup\", \"width=500, height=300, toolbar=no, menubar=no, status=no, scrollbars=no\"); return false;' target='_blank'>신고</a></div>"); // container_postbtn의 html을 초기화하고 <div class="a_report">~</div>를 안에 추가
		$(this).removeClass("container_postbtn").addClass("a_postbtn") // container_postbtn에 대한 티스토리 기본 css값이 있으므로 해당 class명을 a_postbtn으로 변경
	});
</script>

 

△ 적용 스크립트 

html의 </body> 바로 위에 넣어주면 좋다.

 

1. 스크립트의 html 안에(6번째줄) 신고라는 글자 말고 fontawesome, xeicon등 웹아이콘을 넣어서 꾸며도 무방

2. css로 꾸밀 시에는 .a_postbtn { }, .a_report { } 등의 값을 넣어주면 된다

 

 

20.02.19 이전에 수정하신 분들은 

간단히

var postbtnID = $(this).find("label[data-entry-id]").attr("data-entry-id");를

Var postbtnID = $(this).find(".wrap_btn_etc").attr("data-entry-id");로 바꿔주면 된다

Guestbook.