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翻看关注按钮的函数,具体是这样的:
其余的都是一些文本信息,自行更改即可。
首页轮播信息自定义
// 设置首页轮播 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代码,这一块目前处于探索阶段......。
后台配置预览图
说明
主题不定期进行修改,适配主题请及时备份,最好存在自己的博客园文件库里。