博客园主题/博客园美化的一种方法(超小白向,超详细!)

众所周知博客园默认博客界面,有点8好看,我作为一个超级挑剔的外貌协会(我也许适合搞前端?)查了三天资料,终于简单的美化成了自己可以接受的样子。

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

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

大家都在侧边栏HTML代码中输入了

<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', )都以","结尾,这样下面的内容才可以继续连着写。如果不加",",那么后面写的内容都不会看作输入,还会报错导致修改无效!
比如我们要在

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

里面添加主页图片即——homeTopImg - 主页banner图片(在第二个链接,定制化,配置项)
homeTopImg - 主页banner图片下面的代码是

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"
        //注意这里最后一行没有“,”了,如果想继续添加其他功能,比如字体高亮,需要在这里加","
    ]
}

我们再添加字体高亮

 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"
        //注意这里最后一行没有“,”了,如果想继续添加其他功能,需要在这里加","
    ]
}

点击保存即可在主页享受美化后的博客了!
大家可以尝试下其他功能。

posted @ 2019-08-26 15:07  卯毛  阅读(1546)  评论(7编辑  收藏  举报