博客园自定义主题

## 1. 博客园

作为一个程序员，在平时的代码编写以及一些对功能的原理探索和心得分享，都会整理一份文档，发布到网上，自己购买和搭建个人博客网站预算高，难度偏大，且不主流，CSDN和博客园目前是国内主流的程序员博客编写网站，平时编程遇到的问题，都是通过CSDN和博客园结合解决，当然还有其他平台。目前小编使用的是博客园，你会发现小编的主题有点点高大上，下面就教你怎么设置。

默认主题

自定义主题

2. 设置主题

首先非常感谢 博客园主题 作者们，进入到网站文档中，选择样式对应的配置。

2.1. style 样式

访问GitHub，获取样式资源，点击 code 下载zip，或者使用git下载都行。

2.2. js 效果

2.3. 开始设置

进入到 个人信息 > 设置 > 博客设置（需要申请开启）。

2.4. 开通 js 权限，填写自己开通的理由，基本都会通过。

2.5. 样式 css （页面定制）

先选择 simpleMomory 皮肤主题，禁用掉原始 css 样式。

在上面 2.1. 中介绍的 GitHub 中下载的资源，解压后，进入 dist 下的 simpleMemory.css。

2.6. 效果 js（侧边栏）

这里的 博客侧边栏 就引用 2.2 上面官方的详细文档中有介绍。为了大家方便，这里小编统一列举了出来，可以修改一点点直接使用

