티스토리 hELLO스킨에 태그 클라우드 검색기능 추가하는 법!!

오늘은 정상우님께서 만드신 티스토리 hELLO스킨에 태그 클라우드 검색기능을 추가하는 법을 적어보려 한다.

사실 딱히 있어도 그만 없어도 그만인 기능이지만, 태그 수가 많아지게 되면 나름 유용하다.

과정은 별 거 없다. w3school에 좋은 예제가 있어서 가져왔다.

How To Create a Filter/Search List (w3schools.com)

<input type="text" id="myInput" onkeyup="myFunction()" placeholder="Search for names..">

<ul id="myUL">
  <li><a href="#">Adele</a></li>
  <li><a href="#">Agnes</a></li>

  <li><a href="#">Billy</a></li>
  <li><a href="#">Bob</a></li>

  <li><a href="#">Calvin</a></li>
  <li><a href="#">Christina</a></li>
  <li><a href="#">Cindy</a></li>
</ul>

위 코드를 원하는 자리에 넣어주면 된다. 스킨편집에 들어가서 html편집을 누른 다음에 태그가 있는 부분에

<s_tag>
            <div id="__tags">
              <h1>태그 클라우드</h1>
							<div class="search_tag">
								<s_search>
									<input class="searchInput_tag" type="text" id="myInput" onkeyup="myFunction()"placeholder="검색내용을 입력하세요.">
								</s_search>
							</div>
              <ul id="myUL">
                <s_tag_rep>
                  <li><a class="" href=""></a></li>
                </s_tag_rep>
              </ul>
            </div>
          </s_tag>

이런식으로 수정해서 넣어주었다. 다음은 스크립트이다. 역시 w3스쿨에서 예제를 가져왔다.

function myFunction() {
  // Declare variables
  var input, filter, ul, li, a, i, txtValue;
  input = document.getElementById('myInput');
  filter = input.value.toUpperCase();
  ul = document.getElementById("myUL");
  li = ul.getElementsByTagName('li');

  // Loop through all list items, and hide those who don't match the search query
  for (i = 0; i < li.length; i++) {
    a = li[i].getElementsByTagName("a")[0];
    txtValue = a.textContent || a.innerText;
    if (txtValue.toUpperCase().indexOf(filter) > -1) {
      li[i].style.display = "";
    } else {
      li[i].style.display = "none";
    }
  }
}

위 코드를 아래와 같이 바꿔서 헤드태그 안에다 넣어줬다. (사실 바뀐게 거의 없다.)

<script>
function myFunction() {
  // Declare variables
  var input, filter, ul, li, a, i, txtValue;
  input = document.getElementById('myInput');
  filter = input.value.toUpperCase();
  ul = document.getElementById("myUL");
  li = ul.getElementsByTagName('li');

  // Loop through all list items, and hide those who don't match the search query
  for (i = 0; i < li.length; i++) {
    a = li[i].getElementsByTagName("a")[0];
    txtValue = a.textContent || a.innerText;
    if (txtValue.toUpperCase().indexOf(filter) > -1) {
      li[i].style.display = "";
    } else {
      li[i].style.display = "none";
    }
  }
}
</script>

그리고 css탭으로 이동한다음에 w3스쿨에서 예제 css를 가져왔다.

#myInput {
  background-image: url('/css/searchicon.png'); /* Add a search icon to input */
  background-position: 10px 12px; /* Position the search icon */
  background-repeat: no-repeat; /* Do not repeat the icon image */
  width: 100%; /* Full-width */
  font-size: 16px; /* Increase font-size */
  padding: 12px 20px 12px 40px; /* Add some padding */
  border: 1px solid #ddd; /* Add a grey border */
  margin-bottom: 12px; /* Add some space below the input */
}

#myUL {
  /* Remove default list styling */
  list-style-type: none;
  padding: 0;
  margin: 0;
}

#myUL li a {
  border: 1px solid #ddd; /* Add a border to all links */
  margin-top: -1px; /* Prevent double borders */
  background-color: #f6f6f6; /* Grey background color */
  padding: 12px; /* Add some padding */
  text-decoration: none; /* Remove default text underline */
  font-size: 18px; /* Increase the font-size */
  color: black; /* Add a black text color */
  display: block; /* Make it into a block element to fill the whole list */
}

#myUL li a:hover:not(.header) {
  background-color: #eee; /* Add a hover effect to all links, except for headers */
}

하지만 디자인이 마음에 들지 않아 대충 수정하고 제일 아래에다 넣어줬다.

.search_tag{
width:100%;
text-align:center;
margin-bottom : 30px;
}
.searchInput_tag {
border:unset;
width :500px;
height : 50px;
border-radius : 10px;
border-width : 2px;
padding-left:10px;
font-size : 17px;
background : var(--h-color-background-level-2);
font-family: 'Noto Sans KR', sans-serif;
transition-duration:0.2s;
color:var(--h-color-blur);
}
.searchInput_tag:focus{
border:unset;
width :500px;
height : 50px;
border-radius : 10px;
border-width : 2px;
padding-left:10px;
font-size : 17px;
background : var(--h-button-color-hover-background);
font-family: 'Noto Sans KR', sans-serif;
caret-color: var(--h-button-color-hover);
color:var(--h-button-color-hover);
transition-duration:0.2s;
}
.searchInput_tag:focus::-webkit-input-placeholder {
  color:var(--h-button-color-hover);
}
.searchInput_tag:focus::-moz-placeholder {
  color:var(--h-button-color-hover);
}
.searchInput_tag:focus:-ms-input-placeholder {
  color:var(--h-button-color-hover);
}
.searchInput_tag:focus::-ms-input-placeholder {
  color:var(--h-button-color-hover);
}
.github{
	margin-bottom:-30px;
}

최종 결과물은 아래와 같다.

 

어째 더 구린것 같긴 하지만.. 잘 작동하는것을 볼 수 있다. 마우스로 검색영역을 클릭했을때 호버효과가 적용되면서 테두리가 검은색으로 변한다. 검색어를 입력하면 태그가 실시간으로 변화하는 것을 볼 수 있다.

 

+github 아이콘

<nav class="github"><h3>
										<img src="https://tistory4.daumcdn.net/tistory/5138276/skin/images/free-icon-github-logo-25231.png" width="18" height="10"><a href="https://github.com/psh2003" target="_blank" style="">  Github</a></h3></nav>