GShang博客园主题2.0适配教程

之前发布过一次博客园主题分享，有部分园友比较感兴趣，于是自己使用了。在使用过程中，出现了排版错位，信息混乱等各种问题，这很大一部分原因来自我设计的主题不够规范，为此我自己不断改进和完善，重新设计了2.0版本的主题，这一次彻底解决了前面的问题，为园友提供了更方便快捷的适配方法，具体操作请听我慢慢道来。

主题特色

本次新版本的主题，主要有两大特色：

美化和功能自定义互不影响

考虑到大多数园友可能只满足博客园提供的大部分功能，只是对界面有些不满意，因此主题提供了一套全新的CSS样式，将代码复制进去，你就可以完成最基础的美化了。

此外本主题在样式中设置了统一的颜色模板，其中包括主题色、辅助颜色、字体颜色等等，若要实现个性主题颜色，只需要修改对应的颜色模板即可全局适配。

移动端适配

为了在移动端也能愉快的逛博客，专门适配了手机移动端的样式。并且照顾到部分园友希望能够在移动端体验到和PC端一样的画面。这里我们做了两种适配方案，对于360以下的屏幕，自动适配成移动端画面；对于360以上（手机横屏时）画面自动切换成PC端画面。这样一来，基本上统一了博客的所有设备的样式。

自定义功能集中适配

对于一部分有改造欲望的园友，本主题提供了一些自定义的功能具体如下：

网页tab图标自定义
导航栏扩展
首页轮播
博文发布信息位置调整
侧边栏导航目录
公告栏个人信息美化
移动端底部导航栏
评论区头像显示
博客文章内部链接以新窗口打开
代码块复制
博客内部表格居中滚动
博文内部支持脚本代码
Matlab语法高亮
自定义markdown语法

以上功能是我在使用博客园时，遇到的一些使用需求，园友们可以根据需要自行添加。

主题适配方法

基础主题适配

若园友只希望适配基本的样式，则具体适配方法如下：

1.清空博客园后台所有主题配置；

2.设置博客园皮肤为【Custom】；

3.在【页面定制CSS代码】文本框中，复制粘贴下面链接的中所有代码，然后点击下方的【禁用模板默认CSS】

GShang主题CSS代码，点击查看

4.主题适配成功。请在电脑和手机上打开自己的博客，验证主题效果。

高级主题适配

如果园友们有上述自定义功能需求的，可以根据自己喜好适配主题，具体方法如下：

1.参照基础主题适配方法，完成基础适配；

2.在【页脚html代码】中粘贴如下代码：

<!--符号-->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/font-awesome/css/font-awesome.min.css">
<!--代码复制-->
<script src="https://cdn.bootcss.com/clipboard.js/2.0.4/clipboard.min.js"></script>
<!--自定义matlab语法高亮-->
<script src="https://blog-static.cnblogs.com/files/gshang/matlab-highlight.js"></script>
<!--自定义语法-->
<script src="https://blog-static.cnblogs.com/files/gshang/mddiy.js"></script>
<!--文章目录-->
<script src="http://files.cnblogs.com/files/ctxsdhy/scrollspy.js"></script>
<!--主题-->
<script src="https://blog-static.cnblogs.com/files/gshang/gshang.theme.20191021.4.js"></script>

上面的代码无需作任何修改。

3.在【博客园侧边公告】中粘贴如下代码：

