현재 이전버전과

리뉴얼버전으로 스킨이 분리되어있는데


티스토리 개선작업 이후 안정화가 된듯하여

리뉴얼버전으로 스킨을 통합해서 재전달드리려합니다.


스킨5부터 차례로 6 3 10 으로 개발진행하여 재배포 예정이고


스킨3,5,6의경우 테스트 진행중입니다.


http://skinthreeplus.tistory.com/


http://skinfiveplus.tistory.com/


http://skinsixplus.tistory.com/


변경사항은

-메인 카테고리 목록갯수만큼 핀터레스트식 무한 리로드

-카테고리별 내용도 영상이 있는경우, 썸네일 아이콘 표시

-리뉴얼 코드로변경

-건의주신내용이나 문제내용 수정


입니다.


수정후 테스트가 완료되는대로 메일드리겠습니다. 


감사합니다.


저작자 표시 비영리 변경 금지
신고

안녕하세요.


티스토리에서 RSS에서 제공하는 이미지의 옵션을 다양하게 추가해서 기존에 발행된 게시물의내용을

정규식이 해석하지 못하는문제로


썸네일 노출이 정지 되었었습니다.


<img src="http://cfile28.uf.tistory.com/image/233626335401F8F23CC1C8" filemime="image/jpeg" filename="Welding-Wood-Furniture-Series.jpg" height="693" style="text-align: center; font-size: 9pt; line-height: 1.5; background-color: transparent;" width="960" srcset="http://img1.daumcdn.net/thumb/R1920x0/?fname=http%3A%2F%2Fcfile28.uf.tistory.com%2Fimage%2F233626335401F8F23CC1C8 1920w, http://img1.daumcdn.net/thumb/R960x0/?fname=http%3A%2F%2Fcfile28.uf.tistory.com%2Fimage%2F233626335401F8F23CC1C8 960w, http://img1.daumcdn.net/thumb/R720x0/?fname=http%3A%2F%2Fcfile28.uf.tistory.com%2Fimage%2F233626335401F8F23CC1C8 720w, http://img1.daumcdn.net/thumb/R640x0.q70/?fname=http%3A%2F%2Fcfile28.uf.tistory.com%2Fimage%2F233626335401F8F23CC1C8 640w, http://img1.daumcdn.net/thumb/R480x0.q70/?fname=http%3A%2F%2Fcfile28.uf.tistory.com%2Fimage%2F233626335401F8F23CC1C8 480w" />



위는 바뀐 티스토리 RSS의 이미지 노출 태그입니다.



수정된 내용은 아래와 같습니다.


공통적으로 js파일내 스킨파일 폴더에서 불러오는걸 막고자 cdn을 적어 판단을 막는부분을

<img(.(?!daumcdn|Creative|creativecommons|ccl|width="(\d{1,2}|)"))*?>


아래와같이 skin으로 변경해서 스킨파일 폴더의 이미지만 걸러내도록 수정했습니다.

<img(.(?!skin|Creative|creativecommons|ccl|width="(\d{1,2}|)"))*?>



기존에 리뉴얼이아닌 이전버전을 사용하는경우스크립트의 내용을 변경해야합니다.



skin10-ui.zip


skin3-ui.zip


skin5-ui.zip


skin6-ui.zip




업로드된 파일 압축해제후 ui.js 파일을 계정내


http://블로그주소/admin/skin/edit/

에 이동해서



파일업로드 탭이동 -> 추가 -> ui.js파일 선택 ->열기로


새로 업로드 해주시고

서버 반영시간 대기후 약 1~5분



이전 인터넷기록을 모두 삭제하신이후 새로고침을통해 수정 확인이 가능합니다.


감사합니다.



저작자 표시 비영리 변경 금지
신고

  • BlogIcon 무대포 2016.08.16 15:12 신고 유튜브 영상 썸네일은 아직 수정 안된건가요?
    지원 했었던거 같은데..
    지금은 영상 썸네일은 안뜨는거 같네요.. ^^;;
    http://mudepo.tistory.com/
    스킨10 일반형 사용중입니다.
    • BlogIcon ishaiin 2016.08.16 21:25 신고메인의경우 아이콘 처리하고 카테고리에서는 영상의 썸네일을 노출합니다.

웹 엘리먼트의 에니메이션등에 사용되는 유저 타이밍 정보에 활용되는 API에 W3C는 IE9이상부터 활용할수 있는 Performance API를 제공하고 있다.

