GShang博客园主题高级版本适配教程详解

GShang博客园主题高级版本适配教程详解

主题预览

GShang博客园主题高级版本适配教程详解

博客Favicon自定义

GShang博客园主题高级版本适配教程详解

导航栏扩展

GShang博客园主题高级版本适配教程详解

博客内部公告信息

GShang博客园主题高级版本适配教程详解

首页轮播信息

GShang博客园主题高级版本适配教程详解

侧边栏公告信息整合

GShang博客园主题高级版本适配教程详解

博文发布信息位置调整

GShang博客园主题高级版本适配教程详解

博文侧边目录

GShang博客园主题高级版本适配教程详解

博文代码块复制

GShang博客园主题高级版本适配教程详解

博文作者信息签名

GShang博客园主题高级版本适配教程详解

博客捷径应用(更多实用功能正在探索)

GShang博客园主题高级版本适配教程详解

博客主题夜间模式

GShang博客园主题高级版本适配教程详解

Matlab语法高亮

GShang博客园主题高级版本适配教程详解

移动底部功能栏

主题适配

清空主题配置,设置博客皮肤为Custom,确保自己已经开通了JS权限,按以下步骤完成适配:

页面定制CSS代码

页面定制CSS代码引用的是基础版的,为了不影响网页加载,建议直接将代码复制进页面定制CSS代码,而不是引用CSS文件。

最新版本链接 https://blog-static.cnblogs.com/files/gshang/gshang.2019.10.27.1.css

页脚html代码

页脚一般用来引入js文件,并且在页脚的最先加载。内容见下面的代码。

<!--念两句诗-->
<script src="https://sdk.jinrishici.com/v2/browser/jinrishici.js" charset="utf-8"></script>
<!--代码复制-->
<script src="https://cdn.bootcss.com/clipboard.js/2.0.4/clipboard.min.js"></script>

<!--主题-->
<script src="https://blog-static.cnblogs.com/files/gshang/gshang.2019.10.27.1.js"></script>

这里面主要涉及到念诗的脚本(捷径功能调用)、复制代码块的脚本、以及我制作的主题需要调用的各种函数脚本。

个人的函数脚本经常会更新,最新版本链接 https://blog-static.cnblogs.com/files/gshang/gshang.2019.10.27.1.js

博客侧边栏公告

博客侧边栏公告,主要负责信息初始化、各种功能代码的调用。代码如下。

<script type="text/javascript">
    
    // 设置公告
    var news ='博客新增音乐播放器,点击打开捷径,切换或暂停音乐。' ;
    
    // 设置博客信息
    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: "友链"
        },
        {
            id: "blog_nav_theme",
            url: "javascript:changeTheme()",
            title: "切换主题"
        },
        {
            id: "blog_nav_shortcut",
            url: "javascript:narrow()",
            title: "打开捷径"
        }

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

具体使用方法是这样的:

这里为了让自定义更加开放便捷,在调用时,可以自行定义基础信息,主要包括

  • 博客公告信息自定义
  • 博客侧边栏个人信息自定义
  • 首页轮播信息自定义
  • 顶部导航栏扩展信息自定义

博客公告信息自定义

// 设置公告
var news ='博客新增音乐播放器,点击打开捷径,切换或暂停音乐。' ;
loadNewsinfo(news);//导入公告

这两个是一起的,如果需要,则修改文本即可;如果不需要,把这两个一并删除(或者注释掉)。

博客侧边栏个人信息自定义

// 设置博客信息
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"
    }];
loadProfile(myprofile); // 公告栏个人信息

这两个是一起的,如果需要,则修改对应的资源链接或者文本信息;如果不需要,把这两个一并删除(或者注释掉)。

这里需要注意的是,blogName是博客网站的最后一级,自己取的名字(如cnblogs.com/gshang)。blogFollow这个调用的是博客园自带的函数,因为涉及到id,因此需要自己F12翻看关注按钮的函数,具体是这样的:

GShang博客园主题高级版本适配教程详解

其余的都是一些文本信息,自行更改即可。

首页轮播信息自定义

// 设置首页轮播
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年研究生数学建模比赛经验分享"
        },
                    
    ...
                    
    ];
loadBanner(mybanner); //首页轮播

这两个是一起的,如果需要,则修改对应的资源链接或者文本信息;如果不需要,把这两个一并删除(或者注释掉)。这里支持任意个数的banner,如果需要多个,则复制多份,修改内容即可。

顶部导航栏扩展信息自定义

// 设置导航栏扩展
var mynav = [{
            id: "blog_nav_cnblogs",
            url: "https://home.cnblogs.com",
            title: "园子"
        },

                 ......

    ];
extendNav(mynav); // 导航栏扩展

这两个是一起的,如果需要,则修改对应的资源链接或者文本信息;如果不需要,把这两个一并删除(或者注释掉)。这里支持任意个数的banner,如果需要多个,则复制多份,修改内容即可。

其他自定义函数

其他自定义的函数,如果不需要,则删除或者注释掉即可。函数顺序最好不要改动,以免影响加载。

页首Html代码

<!--符号图标-->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/font-awesome/css/font-awesome.min.css">

<script>
    // 设置捷径
    var myHtml =
        '<h3>念两句诗</h3>' +
        '<div class="poem"><p id="poem_sentence"></p><p id="poem_info"></p></div>' +
        '<h3>博主推荐</h3>' +
        '<embed frameborder="no" border="0" marginwidth="0" marginheight="0" width=100% height=auto src="//music.163.com/outchain/player?type=0&id=3046013012&auto=0&height=auto"></embed>' +
        '<h3>音乐点播台</h3>' +
        '<embed frameborder="no" border="0" style="border-radius:4px;" marginwidth="0" marginheight="0" width=100% height=426 src="//www.jikefan.com/music/"></embed>';
    loadShortcut(myHtml); //导入捷径
</script>
<script type="text/javascript">
    jinrishici.load(function(result) {
        var sentence = document.querySelector("#poem_sentence");
        var info = document.querySelector("#poem_info");
        sentence.innerHTML = result.data.content;
        info.innerHTML = '——【' + result.data.origin.dynasty + '】' + result.data.origin.author + '《' + result.data.origin.title + '》';
    });
</script>

这里主要是捷径功能的配置,你可以自行往里面添加html代码,这一块目前处于探索阶段......。

后台配置预览图

GShang博客园主题高级版本适配教程详解

说明

主题不定期进行修改,适配主题请及时备份,最好存在自己的博客园文件库里。

相关推荐