<script type="text/javascript">
    // 设置博客信息
    var myprofile = [{
        blogName: "GShang",
        blogAvatar: "https://pic.cnblogs.com/avatar/1489774/20190708183140.png",
        blogSign: "Stay hungry,Stay foolish.",
        blogFollow: "follow('30807ee3-3273-4cff-72df-08d619358b99')",
        QQ: "1220949046",
        Github: "https://github.com/GShang2018",
        WeChat: "https://img2018.cnblogs.com/blog/1489774/201910/1489774-20191015183429352-318054137.jpg"
    }];

    // 设置首页轮播
    var mybanner = [{
            url: "https://www.cnblogs.com/gshang/category/1555205.html",
            img: "https://img2018.cnblogs.com/blog/1489774/201910/1489774-20191019152510780-1400941252.png",
            title: "2019年研究生数学建模比赛经验分享"
        },

        {
            url: "https://www.cnblogs.com/gshang/p/11107946.html",
            img: "https://www.kanjiantu.com/images/2019/07/05/post4242f1ce89576c2f3.png",
            title: "动画电影分享"
        },

        {
            url: "https://www.cnblogs.com/gshang/p/11185613.html",
            img: "https://img2018.cnblogs.com/blog/1489774/201909/1489774-20190923190114426-2061049622.png",
            title: "VIP视频解析"
        },

        {
            url: "https://www.cnblogs.com/gshang/p/11135154.html",
            img: "https://www.kanjiantu.com/images/2019/07/05/post2b40b83305f79d463.png",
            title: "常用网站集合"
        },

        {
            url: "https://www.cnblogs.com/gshang/p/10746751.html",
            img: "https://www.kanjiantu.com/images/2019/07/05/post169393a677253c679.png",
            title: "实用工具分享"
        }

    ];

    // 设置导航栏扩展

    var mynav = [{
            id: "blog_nav_cnblogs",
            url: "https://home.cnblogs.com",
            title: "园子"
        },
        {
            id: "blog_nav_maintain",
            url: "https://www.cnblogs.com/gshang/p/11149316.html",
            title: "维护"
        },

        {
            id: "blog_nav_frieds",
            url: "https://www.cnblogs.com/gshang/p/11149804.html",
            title: "友链"
        },

    ];
    
    setFavio(myprofile); // 网页tab图像
    setHeader(); //导航栏
    extendNav(mynav); // 导航栏扩展
    loadBanner(mybanner); //首页轮播
    changePublishinfo(); //博文发布信息位置
    setPostSideBar(); //侧边栏目录
    loadProfile(myprofile); // 公告栏个人信息
    setSignautre(myprofile); //博文签名
    loadMobileContent(); //移动端目录功能栏
    commentIcon(); //评论区头像
    blankTarget(); //文章链接新窗口打开
    copyCode(); //代码块复制
    //setMobileHeader(); //移动端导航栏
    tableScorll(); //表格滚动
    mymd(); //自定义语法
        runCode(); //文章内部运行代码
        highlightMATLABCode(); //matlab自定义语法高亮
</script>

这里需要根据个人的信息修改这几个东西：

个人博客信息

    // 设置博客信息
    var myprofile = [{
        blogName: "GShang",
        blogAvatar: "https://pic.cnblogs.com/avatar/1489774/20190708183140.png",
        blogSign: "Stay hungry,Stay foolish.",
        blogFollow: "follow('30807ee3-3273-4cff-72df-08d619358b99')",
        QQ: "1220949046",
        Github: "https://github.com/GShang2018",
        WeChat: "https://img2018.cnblogs.com/blog/1489774/201910/1489774-20191015183429352-318054137.jpg"
    }];

这里的信息涉及到博客的favicon、公告栏个人信息、博文签名等，所以为了避免重复我的信息，请根据内容自行修改相关链接和文字。其中

blogFollow: "follow('30807ee3-3273-4cff-72df-08d619358b99')"

这个是关注的功能函数，你可以F12，查找关注按钮元素，把这个函数提取出来。

首页轮播

首页轮播设置了5个轮播项目，根据格式自行修改即可，注意图片大小最好一样，以免出现banner忽大忽小。
导航栏扩展

相信有很多园友需要扩展导航栏，实现自定义。这里提供了新增的方法，你只需要添加内容即可。

除此之外，剩下的全部是调用已经写好的函数了，也就是下面这些：

setFavio(myprofile); // 网页tab图像
setHeader(); //导航栏
extendNav(mynav); // 导航栏扩展
loadBanner(mybanner); //首页轮播
changePublishinfo(); //博文发布信息位置
setPostSideBar(); //侧边栏目录
loadProfile(myprofile); // 公告栏个人信息
setSignautre(myprofile); //博文签名
loadMobileContent(); //移动端目录功能栏
commentIcon(); //评论区头像
blankTarget(); //文章链接新窗口打开
copyCode(); //代码块复制
//setMobileHeader(); //移动端导航栏
tableScorll(); //表格滚动
mymd(); //自定义语法
runCode(); //文章内部运行代码
highlightMATLABCode(); //matlab自定义语法高亮

请一定注意，setFavio、extendNav、loadProfile、setSignautre这几个必须有上面的基础信息才可以运行，不然报错，其余的函数如果不需要，则在其前面用双斜杠注释掉即可。

说明

相关代码可以在github查看到点击查看
目前主题适配暂时只写这么多，具体的配图后续完善，如果有不懂的可以通过下面的方式联系到我。

来源：https://www.cnblogs.com/gshang/p/11729311.html

标签

博客园

移动互联网终端

blog