博客园主题定制

写在前面

本次博客主题定制，主要参考了以下几位大佬的博客，在此表示衷心的感谢！

• @esofar
• @Dy1an
• @syxsdhy
• @Jackson0714

主题特色

本博客定制的主题，采取禁用 CSS 样式的方式，全面修改博客园默认样式，结合 JS 脚本实现元素的增删修改等，制作时间一共耗时三天。下面展示主题定制的主要内容：

整体风格

主题的整体风格为亮色，背景设为灰白色，板块之间统一间隔为20px，使得网页布局清晰明了，阅读体验感更舒适。

顶部导航栏

顶部的导航栏采取和通常导航栏样式，即左右两边空出，主要宽度与内容宽度一致。在导航栏里，我还将搜索框移动到了里面，方便查询一些博客。

首页轮播

首页轮播是我在其他网页素材网站找到的 demo 修改而成的，主要放置一些我想分享给园友的内容。比如视频解析、我喜欢的动漫、实用工具等等。

侧边板块

侧边的板块，我主要修改了公告部分，将个人信息整合到一起，看起来更直观。此外，根据我的个人喜好，添加了教学日历（其实也没上课了，就是想看下时间，懒得翻教务处的教学周），以及联系方式。

首页博文摘要

这里主要适配了两种样式，即带图的和不带图的。之前做的主题用 js 调整图片文字位置，导致如果博文没有文字时，图片就会被挪错位置，这样很不好！因为毕竟不是每一篇博文都想插个图。

页脚

页脚基本没改，但是加了一个站长工具，这个用来统计访问的。

博文正文

博文正文的风格定制样式为 Github 样式，看起来十分舒服。其中我还修复了表格不能居中滚动的问题。

博文代码复制

由于之前设计了 MATLAB 语法高亮 导致代码不能复制，这里我重新设计了代码复制的功能以及布局。现在既可以复制用markdown格式写的代码，又可以复制用 <pre> 标签包裹的 MATLAB 定制的代码。

博文支持与反对

之前的主题可以捐赠和收藏，在这里我就没有弄了，好像也没有人捐赠，用不着，来了留个言就可以的。

博客评论

评论的样式和之前的代码一样，样式没有变。

博客目录

感觉这次最大的改进就是博客目录了，当前章节会随着页面滚动高亮，并且下滑时，直接置顶固定，阅读体验十分舒服。

主题配置

主题完全开源，但是很多东西都是我一点点往上加的，所以不具有那种全局性。具体要修改的地方你可以根据效果手动调整（主要是那些资源链接）。

页面定制CSS代码

粘贴代码，然后禁用主题。点击查看代码

博客侧边栏公告

<style>
.myprofile {
		margin: 20px 0 0 0;
		/*display: table;*/
		/*width:100%;*/
		height: auto;
	}

	.myprofile-bottom {
		padding: 20px 0;
		border-top: 1px solid #F4F4F4;
	}

	.myprofile-top {
		display: inline-flex;
		margin: 0px auto 20px auto;
		*/
	}

	.avatar {
		width: 80px;
		float: left;
	}

	.avatar img {
		width: 100%;
		/*height: 100%;*/
		border: 1px solid #ddd;
		border-radius: 50%;
	}

	.profile-info {
		float: left;
		margin-left: 20px;
	}

	.nickname {
		font-size: 20px;
		line-height: 30px;
		font-weight: 600;
	}

	#mywords {
		line-height: 20px;
	}

	.myprofile ul {
		columns: 3;

	}

	.myprofile ul li {
		text-align: center;
		list-style-type: none;
		line-height: 20px;

	}


</style>

<script type="text/javascript">
	$('#navigator').append($('#widget_my_zzk'));
	$('#sidebar_search').remove();
	$("#profile_block a").each(function(idx) {
		if (idx == 1) {
			$('#myyear').html('园龄<br>' + $(this).context.innerText);
		}
		if (idx == 2) {
			$('#myfollower').html('粉丝<br>' + $(this).context.innerText);
		}
		if (idx == 3) {
			$('#myfollowee').html('关注<br>' + $(this).context.innerText);
		}
	});
	$('#profile_block').css('display', 'none');
	$('#mywords').html('Stay hungry，Stay foolish .');
	$('#mypost').html($('#stats_post_count').text().replace(/\-/g, "<br>"));
	$('#myarticle').html($('#stats_article_count').text().replace(/\-/g, "<br>"));
	$('#mycomment').html($('#stats-comment_count').text().replace(/\-/g, "<br>"));
</script>


<div class="myprofile">
	<div class="myprofile-top">
		<a class="avatar" href="https://home.cnblogs.com/u/gshang/">
			<img src="https://pic.cnblogs.com/avatar/1489774/20190708183140.png" alt="240">
		</a>
		<div class="profile-info">
			<a class="nickname" href="https://home.cnblogs.com/u/gshang/">
				GShang
			</a>
			<p id="mywords"></p>
		</div>
	</div>
	<div class="myprofile-bottom">
		<ul>
			<li><a href="https://home.cnblogs.com/u/gshang/" id="myyear">
				</a>
			</li>
			<li><a href="https://home.cnblogs.com/u/gshang/followers/" id="myfollower">
				</a>
			</li>
			<li><a href="https://home.cnblogs.com/u/gshang/followees/" id="myfollowee">
				</a>
			</li>
		</ul>
	</div>
	<div class="myprofile-bottom">
		<ul>
			<li id="mypost">
			</li>
			<li id="myarticle">
			</li>
			<li id="mycomment">
			</li>
		</ul>
	</div>
</div>

页脚Html代码

<!--主题脚本-->
<script src="https://gitee.com/j-x/home/raw/master/Theme.js"></script>
<!--代码复制-->
<script src="https://cdn.bootcss.com/clipboard.js/2.0.4/clipboard.min.js"></script>
<!--文章目录-->
<script src="https://files.cnblogs.com/files/ctxsdhy/scrollspy.js"></script>
<script src="https://files.cnblogs.com/files/ctxsdhy/stickUp.min.js"></script>
<script src="https://files.cnblogs.com/files/jackson0714/Comments.js"></script>
<!--符号-->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/font-awesome/css/font-awesome.min.css">
<!--语法高亮-->
<!--<script src="https://blog-static.cnblogs.com/files/gshang/highlight.pack.js"></script>
<script> hljs.initHighlightingOnLoad(); </script> -->

<script src="https://blog-static.cnblogs.com/files/gshang/matlab-highlight.js"></script>
<script>
	highlightMATLABCode();
</script>

<!--自定义语法-->
<script src="https://gitee.com/j-x/home/raw/master/mymd.js"></script>

<!--放大图片-->
<div id="outerdiv" style="position:fixed;top:0;left:0;background:rgba(0,0,0,0.9);z-index:999999999;width:100%;height:100%;display:none;">
	<div id="innerdiv" style="position:absolute;">
		<img id="bigimg" src="" />
	</div>
</div>

<!--页脚站长工具-->
<div id="page_end_html">
	站长工具：<script src="https://js.users.51.la/20325957.js"></script>
</div>

写在最后

前端开发是一件十分有意思的事情，按照自己的喜好去实现个性化定制，这感觉太棒了！但是，话说回来，比起第一位大佬，我的这个主题太小儿科了，很多东西都是东拼西凑的，不够简洁，不够全局化，希望后期能慢慢改进把！