손이 많이 가요! 적용 전에 백업하는 거 잊지 말기!
아보카도 퍼스널... 그것도 배포했었던 로드비 스킨 기준으로 작성되어 있습니다만
아보카도 에디션 로드비면 무난하게 작동할 듯해요~~~
※다른 게시판이라면 구글 마테리얼 아이콘 연결이 필요합니다 (배포한 스킨엔 이미 연결되어 있음!)
이 게시글을 참고했어요: https://hongpage.kr/24
1. 테이블 만들기
먼저 호스팅사의 호스팅 관리 메뉴에 접속해서 mySQL관리로 들어가 접속합니다.
왼쪽에 목록이 있을텐데 infor~이건 무시하고 DB명(보통 아이디나 닉네임으로 해두시더라고요)을 눌러줘요
펼쳐진 목록의 오른쪽 화면 위 메뉴 중 SQL을 눌러줍니다.
거기에
CREATE TABLE avo_like
( id int(11) NOT NULL AUTO_INCREMENT,
wr_id int(11) NOT NULL,
liked_id varchar(20) NOT NULL,
like_datetime datetime NOT NULL,
bo_table varchar(20) NOT NULL,
PRIMARY KEY (`id`));
이걸 입력한 뒤 실행 버튼을 누릅니다.
2. 스킨과 연결하기
▶list.skin.php
<script defer src="<?=G5_JS_URL?>/like_btn.js"></script>
→기능하지 않으면 호스팅을 기입해 절대경로로 입력하세요위 코드를 위쪽 빈 공간에 넣어줍니다. <?php ~ ?> 사이만 아니면 OK
▶list.log.skin.php
<?
/* 좋아요 카운트 */
$sql = " SELECT id as count from avo_like where liked_id = '{$member['mb_id']}'
and wr_id = '{$list_item['wr_id']}' ";
$row2 = sql_fetch($sql);
$cnt = $row2['count'];
$sql = "SELECT count(*) as cnt from avo_like where wr_id = '{$list_item['wr_id']}'";
$lk = sql_fetch($sql);
$like_cnt = $lk[cnt];
?>
<div class="like_btn <?echo $cnt > 0? 'active' : '';?>"
data-log-num="<?echo $list_item['wr_id']?>" data-mb-id="<?echo $member['mb_id']?>"
data-board-table="<?echo $board['bo_table']?>"><i class="material-icons">
<?echo $cnt > 0? 'favorite' : 'favorite_border';?></i></div>
<div class="like_number" id="like_number_<?echo $list_item['wr_id']?>">
<?php echo $like_cnt?></div>좋아요 버튼을 구현하는 코드입니다. 넣고 싶은 공간에 넣어주세요!
저는 <div class="pic-footer">과 <div class="footer-memo"> 사이에 있는 다른 걸 모두 지우고 이걸 넣었어요.
3. 스타일과 기능 구현
▶css > _manager.css.php
.like_btn {
display: inline-block;
border: none;
background: transparent;
opacity:0.7;
line-height: 100%;
float: left;
transition-duration:0.5s;
}
.like_btn.active {
opacity:1;
color:rgb(199, 37, 37);
}
.like_number {
display: inline-block;
height: 100%;
line-height: 40px;
float: left;
}빈 공간에 대충 추가해서 넣어주세요. 특정 파일만 적어뒀지만 출력하려는 곳과 연결된 css파일이라면 어디든 넣을 수 있습니다.
넣고 나서도 깨지면 컨트롤+쉬프트+R로 새로고침합니다.
개인 설정에 맞춰 사용 중이니 위치가 안 맞는 건 어느정도 조정해주세요!
https://drive.google.com/file/d/1eqv-J02rXXZqKNTIG9g7tz6qh4_8IQdC/view?usp=sharing
like_btn.js
drive.google.com
→이 파일을 js 폴더 내부에 넣어줍니다.
https://drive.google.com/file/d/1zsT6W09TRR_0qc58Hu28KD-0xwsyFhCi/view?usp=sharing
like.php
drive.google.com
→그리고 이 파일을 bbs 폴더 내에 넣어줍니다.
이러면 끝! ID를 기준으로 저장되기 때문에 회원이 아니면 불가능하다는 알림이 떠요~
방금 막 얼레벌레 넣고 온 거라 오류 있을 수 있음 문제 있을 수 있음!
뭔가 있으면 여기 덧글이나 갠홈쪽에 남겨주세요~~~~
+추가
배포한 아보카도 퍼스널 로드비 (인스타 스킨이라고 부르시더라구요) 에 추가할 때
▶ 스킨 폴더 내부 > style.css
.pic-footer .material-icons {
line-height: 40px;
}.pic-footer .material-icons를 검색해서 line-height: 40px;을 넣어주면 하트 위치가 적당히 맞으니까 참고!
▶ 위 GIF에 적용된 CSS
.like_btn {
color:white;
display: inline-block;
border: none;
background: transparent;
opacity:0.7;
line-height: 100%;
float: left;
transition-duration:0.5s;
line-height: 40px;
height: 40px;
}
.like_btn.active {
opacity:1;
color:rgb(199, 37, 37);
animation: mrani 0.3s;
animation-timing-function: ease-in-out;
filter: drop-shadow(0px 0px 3px rgb(199, 37, 37));
}
@keyframes mrani {
0% {
transform: scale(1);
}
20% {
transform: scale(0.85);
}
80% {
transform: scale(1.1);
}
100% {
transform: scale(1);
}
}