Adding SimpleMemory Theme to a Blog (Frontend Styling)

Note: This guide is for version v2. Verify your theme vertion!
The theme requires JavaScript permissions. Apply for access if needed.

Blog Backend Setup

Access the blog’s management backend (e.g., CNBlogs’ admin panel).

Configuration Page

The following settings are required:

  • Blog Skin
  • Code Highlighting
  • Custom CSS (Page Custom CSS)
  • Disable Default Template CSS
  • Sidebar Announcement
  • Footer HTML

Theme Configuration

Save changes to apply the theme. Configure via window.cnblogsConfig (example below, with modified parameters):

<!-- SimpleMemory Theme (v2.0.4) -->
<script>
window.cnblogsConfig = {
  blogInfo: {
    username: 'ExampleUser',
    startDate: '2021-10-08',
    avatar: 'https://example.com/avatar.png',
    blogIcon: 'https://example.com/icon.png'
  },
  sidePanel: {
    infoBackground: 'https://example.com/sidebar-bg.png',
    navList: [
      ['New Post', 'https://i-beta.cnblogs.com/posts/edit'],
      ['Friends', 'https://example.com/friends', 'icon-friends'],
      ['Blog', 'https://www.cnblogs.com/example/', 'icon-blog'],
      ['GitHub', 'https://github.com/Example', 'icon-github'],
      ['Contact', '', 'icon-qq'],
      ['WeChat', '', 'icon-wechat'],
    ],
  },
  headerBanner: {
    home: {
      background: [], // Random banner images
      title: [], // Random titles
      titleSource: '',
    },
    article: {
      background: [], // Random article banners
    },
  },
  loading: {
    rebound: { tension: 18 },
    spinner: { id: 'custom-spinner', radius: 85 },
  },
  progressBar: { color: '#88c6ff' },
  pageTitle: {
    onblur: 'Stay focused! (๑•̀ㅂ•́)و✧',
    onblurTime: 450,
    focus: 'Welcome back! (≧∇≦)ノ',
    focusTime: 900,
  },
  footer: {
    style: 3,
    text: {
      left: 'I have a plan',
      right: 'But no sword',
      iconFont: { icon: "icon-lg", color: "blue", fontSize: "18px" },
    },
  },
  footerLinks: {
    links: [
      ["Example", "https://example.com"],
      ["GitHub", "https://github.com/Example"],
      ["Contact", "https://msg.cnblogs.com/send/example"],
    ],
  },
  rtMenu: {
    qrCode: 'https://example.com/qr.png',
    reward: {
      alipay: 'https://example.com/alipay.png',
      wechatpay: 'https://example.com/wechat.png',
    },
    downScrollTarget: '#post-info',
  },
  dayNightToggle: {
    enable: true,
    auto: { enable: true },
  },
  animations: {
    homeBanner: {
      enable: true,
      options: {
        radius: 12,
        color: 'rgba(255,255,255, 0.3)',
        density: 0.15,
        clearOffset: 0.25,
      },
    },
    articleTitle: { enable: true },
    articleBanner: { enable: true },
    background: { enable: false },
    backgroundMouse: { enable: true },
    mouse: {
      enable: true,
      options: { size: 10, sizeF: 40 },
    },
    bannerImages: { enable: true },
  },
  articleDir: {
    position: 'left',
    minWidth: 1200,
    autoScroll: true,
  },
  codeRender: {
    type: 'hljs',
    options: {
      hljs: {
        theme: 'github-gist',
        languages: ['JavaScript', 'CSS', 'HTML', 'Python', 'Java'],
      },
      maxHeight: '400px',
      lineNumbers: true,
      macStyle: false,
    },
  },
  articleFooter: {
    aboutText: "With a pen, I move the world! ~",
  },
  consoleOutput: [
    ['Example Blog', 'https://www.cnblogs.com/example'],
    ['GitHub', 'https://github.com/Example'],
    ['Email', 'example@domain.com'],
  ],
  analytics: "1234567890", // CNZZ ID
};
</script>
<script src="https://cdn.jsdelivr.net/gh/BNDong/Cnblogs-Theme-SimpleMemory@v2.0.4/dist/simpleMemory.js" defer></script>

This configuration customizes the theme’s appearance, navigation, animations, and more. Adjust URLs and settings as needed.

Tags: blog theme frontend CnBlogs SimpleMemory web styling

Posted on Sat, 18 Jul 2026 16:00:42 +0000 by spetsacdc