博客园自定义界面

一、使用Cnblogs-Theme-SimpleMemory开源主题教程

1.开源主题及教程地址

https://bndong.github.io/Cnblogs-Theme-SimpleMemory/v1.1/#/Docs/GettingStarted/install

2.申请博客园JS权限

该主题需要JS权限，下图红框处有申请文字按钮。

3.下载开源主题库

https://github.com/BNDong/Cnblogs-Theme-SimpleMemory

4.复制页面定制样式

复制下载的主题库中base.min.css的源码到页面定制 CSS 代码框。


选择SimpleMemory主题，勾选禁用模板默认CSS。

5.添加自定义配置

在博客侧边栏公告中添加自定义配置

我的初步配置：

<script type="text/javascript">
    window.cnblogsConfig = {
        GhVersions    : 'v1.3.3', // 版本，与下载的版本保持一致
        blogUser      : "WH01", // 用户名
        blogAvatar    : "https://blog-static.cnblogs.com/files/WH01/2.5D%E5%AD%97%E6%AF%8DW.ico", // 用户头像
        homeTopImg    : [
            "https://images.cnblogs.com/cnblogs_com/WH01/1895377/o_201207104910alita1920x1080.jpg",
            "https://images.cnblogs.com/cnblogs_com/WH01/1895377/o_201207113850bz2.jpg",
            "https://images.cnblogs.com/cnblogs_com/WH01/1895377/o_201207113844bz1.jpg",
        ],//主页图片
        homeBannerText: [
        "生命不息 Code不止",
        "好好学习 天天向上"
    ],//主页banner上的标语
         webpageIcon: "https://blog-static.cnblogs.com/files/WH01/2.5D%E5%AD%97%E6%AF%8DW.ico",//网站图标
         menuUserInfoBgImg: '',//菜单个人信息背景图片
essayTopImg: [
        "https://images.cnblogs.com/cnblogs_com/WH01/1895377/o_201207104910alita1920x1080.jpg",
        "https://images.cnblogs.com/cnblogs_com/WH01/1895377/o_201207110452pic2.jpg"
    ],//文章页banner图片
essaySuffix: {
        //codeImgUrl   : '', // >= v1.1.5 左侧图片设置，不配置使用 window.cnblogsConfig.blogAvatar
    aboutHtml    :"生命不息，Code不止！", // 关于博主，不配置使用默认
    copyrightHtml: "转载请注明出处！", // 版权声明，不配置使用默认
    supportHtml  : "如果您觉得文章对您有帮助，可以点个赞。您的鼓励是博主的最大动力！", // 声援博主，不配置使用默认
    },
reward: {
        enable: true, // 是否开启打赏功能
    wechatpay: "https://blog-static.cnblogs.com/files/WH01/2.5D%E5%AD%97%E6%AF%8DW.ico", // 微信支付二维码图片URL
    alipay: "https://blog-static.cnblogs.com/files/WH01/2.5D%E5%AD%97%E6%AF%8DW.ico" // 支付宝支付二维码图片URL
    },//打赏
codeMaxHeight: true,//限制代码框的最大高度；如开启，代码框高度不会超过页面可视区域的70%，隐藏部分通过滚动的方式查看。
    }
</script>
<script src="https://blog-static.cnblogs.com/files/WH01/simpleMemory.js" defer>//js库</script>

6.资源地址

1.JS文件、ICO等可上传到文件中，使用链接。
例如
<script src="https://blog-static.cnblogs.com/files/WH01/simpleMemory.js" defer>//js库</script>
中的simpleMemory.js就上传在文件中。
2.jpg图片可上传到图片中，使用链接。
例如轮播的背景图片就上传在图片中。

二、其他开源方法待续