博客园主题/博客园美化的一种方法（超小白向，超详细！）

众所周知博客园默认博客界面，有点8好看，我做为一个超级挑剔的外貌协会（我也许适合搞前端？）查了三天资料，终于简单的美化成了本身能够接受的样子。javascript

为了美化成我这个样子，咱们要准备: JS权限（这个太容易百度到了我不介绍了） github资源：https://github.com/BNDong/Cnblogs-Theme-SimpleMemory 该资源的配置(很是简单实用)：http://doc.dbnuo.org/cnblogs-theme-docs/v1.1.0/#/Docs/GettingStarted/installhtml

github使用方式就是点击你网页右边偏上的绿色按钮[Clone or download]（全屏幕就这一个绿色按钮别说你找不到），而后下载zip而且解压，而后按照我上面的第二个连接，入门部分的操做便可。把CSS输入，侧边栏JS输入以后，博客已经变得很是好看了。可是，这都是模板，没有你自定义的功能，咱们继续看第二个连接，在入门的下方有配置项这一系列自定义选项，今天重点就在这里详细介绍一下如何使用（我之后忘了也能够看看）前端

你们都在侧边栏HTML代码中输入了java

<script type="text/javascript">
    window.cnblogsConfig = {
        GhVersions    : 'v1.1.4', // 版本
        blogUser      : "userName", // 用户名
        blogAvatar    : "https://xxxx.png", // 用户头像
        blogStartDate : "2016-11-17", // 入园时间，年-月-日。入园时间查看方法：鼠标停留园龄时间上，会显示入园时间
    }
</script>
<script src="https://cdn.jsdelivr.net/gh/BNDong/Cnblogs-Theme-SimpleMemory@v1.1.4/src/script/simpleMemory.min.js"></script>

各位跟我同样不会html的老哥们，要注意到，每一行（好比GhVersions : 'v1.1.4', ）都以","结尾，这样下面的内容才能够继续连着写。若是不加","，那么后面写的内容都不会看做输入，还会报错致使修改无效！好比咱们要在git

window.cnblogsConfig = {
        GhVersions    : 'v1.1.4', // 版本
        blogUser      : "userName", // 用户名
        blogAvatar    : "https://xxxx.png", // 用户头像
        blogStartDate : "2016-11-17", // 入园时间，年-月-日。入园时间查看方法：鼠标停留园龄时间上，会显示入园时间
    }

里面添加主页图片即——homeTopImg - 主页banner图片（在第二个连接，定制化，配置项） homeTopImg - 主页banner图片下面的代码是github

window.cnblogsConfig = {
    homeTopImg: [
        "https://raw.githubusercontent.com/BNDong/Cnblogs-Theme-SimpleMemory/master/img/home_top_bg.jpg",
        "https://raw.githubusercontent.com/BNDong/Cnblogs-Theme-SimpleMemory/master/img/home_top_bg.jpg"
    ]
}

具体想替换的图片就用博客园上传图片文件的url来替换上面的url（注意博客园只支持bmp格式图片，要先转一下图片样式）咱们把这两个功能合并成字体

window.cnblogsConfig = {
        GhVersions    : 'v1.1.4', // 版本
        blogUser      : "userName", // 用户名
        blogAvatar    : "https://xxxx.png", // 用户头像
        blogStartDate : "2016-11-17", // 入园时间，年-月-日。入园时间查看方法：鼠标停留园龄时间上，会显示入园时间


        homeTopImg: [
        "https://raw.githubusercontent.com/BNDong/Cnblogs-Theme-SimpleMemory/master/img/home_top_bg.jpg",
        "https://raw.githubusercontent.com/BNDong/Cnblogs-Theme-SimpleMemory/master/img/home_top_bg.jpg"
        //注意这里最后一行没有“,”了，若是想继续添加其余功能，好比字体高亮，须要在这里加","
    ]
}

咱们再添加字体高亮url

window.cnblogsConfig = {
        GhVersions    : 'v1.1.4', // 版本
        blogUser      : "userName", // 用户名
        blogAvatar    : "https://xxxx.png", // 用户头像
        blogStartDate : "2016-11-17", // 入园时间，年-月-日。入园时间查看方法：鼠标停留园龄时间上，会显示入园时间

        //我是修改主页背景的代码
        homeTopImg: [
        "https://raw.githubusercontent.com/BNDong/Cnblogs-Theme-SimpleMemory/master/img/home_top_bg.jpg",
        "https://raw.githubusercontent.com/BNDong/Cnblogs-Theme-SimpleMemory/master/img/home_top_bg.jpg",//这里我手动添加了“,”
        
        //我是字体高亮的代码（a11y-dark能够换成下面灰色字体的其余种类）
        essayCodeHighlighting: "a11y-dark"
        //注意这里最后一行没有“,”了，若是想继续添加其余功能，须要在这里加","
    ]
}

点击保存便可在主页享受美化后的博客了！你们能够尝试下其余功能。.net