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

主题预览

博客Favicon自定义

导航栏扩展

博客内部公告信息

首页轮播信息

侧边栏公告信息整合

博文发布信息位置调整

博文侧边目录

博文代码块复制

博文作者信息签名

博客捷径应用（更多实用功能正在探索）

博客主题夜间模式

Matlab语法高亮

移动底部功能栏

主题适配

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

页面定制CSS代码

页面定制CSS代码引用的是基础版的，为了不影响网页加载，建议直接将代码复制进页面定制CSS代码，而不是引用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>

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

博客侧边栏公告

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

<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); // 导航栏扩展

其他自定义函数

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

页首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代码，这一块目前处于探索阶段......。

后台配置预览图

说明

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

版本更新

2019.11.10

https://blog-static.cnblogs.com/files/gshang/gshang.2019.11.10.1.css

2019.11.09

https://blog-static.cnblogs.com/files/gshang/gshang.2019.11.09.4.js

posted @ 2019-10-27 17:07 GShang 阅读(4527) 评论(41) 编辑收藏举报

刷新页面返回顶部

GShang

Stay foolish. Stay hungry.