<input id="linkListFlg" type="hidden" />
<script type="text/javascript">
window.cnblogsConfig = {
  info: {
    // 用户名
    name: '',
    // 入园时间，年-月-日。入园时间查看方法：鼠标停留园龄时间上，会显示入园时间
    startDate: '',
    // 用户头像
    avatar: 'https://pic.cnblogs.com/avatar/2227349/20210608193458.png',
    // 浏览器 URL 图标
    blogIcon: 'https://pic.cnblogs.com/avatar/2227349/20210608193458.png',
  },
  banner: {
    home: {
      //title: "每一个不曾起舞的日子，都是对生命的辜负。",  // 主页banner上的标语，显示自定义文字，默认为空，自动获取一句。String []
      titleSource: 'one',
      background: [        // 随机背景图  String []
        "https://files-cdn.cnblogs.com/files/IIYMGF/15.bmp",
        "https://files-cdn.cnblogs.com/files/IIYMGF/16.bmp",
        "https://files-cdn.cnblogs.com/files/IIYMGF/17.bmp",
        "https://files-cdn.cnblogs.com/files/IIYMGF/18.bmp",
        "https://files-cdn.cnblogs.com/files/IIYMGF/19.bmp",
        "https://files-cdn.cnblogs.com/files/IIYMGF/20.bmp",
        "https://files-cdn.cnblogs.com/files/IIYMGF/22.bmp",
        "https://files-cdn.cnblogs.com/files/IIYMGF/23.bmp",
        "https://files-cdn.cnblogs.com/files/IIYMGF/24.bmp",
        "https://files-cdn.cnblogs.com/files/IIYMGF/25.bmp",
      ],
    },
    // 文章页头图
    article: {
      background: [
        "https://cdn.jsdelivr.net/gh/BNDong/Cnblogs-Theme-SimpleMemory@v2.0.4/dist/images//6d995b207bae4175ff28.webp",
        "https://cdn.jsdelivr.net/gh/BNDong/Cnblogs-Theme-SimpleMemory@v2.0.4/dist/images//e58d9f9d0eee6d9b9add.webp",
      ],
    },
  },

  sidebar: { // 列表数据 ['导航名称', '链接', 'icon']
    navList: [
        ['我的博客1', 'https://www.cnblogs.com/bndong/', 'icon-github'],
        ['我的博客2', 'https://www.cnblogs.com/bndong/', 'icon-github'],
    ],
    //infoBackground: 'https://',  //侧边栏个人信息背景图片Url。
    customList: {
        "我的标签": { // 标题
            "data": [ // 列表数据 ['列表', '链接']
                ['linux命令(1)', 'https://www.cnblogs.com/chenkeer/tag/linux%E5%91%BD%E4%BB%A4/'],
                ['我的博客2', 'https://www.cnblogs.com/bndong/'],
                ['我的博客3', 'https://www.cnblogs.com/bndong/'],
                ['我的博客4', 'https://www.cnblogs.com/bndong/'],
                ['我的博客5', 'https://www.cnblogs.com/bndong/'],
            ],
            "icon": "icon-brush_fill" // 配置图标，参考文档：定制化/字体图标库
        },
        "title2": { // 标题
            "data": [ // 列表数据 ['列表', '链接']
                ['我的博客6', 'https://www.cnblogs.com/bndong/'],
                ['我的博客7', 'https://www.cnblogs.com/bndong/'],
                ['我的博客8', 'https://www.cnblogs.com/bndong/'],
                ['我的博客9', 'https://www.cnblogs.com/bndong/'],
                ['我的博客10', 'https://www.cnblogs.com/bndong/'],
            ],
            "icon": "icon-brush_fill" // 配置图标，参考文档：定制化/字体图标库
        },
    },
  },
  // 页面加载loading
  loading: {
    rebound: {
      tension: 16,
      friction: 6,
    },
    spinner: {
      id: 'spinner',
      radius: 90,
      sides: 3,
      depth: 20,
      colors: {
        background: '#f0f0f0',
        stroke: '#272633',
        base: null,
        child: '#272633',
      },
      alwaysForward: true, // When false the spring will reverse normally.
      restAt: 0.5,         // A number from 0.1 to 0.9 || null for full rotation
      renderBase: false,
    }
  },
  //  Object 顶部进度条
  progressBar: {
    id: 'top-progress-bar', // 请勿修改该值
    color: '#77b6ff',
    height: '2px',
    duration: 0.2,
  },
  // 页面标签
  title: {
    //  String "(oﾟvﾟ)ノ Hi" 失去焦点标签文字  当页面失去焦点，页面title显示的文字。
    onblur: '(oﾟvﾟ)ノ Hi',
    // Number 500 失去焦点变化延时   当页面失去焦点，页面title变化的延时时间，单位毫秒。
    // 该配置值为 -1 时，当页面失去焦点，页面title显示的文字不会变化。
    onblurTime: 500,
    // String "(*´∇｀*) 欢迎回来！" 获取焦点标签文字   当页面获取焦点，页面title显示的文字；显示后，延时恢复原title。
    focus: '(*´∇｀*) 欢迎回来！',
    // Number 1000 获取焦点变化延时   当页面获取焦点，页面title变化的延时时间，单位毫秒。
    // 该配置值为 -1 时，当页面获取焦点，页面title显示的文字不会变化。
    focusTime: 1000,
  },
  // 页脚
  footer: {
    // Number 2 页脚样式  1 2 分别代表了不同的样式
    style: 1,
    // 页脚标语
    text: {
      // String ""  页脚标语左侧文字。
      left: '天天熬夜',
      // String ""  页脚标语右侧文字。
      right: '迟早猝死',
      // Object ""  字体图标
      iconFont: {
        // 图标名称
        icon: "icon-xl",
        // 图标颜色
        color: "red",
        // 图标大小
        fontSize: "16px"
      }
    },
  },
  // 友情链接
  links: {
    // Array [] 页脚友链
    footer: [
      ["私信我", 'https://msg.cnblogs.com/send/chenkeer'],
      ["age", 'https://www.agefans.cc/'],
    ],
    // 友链页
    page: [
      {
        name: '陈可可', // 昵称
        introduction: 'IT技术类博客', // 简介
        avatar: 'https://pic.cnblogs.com/avatar/2227349/20210608193458.png', // 头像
        url: 'https://www.cnblogs.com/chenkeer/' // 友链地址
      },
    ],
  },
  // 右下角菜单
  rtMenu: {
    // url "" 二维码图片Url。
    qrCode: '',
    // 打赏二维码
    reward: {
      // 支付宝收款码
      alipay: '',
      // 微信收款码
      wechatpay: ''
    },
  },
  // Object 日/夜间模式   日/夜间模式配置。页面使用日/夜间模式优先级：用户设置 > 自动切换 > 默认。
  switchDayNight: {
    enable: true,       // 是否开启日/夜间模式切换按钮
    auto: {             // 自动切换相关配置
      enable: false,  // 开启自动切换
      dayHour: 5,     // 日间模式开始时间，整数型，24小时制
      nightHour: 19   // 夜间模式开始时间，整数型，24小时制
    }
  },
  // 动效  版本 v2.0.3 及之后，所有动效默认配置为关闭。
  animate: {
    // Object  主页banner动效配置。
    homeBanner: {
      enable: true, // 是否开启动效
      options: {
        radius: 15,
        density: 0.2,
        color: 'rgba(255,255,255, .2)', // 颜色设置，“random” 为随机颜色
        clearOffset: 0.3
      }
    },
    // Object  文章页banner动效配置。
    articleBanner: {
      enable: true,
    },
    // Object 背景动效
    background: {
      enable: true,
      options: {
        colorSaturation: "60%",
        colorBrightness: "50%",
        colorAlpha: 0.5,
        colorCycleSpeed: 5,
        verticalPosition: "random",
        horizontalSpeed: 200,
        ribbonCount: 3,
        strokeSize: 0,
        parallaxAmount: -0.2,
        animateSections: true
      }
    },
  },
  // 代码
  code: {
    // String "" 渲染类型/** 所有可配置项
    // cnblogs: 使用博客园默认代码高亮样式。
    // hljs: 使用 Highlighting 插件渲染代码高亮样式。
    // */
    type: 'hljs',
    // Object  只有 code.type 为 hljs 时，此配置才生效。
    options: {
      hljs: {
        /** 所有可配置项
         default、a11y-dark、a11y-light、agate、an-old-hope、androidstudio、arduino-light、arta、ascetic
         、atelier-cave-dark、atelier-cave-light、atelier-dune-dark、atelier-dune-light、atelier-estuary-dark
         、atelier-estuary-light、atelier-forest-dark、atelier-forest-light、atelier-heath-dark
         、atelier-heath-light、atelier-lakeside-dark、atelier-lakeside-light、atelier-plateau-dark、atelier-plateau-light
         、atelier-savanna-dark、atelier-savanna-light、atelier-seaside-dark、atelier-seaside-light
         、atelier-sulphurpool-dark、atelier-sulphurpool-light、atom-one-dark-reasonable、atom-one-dark、atom-one-light
         、brown-paper、codepen-embed、color-brewer、darcula、dark、darkula、docco、dracula、far
         、foundation、github-gist、github、gml、googlecode、grayscale、gruvbox-dark、gruvbox-light、hopscotch
         、hybrid、idea、ir-black、isbl-editor-dark、isbl-editor-light、kimbie.dark、kimbie.light、lightfair
         、magula、mono-blue、monokai-sublime、monokai、nord、obsidian、ocean、paraiso-dark、paraiso-light、pojoaque
         、purebasic、qtcreator_dark、qtcreator_light、railscasts、rainbow、routeros、school-book、shades-of-purple
         、solarized-dark、solarized-light、sunburst、tomorrow-night-blue、tomorrow-night-bright
         、tomorrow-night-eighties、tomorrow-night、tomorrow、vs、vs2015、xcode、xt256、zenburn
         */
        // 代码高亮主题。
        theme: 'atom-one-dark-reasonable',
        // 语言识别范围，不配置默认不限制，支持语言 > https://github.com/highlightjs/highlight.js/blob/main/SUPPORTED_LANGUAGES.md
        languages: ['Bash', 'CSS', 'Dockerfile', 'Go', 'HTML', 'XML', 'HTTP']
      },
      // String "" 代码框高度限制  限制高度。例如：70vh、70%
      maxHeight: '70vh',
      // Boolean false  代码行号渲染
      // 是否渲染代码行号，如开启会在代码框左侧增加行号显示，默认不开启。 不与博客园行号渲染兼容，如果博客园添加代码时勾选显示行号并同时开启此配置，会出现双行号的现象。大家自己权衡使用此配置。
      line: true,
      // Boolean true 风格代码框   mac风格代码框样式。
      macStyle: true,
    },
  },
  // 文章后缀
  /*articleSuffix: {
      // url ""  文章后缀左侧图片，不配置使用用户头像配置 info.avatar，用户头像没配置使用主题默认头像。
      imgUrl: '',
      // String ""  关于博主，支持HTML代码，不配置使用默认。
      aboutHtml: "I am a good person",
      //  String "" 版权声明   版权声明，支持HTML代码，不配置使用默认。
      copyrightHtml: "版权...",
      //  String ""  声援博主，支持HTML代码，不配置使用默认。
      supportHtml: "声援...",
  },*/
  //  Array [] 控制台输出
  consoleList: [
    ['QQ', '2906639640'],
  ],
  // String ""  网站统计
  //cnzz: "123456",
}
</script>
<script src="https://cdn.jsdelivr.net/gh/BNDong/Cnblogs-Theme-SimpleMemory@v2.0.4/dist/simpleMemory.js" defer></script>
<script src="https://blog-static.cnblogs.com/files/zhangfengxian/cnblogs-nav.js"></script>

