본문 바로가기

BookClub에 없는(?) 이전글 다음글 플러그인 고정으로 삽입하기

by e.스토리 2022. 10. 22.

BookClub에 없는(?) 이전글 다음글 플러그인 고정으로 삽입하기입니다. 티스토리 스킨을 만지작거리다 보니 가장 고쳐쓰기 편한 것인 북클럽 테마였습니다. 그런데 가만히 보니 이전글 다음글 관련한 플러그인이 없는 것 같았습니다. 어쩌면 있는데 제가 못 찾는 것일 수도 있습니다. 

그래서 whatever 테마에서 가져와서 넣었습니다. 현재글(지금 읽고 있는 글)은 표현할 필요가 없을 듯하여 display: none;를 style에 추가하였습니다.

<!-- 이전글/다음글 -->
                    <div class="article-page">
                      <p class="title-footer">'블로그 Tips'의 다른글</p>
                      <ul>
                        <li>
                          <s_article_prev>
                            <a href=""><span>이전글</span><strong></strong></a>
                          </s_article_prev>
                        </li>
                        <li style="display: none;"><span>현재글</span><strong>BookClub에 없는(?) 이전글 다음글 플러그인 고정으로 삽입하기</strong></li>
                        <li>
                          <s_article_next>
                            <a href=""><span>다음글</span><strong></strong></a>
                          </s_article_next>
                        </li>
                      </ul>
                    </div>

폰트 크기가 엉성해서 css도 일부 추가하였습니다. 뭔가 중복으로 조잡스럽게 들어가는 느낌이지만 어깨너머로 배운 짭실력이라 이렇게 밖에는 도움을 드리지 못해 살짝 죄송합니다. 

/* article-page - 상세페이지 이전다음글  */
.article-page {
    padding: 20px 20px 0px 20px;
    border-top: 1px solid #e8e8e8;
    padding-bottom: 0px !important;
    margin-bottom: 0px;
}

.article-page .title-footer {
    margin-bottom: 15px;
}

.article-page ul {
    list-style: none;
    margin: 0 0 45px 0;
    padding: 0;
}

.article-page ul li {
    position: relative;
    margin-bottom: 7px;
    padding: 0;
    font-size: 14px; /* 이전글다음글 폰트 크기 */
}

.article-page ul li span {
    padding-right: 10px;
}

.article-page ul li a {
    color: #ff5a00;
    text-decoration: none;
		display: block;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
}

.article-page ul li a:hover {
    text-decoration: underline;
}

정확히 어디서부터 어디까지가 필요한 부분인지 몰라서 몽땅 넣었습니다. 혹시 아시는 분 있으시면 댓글로 알려주시면 큰 도움이 될 것 같습니다. 

이전글 다음글


참고로 관련글 더보기 테이블의 제목이 길어서 두줄로 넘어가는 경우에는 글자수를 줄여주는 소스를 사용하면 됩니다. 제목에서도 사용한 것인데, 따로 게시물을 만들어서 포스팅하기에는 내용이 너무 적어서 한꺼번에 공개합니다. 

#content .another_category th {
	padding: 2px 0 !important;
	font-size: 0.875rem !important;
/* 글자수 길이 조절해서 숨기기 시작 */
		display: block;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
/* 글자수 길이 조절해서 숨기기 끝 */
}

 

반응형

댓글

최신글 전체

이미지
제목
글쓴이
등록일