블로그스퀘어 SimpleMemory 테마 커스터마이징

블로그스퀘어(博客园)의 SimpleMemory 스킨은 다양한 커스터마이징 옵션을 제공합니다. 이 글에서는 주요 설정 방법을 정리합니다.

테마 기본 설정

<script type="text/javascript">
window.cnblogsConfig = {
  // 사용자 정보 설정
  userInfo: {
    profileIcon: 'https://example.com/avatar.png',
    username: '사용자이름',
    joinDate: '2024-01-01',
    avatarImage: 'https://example.com/avatar.png'
  },
  
  // 사이드바 설정
  sidebarConfig: {
    navMenu: [
      ['홈', 'https://www.cnblogs.com/yourblog', 'icon-home'],
      ['GitHub', 'https://github.com/yourname', 'icon-github']
    ],
    sidebarBg: 'https://example.com/bg.jpg',
    welcomeText: '환영합니다!'
  },

  // 배너 이미지 설정
  bannerConfig: {
    mainPage: {
      images: [
        'https://example.com/banner1.jpg',
        'https://example.com/banner2.jpg',
        'https://example.com/banner3.jpg'
      ],
      titleSource: 'poem',
      titles: [
        '삶이 있는 한 희망은 있다',
        '오늘을 열심히',
        '미래를 향해 나아가는每一天'
      ]
    },
    articlePage: {
      images: [
        'https://example.com/art1.jpg',
        'https://example.com/art2.jpg'
      ]
    }
  },

  // 로딩 애니메이션
  loadingConfig: {
    animation: {
      tension: 16,
      friction: 5
    },
    spinner: {
      id: 'loader',
      radius: 90,
      sides: 3,
      depth: 4,
      colors: {
        background: '#f0f0f0',
        stroke: '#272633',
        child: '#272633'
      }
    }
  },

  // 푸터 설정
  footerConfig: {
    styleType: 2,
    texts: {
      left: '비밀번호는 없다',
      right: '오늘도 수고하셨습니다'
    }
  },

  // 프로그레스 바
  progressBar: {
    barId: 'top-progress',
    barColor: '#77b6ff',
    barHeight: '3px',
    duration: 0.3
  },

  // 타이틀 설정
  titleConfig: {
    onBlur: '방문해주셔서 감사합니다',
    onBlurDelay: 500,
    onFocus: '블로그에 오신 것을 환영합니다',
    onFocusDelay: 1000
  },

  // 다크모드 설정
  darkMode: {
    enabled: true,
    forceNight: false,
    autoSwitch: {
      enabled: true,
      dayStart: 6,
      nightStart: 20
    }
  },

  // 애니메이션 효과
  animations: {
    bannerEffect: {
      enabled: true,
      params: {
        radius: 15,
        density: 0.2,
        color: 'rgba(255,255,255,0.3)'
      }
    },
    backgroundEffect: {
      enabled: true,
      params: {
        colorSaturation: '60%',
        colorBrightness: '50%',
        colorAlpha: 0.5,
        verticalPosition: 'random'
      }
    }
  },

  // 코드 하이라이팅
  codeConfig: {
    type: 'hljs',
    hljsTheme: 'atom-one-dark',
    showLineNumbers: true,
    macStyle: true
  },

  // 목차 설정
  tocConfig: {
    position: 'right',
    minScreenWidth: 1200,
    autoScroll: true
  },

  // 文章 후크
  articleHook: {
    imageUrl: 'https://example.com/suffix.png',
    description: '더 나은 자신을 발견하세요!',
    copyright: '본 블로그의 모든 글은 BY-NC-SA 라이선스를 따릅니다',
    support: '도움이 되셨다면 좋아요를 눌러주세요!'
  }
};
</script>
<script src="https://cdn.jsdelivr.net/gh/BNDong/Cnblogs-Theme-SimpleMemory@v2.1.0/dist/simpleMemory.js" defer></script>

커스텀 CSS 설정

/* 기본 스타일 초기화 */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  height: 100%;
  font-size: 62.5%;
}

body {
  background-color: #ffffff;
  font-size: 12px;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Microsoft YaHei", sans-serif;
  color: #3A4145;
  overflow-x: hidden;
}

/* 링크 스타일 */
a {
  color: #5c8ec6;
  text-decoration: none;
  transition: color 0.3s ease;
}

a:hover {
  color: #f60;
}

/* 헤더 영역 */
#header {
  padding: 20px 0;
  text-align: center;
}

#blogTitle h1 {
  font-size: 28px;
  font-weight: 700;
  color: #515151;
}

#blogTitle h2 {
  font-size: 14px;
  color: #757575;
  font-weight: 400;
}

/* 메인 컨텐츠 영역 */
#mainContent {
  max-width: 900px;
  margin: 0 auto;
  padding: 20px;
}

.postTitle {
  font-size: 20px;
  font-weight: 700;
  margin: 15px 0;
}

.postCon {
  font-size: 15px;
  line-height: 1.8;
  color: #3a4145;
  margin: 10px 0;
}

/* 사이드바 */
#sideBar {
  width: 250px;
  float: right;
  padding: 10px;
}

.catListTitle {
  font-weight: 700;
  margin: 15px 0 10px;
  font-size: 16px;
}

/* 코드 블록 스타일 */
.cnblogs_code {
  background-color: #f5f5f5;
  border-radius: 4px;
  padding: 10px;
  font-family: 'Source Code Pro', Consolas, monospace;
  font-size: 14px;
  line-height: 1.5;
  overflow-x: auto;
}

/* 인용구 스타일 */
blockquote {
  border-left: 4px solid #5c8ec6;
  background-color: #f7f7f7;
  padding: 15px;
  margin: 10px 0;
  color: #484c7a;
}