2.7. 页脚HTML（页首HTML一般不做设置）

<div id="bottomProgressBar"></div>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/aplayer@1.10.0/dist/APlayer.min.css">
<div id="aplayer" class="aplayer" data-id="316722029" data-lrctype="0" data-server="netease" data-type="playlist" data-fixed="true" data-listfolded="true"></div>
<div id="rightMenu"></div>
<script type="text/javascript">
/* 鼠标特效 */
var a_idx = 0;
jQuery(document).ready(function($) {
    $("body").click(function(e) {
        var a = new Array("❤我不去想是否能够成功❤","❤既然选择了远方❤","❤便只顾风雨兼程❤","❤我不去想身后会不会袭来寒风冷雨❤","❤既然目标是地平线❤","❤留给世界的只能是背影❤","❤我不去想未来是平坦还是泥泞❤","❤只要热爱生命❤","❤一切，都在意料之中❤");
        var $i = $("<span></span>").text(a[a_idx]);
        a_idx = (a_idx + 1) % a.length;
        var x = e.pageX,
        y = e.pageY;
        $i.css({
            "z-index": 999999999999999999999999999999999999999999999999999999999999999999999,
            "top": y - 20,
            "left": x,
            "position": "absolute",
            "font-weight": "bold",
            "color": "rgb("+~~(255*Math.random())+","+~~(255*Math.random())+","+~~(255*Math.random())+")"
        });
        $("body").append($i);
        $i.animate({
            "top": y - 180,
            "opacity": 0
        },
        1500,
        function() {
            $i.remove();
        });
    });
});
</script>

<!--鼠标特效-->
<script src="https://blog-static.cnblogs.com/files/zouwangblog/mouse-click.js"></script>
<canvas width="1777" height="841" style="position: fixed; left: 0px; top: 0px; z-index: 2147483647; pointer-events: none;"></canvas>
<!--鼠标特效 end-->

<!--雪花特效1&12月自动添加-->

<div class="Snow">
    <canvas id="Snow"></canvas>
</div>
<script src="https://blog-static.cnblogs.com/files/zouwangblog/xue.js"></script>

<!--顶部加载条-->
<link rel="stylesheet" href="https://blog-static.cnblogs.com/files/zouwangblog/nprogress.css">
<script src="https://blog-static.cnblogs.com/files/zouwangblog/nprogress.js"></script>
<script>
NProgress.start();
NProgress.done();
</script>

2.8. 侧边栏显示信息设置

个人信息 > 设置 > 博客设置（需要申请开启） > 选项。

3. 最终效果

3.1. 首页

3.2. 文章列表

3.3. 侧边栏

3.4. 文章详情