사이드 최신글 인기글 꾸미기 날짜 형식 영어로 변경하기

안녕하세요 별깡솔입니다 : )

별깡솔 블로그를 방문하신 모든 분들 진심으로 감사드립니다

사이드 최신글 & 인기글 꾸미기

날짜 표시 형식을 바꾸는 방법에 대해 알아보다 시간이 많이 지체되었습니다

여러 블로그를 탐험하며 정보를 얻는 중에 날짜 표시 형식이 사전에 예고 없이 한 번 변경되었다는 걸 알게 되었습니다

그러다 보니 javascript로 string 처리하는 방식이 달라짐으로 새롭게 구성해야 하는 귀찮음이 있었죠

무언가 변경되면 사전에 알려달라!

우선 스킨의 기존 최신글 인기글 부분은 아래 그림과 같습니다

최신글이 먼저 노출되고 있습니다

그리고 인기글 부분은 글자 색상이 연하게 나타나서 탭으로 구성되었다 라는 것을 알 수 있습니다

날짜 부분도 연한 색상으로 나타나고 있습니다

별깡솔 스타일로 변경할 부분은 6가지

인기글 탭 부분을 우선 노출
인기글 & 최신글 가운데 정렬
날짜 표시 방법 변경 (영어로 미국식)
인기글 최신글 아래 부분에 선 처리
마우스가 올라오면 선 처리 부분 색상 변화
글 제목에 마우스 올라가면 색상 변화

날짜 표시 방법을 연구하면서 참 재미있었습니다

인기글 탭 부분을 우선 노출하려면 html 순서를 변경합니다

html을 수정하기 전에 스킨 백업합니다

html

티스토리 스킨 가이드 - 인기글

<s_sidebar_element>
  <!-- 이 블로그 인기글 -->
  <div class="popularPost">
    <h3>이 블로그 인기글 </h3>
    <ul>
      <s_rctps_popular_rep>
        <li>
          <a href=""></a>
          <span class="cnt"></span>
          <s_rctps_rep_thumbnail>
            <img src=""/>
          </s_rctps_rep_thumbnail>
          <a href=""></a>
        </li>
      </s_rctps_popular_rep>
    </ul>
  </div>
</s_sidebar_element>

티스토리 스킨 가이드 - 최근글

<s_sidebar_element>
  <!-- 최근에 올라온 글 -->
  <div class="recentPost">
    <h3>최근에 올라온 글 </h3>
    <ul>
      <s_rctps_rep>
        <li>
          <a href=""></a>
          <span class="cnt"></span>
          <s_rctps_rep_thumbnail>
            <img src=""/>
          </s_rctps_rep_thumbnail>
          <a href=""></a>
        </li>
      </s_rctps_rep>
    </ul>
  </div>
</s_sidebar_element>

별깡솔 html

<s_sidebar_element>
    <!-- 인기글과 최근글-->
    <div class="box-recent">
        <ul class="tab-recent">
            <li class="tab-button recent_button on"><a class="tab-button" href="#" onclick="return false;">인기글</a></li>
            <li class="tab-button sidebar_button"><a class="tab-button" href="#" onclick="return false;">최근글</a></li>
        </ul>
        <ul class="list-recent">
            <s_rctps_popular_rep>
                <li>
                    <div class="box-recent-img">  
                        <a href="" class="link-recent">
                            <s_rctps_rep_thumbnail>
                                <img src=""/>
                            </s_rctps_rep_thumbnail>
                        </a>
                    </div>        
                    <div class="box-recent">
                        <a href="" class="link-recent">    
                            <span class="link-recent-title"></span>
                        </a> 
                        <a href="" class="link-recent">
                            <span class="link-recent-date"></span>
                        </a> 
                    </div>

                </li>
            </s_rctps_popular_rep>
        </ul>
        <ul class="list-recent list-tab">
            <s_rctps_rep>
                <li>
                    <div class="box-recent-img">  
                        <a href="" class="link-recent">
                            <s_rctps_rep_thumbnail>
                                <img src=""/>
                            </s_rctps_rep_thumbnail>
                        </a>
                    </div>     
                    <div class="box-recent">
                        <a href="" class="link-recent">    
                            <span class="link-recent-title"></span>
                        </a> 
                        <a href="" class="link-recent">
                            <span class="link-recent-date"></span>
                        </a> 
                    </div>
                </li>
            </s_rctps_rep>
        </ul>
    </div>
</s_sidebar_element>

Odyssey 스킨에서 인기글 최신글 코드 순서, div 몇 가지 추가, class 변경했습니다

java script

/* category recent date replace  */
$('.link-recent-date').each(function () {
    var date = $(this).text();
    var d = date.split(/[.| |:]/);
    var m = new Array("January","February","March","April","May","June","July","August","September","October","November","December");
    var year = Number(d[0]);
    var month = Number(d[1]-1);
    var day = Number(d[2]);
    $(this).html(m[month]+" "+day+", "+year);
});

이 글을 작성하면서 기존 코드를 수정했던가? 라는 생각에 notepad++에 compare 플러그인으로 비교해보았을 때 위에 코드만 추가된 것을 확인했습니다

혹시 작동이 안된다면 댓글을 달아주세요

위에 첨부된 코드는 <span class="link-recent-date"></span> 안에 있는 날짜만 변경합니다

