이 글에서는 중국의 블로그 플랫폼 Cnblogs에서 SimpleMemory 스킨을 기반으로 귀엽고 감성적인 비주얼을 완성하는 방법을 소개합니다. 반응형을 지원하며 내비게이션 동작, Live2D 캐릭터, 음악 플레이어, 댓글 이모티콘 등 다양한 위젯을 하나의 테마로 통합할 수 있습니다.
주요 기능
- 마우스 움직임에 반응하는 내비게이션 도트 애니메이션
- 사용자 지정 내비게이션 메뉴
- 오늘의 시(詩) 구절 출력 모듈
- Live2D 고양이 캐릭터 (왼쪽 하단)
- NetEase Cloud Music 플레이어 (APlayer 기반)
- 하단에서 유영하는 물고기 애니메이션
- 페이지 클릭 시 튀어나오는 이모지 및 응원 메시지
- 댓글 입력창 전용 OωO 이모티콘 패널
- 페이지별로 다른 배경 이미지 및 캐릭터 아트워크
- GitHub 바로가기 아이콘
준비 사항
- 블로그 관리 페이지에서 JS 권한을 신청합니다.
- 스킨은 SimpleMemory를 선택하고 기본 CSS 사용 안 함을 체크합니다.
친구 링크 페이지 생성
새 글(에세이)을 작성할 때 에디터는 TinyMCE를 선택합니다. "HTML 소스 편집" 모드를 활성화한 뒤 아래 마크업을 삽입하고 게시합니다. (퍼가기, 댓글 허용 옵션만 체크)
<p style="text-align: center;">친구 링크 목록</p>
<div class="friendsbox"> </div>상단 HTML (Header)
블로그 설정의 페이지 상단 HTML 코드 영역에 다음 코드를 붙여넣습니다. 경로가 files/elkyo/로 되어 있는 부분은 자신의 블로그 파일 저장소에 업로드한 주소로 변경해야 합니다.
<!-- 스타일 및 애니메이션 -->
<link rel="stylesheet" href="경로/cute-cnblogs.css">
<link rel="stylesheet" href="https://cdn.bootcss.com/animate.css/3.7.2/animate.min.css">
<link rel="stylesheet" href="경로/siyuan.css" />
<link rel="stylesheet" href="경로/OwO.min.css" />
<!-- 필수 라이브러리 -->
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
<script src="경로/monitoring.js"></script>
<script src="경로/OwO.min.js"></script>
<script src="경로/cute-cnblogs.js"></script>
<script src="https://sdk.jinrishici.com/v2/browser/jinrishici.js" charset="utf-8"></script>
<script src="경로/three.min.js"></script>
<script src="경로/star.js"></script>
<!-- 커스터마이징 초기화 -->
<script>
(function() {
// 댓글 아바타 처리 및 이모지 버튼 추가
var items = document.querySelectorAll('.feedbackItem');
for (var i = 0; i < items.length; i++) {
var avatarImg = items[i].querySelector('.feedbackCon span');
if (avatarImg) {
var url = avatarImg.textContent.trim();
var con = items[i].querySelector('.feedbackCon');
var img = document.createElement('img');
img.className = 'comment-avatar';
img.src = url;
con.insertBefore(img, con.firstChild);
}
}
var textarea = document.getElementById('tbCommentBody');
if (textarea) {
textarea.placeholder = '따뜻한 댓글을 남겨주세요 ...';
var owoDiv = document.createElement('div');
owoDiv.className = 'OwO';
owoDiv.innerHTML = '<div class="OwO-logo"><span>OωO 이모지</span></div>';
textarea.parentNode.insertBefore(owoDiv, textarea.nextSibling);
owoDiv.addEventListener('click', function once(e) {
if (this.classList.contains('OwO-open')) return;
this.classList.add('OwO-open');
new OwO({
logo: 'OωO 이모지',
container: this,
target: textarea,
api: '경로/emoji.json', // OwO JSON 파일 경로
position: 'down',
width: '85%',
maxHeight: '250px'
});
this.removeEventListener('click', once);
});
}
// 버튼 텍스트 변경
var submitBtn = document.getElementById('btn_comment_submit');
if (submitBtn) submitBtn.value = '댓글 등록 (Ctrl + Enter)';
})();
</script>
<script>
// 블로그 전역 설정 – miluframe 대신 별도 스크립트에서 customBlogInit 함수를 정의했다고 가정
customBlogInit({
myself: 'https://www.cnblogs.com/example/', // 자신의 블로그 주소
navMenu: [
{ label: '갤러리', link: '/gallery', newTab: false },
{ label: '글쓰기', link: 'https://i-beta.cnblogs.com/posts/edit/', newTab: true },
{ label: '관리', link: 'https://i-beta.cnblogs.com/', newTab: true }
],
friendPage: 'Friends.html', // 친구 링크 페이지 경로
myProfile: {
name: '홍길동',
link: 'https://www.cnblogs.com/example/',
avatar: '경로/avatar.jpg',
intro: '기록하는 개발자입니다.'
},
friendList: [
{
name: '친구1',
intro: '꾸준히 성장하는 블로그',
url: 'https://friend1.cnblogs.com',
avatar: '경로/friend1.jpg'
},
{
name: '친구2',
intro: '기술 아카이빙',
url: 'https://friend2.github.io',
avatar: '경로/friend2.jpg'
}
],
clickMessages: ['오늘도 화이팅!', '행복한 코딩 되세요 :)'],
githubLink: 'https://github.com/example'
});
</script>customBlogInit 함수는 앞서 로드한 cute-cnblogs.js 내부에 포함되어 있거나 별도 스크립트로 작성할 수 있습니다. 인자로 전달된 객체에 따라 내비게이션 바, 친구 링크, 클릭 메시지 등이 자동 구성됩니다.
하단 HTML (Footer)
페이지 하단 HTML 코드 영역에는 다음과 같이 물고기, 음악, Live2D, 마우스 클릭 이펙트를 추가합니다.
<!-- 유영하는 물고기 컨테이너 -->
<div id="jsi-flying-fish-container" class="container"></div>
<script src="경로/fish.js"></script>
<style>
@media only screen and (max-width: 767px) {
#sidebar_search_box input[type=text] { width: calc(100% - 24px); }
}
</style>
<!-- 음악 플레이어 (APlayer + Meting) -->
<link rel="stylesheet" href="경로/APlayer.min.css">
<div id="player" class="aplayer aplayer-withlist aplayer-fixed"
data-id="자신의_플레이리스트_ID"
data-server="netease" data-type="playlist" data-order="random"
data-fixed="true" data-listfolded="true" data-theme="#2D8CF0"></div>
<script src="경로/APlayer.min.js"></script>
<script src="경로/Meting.min.js"></script>
<!-- Live2D 고양이 (모델 교체 가능) -->
<script src="https://eqcn.ajz.miesnfu.com/wp-content/plugins/wp-3d-pony/live2dw/lib/L2Dwidget.min.js"></script>
<script>
L2Dwidget.init({
model: {
jsonPath: 'https://unpkg.com/live2d-widget-model-tororo/assets/tororo.model.json',
scale: 1
},
display: {
position: 'left',
width: 120,
height: 220,
hOffset: 60,
vOffset: -20
},
mobile: { show: true, scale: 0.5 },
react: { opacityDefault: 0.7, opacityOnHover: 0.1 }
});
window.addEventListener('load', function() {
var canvas = document.getElementById('live2dcanvas');
if (canvas) {
canvas.style.cssText = 'position:fixed; opacity:0.7; left:60px; bottom:0; z-index:1; pointer-events:none;';
}
});
</script>
<!-- 클릭 시 반짝이는 파티클 이펙트 -->
<canvas id="clickCanvas" width="1777" height="841"
style="position:fixed; left:0; top:0; z-index:2147483647; pointer-events:none;"></canvas>
<script src="경로/mouse-click.js"></script>위 코드의 data-id는 NetEase Cloud Music에서 플레이리스트 ID를 확인하여 교체합니다. 물고기, 클릭 파티클, Live2D 모델 경로 역시 필요에 따라 직접 커스터마이즈하세요. 모든 정적 리소스(css, js, json)는 Cnblogs 파일 관리자에 업로드한 후 해당 URL로 수정해야 합니다.
설정을 마친 뒤 블로그를 방문하면 귀엽고 통일감 있는 테마가 즉시 적용됩니다.