블로그 스킨 수정 작업 (버그 수정)

사용 스킨

스피드 스타 2.2.0 스킨

스피드스타 (Speed Star) 스킨

 

이전 수정 작업 내역

1. 코드 하이라이터 highlight.js & 코드 복사 버튼, 수식 입력기 MathJax 추가

바꾼 스킨에 코드 하이라이터를 추가하고 조금 개선하였습니다 (highlight.js)

2. 접은글 텍스트 수정 => 댓글창 안열리는 버그 수정

티스토리 댓글창 안열림 window.open is not a function 문제 해결

 

이번 작업

블로그를 쭉 보면서 스킨 버그 몇 개를 고쳤습니다.

사실 스킨 바꾸고 나서 몇 달동안 지속된 문제였는데 귀찮아서 안고치고 있다가 이제야 와서 고치네요.

 

스킨 자바스크립트 소스 자체가 대부분 난독화 되어 있어서 스킨 개발자님한테 원본 소스를 요청할려다가 이거마저도 귀찮아서 그냥 제가 난독화를 직접 풀어버렸습니다. 난독화 푸는 방법에 대해선 해당 링크 참고.

 

사실 스피드 스타 3.2.0 버전으로 업그레이드 하면 깔끔하게 해결될 문제인데 무슨 이유인진 몰라도 스피드 스타 3.2.0 이 기본적으로 2.2.0 에 비해 로딩되는 속도가 훨씬 느립니다. 기존에 링크 누르면 한 300ms 만에 들어가진게 3.2.0에선 한 1500ms 정도..? 꽤나 많이 차이가 나더라구요.

 

스킨 개발자님이 아마 로딩 방식을 일단 들어가고 나중에 이미지나 여러 내용을 로딩 하는 방식이 아니라, 페이지가 다 로딩된 후에 완성된 페이지를 로딩하는 방식으로 바꾸신 거 같은데 아무래도 제가 작업을 하지 않았다보니 스피드 스타 3.2.0 의 모든 소스코드를 다 읽어보지 않는 이상 알 방법은 딱히 없네요.

 

일단 2.2.0 에서 커스텀한 부분이 워낙 많아서 일단은 그냥 쓰기로 했습니다.

 

본론으로 돌아와서 아래는 블로그 스킨 버그 수정 사항입니다.

 

수정한 것

우선 공지사항에 들어왔을 때 목차가 제대로 생성되지 않는 버그를 고쳤습니다. 이게 일반 글에선 잘 표시되는데 유독 공지에서만 목차가 생성 안되던 이유가, 목차라는거 자체가 티스토리 HTML 수정란에서 id가 toc 라는 div 태그에 목차를 JS를 활용해 동적으로 삽입하는 식으로 코드를 짜셨던데,

 

이 티스토리 HTML 수정이 공지사항엔 제대로 반영이 안되더군요.

따라서 목차 생성 코드에서 주소에 notice 가 포함된 경우 (즉, 현재 공지사항 페이지를 연 경우)

id가 toc인 div 태그를 강제적으로 생성해서 목차가 동작하도록 고쳤습니다.

 

다만 저 목차를 내리면서 왼쪽에 진행 사항이 초록색 원으로 표시되는데 이게 공지사항 용으로 계산된게 아니다 보니 스크롤 바를 맨 끝까지 내려도 목차 맨 마지막 진행 사항 딱 한개가 100%로 안차는 문제가 있습니다.

이건 나중에 바꿔야 할 듯 싶네요.

 

또한 에디터에서 사진 크기를 조정했는데도 글을 쓰고 나서는 사진 크기 조정이 먹히지 않고 무조건 최대 크기로 나오던 것을 수정했습니다. 이 또한 스킨의 버그로 HTML 최상단에 Mutation Observer 가 실행되서 이미지 태그를 발견하면 자동적으로 lazyload class를 추가해 lazyload 를 구현하는 부분이 있었습니다.

 

그런데 여기서 이미지 사이즈를 에디터에서 설정한 대로가 아닌 무조건 최대 크기로 고정해버리는 코드가 있어서 문제가 발생했습니다. 아마 SEO를 위해 넣으신 듯 한데 역시 수정했습니다.

 

앞으로 수정해야 할 것

https://notice.tistory.com/2656

[안내] PC에서도 프로필 카드를 확인할 수 있어요.

네임카드 수정하기

- 23년 11월에 티스토리 프로필 카드(코드상으론 네임카드) 라는게 추가되서 저렇게 네임카드가 보이게 수정됐는데 CSS 적용이 안되어 있어 저렇게 깨진 상태로 표기됩니다. 고쳐야 하는데 몇 달째 방치중입니다.. 언젠가 시간 나면 수정하는걸로

 

https://notice.tistory.com/2645

[안내] 티스토리 댓글과 방명록이 새로워졌습니다.

이전 댓글 더보기 수정하기

- 이것 역시 티스토리 패치 때문으로 댓글 치환자가 변경되어 댓글 기능까진 정상적으로 작동하나 현재 이전 댓글 더보기가 작동하지 않고 있습니다. 치환자를 변경시키면 위 네임카드 처럼 CSS를 대대적으로 수정해야 합니다.

아마 네임카드랑 한꺼번에 묶어서 작업해야 할 거 같네요

 

https://pgh268400.tistory.com/722

유튜브 링크 달시 중복으로 표시

이것은 스킨의 문제로, 스킨에 기본적으로 링크가 있으면 이걸 유튜브 영상 embed HTML로 자동 치환시키는 기능이 존재합니다. 그래서 티스토리에서 유튜브 링크 + 영상 형태로 남기고 싶어도 영상 + 영상 형태로 표기되는 문제가 있습니다. 이것도 언젠가 수정해봐야 할 거 같네요.