[티스토리 꾸미기] 대문 홈 커버의 본문 요약을 태그 클라우드로 바꾸기.

0. 목표

이번 스킨은 다 마음에 들었지만, 한 가지 아쉬웠던 점이 바로, 피드의 Summary 부분 이었다.

Velog와 달리 요약문을 본문의 태그에 맞게 띄어쓰기 해주지 않는다. 따라서 위 그림 처럼 모든 내용이 한 줄로 쭉 주어져서 예쁘지도 않고 가독성도 떨어진다.

RSS를 활용한다면, 본문 전문과 스크립트별 태그를 받을 수 있지만, 내부 치환자로 티스토리 서버에서 직접 내용을 받아오는 것보다 속도가 현저히 떨어질 것 같다. (+ 내가 귀찮아서 그리 못하겠다.)

그래서 이번 목표는 글 요약부분을 해당 글의 TAG로 바꾸기 이다.

1. 티스토리 치환자 살펴보기

티스토리 공홈의 태그 클라우드 치환자를 살펴보면

<!-- 스킨 -->
<s_tag>
    <div class="taglog">
        <h3>태그</h3>
        <ul>
            <s_tag_rep>
            <li>
                <a href="" class=""></a>
            </li>
            </s_tag_rep>
        </ul>
    </div>
</s_tag>

이 형식으로 적으면,

<!-- 변환 예 -->
<div class="taglog">
    <h3>태그</h3>
    <ul>
        <li>
            <a href="/tag/tistory" class="cloud1">tistory</a>
        </li>
        <li>
            <a href="/tag/kakao" class="cloud4">kakao</a>
        </li>
        <li>
            <a href="/tag/blog" class="cloud5">blog</a>
        </li>
    </ul>
</div>

위와 같이 변환 된다고 한다.

이걸 그대로 긁어서, 의 부분과 바꾸었더니 다음과 같이 화면이 깨졌다.

내가 추정했을 때 이유는

• 1️⃣ 티스토리가 자체적으로 만든 tag_class를 쓰다보니 나의 기존 스킨의 CSS와 충돌이 일어났다.
• ul 태그가 block 요소라서 기존 CSS와 충돌을 일으킴

2. 내 티스토리 식으로 바꾸기

그래서 해당 부분을

<s_tag_rep>
        <span  class="feed-tag"> </span>
</s_tag_rep>

span 형태로 바꾸었다. 나는 list로 한 줄씩 처리할 필요도 없고, 링크 타고 해당 해시태그로 들어가게 하고 싶지도 않아서 나열 형식으로 바꾸었다.

다음은 feed-tag라는 내가 새로 만든 class에 해당하는 CSS 이다.

.feed-tag {
        background-color: #FFCDCD;
    display: inline-block;
    padding: 5px 10px;
    color: #fff;
    border-radius: 12px;
    font-size: 12px;
    margin: 5px 5px 0 0;
    text-decoration: none;
    white-space: normal; /* 줄바꿈 허용 */
    overflow-wrap: anywhere; /* 긴 단어를 줄바꿈 */
    word-break: keep-all; /* 단어 단위로 묶음 */
}



.feed-tag:hover {
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3); /* 그림자 강조 */
    transform: translateY(-2px); /* 살짝 위로 올라가는 효과 */
}

3. 정확한 위치에 넣기

skin 마다 피드를 나타내는 클래스 이름이 다를 것이라, 이 부분은 정확히 알려주지 못하겠다.

자신의 feed에 해당하는 html 태그 위치를 찾고 싶다면 f12를 통해 찾길 바란다.

아니면 스킨 편집을 켜서, 태그가 있는 위치를 찾으면 된다.

이제 집어넣으면,

4. 결과

좀 더 깔끔하게 바뀐 것 같다!
태그 크기를 키울까도 생각했지만, 반응형에 따라 크기가 줄어들 시, 밑의 글쓴이 - 글쓴 날짜와 겹쳐서 일단 놔두었다.