블로그 사이드 배너 JSON 형식 자동 생성

▼ [필독] 프로그램 사용 가이드라인

https://terminal-node.tistory.com/pages/READ-ME

READ ME

---

내 블로그 사이드 바에 붙어있는 배너

귀엽지

원래는 HTML 하드 코딩이 되어 있었다.

 

자주 바꿀 일이 없으니 괜찮긴 한데...

이제 친구들의 블로그나 개인 홈페이지 주소를 종종 뜯어 붙이고 싶다.

하지만 모바일 버전도 같은 코드를 사용하고 있어서 변경 때마다 두 번씩 요소들을 복사붙여 넣기 해야한다.

당연히 오타가 나거나 복사를 실수하면 이미지가 안보이거나 링크 오류가 생긴다.

 

이거 두고 볼 수 없지.

 

그래서 심플한 업데이트를 진행했다.

 

기능은 ...

일정한 JSON 포맷으로 작성된 파일에서 연결 URL, 배너의 이름과 설명, 배경 이미지를 읽어와 html을 생성하고 특정한 위치에 붙여주는 것이다.

이제 변경때에는 이 JSON파일만을 교체하면 된다.

 

 

 

기능

1. 기능

JSON 파일로 간단한 사이드 배너 관리

- JSON 파일에서 배너 연결 URL, 배너 이름 및 설명, 배경 이미지 읽기

- 읽어온 데이터로 배너 html 생성 및 지정 위치에 요소 추가

 

2. 효과

하드 코딩 없이 JSON 파일의 간단한 교체만으로 배너 무.한.생.성

 

 

사용법

1. JSON 생성

사용하고자 하는 JSON 파일을 생성, 파일 명 기본 값은 banner_info.json

다음과 같은 형식을 가지면 됩니다.

 

{
  "groups": [
    {
      "title": "그룹 타이틀",
      "banners": [
        {
          "link": "배너 연결 링크",
          "title": "배너 제목",
          "desc": "배너 설명",
          "img": "배너 배경 이미지"
        }
      ]
    }
  ]
 }

 

 

2. JSON 파일과 배경이미지 업로드

생성한 파일을 티스토리 스킨 편집에서 파일 업로드 진행하기

파일에서 우클릭 -> 링크 주소 복사로 파일 링크를 받아오기.

 

참고로 업로드한 이미지에서도 주소를 복사해 와서 json 배경 이미지 칸에 넣어야 합니다.

 

3. javascript 붙이기

javascript를 스킨 편집 html에 갖다 붙이기

// side banner generator 
(async function (){
  const file = await (await fetch('복사한 JSON 파일 주소')).json();
  console.log(file);
  
  const arr =  file.groups.map(v=>{
  	// 그룹 타이틀 
    const title = `<div class="banner-group-title">${v.title}</div>`;
    
    // 배너 단일 html, 원하는 형식으로 변경
    const b = v.banners.map(e=>{
      return `<li onclick="window.open('${e.link}')">
                <div class="cov" style="background-image:url(${e.img});"/>
                <div class="on-cov">
                  <span class="banner-title">${e.title}</span>
                  <span class="banner-desc">${e.desc}</span>
                </div>
                <div class="after material-symbols-outlined">open_in_new</div>
              </li>`;
    });
    
    // 그룹과 배너 통합
    return `${title}\n${b.join("\n")}`;
  });
  
  // 전체 그룹 붙이기
  // 배너 그룹 구분자, 원하는 형식으로 변경
  const el = arr.join('\n<div class="banner-dividor"></div>\n');
  
  // 배너 부착 위치 id, 원하는 위치로 변경
  const items = document.querySelectorAll("#side-banner-ul");
  for (const item of items) {
    item.innerHTML=el;
  }

}());

 

3. 변경사항이 생기면 JSON만 교체하자

이젠 배너 편집이 귀찮지 않아! 짱이다!