티스토리 반응형 Portfolio 스킨 - 페이지 해더 오류 수정

---

티스토리에서 제공한 무료 반응형 스킨 Portfolio를 사용하면서 최적화를 해본다고, 잘 알지 못하는 HTML을 이것저것 만지다 보니.. 오류가 심하게 났었던 적이 있습니다. 백업을 해두었던 파일이 저의 실수로 저장도 안 되어 있어서 난감했었는데요. 

그래서...

스킨 초기화를 해야만 했습니다.

티스토리 관리자 페이지에서

좌측 메뉴의 꾸미기- 스킨 변경을 클릭합니다.

그러면 이렇게 스킨 목록이 나오는데요. 여기에서 원래 사용하던 Portfolio 스킨을 마우스로 가져다 데어 적용을 클릭합니다.

기왕 이렇게 된 것 다른 스킨으로 변경을 해볼까 했지만, 그간 최적화 해온 것이 모두 허사가 되는 것 같아서... ㅠㅠ

이렇게 리셋되어 초기화되었지만, 스킨 편집의 내용이나 플러그인 등은 대다수 그대로입니다. 

일부 스킨 편집의 내용이 초기화된 것은 다시 기재하거나 수정하시면 됩니다.

그런데...

초기화해놓고 나서 블로그 페이지들을 살펴보니....

페이지(Pages)나 공지사항(notice)의 화면이 이상합니다. 해더 부분에서 이미지가 나오지가 않았어요.

about 페이지

공지사항

해더 부분에 이미지도 안 보이고, 글 제목과 글 쓴 날자 등이 보이지 않습니다.

더군다나 줄 위칸으로 그레이 배경색이 깔려 있어서, 뭔가 이상함을 발견했습니다.

혹시 리셋이 잘못되었나 싶어 다시 초기화도 해봤고, 타 계정을 파서 확인도 했지만 같은 현상이었습니다.

---

HTML 편집으로 들어가서 내용을 확인해보니 뭔가 이상합니다.

<s_index_article_rep>
            <div class="list_index category_type_ category_index_list">
              <div class="item_category">
                <a href="/285" class="link_category">
                  <span class="thumnail item-thumbnail" style="background-image:url('<s_article_rep_thumbnail>https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FkTEAt%2FbtqJiyNvWmH%2FYDc9RRCEjlTlBk7uE4QOxk%2Fimg.png</s_article_rep_thumbnail>')"></span>
                  <div class="info">
                    <strong class="name">티스토리 반응형 Portfolio 스킨 - 페이지 해더 오류 수정</strong>
                    <p class="text summary">티스토리에서 제공한 무료 반응형 스킨 Portfolio를 사용하면서 최적화를 해본다고, 잘 알지 못하는 HTML을 이것저것 만지다 보니.. 오류가 심하게 났었던 적이 있습니다. 백업을 해두었던 파일이 저의 실수로 저장도 안 되어 있어서 난감했었는데요. 그래서... 스킨 초기화를 해야만 했습니다. 티스토리 관리자 페이지에서 좌측 메뉴의 꾸미기- 스킨 변경을 클릭합니다. 그러면 이렇게 스킨 목록이 나오는데요. 여기에서 원래 사용하던 Portfolio 스킨을 마우스로 가져다 데어 적용을 클릭합니다. 기왕 이렇게 된 것 다른 스킨으로 변경을 해볼까 했지만, 그간 최적화 해온 것이 모두 허사가 되는 것 같아서... ㅠㅠ 이렇게 리셋되어 초기화되었지만, 스킨 편집의 내용이나 플러그인 등은 대다수 그대로입니다. 일부..</p>
                    <span class="date">2020. 9. 22. 18:07</span>
                  </div>
                </a>
              </div>
            </div>
          </s_index_article_rep>

 

블로그 처음 시작할 때 혹시 몰라 백업한 스킨의 HTML을 찾아 확인해보니 위 코드가 안보였습니다.

그 외 일부 틀린 내용도 있긴 하지만, 저 부분이 가장 큰 다른 부분입니다.

