zoukankan      html  css  js  c++  java
  • 博客园主题/博客园美化的一种方法(超小白向,超详细!)

    众所周知博客园默认博客界面,有点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"
            //注意这里最后一行没有“,”了,如果想继续添加其他功能,需要在这里加","
        ]
    }
    

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

  • 相关阅读:
    C++调用外部应用程序
    SVN文件加锁
    vs ComboBox显示多行
    __slots__ Python Class限制添加属性
    Python数据分析之pandas学习
    整理Lua和Unity和Lua交互文章链接
    [整理]Unity3D游戏开发之Lua
    ping telnet ssh netstat
    java rpc
    css 手机适配
  • 原文地址:https://www.cnblogs.com/maomaodesu/p/11412635.html
Copyright © 2011-2022 走看看