티스토리 블로그에 랜덤 명언 출력하기

적용 후 캡쳐한 이미지

개요

임파님의 블로그를 보면 오늘의 명언이 나오는데 나도 이 기능을 적용시켜보고 싶어 찾아보니 마음에 드는 글이 없어 직접 만들어 포스팅을 하게 되었다.

임파님 블로그 캡쳐 이미지

---

주의사항

1. html, css, js에 대한 기초 지식이 없을 경우 진행이 어려울 수 있습니다.
2. 블로그 스킨에 따라 css가 깨질 수 있습니다.

---

기능 적용 방법

1. js 파일 업로드

업로드 경로: 티스토리 블로그 관리 -> 스킨 편집 -> html 편집 -> 파일 업로드 -> 추가

sayDding.js

2.7 kB

파일 내용

/**
* 랜덤 띵언을 제공하는 API URL
* @constant {string}
*/
const DDING_API_URL = "https://korean-advice-open-api.vercel.app/api/advice";

/**
* API에서 랜덤 띵언을 가져와 HTML을 업데이트하는 함수
* @function
*/
function randomDding() {
    (async function () {
        try {
            // API 호출하여 응답을 JSON 형식으로 파싱
            let res = await fetch(DDING_API_URL).then(response => response.json());
            console.log(res);
            // 메시지 태그
            let $message = document.getElementById('dding_message');
            // 위인명 태그
            let $author = document.getElementById('dding_author');
            // 위인 프로필 태그
            let $authorProfile = document.getElementById('dding_authorProfile');

            $message.innerHTML = `" ${res.message} "`;
            $author.innerHTML = `<span>-</span> ${res.author}`;
            // 위인 프로필 값이 있을때만 출력
            if (res.authorProfile) {
                $authorProfile.innerHTML = `(${res.authorProfile})`;
                $authorProfile.removeAttribute("hidden");
            } else {
                $authorProfile.setAttribute("hidden", true);
            }
        } catch (err) {
            console.error(err);
        }
    })();
}

document.addEventListener("DOMContentLoaded", function () {
    // 띵언 영역 태그
    let $dding_area = document.getElementById('dding_area');

    $dding_area.innerHTML = `
        <div id="dding_title">오늘의 명언</div>
        <div>
            <div id="dding_message"></div>
            <span id="dding_author"></span>
            <span id="dding_authorProfile"></span>
        </div>
        <svg id="dding_btn" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
        <path d="M370.72 133.28C339.458 104.008 298.888 87.962 255.848 88c-77.458.068-144.328 53.178-162.791 126.85-1.344 5.363-6.122 9.15-11.651 9.15H24.103c-7.498 0-13.194-6.807-11.807-14.176C33.933 94.924 134.813 8 256 8c66.448 0 126.791 26.136 171.315 68.685L463.03 40.97C478.149 25.851 504 36.559 504 57.941V192c0 13.255-10.745 24-24 24H345.941c-21.382 0-32.09-25.851-16.971-40.971l41.75-41.749zM32 296h134.059c21.382 0 32.09 25.851 16.971 40.971l-41.75 41.75c31.262 29.273 71.835 45.319 114.876 45.28 77.418-.07 144.315-53.144 162.787-126.849 1.344-5.363 6.122-9.15 11.651-9.15h57.304c7.498 0 13.194 6.807 11.807 14.176C478.067 417.076 377.187 504 256 504c-66.448 0-126.791-26.136-171.315-68.685L48.97 471.03C33.851 486.149 8 475.441 8 454.059V320c0-13.255 10.745-24 24-24z"></path>
        </svg>
    `;

    // 함수 호출
    randomDding();
    document.getElementById('dding_btn').addEventListener("click", randomDding);
});

---

2. html 태그 추가

수정 경로: 티스토리 블로그 관리 -> 스킨 편집 -> html 편집

위 경로에서 명언을 띄울 영역을 찾아 아래 태그를 추가하면 된다.

<!-- head 태그 최하단에 추가 -->

<!-- 띵언 스크립트 -->
<script defer type="module" charset="UTF-8" src="./images/sayDding.js"></script>

<!-- 띵언 영역 -->
<div id="dding_area"></div>

---

 

3. css 추가

수정 경로: 티스토리 블로그 관리 -> 스킨 편집 -> CSS 편집

위 경로 최하단에 아래 시트를 추가하면 된다.

/* 띵언 영역 */
#dding_area {
  color: var(--color-level-1);
  font-style: italic;
  text-align: center;
  margin: 5rem auto;
  padding: 4rem;
  max-width: 900px;
  border: 1px solid var(--border-color);
  border-radius: 8px;
  position: relative;
  box-shadow: 0 1rem 3rem rgba(14, 17, 31, .125);
  transition: all .25s ease-out;
}
#dding_area:hover{
  transform: translateY(-5px);
}

/* 띵언 타이틀 */
#dding_area #dding_title {
  position: absolute; 
  top: 0;
  left: 42px;
  margin: -0.8rem;
  font-size: 1.6rem;
  background-color: var(--g-bg-color);
  letter-spacing: 0px;
  padding-right: 12px;
  padding-left: 10px;
}

/* 띵언 메시지 */
#dding_area #dding_message {
  font-size: 20px;
  line-height: 1.6;
  color: #666;
  letter-spacing: 0px;
  margin-bottom: 2rem;
}

/* 띵언 위인 */
#dding_area #dding_author {
  font-size: 23px;
}
#dding_area #dding_author>span {
  color: #11998e;
}

/* 띵언 새로고침 버튼 */
#dding_area #dding_btn {
  fill: #11998e;
  top: 17px;
  right: 20px;
  z-index: 0;
  position: absolute;
  cursor: pointer;
  width: 1.5rem;
  height: 1.5rem;
}
#dding_area #dding_btn:hover {
  animation: 2s linear infinite spin;
}

@-webkit-keyframes spin {
    0%   {-webkit-transform: rotate(0deg);}

    100% {-webkit-transform: rotate(360deg);}
}
@keyframes spin {
    0%   {transform: rotate(0deg);}

    100% {transform: rotate(360deg);}
}

 

---

4. 적용 및 완료

스킨 편집 페이지의 우측 상단 적용 버튼을 눌러 수정 사항을 적용하면 끝이다.

---

참고자료

1. 사용한 api - 권기범님의 한국어 랜덤 명언 OpenAPI
2. 드프님의 블로그
3. 임파님의 블로그

---

후기

api 서버를 만들 시간은 없어 오픈api를 사용했는데 이 부분이 조금 아쉽다. 어려운 작업은 아니니 추후에 직접 서버를 만들어 운영하고 싶은 마음이 생겼다. 여유가 생기면 빠르게 진행 후 적용시켜야겠다.