[web] 표지 자동 생성

 

 

 

↑ 

💡 위 표지는 본 게시물의 카테고리, 제목을 기반으로

javascript를 이용해 자동으로 생성된 표지이다.

 

 

 

 

 

내 블로그를 보면 알 수 있듯, 나는 보기 좋은 떡이 맛도 좋다고 생각하는 사람이라

모든 게시물에 표지를 넣은 것을 볼 수 있다.

 

 

 

 

 

이때 까지 나는 다음과 같이 Power Point를 이용해 표지를 수작업으로 만들어 주었다.

 

 

그런데 요즘 점점 더 많은 게시물을 만들면서 이 표지를 하나하나 제작하는게 너무 귀찮아져서, 

티스토리에 글을 작성하면 그에 알맞는 표지를 자동 생성해주는 Javascript 코드를 구현해 보았다!

 

 

---

 

 

 기존 표지 분석

 

일단, 기존 표지의 구성을 보면 다음과 같다.

 

1. 표지 제목 ( kernel Driver) text : 게시물 제목에서 파싱해서 자동으로 설정 가능 backgound-color : 메인 색상 => 사용자 지정 필요⭐ text-color : 흰색으로 고정	2. 표지 아이콘 아이콘 : 사용자 지정 필요⭐
3. 블로그 시그니처 text : "KimGamJa"로 고정 text-color : 메인 색상  r,g,b * 2	4. 카테고리 (Linux Kernel) text : 해당 카테고리에서 파싱해서 자동으로 설정 가능 text-color : 메인 색상  r,g,b * 2

 

즉, 게시글을 작성할 때

- 표지의 메인 색상

- 표지의 아이콘

 

위 2가지만 사용자 지정으로 설정해 주면 나머지는 자동으로 설정 가능함을 알 수 있다.

그래서 다음과 같이 표지 자동 생성코드를 구현해보았다.

 

 

 

 

게시글 가장 상단에 다음의 script, css 코드만 삽입해주면

본 게시물의 가장 초반에 봤던 것 처럼

표지를 따로 설정하지 않아도, 표지가 자동으로 생성된다!

 

Script 코드

<script>
      const color2 = "#FF5733";
      const iconEmoji = "⚙️";
      const categoryTitle = "Device"; // 카테고리 default 값 (option)
      const postTitle = "[device] Example"; // 게시글 제목 default 값 (option)

      const app = document.getElementById("mainImg");
	
      // 서브색상 = 메인 색상 * 2배
      function calculateColor1(color2) {
        const hexToRgb = (hex) => {
          const bigint = parseInt(hex.slice(1), 16);
          const r = (bigint >> 16) & 255;
          const g = (bigint >> 8) & 255;
          const b = bigint & 255;
          return { r, g, b };
        };

        const rgbToHex = (r, g, b) =>
          `#${((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1)}`;

        const rgb = hexToRgb(color2);
        const r = Math.round(rgb.r * 2) > 255 ? 255 : Math.round(rgb.r * 2);
        const g = Math.round(rgb.g * 2) > 255 ? 255 : Math.round(rgb.g * 2);
        const b = Math.round(rgb.b * 2) > 255 ? 255 : Math.round(rgb.b * 2);

        return rgbToHex(r, g, b);
      }

      const color1 = calculateColor1(color2);

      const cover = document.createElement("div");
      cover.className = "cover";
      cover.style.setProperty("--color1", color1);
      cover.style.setProperty("--color2", color2);

      // "KimGamJa" 텍스트 생성
      const circularText = document.createElement("div");
      circularText.className = "circular-text";
      const text = "KimGamJa";
      const radius = 60; // Text circle radius
      const charCount = text.length;

      for (let i = 0; i < charCount; i++) {
        const charSpan = document.createElement("span");
        charSpan.innerText = text[i];
        const angle = (120 / charCount) * i - 140;
        charSpan.style.transform = `rotate(${angle}deg) translate(${radius}px) rotate(${-angle}deg)`;
        circularText.appendChild(charSpan);
      }

      // 아이콘 생성
      const icon = document.createElement("div");
      icon.className = "icon";
      icon.style.color = color1;
      icon.innerText = iconEmoji;

      // 카테고리 제목 = 게시글 카테고리에서 자동 추출
      const categoryText = document.createElement("div");
      categoryText.className = "text";
      categoryText.style.color = color1;
      const titleElement = document.querySelector(".title_view");
      const titleText = titleElement ? titleElement.innerText : ""; // Get text from title_view
      const categoryTextValue = titleText.match(/\[(.*?)\]/)?.[1]?.trim() ||  categoryTitle; // Extract text inside [ ]
      categoryText.innerText = categoryTextValue ;

      // 표지 제목 = 게시글 제목에서 자동 추출
      const extractedTitle = titleText.split("]").pop().trim() || postTitle;

      // Create post title
      const postTitleText = document.createElement("div");
      postTitleText.className = "title";
      postTitleText.style.backgroundColor = color2;
      postTitleText.innerText = extractedTitle;

      // 생성한 요소 표지에 추가
      cover.appendChild(circularText);
      cover.appendChild(icon);
      cover.appendChild(categoryText);
      cover.appendChild(postTitleText);

      app.innerHTML = ""; // Clear previous cover
      app.appendChild(cover);
    </script>
<p data-ke-size="size16">&nbsp;</p>
<div id="mainImg">&nbsp;</div>
<p data-ke-size="size16">&nbsp;</p>

 

 

 

CSS 코드

    <style>
      body {
        font-family: Arial, sans-serif;
        display: flex;
        justify-content: center;
        align-items: center;
        min-height: 100vh;
        margin: 0;
        background-color: #f5f5f5;
      }
      .cover {
        text-align: center;
        position: relative;
        width: 500px;
        height: 300px;
        background-color: white;
        border: 1px solid #ddd;
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
      }
      .icon {
        font-size: 60px;
      }
      .circular-text {
        position: absolute;
        top: 30px;
        width: 200px;
        height: 200px;
        border-radius: 50%;
        display: flex;
        justify-content: center;
        align-items: center;
      }
      .circular-text span {
        position: absolute;
        font-size: 18px;
        font-weight: bold;
        transform-origin: center;
        color: var(--color1);
      }
      .title {
        color: white;
        background-color: var(--color2);
        padding: 10px 25px;
        font-size: 26px;
        font-weight: bold;
      }
      .text {
        font-weight: bold;
      }
    </style>

 

 

 

 

서식 지정하기

 

게시글을 쓸 때마다 위 코드를 항상 복붙 하기 매우 귀찮다.

이를 해결하기 위해, 해당 코드를 티스토리 서식 관리에 등록하면 게시글 작성시 매우 쉽게 불러올 수 있다!

 

• 서식 관리 : 티스토리 관리 페이지 → 콘텐츠 → 서식관리 →  서식 쓰기

↓

 

게시글 작성 시, 위와 같이 서식 불러오기를 사용하여 쉽게 불러올 수 있음