또 다른 클래스에도 날짜 형식을 변경하려면 $('.link-recent-date').each(function () { 라인에서 $('.link-recent-date ,.클래스이름 추가하면 됩니다

스킨 외부 부분을 해결하고 나서 내부 부분 꾸미기 할 때 클래스를 추가하여 사용할 것 같습니다

영어 표기 방법을 바꾸실 분은 Array 부분을 수정하면 됩니다

짧게 표시하는 예 ("Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sept","Oct","Nov","Dec");

표시 순서에서 year month day 순으로 나열하려면 $(this).html(m[month]+" "+day+", "+year); 라인을 $(this).html(year+" "+m[month]+" "+day); 으로 바꾸시면 됩니다
대신 매우 이상합니다

css

Odyssey 스킨에서 적용하던 css를 시원하게 날려버리고 새롭게 css를 추가했습니다

기존 css

.area-aside .box-recent .tab-recent{display:flex;margin-bottom:13px}
.area-aside .box-recent .tab-recent li{position:relative;margin-right:20px}
.area-aside .box-recent .tab-recent li span{display:block}
.area-aside .box-recent .tab-recent li:last-child{margin-right:0}
.area-aside .box-recent .tab-recent li:last-child:before{content:'';position:absolute;top:9px;left:-10px;width:2px;height:10px;background:url(./images/bullet-tab.svg) no-repeat}
.area-aside .box-recent .tab-recent li.on a{color:#333;font-weight:500}
.area-aside .box-recent .tab-recent li a{display:block;font-size:14px;line-height:1.64;color:#999;text-decoration:none}
.area-aside .box-recent .list-recent li{margin-bottom:20px}
.area-aside .box-recent .list-recent li:last-child{margin-bottom:0}
.area-aside .box-recent .list-recent .link-recent{display:flex;width:100%;flex-wrap:nowrap;text-decoration:none}
.area-aside .box-recent .list-recent .thumbnail{width:64px;height:64px;margin:0 12px 0 0;background-size:cover;background-position:50% 50%}
.area-aside .box-recent .list-recent .thumbnail+.box-recent{width:70%}
.area-aside .box-recent .list-recent .box-recent{width:100%;margin-top:2px;font-size:13px;line-height:1.54;color:#333}
.area-aside .box-recent .list-recent .box-recent strong{display:block;margin-bottom:2px;font-weight:400}
.area-aside .box-recent .list-recent .box-recent span{color:#999}
@media screen and (max-width:1061px){
    .area-aside .box-recent .list-recent .box-recent strong{display:-webkit-box;text-overflow:ellipsis;-webkit-line-clamp:2;-webkit-box-orient:vertical;word-break:break-all;overflow:hidden}
    .box-notice .link-sidebar a,.box-reply .link-sidebar strong{display:-webkit-box;text-overflow:ellipsis;-webkit-line-clamp:1;-webkit-box-orient:vertical;word-break:break-all;overflow:hidden}
}

별깡솔 css

.area-aside .box-recent {
    font-size: 0;
}
.area-aside .box-recent:hover .tab-recent {
    box-shadow: 0 2px 0 0 #c5c7e2;
}
.area-aside .box-recent .tab-recent {
    text-align: center;
    padding: 15px 0;
    box-shadow: 0 2px 0 0 #ECF1F2;
    transition: ease-in-out 0.3s;
}
.area-aside .box-recent .tab-recent li {
    display: inline-block;
    padding: 0 10px;
}
.area-aside .box-recent .tab-recent .recent_button {
    position: relative
}
.area-aside .box-recent .tab-recent .recent_button:after {
    content: '';
    position: absolute;
    top: 5px;
    right: -3px;
    background: #d3d3d3;
    width: 2px;
    height: 15px;
}
.area-aside .box-recent .tab-recent li a {
    display: inline-block;
    font-size: 16px;
    opacity: 0.6;
    color: #333;
    font-weight: 500;
}
.area-aside .box-recent .tab-recent li a:hover {
    opacity: 1;
}
.area-aside .box-recent .tab-recent li.on a {
    opacity: 1;
}
.area-aside .box-recent .list-recent {}
.area-aside .box-recent .list-recent li {
    display: block;
    overflow: hidden;
    margin: 20px auto;
}
.area-aside .box-recent .list-recent li .box-recent-img {
    display: inline-block;
    width: 30%;
    height: 100px;
    margin: auto;
    overflow: hidden;
    vertical-align: middle;
    box-sizing: border-box;
}
.area-aside .box-recent .list-recent li .box-recent-img a {
    display: block;
}
.area-aside .box-recent .list-recent li .box-recent-img img {
    display: inline-block;
    max-width: 100%;
    height: 100px;
    font-size: 0;
    vertical-align: middle;
}
.area-aside .box-recent .list-recent li .box-recent {
    display: inline-block;
    width: 70%;
    box-sizing: border-box;
    vertical-align: middle;
    padding: 10px 0 0 15px;
}
.area-aside .box-recent .list-recent li .box-recent a {
    display: inline-block;
    color: #333;
}
.area-aside .box-recent .list-recent li .box-recent a:hover span {
    opacity: 1;
}
.area-aside .box-recent .list-recent li .box-recent .link-recent-title {
    font-size: 15px;
    color: #333;
    opacity:
        0.8;
}
.area-aside .box-recent .list-recent li .box-recent .link-recent-date {
    font-size: 14px;
    color: #777;
}
.area-aside .box-recent .list-recent.list-tab {
    display: none;
}

별깡솔 블로그에서 사이드 영역이 300px 정도 됩니다

많이 크거나 작지 않아 아직 불편한 점 없이 사용 중입니다

나중에 광고를 부착할 때 불편한 점이 생긴다면 수정할 예정입니다

이제 사이드에서 tag, 최근댓글, 방문자수, AD영역 남았습니다

별깡솔 블로그를 방문하신 모든 분들 다시 한번 진심으로 감사드립니다

구독과 좋아요 감사합니다 : )