소소한 기능 커스텀하는 게 너무 재밌어!
1. 스킨 편집에서 카테고리 접기/펼치기 옵션을 아래와 같이 설정
2. HTML </body> 바로 윗부분에 아래의 스크립트 삽입
<script>
window.addEventListener('DOMContentLoaded', function() {
document.querySelectorAll(".sub_category_list")[0].parentNode.firstChild.click();
});
</script>[0] 을 다른 숫자로 바꿔주는 방법으로 해당 순번의 카테고리가 펼쳐지도록 설정할 수 있다. (0이 1번째 카테고리)
처음에는 DOMContentLoaded로 하면 반응이 없어서 load로 바꿨는데, 다시 실험해보니 문제없이 작동한다. DOMContentLoaded가 안 되는 경우에는 load를 사용하면 될 것 같다.
처음에는 카테고리를 설정하는 js 파일의 forEach문에서 어떻게 한 인덱스만 제외하고 돌아가게 할 수 없을까 방법을 찾아보았다. 그러나 검색해서 나온 방법들은 '인덱스'를 기준으로 제외하는 게 없었다. (array 내부 내용을 정확하게 지정해서 제외하는 방법밖에 못 찾았음..)
그래서 다른 방법을 생각해보게 되었는데, 그냥 다 로드 된 다음에 펼치기 버튼을 클릭한 판정이 되면 되는 거 아닌가! 하고 깨달음을 얻은 것. 그래서 찾아보니 click() 이라는 함수가 있었고 콘솔창에서 실험해보니 잘 동작했다.
<script>
// 커스텀 공감버튼 좋아요로 바꾸기
window.addEventListener('load', function() {
document.querySelectorAll(".uoc-icon>span")[1].textContent = "좋아요";
});
// 커스텀 지정 카테고리만 펴기
window.addEventListener('load', function() {
document.querySelectorAll(".sub_category_list")[0].parentNode.firstChild.click();
});
</script>그러나 아무 생각 없이 원래 있던 공감 버튼 텍스트 내용을 '좋아요'로 바꾸는 스크립트랑 같은 function안에 넣었더니 작동이 되지 않았다.. 이유는 스크립트 실행하다가 도중에 에러가 떠 버리면 그 이후는 실행 안 하기 때문인 듯. 공감 버튼은 글을 눌러야만 생기는 항목이라서, textContent를 못찾겠다는 에러가 뜨는 걸 콘솔창에서 확인할 수 있다. 그래서 그 다음에 집어넣은 카테고리 펴기 기능이 실행되지 않은 것.
결론 : 다른 기능을 하는 함수는 따로 분리하는 게 좋다
