게시글 테스트

07 Apr 2022 in Daily. Log on Diary

일상 기록

slick image
게시글 목차 만들기
페이지 버튼 만들기
게시글에 유튜브플레이어 보기
게시물 조회수 보이기

slick image

Slick slick 사이트에 들어가서 get it now를 눌러 다운로드 받아주어 slick 폴더를 /assets/css/slick에 복사>붙여넣기 해준다.

게시글 원하는 위치에 아래와 같이 넣어주면 된다.

<div class="main_center">
    <div><img src= "/assets/img/blog/hydejack-8.jpg" style="width: auto; height: 500px;"></div>
    <div><img src="/assets/img/blog/hydejack-8.png" style="width: auto; height: 500px;"></div>
    <div><img src= "/assets/img/blog/hydejack-9-dark.jpg" style="width: auto; height: 500px;"></div>
</div>
<script>
    $(document).ready(function() {
        $('.main_center').slick({
            autoplay : true, /*자동으로 슬라이딩됨*/
            dots : true, /* 하단 점 버튼 */
            speed : 300 /* 이미지가 슬라이딩시 걸리는 시간 */,
            infinite : true,
            autoplaySpeed : 30000 /* 이미지가 다른 이미지로 넘어 갈때의 텀 */,
            arrows : true,
            slidesToShow : 1,
            slidesToScroll : 1,
            touchMove : true, /* 마우스 클릭으로 끌어서 슬라이딩 가능여부 */
            nextArrows : true, /* 넥스트버튼 */
            prevArrows : true,
            arrow : true, /*false면 좌우 버튼 없음, true면 좌우 버튼 보임*/
            fade : false
        });
    });
</script>

.slick() 안의 옵션을 원하는대로 설정하여 사용 할 수 있다.

그리고 scss를 수정하여 좌우로 화살표를 넣어서 표출 하는것도 가능하도록 변경 할 수 있다.
이미지는 별도로 구해서 사용하시면 됩니다.

assests/css/slick/slick-theme.css

.slick-prev:before
{
    content: url(left.png);
}
[dir='rtl'] .slick-prev:before
{
    content: url(right.png);
}

.slick-next:before
{
    content: url(right.png);
}
[dir='rtl'] .slick-next:before
{
    content: url(left.png);
}

게시글 목차 만들기

h1 타이틀 바로 아래에

* toc
{:toc .large-only}

를 추가하여 헤더를 기준으로 목차 생성

페이지 버튼 만들기

_include/components/page-button.html

<div class="page-control">
    <div>
        
        <a id="prev" class="w-btn-outline w-btn-gray-outline" href="/devlog/flutter-dart.html">&laquo; 플러터를 위한 필수! 다트를 알자!</a>
        
    </div>
    <div>
        
        <a id="next" class="w-btn-outline w-btn-gray-outline" href="/devlog/algo-baekjoon-15681.html">[BOJ] 15681.트리와 쿼리 &raquo;</a>
        
    </div>
</div>

_layouts/post.html

<div class="page-control">
    <div>
        
        <a id="prev" class="w-btn-outline w-btn-gray-outline" href="/devlog/flutter-dart.html">&laquo; 플러터를 위한 필수! 다트를 알자!</a>
        
    </div>
    <div>
        
        <a id="next" class="w-btn-outline w-btn-gray-outline" href="/devlog/algo-baekjoon-15681.html">[BOJ] 15681.트리와 쿼리 &raquo;</a>
        
    </div>
</div>

About 위에 위치하여 작성자 소개 위에 위치하도록 한다.

원하는 스타일대로 변경을 위해서 다음과 같이 작업해준다.

_sass/my-style.scss

.page-control {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.page-control > div {
  max-width: 50%;
}.page-control {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.page-control > div {
  max-width: 50%;
}

.w-btn-outline {
  position: relative;
  padding: 15px 30px;
  border-radius: 15px;
  font-family: "paybooc-Light", sans-serif;
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.2);
  text-decoration: none;
  font-weight: 600;
  transition: 0.25s;
}

.w-btn-outline:hover {
  letter-spacing: 2px;
  transform: scale(1.2);
  cursor: pointer;
}

.w-btn-outline:active {
  transform: scale(1.5);
}

.w-btn-gray-outline {
  border: 3px solid #a3a1a1;
  color: #6e6e6e;
}

.w-btn-gray-outline:hover {
  background-color: #a3a1a1;
  color: #e3dede;
}

게시글에 유튜브플레이어 보기

_includes/components/youtubePlayer.html

<style>
    .embed-container { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; max-width: 100%; }
    .embed-container iframe,
    .embed-container object,
    .embed-container embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
</style>

<div class="embed-container" >
    <iframe src="https://www.youtube.com/embed/" frameborder="0" allowfullscreen="" onclick="ga('send', 'event', 'post', 'click', 'youtubePlayer');">
    </iframe>
</div>

위 처럼 youtube 영상의 id를 가져와서 표출 할 수 있도록 만들고

`<style>
    .embed-container { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; max-width: 100%; }
    .embed-container iframe,
    .embed-container object,
    .embed-container embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
</style>

<div class="embed-container" >
    <iframe src="https://www.youtube.com/embed/{youtube ID}" frameborder="0" allowfullscreen="" onclick="ga('send', 'event', 'post', 'click', 'youtubePlayer');">
    </iframe>
</div>`

게시글 원하는 위치에 youtube id를 넣어주면 된다.

위와 같이 watch?v= 이후에 오는 id를 가져다가 사용한다.

게시물 조회수 보이기

Hits 이용

Hits

TARGET URL에 나의 블로그 주소를 입력하고, Options에서 여러 설정들을 조정하여 내가 원하는 스타일의 hits를 만들 수 있다. 미리보기를 통해 표시되는것을 볼 수 있으니 참고해서 만들면 된다.

그렇게 생성된 아래의 HTML Link를 복사해서

_layouts/post.html

에 넣어서 각 게시물 별로 조회수가 보이는 위치를 조정할 수 있다.

_includes/body/sidebar-sticky.html

에 넣으면 사이드바는 어떤 게시물을 봐도 같이 보이는것이기 때문에 전체 조회수를 체크할 수 있다.

만약 조회수 가장 오른쪽에 생성되는 링크모양 아이콘이 싫다면

_sass/my-style.scss

a.external::after, a::after {
  display: none;
}

를 추가하여 제거 할 수 있다.

게시글 테스트

slick image

게시글 목차 만들기

페이지 버튼 만들기

게시글에 유튜브플레이어 보기

게시물 조회수 보이기

쟁's BLOG

Error

slick image

게시글 목차 만들기

페이지 버튼 만들기

게시글에 유튜브플레이어 보기

게시물 조회수 보이기

Templates (for web app):

Error