/* 댓글 영역 */
.feedbackItem {
  padding: 15px;
  margin: 10px 0;
  border: 1px solid #e9e9e9;
  border-radius: 4px;
}

.feedbackCon {
  padding: 10px;
  min-height: 40px;
  line-height: 1.6;
}

/* 푸터 */
footer {
  text-align: center;
  padding: 20px;
  color: #888;
  margin-top: 30px;
  border-top: 1px solid #eee;
}

/* 반응형 디자인 */
@media (max-width: 768px) {
  #main {
    width: 100%;
    padding: 10px;
  }
  
  #sideBar {
    display: none;
  }
  
  .postTitle {
    font-size: 18px;
  }
}

/* 스크롤바 스타일 */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background: #f1f1f1;
}

::-webkit-scrollbar-thumb {
  background: #888;
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: #555;
}

인터랙티브 효과 추가

마우스 클릭 효과

<script type="text/javascript">
// 클릭 시 말풍선 효과
(function() {
  var clickWords = ['좋아요', '감사합니다', '즐거웠어요', '재미있어요', '최고에요'];
  var wordIndex = 0;
  
  document.addEventListener('click', function(e) {
    var word = clickWords[wordIndex];
    wordIndex = (wordIndex + 1) % clickWords.length;
    
    var span = document.createElement('span');
    span.textContent = word;
    span.style.cssText = `
      position: absolute;
      left: ${e.pageX}px;
      top: ${e.pageY - 20}px;
      color: rgb(${Math.floor(Math.random()*255)}, ${Math.floor(Math.random()*255)}, ${Math.floor(Math.random()*255)});
      font-weight: bold;
      font-size: 14px;
      pointer-events: none;
      z-index: 9999;
    `;
    
    document.body.appendChild(span);
    
    // 애니메이션
    span.animate([
      { transform: 'translateY(0)', opacity: 1 },
      { transform: 'translateY(-150px)', opacity: 0 }
    ], {
      duration: 1500,
      easing: 'ease-out'
    }).onfinish = function() {
      span.remove();
    };
  });
})();
</script>

하트 클릭 효과

<script type="text/javascript">
(function() {
  var hearts = [];
  var requestAnimationFrame = window.requestAnimationFrame || 
                             window.webkitRequestAnimationFrame ||
                             window.mozRequestAnimationFrame;
  
  function createHeart(x, y) {
    var heart = document.createElement('div');
    heart.className = 'heart';
    heart.style.cssText = `
      position: fixed;
      left: ${x}px;
      top: ${y}px;
      width: 10px;
      height: 10px;
      background: #ff6b6b;
      transform: rotate(45deg);
      z-index: 9999;
      pointer-events: none;
    `;
    
    hearts.push({
      element: heart,
      x: x,
      y: y,
      scale: 1,
      alpha: 1,
      vy: -2
    });
    
    document.body.appendChild(heart);
  }
  
  function animate() {
    for (var i = 0; i < hearts.length; i++) {
      var h = hearts[i];
      h.y += h.vy;
      h.scale += 0.02;
      h.alpha -= 0.02;
      
      if (h.alpha <= 0) {
        h.element.remove();
        hearts.splice(i, 1);
        i--;
        continue;
      }
      
      h.element.style.cssText = `
        position: fixed;
        left: ${h.x}px;
        top: ${h.y}px;
        width: 10px;
        height: 10px;
        background: rgb(${Math.floor(Math.random()*255)}, 100, 100);
        transform: rotate(45deg) scale(${h.scale});
        opacity: ${h.alpha};
        z-index: 9999;
        pointer-events: none;
      `;
    }
    
    requestAnimationFrame(animate);
  }
  
  document.addEventListener('click', function(e) {
    createHeart(e.clientX - 5, e.clientY - 5);
  });
  
  animate();
})();
</script>

추가적인 시각 효과

<!-- 리본 배경 효과 -->
<script defer id="ribbon" 
  src="https://cdn.jsdelivr.net/npm/butterfly-extsrc@1/dist/canvas-ribbon.min.js"
  size="120" alpha="0.5" zIndex="-1"></script>

<!-- 마우스 커서 효과 -->
<script id="cursor-trail" defer
  src="https://cdn.jsdelivr.net/npm/butterfly-extsrc@1/dist/canvas-nest.min.js"
  color="0,0,255" opacity="0.6" count="100" zIndex="-1"></script>

<!-- 타이핑 효과 -->
<script src="https://cdn.jsdelivr.net/npm/butterfly-extsrc@1/dist/activate-power-mode.min.js"></script>
<script>
  POWERMODE.colorful = true;
  POWERMODE.shake = true;
  document.body.addEventListener('input', POWERMODE);
</script>

음악 플레이어 추가

<!-- 푸터에 추가할播放器 -->
<link rel="stylesheet" href="https://blogstatic.cnblogs.com/files/elkyo/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-theme="#1D9BF0"></div>
<script src="https://blogstatic.cnblogs.com/files/elkyo/APlayer.min.js"></script>
<script src="https://blogstatic.cnblogs.com/files/elkyo/Meting.min.js"></script>

탑 버튼 추가

<script type="text/javascript" src="https://blog-static.cnblogs.com/files/yourid/BLOG_szgotop.js"></script>
<link rel="stylesheet" type="text/css" href="https://blog-static.cnblogs.com/files/yourid/BLOG_szgotop.css" />

이러한 설정들을 통해 블로그스퀘어의 SimpleMemory 테마를 자신만의 스타일로 커스터마이징할 수 있습니다. 각 설정값은 자유롭게 수정하여 사용하시기 바랍니다.