Easter1.0博客园样式
简介
设置样式是Bluesky
不禁用默认css
申请js权限
页面css
/* 导航区域 */
/* 设置头导航的颜色以及其他信息 */
#header {
background-color: transparent !important;
}
#navList li a {
background-color: transparent !important;
color: black !important;
font-weight: 600 !important;
}
.blogStats {
color: black !important;
}
/* 让博客园顶部导航消失 */
#top_nav {
display: none !important;
}
/* 让博客园三个字消失 */
#blog_nav_sitehome {
display: none !important;
}
/* 代码雨样式 */
#content_canvas {
position: fixed;
right: 0px;
bottom: 0px;
min-width: 100%;
min-height: 100%;
height: auto;
width: auto;
z-index: 0;
}
/* 页面区域 */
/* 页面内容的阴影 */
#main {
box-shadow: 0 0 8px #999;
}
/* 侧边栏位置改变 */
#mainContent {
float: right !important;
}
/* 消除power */
#poweredby {
display: none !important;
}
/* 网站运行时间 */
#onworktime {
position: absolute;
z-index: 1;
text-align: center;
width: 100%;
padding-bottom: 2px;
}
/* 页脚区域 */
/* 页脚歌曲与版权的间距 */
#footer {
padding-bottom: 0px !important;
}
/* 侧边栏样式 */
/* 改进文字样式 */
#sideBarMain h3 {
font-size: 15px;
}
#profile_block a {
font-size: 13px;
}
/* 日历样式 */
.CalTitle {
font-size: 15px;
font-weight: 600;
line-height: 40px;
}
.CalDayHeader {
font-size: 14px;
line-height: 40px;
border-bottom: 1px solid #f4f4f4;
}
.CalWeekendDay {
font-size: 13px;
line-height: 2.1;
}
.CalTodayDay {
background-color: #39f;
color: #fff;
height: 35px;
border-radius: 100%;
}
#blog-calendar u {
color: #39f;
font-weight: 600;
text-decoration: none !important;
}
/* 最新随笔 */
.catListEssay ul {
font-size: 14px !important;
}
.catListTag ul {
font-size: 14px !important;
}
.catListBlogRank ul {
font-size: 14px !important;
}
.catListPostCategory ul {
font-size: 14px !important;
}
.catListPostArchive ul {
font-size: 14px !important;
}
.catListView ul {
font-size: 14px !important;
}
/************** 基本样式 开始 ***************/
@media screen and (min-width: 0px) {
/* 去广告 */
#ad_c1,
#ad_c2,
#bannerbar,
#ad_t2,
#under_post_news,
.c_ad_block {
display: none;
}
}
/* 代码高亮样式 */
.cnblogs-markdown .hljs {
display: block;
overflow-x: auto;
/* 替换背景和字体颜色 */
background: #2b2b2b !important;
color: #bababa !important;
/* 代码块不换行 */
white-space: pre;
word-break: normal;
}
@font-face {
font-family: consola;
src: url("http://static.xxxxx.top/consola.ttf");
}
.cnblogs-markdown .hljs,
.cnblogs-post-body .hljs {
font-family: consola !important;
font-size: 13px !important;
line-height: 1.7 !important;
padding: 10px !important;
}
/*
Darcula color scheme from the JetBrains family of IDEs
*/
.hljs {
display: block;
overflow-x: auto;
padding: 0.5em;
color: #abb2bf;
background: #282c34;
}
.hljs-comment,
.hljs-quote {
color: #5c6370;
font-style: italic;
}
.hljs-doctag,
.hljs-keyword,
.hljs-formula {
color: #c678dd;
}
.hljs-section,
.hljs-name,
.hljs-selector-tag,
.hljs-deletion,
.hljs-subst {
color: #e06c75;
}
.hljs-literal {
color: #56b6c2;
}
.hljs-string,
.hljs-regexp,
.hljs-addition,
.hljs-attribute,
.hljs-meta-string {
color: #98c379;
}
.hljs-built_in,
.hljs-class .hljs-title {
color: #e6c07b;
}
.hljs-attr,
.hljs-variable,
.hljs-template-variable,
.hljs-type,
.hljs-selector-class,
.hljs-selector-attr,
.hljs-selector-pseudo,
.hljs-number {
color: #d19a66;
}
.hljs-symbol,
.hljs-bullet,
.hljs-link,
.hljs-meta,
.hljs-selector-id,
.hljs-title {
color: #61aeee;
}
.hljs-emphasis {
font-style: italic;
}
.hljs-strong {
font-weight: bold;
}
.hljs-link {
text-decoration: underline;
}
/* github */
.github-corner :hover .octo-arm {
animation: octocat-wave 560ms ease-in-out;
}
@media (max-width: 991px) {
.github-corner>svg {
fill: #fff !important;
color: #222 !important;
}
.github-corner .github-corner:hover .octo-arm {
animation: none;
}
.github-corner .github-corner .octo-arm {
animation: octocat-wave 560ms ease-in-out;
}
}
@-moz-keyframes octocat-wave {
0%,
100% {
-webkit-transform: rotate(0);
-moz-transform: rotate(0);
-ms-transform: rotate(0);
-o-transform: rotate(0);
transform: rotate(0);
}
20%,
60% {
-webkit-transform: rotate(-25deg);
-moz-transform: rotate(-25deg);
-ms-transform: rotate(-25deg);
-o-transform: rotate(-25deg);
transform: rotate(-25deg);
}
40%,
80% {
-webkit-transform: rotate(10deg);
-moz-transform: rotate(10deg);
-ms-transform: rotate(10deg);
-o-transform: rotate(10deg);
transform: rotate(10deg);
}
}
@-webkit-keyframes octocat-wave {
0%,
100% {
-webkit-transform: rotate(0);
-moz-transform: rotate(0);
-ms-transform: rotate(0);
-o-transform: rotate(0);
transform: rotate(0);
}
20%,
60% {
-webkit-transform: rotate(-25deg);
-moz-transform: rotate(-25deg);
-ms-transform: rotate(-25deg);
-o-transform: rotate(-25deg);
transform: rotate(-25deg);
}
40%,
80% {
-webkit-transform: rotate(10deg);
-moz-transform: rotate(10deg);
-ms-transform: rotate(10deg);
-o-transform: rotate(10deg);
transform: rotate(10deg);
}
}
@-o-keyframes octocat-wave {
0%,
100% {
-webkit-transform: rotate(0);
-moz-transform: rotate(0);
-ms-transform: rotate(0);
-o-transform: rotate(0);
transform: rotate(0);
}
20%,
60% {
-webkit-transform: rotate(-25deg);
-moz-transform: rotate(-25deg);
-ms-transform: rotate(-25deg);
-o-transform: rotate(-25deg);
transform: rotate(-25deg);
}
40%,
80% {
-webkit-transform: rotate(10deg);
-moz-transform: rotate(10deg);
-ms-transform: rotate(10deg);
-o-transform: rotate(10deg);
transform: rotate(10deg);
}
}
@keyframes octocat-wave {
0%,
100% {
-webkit-transform: rotate(0);
-moz-transform: rotate(0);
-ms-transform: rotate(0);
-o-transform: rotate(0);
transform: rotate(0);
}
20%,
60% {
-webkit-transform: rotate(-25deg);
-moz-transform: rotate(-25deg);
-ms-transform: rotate(-25deg);
-o-transform: rotate(-25deg);
transform: rotate(-25deg);
}
40%,
80% {
-webkit-transform: rotate(10deg);
-moz-transform: rotate(10deg);
-ms-transform: rotate(10deg);
-o-transform: rotate(10deg);
transform: rotate(10deg);
}
}
/* 隐藏反对按钮 */
.buryit {
display: none;
}
.comment_bury {
display: none;
}
/* 博客详情 */
#cb_post_title_url {
font-size: 35px !important;
}
.forFlow img {
margin-top: 0px !important;
}
#sidebar_scroller {
position: fixed !important;
top: 95px;
font-size: 13px;
background-color: white;
padding: 20px;
}
.side-choose {
position: fixed !important;
font-size: 15px;
font-weight: 600;
background-color: white;
width: 135px;
padding-left: 20px;
padding-right: 20px;
padding-top: 5px;
padding-bottom: 5px;
}
/* 设置消除main样式 */
.removemainstyle {
box-shadow: none !important;
background-color: transparent !important;
}
/* 加大阅读内容宽度 */
.addmaincontentwidth {
width: 1000px !important;
}
/* 设置目录宽度 */
.sidebar_scrollerwidth {
width: 135px !important;
}
.sideBarwidth {
width: 0px !important;
}
.scroller-offset2 {
margin-left: 2em;
}
.scroller-offset3 {
margin-left: 4em;
}
.scroller-offset4 {
margin-left: 6em;
}
#cnblogs_post_body h4 {
padding: 0px !important;
background-color: transparent !important;
color: black !important;
}
/* 设置手机端样式 */
@media (max-width: 767px) {
/* >=768的设备 */
.blogStats {
display: none !important;
}
#navList {
position: absolute;
left: 25%;
}
.github-corner>svg {
width: 50px !important;
height: 50px !important;
}
#sidebar_scorerank {
display: none !important;
}
#blogCalendar {
display: none !important;
}
#sidebar_postcategory {
display: none !important;
}
#sidebar_categories {
display: none !important;
}
#onworktime {
font-size: 10px;
}
#sidebar_scroller {
display: none !important;
}
.addmaincontentwidth {
width: 100% !important;
}
#div_digg {
display: none !important;
}
#author_profile_follow {
display: none !important;
}
#comment_form_container {
display: none !important;
}
}
侧边栏代码
<!-- 设置头像 -->
<div align="center" style="postion">
<a href="https://www.cnblogs.com/zhurong/">
<img style="width: 80px;height: 80px;border-radius: 50%;" src="//pic.cnblogs.com/avatar/1986238/20200519154451.png">
</a>
<p style="text-align: center;">个性签名：脚踏实地，仰望星空</p>
<img src="https://images.cnblogs.com/cnblogs_com/zhibu/998049/o_fgx.jpg" style="padding-top:13px;width:100%">
</div>
<!--引入highlight.js-->
<script src="https://blog-static.cnblogs.com/files/dongxuelove/highlight.pack.js"></script>
<script>
hljs.initHighlightingOnLoad();
</script>
<!-- 爱心特效 -->
<script type="text/javascript">
(function(window, document, undefined) {
var hearts = [];
window.requestAnimationFrame = (function() {
return window.requestAnimationFrame ||
window.webkitRequestAnimationFrame ||
window.mozRequestAnimationFrame ||
window.oRequestAnimationFrame ||
window.msRequestAnimationFrame ||
function(callback) {
setTimeout(callback, 1000 / 60);
}
})();
init();
function init() {
css(
".heart{width: 10px;height: 10px;position: fixed;background: #f00;transform: rotate(45deg);-webkit-transform: rotate(45deg);-moz-transform: rotate(45deg);}.heart:after,.heart:before{content: '';width: inherit;height: inherit;background: inherit;border-radius: 50%;-webkit-border-radius: 50%;-moz-border-radius: 50%;position: absolute;}.heart:after{top: -5px;}.heart:before{left: -5px;}"
);
attachEvent();
gameloop();
}
function gameloop() {
for (var i = 0; i < hearts.length; i++) {
if (hearts[i].alpha <= 0) {
document.body.removeChild(hearts[i].el);
hearts.splice(i, 1);
continue;
}
hearts[i].y--;
hearts[i].scale += 0.004;
hearts[i].alpha -= 0.013;
hearts[i].el.style.cssText = "left:" + hearts[i].x + "px;top:" + hearts[i].y + "px;opacity:" +
hearts[i].alpha + ";transform:scale(" + hearts[i].scale + "," + hearts[i].scale +
") rotate(45deg);background:" + hearts[i].color;
}
requestAnimationFrame(gameloop);
}
function attachEvent() {
var old = typeof window.onclick === "function" && window.onclick;
window.onclick = function(event) {
old && old();
createHeart(event);
}
}
function createHeart(event) {
var d = document.createElement("div");
d.className = "heart";
hearts.push({
el: d,
x: event.clientX - 5,
y: event.clientY - 5,
scale: 1,
alpha: 1,
color: randomColor()
});
document.body.appendChild(d);
}
function css(css) {
var style = document.createElement("style");
style.type = "text/css";
try {
style.appendChild(document.createTextNode(css));
} catch (ex) {
style.styleSheet.cssText = css;
}
document.getElementsByTagName('head')[0].appendChild(style);
}
function randomColor() {
return "rgb(" + (~~(Math.random() * 255)) + "," + (~~(Math.random() * 255)) + "," + (~~(Math.random() *
255)) + ")";
}
})(window, document);
</script>
<script type="text/javascript">
/* 鼠标特效 */
var a_idx = 0;
jQuery(document).ready(function($) {
$("body").click(function(e) {
var a = new Array("爱你是终身浪漫的开始", "脚踏实地，仰望星空");
var $i = $("<span></span>").text(a[a_idx]);
a_idx = (a_idx + 1) % a.length;
var x = e.pageX,
y = e.pageY;
$i.css({
"z-index": 999999999999999999999999999999999999999999999999999999999999999999999,
"top": y - 20,
"left": x + 14,
"position": "absolute",
"font-weight": "bold",
"color": "rgb(" + ~~(255 * Math.random()) + "," + ~~(255 * Math.random()) +
"," + ~~(255 * Math.random()) + ")"
});
$("body").append($i);
$i.animate({
"top": y - 75,
"opacity": 0
},
1250,
function() {
$i.remove();
});
});
});
</script>
<!-- 设置固定工具集 -->
页首
<script type="text/javascript" src="https://blog-static.cnblogs.com/files/dongxuelove/tongji.js"></script>
<a href="https://github.com/easternblood" class="github-corner">
<svg width="60" height="60" viewBox="0 0 250 250" style="fill:#151513; color:#fff; z-index: 999999; position: fixed; top: 0; border: 0; left: 0; transform: scale(-1, 1);" aria-hidden="true">
<path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path>
<path
d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2"
fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path>
<path
d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z"
fill="currentColor" class="octo-body"></path>
</svg>
</a>
<!-- 引入js -->
<canvas id="content_canvas" width="1440" height="900"></canvas>
<!-- 回到顶部 -->
<style>
#back-top {
position: fixed;
bottom: 2rem;
right: 1rem;
z-index: 10;
}
#back-top span {
width: 50px;
height: 64px;
display: block;
background: url(https://images.cnblogs.com/cnblogs_com/dongxuelove/1691239/o_210128073636o_rocket.png) no-repeat center center;
}
#back-top a {
outline: none
}
</style>
<script type="text/javascript">
$(function() {
// 默认是隐藏“回到顶部”按钮
$("#back-top").hide();
// 滚动距离顶部 500 像素时 淡入、淡出
console.log(navigator.userAgent);
var os = function() {
var ua = navigator.userAgent,
isWindowsPhone = /(?:Windows Phone)/.test(ua),
isSymbian = /(?:SymbianOS)/.test(ua) || isWindowsPhone,
isAndroid = /(?:Android)/.test(ua),
isFireFox = /(?:Firefox)/.test(ua),
isChrome = /(?:Chrome|CriOS)/.test(ua),
isTablet = /(?:iPad|PlayBook)/.test(ua) || (isAndroid && !/(?:Mobile)/.test(ua)) ||
(
isFireFox && /(?:Tablet)/.test(ua)),
isPhone = /(?:iPhone)/.test(ua) && !isTablet,
isPc = !isPhone && !isAndroid && !isSymbian;
return {
isTablet: isTablet,
isPhone: isPhone,
isAndroid: isAndroid,
isPc: isPc
};
}();
if (os.isAndroid || os.isPhone) {
console.log("手机")
$("#back-top").attr('style', 'display:none;')
} else if (os.isTablet) {
console.log("平板")
} else if (os.isPc) {
console.log("电脑")
$(window).scroll(function() {
if ($(this).scrollTop() > 500) {
$('#back-top').fadeIn();
} else {
$('#back-top').fadeOut();
}
});
// 回到顶部，点击事件
$('#back-top a').click(function() {
$('body,html').animate({
scrollTop: 0
}, 800);
return false;
});
}
});
</script>
<p id="back-top" style="display:none" title="回到页面顶部"><a href="#top"><span></span></a></p>
页脚
<!-- 音乐菜单 -->
<!-- <link rel="stylesheet" href="https://blog-static.cnblogs.com/files/elkyo/APlayer.min.css">
<div id="player" class="aplayer aplayer-withlist aplayer-fixed" data-id="732601508" data-server="netease" data-type="playlist" data-order="random" data-fixed="true" data-listfolded="true" data-theme="#2D8CF0"></div>
<script src="https://blog-static.cnblogs.com/files/dongxuelove/APlayer.min.js"></script>
<script src="https://blog-static.cnblogs.com/files/dongxuelove/Meting.min.js"></script> -->
<!-- 补充高度 -->
<script>
setTimeout(function() {
//5秒后实现的方法写在这个方法里面
// console.log("运行代码雨中1");
//获取画布对象
var canvas = document.getElementById("content_canvas");
//获取画布的上下文
var context = canvas.getContext("2d");
var s = window.screen;
var W = canvas.width = s.width;
var H = canvas.height;
//获取浏览器屏幕的宽度和高度
//var W = window.innerWidth;
//var H = window.innerHeight;
//设置canvas的宽度和高度
canvas.width = W;
canvas.height = H;
//每个文字的字体大小
var fontSize = 12;
//计算列
var colunms = Math.floor(W / fontSize);
//记录每列文字的y轴坐标
var drops = [];
//给每一个文字初始化一个起始点的位置
for (var i = 0; i < colunms; i++) {
drops.push(0);
}
//运动的文字
var str = "orange";
//4:fillText(str,x,y);原理就是去更改y的坐标位置
//绘画的函数
function draw() {
// console.log("运行代码雨中2")
context.fillStyle = "rgba(238,238,238,.08)"; //遮盖层
context.fillRect(0, 0, W, H);
//给字体设置样式
context.font = "600 " + fontSize + "px Georgia";
//给字体添加颜色
context.fillStyle = ["#33B5E5", "#0099CC", "#AA66CC", "#9933CC", "#99CC00", "#669900", "#FFBB33",
"#FF8800", "#FF4444", "#CC0000"
][parseInt(Math.random() * 10)]; //randColor();可以rgb,hsl, 标准色，十六进制颜色
//写入画布中
for (var i = 0; i < colunms; i++) {
var index = Math.floor(Math.random() * str.length);
var x = i * fontSize;
var y = drops[i] * fontSize;
context.fillText(str[index], x, y);
//如果要改变时间，肯定就是改变每次他的起点
if (y >= canvas.height && Math.random() > 0.99) {
drops[i] = 0;
}
drops[i]++;
}
};
function randColor() { //随机颜色
var r = Math.floor(Math.random() * 256);
var g = Math.floor(Math.random() * 256);
var b = Math.floor(Math.random() * 256);
return "rgb(" + r + "," + g + "," + b + ")";
}
draw();
setInterval(draw, 35);
}, 200); //延迟5000毫秒
</script>
<!--看板娘 - 猫-->
<script src="https://eqcn.ajz.miesnfu.com/wp-content/plugins/wp-3d-pony/live2dw/lib/L2Dwidget.min.js"></script>
<script>
L2Dwidget.init({
"model": {
jsonPath: "https://unpkg.com/live2d-widget-model-hijiki/assets/hijiki.model.json",
"scale": 0.7
},
"display": {
"position": "left",
"width": 100,
"height": 200,
"hOffset": 10,
"vOffset": 0
},
"mobile": {
"show": false,
"scale": 0.5
},
"react": {
"opacityDefault": 1,
"opacityOnHover": 0.2
}
});
window.onload = function() {
$("#live2dcanvas").attr("style",
"position: fixed; opacity: 1; left:10px; bottom: -100px; z-index: 1; pointer-events: none;")
}
</script>
<!-- 网站运行时间 -->
<div id="onworktime">
<p style="text-align:center;"><span id="timeDate">载入天数...</span><span id="times">载入时分秒...</span></p>
</div>
<script>
var now = new Date();
function createtime() {
var grt = new Date("04/25/2020 00:00:00"); //在此处修改你的建站时间
now.setTime(now.getTime() + 250);
days = (now - grt) / 1000 / 60 / 60 / 24;
dnum = Math.floor(days);
hours = (now - grt) / 1000 / 60 / 60 - (24 * dnum);
hnum = Math.floor(hours);
if (String(hnum).length == 1) {
hnum = "0" + hnum;
}
minutes = (now - grt) / 1000 / 60 - (24 * 60 * dnum) - (60 * hnum);
mnum = Math.floor(minutes);
if (String(mnum).length == 1) {
mnum = "0" + mnum;
}
seconds = (now - grt) / 1000 - (24 * 60 * 60 * dnum) - (60 * 60 * hnum) - (60 * mnum);
snum = Math.round(seconds);
if (String(snum).length == 1) {
snum = "0" + snum;
}
document.getElementById("timeDate").innerHTML = "本站勉强运行 " + dnum + " 天 ";
document.getElementById("times").innerHTML = hnum + " 小时 " + mnum + " 分 " + snum + " 秒";
}
setInterval("createtime()", 250);
</script>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
<script>
$(function() {
// 其他初始化
if ($("#topics").length > 0) {
setSideContent(); // 侧边目录
contentActiveListen(); // 侧边目录滚动激活
} else {
console.log("初始化失败");
}
myscroll(); // 平滑滚动控制
});
/* 平滑滚动控制 */
myscroll = function() {
$("a[href*=\\#],area[href*=\\#]").click(function() {
if (
location.pathname.replace(/^\//, "") ==
this.pathname.replace(/^\//, "") &&
location.hostname == this.hostname
) {
var $target = $(this.hash);
$target =
($target.length && $target) || $("[name=" + this.hash.slice(1) + "]");
if ($target.length) {
var targetOffset = $target.offset().top;
$("html,body").animate({
scrollTop: targetOffset - 70,
},
500
);
return false;
}
}
});
};
// 侧边悬浮按钮
/* 侧边显示 */
showSide = function() {
$("#sideBarMain").fadeIn();
$("#myside").addClass("active");
$("#mycontent").removeClass("active");
$("#sidebar_scroller").fadeOut();
$("#main").removeClass("removemainstyle")
$("#mainContent").removeClass("addmaincontentwidth")
$("#sidebar_scroller").removeClass('sidebar_scrollerwidth')
$("#sideBar").removeClass('sideBarwidth')
};
/* 目录显示 */
showContent = function() {
$("#sideBarMain").fadeOut();
$("#myside").removeClass("active");
$("#mycontent").addClass("active");
$("#sidebar_scroller").fadeIn();
$("#main").addClass("removemainstyle")
$("#mainContent").addClass("addmaincontentwidth")
$("#sidebar_scroller").addClass('sidebar_scrollerwidth')
$("#sideBar").addClass('sideBarwidth')
};
// 侧边目录
/* 侧边目录滚动激活 */
contentActiveListen = function() {
//开启滚动监听, 监听所有在.nav类下的li
// $("body").scrollspy({
// offset: 80, // 偏置80，防止遮挡
// });
$(window).scroll(function() {
var now = $("#sidebar_scroller").find(".active");
var prevNum = now.prevAll().length + 1;
var basicHeight = now.outerHeight();
$("#sideBar").scrollTop(prevNum * basicHeight - 60);
});
};
/* 侧边目录 */
setSideContent = function() {
var $ph = $("#cnblogs_post_body :header:eq(0)");
if ($ph.length > 0) {
//设置层级为1
$ph.attr("offset", "1");
//添加导航目录的内容
$("#sideBar").prepend(
'<div id="sidebar_scroller" class="sidebar-block"><ul class="nav"></ul></div>'
);
$("#sideBar").prepend(
'<div class="side-choose"><a id="myside" href="javascript:showSide()"></a><a id="mycontent" href="javascript:showContent()">大纲</a></div>'
);
$("#sideBarMain").hide();
showContent();
// 判断当大纲存在时我们才使用以下代码
var mycontentobj = document.getElementById("mycontent");
if (mycontentobj == null) {
$("#main").removeClass("removemainstyle")
$("#mainContent").removeClass("addmaincontentwidth")
$("#sidebar_scroller").removeClass('sidebar_scrollerwidth')
$("#sideBar").removeClass('sideBarwidth')
} else {
$("#main").addClass("removemainstyle")
$("#mainContent").addClass("addmaincontentwidth")
$("#sidebar_scroller").addClass('sidebar_scrollerwidth')
$("#sideBar").addClass('sideBarwidth')
console.log(navigator.userAgent);
var os = function() {
var ua = navigator.userAgent,
isWindowsPhone = /(?:Windows Phone)/.test(ua),
isSymbian = /(?:SymbianOS)/.test(ua) || isWindowsPhone,
isAndroid = /(?:Android)/.test(ua),
isFireFox = /(?:Firefox)/.test(ua),
isChrome = /(?:Chrome|CriOS)/.test(ua),
isTablet = /(?:iPad|PlayBook)/.test(ua) || (isAndroid && !/(?:Mobile)/.test(ua)) ||
(
isFireFox && /(?:Tablet)/.test(ua)),
isPhone = /(?:iPhone)/.test(ua) && !isTablet,
isPc = !isPhone && !isAndroid && !isSymbian;
return {
isTablet: isTablet,
isPhone: isPhone,
isAndroid: isAndroid,
isPc: isPc
};
}();
if (os.isAndroid || os.isPhone) {
console.log("手机")
$("#sideBar").attr('style', 'display:none;')
} else if (os.isTablet) {
console.log("平板")
} else if (os.isPc) {
console.log("电脑")
}
}
//遍历文章里每个h标签
$("#cnblogs_post_body :header").each(function(i) {
var $h = $(this);
//设置h标签的id, 编号从0开始
$h.attr("id", "scroller-" + i);
//比上一个h标签层级小, 级数加1
if ($h[0].tagName > $ph[0].tagName) {
$h.attr("offset", parseInt($ph.attr("offset")) + 1);
} //比上一个h标签层级大, 级数减1
else if ($h[0].tagName < $ph[0].tagName) {
var h = parseInt($h[0].tagName.substring(1));
var ph = parseInt($ph[0].tagName.substring(1));
var offset = parseInt($ph.attr("offset")) - (ph - h);
if (offset < 1) {
offset = 1;
}
$h.attr("offset", offset);
} //和上一个h标签层级相等时, 级数不变
else {
$h.attr("offset", $ph.attr("offset"));
}
//添加h标签的目录内容
$("#sidebar_scroller ul").append(
'<li class="scroller-offset' +
$h.attr("offset") +
'"><a href="#scroller-' +
i +
'">' +
$h.text() +
"</a></li>"
);
//最后设置自己为上一个h标签
$ph = $h;
});
contentActiveListen(); // 侧边目录滚动激活
}
};
</script>
