博客园 || 模板样式更改

修改博客园样式

进入自己博客首页，点击【F12】或者【右键-检查】进入样式更改：

1】更改字体颜色，复制更改后的代码

  body {
      color: #073198;
      background: #fff;
      font-family: Verdana,Arial,Helvetica,sans-serif;
      font-size: 13px;
      line-height: 1.5;
  }

2】进入博客-【管理】-【设置】-复制代码-点击【保存】

样式就更改好了~

代码样式参考：
较为详细 : https://www.cnblogs.com/-Tiger/p/8022079.html
较为好看 : https://www.cnblogs.com/Createsequence/p/13294197.html

代码复制参考: https://www.cnblogs.com/strongmore/p/13395062.html

我的样式：
JS:

  	<!--引入highlight.js-->
        <script src="https://blog-static.cnblogs.com/files/wuzimeimei/highlight.pack.js"></script>
        <script>hljs.initHighlightingOnLoad();</script>
        <!-- 代码 复制 -->
        <script src="https://blog-static.cnblogs.com/files/wuzimeimei/clipboard.min.js"></script>
        <script src="https://blog-static.cnblogs.com/files/wuzimeimei/cp.js"></script>

CSS:

  	/*

	Darcula color scheme from the JetBrains family of IDEs

	*/
	.cnblogs-markdown .hljs, .cnblogs-post-body .hljs {
	    font-family: consola !important;
	    font-size: 13px !important;
	    line-height: 1.7 !important;
	    padding: 10px !important;
	}

	.cnblogs-markdown .hljs {
	  display: block;
	  overflow-x: auto;
	  padding: 0.5em;
	  background: #2b2b2b !important;
	  color: #bababa;
	}

	.cnblogs-markdown .hljs-strong,
	.cnblogs-markdown .hljs-emphasis {
	  color: #a8a8a2;
	}

	.cnblogs-markdown .hljs-bullet,
	.cnblogs-markdown .hljs-quote,
	.cnblogs-markdown .hljs-link,
	.cnblogs-markdown .hljs-number,
	.cnblogs-markdown .hljs-regexp,
	.cnblogs-markdown .hljs-literal {
	  color: #6896ba;
	}

	.cnblogs-markdown .hljs-code,
	.cnblogs-markdown .hljs-selector-class {
	  color: #a6e22e;
	}

	.cnblogs-markdown .hljs-emphasis {
	  font-style: italic;
	}

	.cnblogs-markdown .hljs-keyword,
	.cnblogs-markdown .hljs-selector-tag,
	.cnblogs-markdown .hljs-section,
	.cnblogs-markdown .hljs-attribute,
	.cnblogs-markdown .hljs-name,
	.cnblogs-markdown .hljs-variable {
	  color: #cb7832;
	}

	.cnblogs-markdown .hljs-params {
	  color: #b9b9b9;
	}

	.cnblogs-markdown .hljs-string {
	  color: #6a8759;
	}

	.cnblogs-markdown .hljs-subst,
	.cnblogs-markdown .hljs-type,
	.cnblogs-markdown .hljs-built_in,
	.cnblogs-markdown .hljs-builtin-name,
	.cnblogs-markdown .hljs-symbol,
	.cnblogs-markdown .hljs-selector-id,
	.cnblogs-markdown .hljs-selector-attr,
	.cnblogs-markdown .hljs-selector-pseudo,
	.cnblogs-markdown .hljs-template-tag,
	.cnblogs-markdown .hljs-template-variable,
	.cnblogs-markdown .hljs-addition {
	  color: #e0c46c;
	}

	.cnblogs-markdown .hljs-comment,
	.cnblogs-markdown .hljs-deletion,
	.cnblogs-markdown .hljs-meta {
	  color: #7f7f7f;
	}


	/*添加按钮*/
	.cnblogs-markdown pre {
	  position: relative;
	}
	.cnblogs-markdown pre > span {
	    position: absolute;
	    display: none;
	    z-index: 2;
	    right: 16px;
	    top: 16px;
	    border-radius: 4px;
	    font-size: 12px !important;
	    color: #333;
	    padding: 2px 6px;
	    box-sizing: border-box;
	    background-color: #fff;
	    box-shadow: 0px 0px 10px 5px rgba(0, 0, 0, 0.1);
	    cursor: pointer;
	}
	.cnblogs-markdown pre:hover > span {
	  display:block;
	}
	.cnblogs-markdown pre > .copyed {
	  background: #67c23a;
	}

动态小人参考大神博客：https://www.cnblogs.com/flipped/p/4995863.html
说明：参考的样式是根据整个页面的，没有复用博客园原有的页面。我的页面是在博客园原有页面的基础上加的，所以对JS做了更改：
参考代码如下：

  <script>
var spig = document.createElement("div");
spig.setAttribute("class", "spig");
spig.setAttribute("id", "spig");
var message = document.createElement("div");
message.setAttribute("id", "message");
var mumu = document.createElement("div");
mumu.setAttribute("class", "mumu");
mumu.setAttribute("id", "mumu");
spig.appendChild(message);
spig.appendChild(mumu);
document.getElementById('home').appendChild(spig);
</script>
<!--博客精灵 start*-->
<script type="text/javascript">
var isindex=true;
var title="";
var visitor="这位怪蜀黍";
</script>
<!--精灵end*-->
<script src="https://blog-static.cnblogs.com/files/wuzimeimei/spig.js"></script>

【将这部分加入到home中】

3】鼠标点击效果展示
参考博客：https://www.cnblogs.com/wkfvawl/p/9414180.html

博客园 || 模板样式更改

推荐阅读