(https://www.w3.org/TR/user-timing/)


IE8이전에 사용되던 Date.now()의경우 네트워크의 상황에따라 정확하지 않은 문제가 있다.

측정이 정확하지 않으면  원하는 에니메이션을 보여줄수 없다.


사실 이 API는 브라우저 로딩을 측정해 좀더 나은 접속환경을 제공하는데 목적을두고 만들어졌으나, 사용자의 입력에 따른 에니메이션을 보여주는데 지속(duration)을 지정하는경우 사용될수 있다.


먼저 해당링크를 읽어보고 어떤 API인지 확인할수 있다.


http://www.html5rocks.com/ko/tutorials/webperformance/basics/(한글)

http://www.html5rocks.com/ko/tutorials/webperformance/usertiming/(한글)

https://developer.mozilla.org/ko/docs/Navigation_timing(한글)

https://www.sitepoint.com/discovering-the-high-resolution-time-api/(영문)


간단하게 필요한 부분만 살펴보면


접속된 시점부터 performance 를 이용해 브라우저에 대기된 시간을 밀리초로 반환한다.


예를들어

로드가 끝난시점에


var start = window.performance.now();

를 호출하고 무언가 이벤트를 실행한후에 다시 실행해서 처음 값을빼면


var end = start - window.performance.now();

이벤트를 실행하는데 걸린 시간을 밀리초로 알수있다.



이점을 활용해서

사용자의 입력이 들어온시간을 마크하고 

setTime이나 requestAnimationFrame을 통해 에니메이션을 보여질 지연을 설정해서 원하는 시간만큼 에니메이션을 보여줄수 있다.



IE8이전에는 이 시점을 Date.now()를 이용했는데

같은 내용을 폴리필로 대체할수 있다.


https://gist.github.com/paulirish/5438650

https://gist.github.com/pmeenan/5902672



활용 예를보면


var target = document.getElementById('el');//엘리먼트를 선택하고 var startTime = null,//시작값 startVal, //초기값 endVal, //종료값 duration, //지연값 ani; //cancel하기위한 변수


function update(time){ if(startTime == null){ //함수를 실행해서 시작타이밍이 없으면 startTime = window.performance.now(); //시작타이밍 설정하고 } ani = requestAnimationFrame(update) //값을바꾸기위한 에니메이션을 반복실행하는데 draw(0,300,1000,time)//실행할 액션 } function draw(st,end,duration,time){ //순서대로 시작값, 종료값, 지연값, requestAnimationFrame리턴 밀리초 if (!!time == false || time <= st) { // 0밀리초부터 실행하는데 console.log("too low"); return; } var elap = (time - startTime) / duration; //100분율로 완료를 확인한다 elap = elap > 1 ? 1 : elap; // 1이면 100%를 의미 value = elap;//값을 설정하는데 elap에 easeing등을 이용할수있을듯 target.style = ("top:" + (value*end) +"px"); //엘리먼트의 top을 바꿔보다 if( elap === 1){ //100%가 되면 끝내야겠지 startTime = null; //시작값을 초기화하고 cancelAnimationFrame(ani) //에니메이션은 끝낸다. return; } console.log(time - startTime,duration) //duration까지 남은시간을 보자, duration도 console.log(elap) // 100%될때까지얼마나 남았는지 console.log(value) // 값은 얼마가 되었는지 }

내가 지연을 설정할때 이런식으로 에니메이션 되는데 지금 얼마나 지났는지

알게 할수 있다.


지연시간이 완료될때 내가설정한 elap값도 100%가 되어 1이 되므로

시간에 맞게 에니메이션일 종료되게 할수있다.


이 elap값에 easing을 이용하면 다양한 에니메이션을 줄수있다.


플래시등의 TWEEN이나 JQUERY의 animate 함수도 같은 방식을 활용하고있다.

tx.timing에 performance를 이용한다.


플래시의 부드러운 움직임(easing)에 이용되는 함수

시작점, 끝나는 시간, 시작값, 반영될값 등 설정하는 함수를 이용하면 에니메이션.js를 제작할수 있겠다.


예를들어 캔버스에 easing을 이용해 그래프를 그려보면



See the Pen OXmdWZ by ishaiin (@ishaiin) on CodePen.


저작자 표시 비영리 변경 금지
신고


현재 티스토리에서 발행관련해서 API를 변경함에따라


http://notice.tistory.com/2324


RSS를 이용하는 리뉴얼 전 스킨 이용자에게 무한 새로고침 현상이 생겼습니다.



스킨3, 스킨5 이용자분들은 이전 스킨말고 새로 전달드린 스킨을 설치해이용

부탁드립니다.

( 메일 전달드렸으나 구매시 이메일이 변경된분들에겐 메일전송 실패로 전달드리지 못했습니다. )


스킨6, 스킨10 이용자 분들께는 몇가지 테스트 후

변경된 API 따른 스킨을 다시 전달 드리겠습니다.



*0528


현재 RSS에대해 티스토리에서 수정된내용을 다시 원복하여 몇가지가 복구되었으나

속도가 현저하게 느려진 문제를 가지고 있습니다.


위 공지 링크(http://notice.tistory.com/2324)에서 추가로 티스토리에서 전달한 말대로

RSS이용하지 않는 HTML주소로 개별 파싱하는 스킨을 다시 제작할 계획입니다.


동영상컨텐츠 썸네일이 필요없는경우 가능하면 서버에서 이미지를 제공하는

리뉴얼 스킨을 이용을 부탁드립니다.


*0530


속도가 어느정도 정상화 되었습니다.

현재 스킨3을 제외하고 RSS이용에 문제가 없어보입니다.



감사합니다.

저작자 표시 비영리 변경 금지
신고

  • BlogIcon leekihwan 2016.05.27 10:34 관리자의 승인을 기다리고 있는 댓글입니다

스킨 리뉴얼 배포안내입니다.


현재 티스토리 API가 계속적으로 변하고있고 3개월전부터 서버측 치환자

그리고 프론트단의 개선작업이 계속적으로 진행중입니다.


변경 및 수정점이 지속적으로 진행중이라 

아직 스킨을 수정해서 전달 드릴 경우 문제가 있어 대응이 어렵습니다.


변경된 API에 맞춰 테스트를 진행하고 안정화되는대로

기존스킨(이전치환자 - 커스텀플러그인)과

리뉴얼스킨(새로운치환자 - 티스토리API, 디자인과 기능개선)을

재배포 드릴예정입니다.


배포이후 기존스킨은 기능문제 외 대응은 진행하지 않을예정입니다.


리뉴얼스킨은 국내 사용자 브라우저 점유율 기준(IE8이상과 모바일, 태블릿)으로 호환성을

확인 예정입니다.


배포는 구입시 전달주신 메일로 다시 안내 드리겠습니다.

기존에 구입하신경우 재구매하실 필요없습니다.


스킨3,스킨5에대해 배포드렸습니다.


-05/22 스킨3, 스킨5 수정 사항에 대해 보호글에 추가로 작성했습니다.


-06/05 스킨6 수정사항에 대해 보호글에 추가 작성 했습니다.


감사합니다.


저작자 표시
신고

티스토리 이미지서버의 경로가 절대경로에서 상대경로로

http://~~~~

에서

//

로 일괄적으로 변경되어 스킨이 작동하지 않은현상이 있었습니다.


아래 스크립트 파일로 해당 스킨에 맞게 다시 업로드해주시고 문제가 있을경우 메일 부탁드립니다.

스킨을 커스텀 설정한경우도 있어 수정된부분을 전달드립니다.


아래 정규식의 다음 이미지서버 주소와 경로처리를 //로 처리함에따라 http: 부분이 삭제되었습니다.


수정된부분은

스킨에따라 각각의경우 http: 부분을 삭제하였습니다.


       targetReg: /http:\/\/.+images\//


또는


       targetReg = /http:\/\/.+skin\//g,

(스킨 10의 디스커스의 아이디의경우 별도 설정이 필요합니다.)

아래는 해당 스킨에따른 스크립트 변경파일입니다.



skin3.zip


skin5.zip


skin6.zip


skin10.zip




수정이 원활하지 않으시거나 문제가 계속될경우 메일 연락 부탁드립니다.

감사합니다.

저작자 표시 비영리 변경 금지
신고

안녕하세요. 정명입니다.


디스커스는 스킨10에 추가되었습니다. 스킨6에 적용할수 있는 방법에대해

설명드리겠습니다.






스킨6에 보면 위처럼 코맨트 영역이 있습니다.

<s_rp> 로 시작되는부분이고 </s_rp>부분이 끝부분입니다. 100줄이 조금 넘네요.(저는 폴더식으로 접어서 2줄로보입니다.)


<s_rp>로 시작하는부분은 하단에 한개가 더 존재하는데 이부분은 방명록부분입니다.


왼쪽의 HTML태그를 오른쪽으 태그처럼 수정합니다.

(아래 첨부파일 참조)


상단의 <s_rp> 를 위처럼 cmtArea라는 div로 씌워주고 토글버튼을추가하여

'티스토리 코멘트' 와 '디스커스' 를 토글하여 화면에 표시하게 합니다.







추가로 첨부파일에 추가된 스타일 적용파일과 토글버튼을 지원하는 스크립트파일을 추가해준다음

파일을 자신의 디스커스 아이디에 맞게 수정후 업로드해주시면 됩니다.

(아래 첨부파일 참조)







아래는 첨부 파일입니다.


disqus.zip






저작자 표시 비영리 변경 금지
신고

최근 다음 티스토리 별도의 공지없이 API 변경의 이유로

카테고리가 넓게 보이는 현상이생겼습니다.

(내부 카테고리에 동일한 클래스가 더 추가되었습니다.)


해당 문제에대해

블로그주소/admin/skin/newedit/


의 CSS부분 최하단에


스킨3의경우

.header .category_list .category_list{

padding: 0;

}


스킨5의경우 

.sidebar_wrap .category_list .category_list{

padding: 0;

}


스킨6의 경우

.sidebar_wrap .category_list .category_list{

padding: 0;

}


스킨 10의경우


.mCustomScrollBox  .mCustomScrollBox{

padding: 0;

}

#wrap #header .category .category_list .category_list{

margin: 0;

}



를 추가해주시면 다시 정상으로 돌아옵니다.

문제가 발생하시는분들은 위 내용을 추가해주세요.


혹시 적용이 어려우시거나 다른 문제가 있으신분은 꼭 메일 부탁드립니다.

감사합니다

저작자 표시 비영리 변경 금지
신고

검색할 '단어'를 입력하시고, 엔터를 눌러 주세요.