하지만 이것을 새로 초기화한 스킨의 HTML에 넣어줘도 변화는 없었어요. 

오히려 블로그의 카테고리 리스트 화면이 이중으로 보이는....ㅠㅠ

HTML을 아무리 살펴봐도 이상점을 제 실력으로는 못 찾겠더군요.

그러다가.... 

images 폴더 내의 common.js라는 파일을 편집으로 열어보게 되었습니다.

저 자바스크립트 파일이 무슨 역할을 하는지는 모르겠지만, 오래전에 백업한 파일과 용량이 달랐습니다. 

그리고...

내용이 다름을 확인하였습니다.

   /* 검색 리스트 처리 - 글 목록에서 썸네일, 카테고리 정보 참조 */
      $('.category_search_list .item_category').each(function(i) {
        var href = $(this).find('.link_category').attr('href'),
            $category_index_item = $('.category_index_list').find('[href="' + href + '"]'),
            thumbnail_full_path = $category_index_item.find('.item-thumbnail').css('background-image'),
            thumbnail_path = window.TistoryBlog.url + pathname;
          if (thumbnail_full_path != undefined) {
                thumbnail_path = thumbnail_full_path.replace(/^url\(['"](.+)['"]\)/, '$1');
          }
        if (thumbnail_path) {
          $(this).find('.link_category').data('thumbnail', thumbnail_path).css({
            "background-image": "url(" + thumbnail_path + ")"
          });
          $(this).find('.item-thumbnail').data('thumbnail', thumbnail_path).css({
            "background-image": "url(" + thumbnail_path + ")"
          });
        } else {
          $(this).find('.item-thumbnail').addClass('no_img');
        }

        $(this).find('.summary').text($category_index_item.find('.summary').text());
      });
    }

    // 리스트 관련해서 섬네일 없는 경우 no-img class 추가
    $('.item-thumbnail').each(function(i) {
      var $o = $(this),
        thumbnail_path = $o.css('background-image').replace(/^url\(['"](.+)['"]\)/, '$1'),
        base_path = window.TistoryBlog.url + pathname;
        
      if (thumbnail_path == base_path || thumbnail_path == href) {
        $o.addClass('no-img');
      }
    });
    $('.category_search_list .item_category').each(function(i) {
      var $o = $(this),
        thumbnail_path = $o.css('background-image').replace(/^url\(['"](.+)['"]\)/, '$1'),
        base_path = window.TistoryBlog.url + pathname;
      if (thumbnail_path == base_path) {
        $o.addClass('no-img');
      }
    });
    $('.category_search_list .link_category').each(function(i) {
      var $o = $(this),
        thumbnail_path = $o.css('background-image').replace(/^url\(['"](.+)['"]\)/, '$1'),
        base_path = window.TistoryBlog.url + pathname;
      if (thumbnail_path == base_path) {
        $o.addClass('no-img');
      }
    });  

위 내용은 초창기 백업본의 common.js의 내용 중 일부로 리셋하여 확인한 common.js에는 없는 내용입니다.

그리고..

 // 글 출력이 있는 경우
    if ($('.area_view').length != false) {
      var seoImage = $('meta[property="og:image"]').attr('content');
      if (seoImage != undefined && seoImage != false) {
        $('.area_view .article_header .inner_header').css({
          "background-image": "url(" + seoImage + ")"
        });
        $('.area_view .article_header').addClass('type_article_header_cover');

      } else {
        $('.area_view .article_header').addClass('type_article_header_common');
      }
      if($('#main > .area_cover:first-child > .type_featured:first-child, .type_article_header_cover').length) { $('#wrap').addClass('white');}
    }

이 부분은 새로 리셋하여 받은 common.js 파일의 내용과 달랐습니다.

새로 받은 스킨 파일의 common.js 파일에서 위 " 글 출력이 있는 경우"는 

// 글 출력이 있는 경우
    if ($('.area_view').length != false) {
      if($('#main > .area_cover:first-child > .type_featured:first-child, .type_article_header_cover').length) { $('#wrap').addClass('white');}
    }

이렇게 짧게 되어 있었습니다. 무언가 많이 생략된 것 같습니다.

---

파일을 덮어 씌우기 해봤더니, 카테고리 리스트 화면에서 이미지가 안 보이는 현상이 나타났습니다.

그래서 옛 백업 파일의 common.js파일의 "//글 출력이 있는 경우"의 내용을 새 common.js 파일에 덮어쓰기 줘 봤습니다.

그랬더니~~

카테고리 리스트 화면의 이미지도 정상으로 표출이 되었고, 위에서 처음 오류를 말씀드렸던 페이지와 공지사항의 해더 부분의 오류도 해결이 되었습니다.

페이지 about

공지사항

이렇게 정상적으로 해더 부분의 이미지가 표출이 되었어요.

HTML에 문제가 있는가 싶어서 수십 번 아니 수백 번을 검토하고 또 검토해본 것 같습니다. 이것도 지워보고 저것도 다시 끼워 넣어보고... 심지어 CSS까지 건드려 봤었어요..@.@

문과 출신이... 이런 막일을 해보니.... 머리가 너무 욱신거려서.. 중도에 포기할까 생각도 했었습니다..ㅎㅎ;

---

하지만, 이것이 끝이 아닙니다.

HTML 편집에서

<!-- 뷰페이지 상단 type css 구분 / type_article_header_common or type_article_header_cover -->
<div class="article_header type_article_header_cover">
<div class="inner_header" style="background-image:url('<s_article_rep_thumbnail>https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FkTEAt%2FbtqJiyNvWmH%2FYDc9RRCEjlTlBk7uE4QOxk%2Fimg.png'</s_article_rep_thumbnail>)">
<div class="info_text">
<strong class="title_post">티스토리 반응형 Portfolio 스킨 - 페이지 해더 오류 수정</strong>
<p class="info"><span class="date">2020. 9. 22. 18:07</span>ㆍ<span>Review (리뷰와 생활정보)/티스토리 블로그</span></p>
</div>
</div>
</div>

이 부분에서

<div class="inner_header" style="background-image:url('<s_article_rep_thumbnail>https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FkTEAt%2FbtqJiyNvWmH%2FYDc9RRCEjlTlBk7uE4QOxk%2Fimg.png'</s_article_rep_thumbnail>)">

을 수정해 줘도 되겠더군요.

<div class="inner_header" style="background-image:url('')">

이런 식으로 축소해도 해더 부분의 내용이 이상 없이 나왔습니다.

---

어째서 과거의 티스토리 반응형 Portfolio 스킨과 지금 새로 적용한 티스토리 Portfolio 스킨의 HTML과 common.js 파일의 내용이 다른지 모르겠습니다.

어쨌든 저는 과거와 현재의 스킨 파일을 접목시켜서 복구를 하였는데요.

한 군데 손을 데니 다른 데서 더 크게 터지고 있어서.... 이제 그만 최적화를 해야 하겠다 싶습니다..^^;

새로 티스토리를 시작하시거나 스킨을 변경하시면서 티스토리 반응형 Portfolio 스킨 적용하신다면, 제가 지금까지 해왔던 최적화들을 차근차근해보시는 것도 좋을 것 같습니다. 특히 오늘의 포스팅은 꼭 하셔야 할 것 같아요.

---

2020/09/21 - [Review(리뷰)] - 티스토리 반응형 스킨 Portfolio의 HTML 오류 수정

티스토리 반응형 스킨 Portfolio의 HTML 오류 수정

2020/09/07 - [Review(리뷰)] - 티스토리 portfolio 반응형 스킨 최적화 (with 구글 web.dev)

티스토리 portfolio 반응형 스킨 최적화 (with 구글 web.dev)

2020/08/31 - [Review(리뷰)] - 티스토리 블로그 빠르게 로딩시키기(애드센스, 애드 핏 최적화)

티스토리 블로그 빠르게 로딩시키기(애드센스,애드핏 최적화)

2020/08/28 - [Review(리뷰)] - 티스토리 최적화와 오프 스크린 이미지 지연하기

티스토리 최적화 와 오프스크린 이미지 지연하기