html {
	--body-bg: #f2f3f4;
	/* 	--body-bg: #fff; */
	--section-bg: #fff;
	--font-color: #454d64;
	--border-color: #eaecef;
	--header-shadow: 0 8px 24px -2px rgb(0 0 0 / 5%);
	--h-color: rgba(0, 0, 0, .85);
	--a-color: #4569d4;
	--theme: #4569d4;
	/* 	--theme-hover: #40a9ff; */
	font-size: 14px;
	--max-width: 1366px;
	--input-bg: #eaecefbf;
}

.html-night {
	--body-bg: #191919;
	/* 	--body-bg:#fff; */
	--section-bg: rgb(36, 37, 37);
	--font-color: #b3ab9e;
	--border-color: rgb(63, 65, 65);
	--header-shadow: 0 2px 8px 0 rgb(0 0 0 / 65%);
	--h-color: rgba(229, 224, 216, 0.85);
	--a-color: rgb(97, 144, 198);
	--theme: #165f99;
/* 	--theme-hover: rgb(22, 95, 153); */
	--input-bg: #373737;
}

body {
	/* background-color: #f2f3f5; */
	/* color: #555; */
	background-color: var(--body-bg);
	color: var(--font-color);
	margin: 0;
	/* padding: 0 20px; */
	line-height: 1.6;
	font-size: 1rem;
	font-family: -apple-system, system-ui, BlinkMacSystemFont, Helvetica Neue, PingFang SC, Hiragino Sans GB, Microsoft YaHei, Arial, sans-serif;
}

h1,
h2,
h3,
h4,
h5,
h6 {
	/* color: var(--h-color); */
}

ul {
	margin: 0;
	padding: 0;

}

li {
	list-style: none;
}

a {
	text-decoration: none;
	color: inherit
}

a:hover {
	color: var(--a-color);
}

input {
	border-radius: 2px;
	/* padding: 2px 1px; */
	outline: none;
	background-color: var(--input-bg);
	/* color: #fff; */
	/* 	border-color:1px solid var(--input-bg); */
	/* border:1px solid var(--input-bg)
	color: inherit; */
	border: 1px solid var(--input-bg);
	color: inherit;
}

.hide {
	display: none;
}

.affix {
	position: fixed;
}

.dis-flex {
	display: flex;
}

header {
	color: #f2f4f5;
	position: fixed;
	z-index: 999;
	top: 0;
	left: 0;
	width: 100%;
	height: 56px;
	background-color: rgb(36, 37, 37);
	box-shadow: 0 2px 8px 0 rgb(0 0 0 / 65%);
}

header>div {
	line-height: 40px;
	height: 40px;
	max-width: var(--max-width);
	margin: 0 auto;
	padding: 8px 0;
}

header>div>div {
	/* padding: 0 30px; */
}

header .header-l a {
	margin-right: 25px;
}

header .header-r a {
	margin-left: 25px;
	font-size: 20px;
	transition: all .6s;
}

header a:hover {
	color: #7395f7
}

#home {
	padding-top: 72px;
}

#top_nav,
#blogTitle,
.blogStats,
#header {
	display: none
}

header .outdent {
	transform: rotate(180deg);
	transition: all 1s;
}

#main {
	box-sizing: border-box;
	margin: 0 auto;
	/* padding: 0px 40px; */
	max-width: var(--max-width);
	/* padding: 0 25px; */
	display: flex;
	align-items: flex-start;
}










#mainContent {
	/* margin-left: 330px; */
	order: 2;
	flex: 1;
	/* display: flex; */
	background-color: var(--section-bg);
	box-shadow: 0 2px 2px 0 #0000001f, 0 3px 1px -2px rgb(0 0 0 / 6%), 0 1px 5px 0 rgb(0 0 0 / 12%);
	padding: 20px 30px 20px;
}

/* ---------------------博文列表 ---------------------*/
#mainContent>.forFlow {
	/* 	flex: 1; */
	font-size: 16px;
}

.dayTitle a {
	display: none
}



.postTitl2 a,
.postTitle2,
.entrylistPosttitle {
	display: block;
	padding-bottom: 16px;
	font-size: 18px;
	font-weight: 600;
	/* color: var(--h-color); */
}

.c_b_p_desc {
	color: #7d7d7d;
}

.postDesc,
#myposts .postDesc2,
.entrylistItemPostDesc {
	font-size: 14px;
	color: #7d7d7d;
	margin: 0 0 24px 0;
	padding: 20px 0 14px 0;
	border-bottom: 1px solid var(--border-color);
}

.forFlow>.PostListTitle {
	margin: 0;
	font-size: 20px;
	font-style: italic;
	text-align: right;
	display: block;
	/* height: 0; */
	line-height: 1;
}

.entrylistTitle {
	line-height: 1;
	font-size: 20px;
	margin: 0;
	text-align: right;
	font-style: italic;
	/* height: 1px; */
}

.pager {
	display: none
}

#myposts {
	margin: 0
}
#myposts .PostList{
	font-size:inherit;
	margin:0;
	padding:0;
}
#myposts .postDesc2 {
	text-align: left
}



/* ---------------------博文內容 ---------------------*/

#topics>.post>.postTitle {
	margin: 0;
	padding: 0;

}

#topics>.post>.postTitle button{display:none}



#post-info div {
	text-align: left;
	padding-bottom: 10px;
}



#cb_post_title_url {
	font-size: 24px;
	line-height: 1.5;
	padding: 0 !important;
}



#cnblogs_post_body hr {
	border: none;
	height: 2px;
	background-color: var(--border-color);
}

#cnblogs_post_body h1 {
	font-weight: 500;
	font-size: 36px
}



.cnblogs-markdown {
	line-height: 2;
	letter-spacing: 1px;
}

.cnblogs-markdown .hs-item a {
	display: none
}

.cnblogs-markdown .hs-item:hover a {
	display: initial;
	color: var(--a-color);
	text-decoration: none
}
#cnblogs_post_body .hs-item button{display:none}
#cnblogs_post_body a {
	color: var(--a-color)
}

#cnblogs_post_body a:hover {
	text-decoration: underline
}

#cnblogs_post_body h2 {
	font-weight: 500;
	font-size: 34px;
}

#cnblogs_post_body h3 {
	font-weight: 500;
	font-size: 30px
}

#cnblogs_post_body h4 {
	font-weight: 500;
	font-size: 28px
}

#cnblogs_post_body h5 {
	font-weight: 500;
	font-size: 26px
}

#cnblogs_post_body h6 {
	font-weight: 500;
	font-size: 24px
}



.pre-btn {
	position: absolute;
	top: 1px;
	font-size: 20px;
	background: #fff;
	color: #555;
	line-height: 1;
	padding: 4px;
	border-radius: 2px;
}

.btn-copy {
	right: 1px;
	opacity: 0;
}

.btn-fold {
	left: 1px
}

pre:hover .btn-copy {
	opacity: 1
}

.cnblogs-markdown pre {
	border-radius: 4px;
	padding-top: 30px;
}

.cnblogs-markdown code {
	max-height: 800px;
	overflow: auto;
	white-space: pre-wrap !important;
	font: 14px/1.8 source-code-pro, Menlo, Monaco, Consolas, Courier New, monospace !important;
}
.cnblogs-markdown :not(pre,div,td)>code, .blogpost-body :not(pre,div,td)>code{
	background-color:var(--input-bg);
}
#cnblogs_post_body blockquote {
	background-color: var(--bg-bpdy);
	border-width: 8px;
}

#cnblogs_post_body p {
	margin: 18px 0
}

/* ---------------------評論 ---------------------*/
#blog-comments-placeholder .feedbackItem {
	border-bottom: 1px solid var(--border-color);
	margin-bottom: 24px;
}

.feedbackListSubtitle {
	color: var(--section-bg);
}

.feedbackListSubtitle :not(p) {
	line-height: 2;
	/* 	color: #333; */
	color: var(--font-color);
	font-size: 14px
}

#blog-comments-placeholder .feedbackItem .louzhu {
	background-color: var(--theme);
	color: #fff;
	padding: 2px 6px;

}

.comment_vote {
	padding: 20px 0 16px;
}

#div_digg {
	/* position:fixed; */
	background-color: #fff;
	bottom: 160px;
	right: 50px;
	padding: 16px 16px 8px;
	border-radius: 4px;
	box-shadow: 0 0px 2px 2px rgb(0 0 0 / 5%);
}

/* ---------------------博文目錄 ---------------------*/

#toc-container {
		position: fixed;

	top: 72px;
	bottom:0;
	overflow: auto;
width: 310px;
/* margin-left: 30px; */
/* padding-top: 55px; */
line-height: 1.5;
/* width: 310px; */
/* background-color: var(--section-bg); */
}

#sidebar-tab {
	background: var(--section-bg);
	top: 72px;
	width: 310px;
	display: flex;
	font-size: 16px;
	text-align: center;
	line-height: 48px;
	border-bottom: 2px solid var(--border-color);
	position: fixed;
}

#sidebar-tab div {
	cursor: pointer;
	flex: 1;
}

#sidebar-tab .tab-active {
	border-bottom: 2px solid var(--theme);
}

#toc-container>.toc-hide {
	height: 1px;
	overflow: hidden;
	opacity: 0;
}

#toc-container>.nav {
	margin: 0 auto;
	background-color: var(--section-bg);
	width: 246px;
	padding: 24px 30px 20px;
	/* display: block; */
	/* padding: 20px 0 20px 30px; */
	box-shadow:0 2px 2px 0 #0000001f, 0 3px 1px -2px rgb(0 0 0 / 6%), 0 1px 5px 0 rgb(0 0 0 / 12%);
}





#toc-container>.nav ul {
	padding-left: 20px;
	line-height: 1.8;
	/* 	display: none; */
}

#toc-container>.nav a {
	display: inline-block;
	margin: 2px 0;
	cursor: pointer;
}


#toc-container>.nav .active>ul {
	display: block;
}

#toc-container>.nav a:hover {
	color: var(--a-color)
}

#toc-container>.nav .active.active-last>a {
	color: var(--a-color);
}



#toc-container>.nav div>span.li-level {
	/* color: #999; */
	margin-right: 4px;
	font-size: 14px
}

/* ---------------------側邊欄 ---------------------*/
#sideBar {
	/* float: right; */
	/* margin-left: 100%; */
	/* position: fixed; */
	order: 1;
	/* top:72px; */
	/* bottom:20px; */
	width:310px;
	/* overflow:auto; */
	width: 310px;
	/* 	border-left: 2px solid var(--border-color); */
	margin-right: 20px;
	/* margin-left: 20px; */
	/* margin-right: -100%; */
}
#sideBar>div{
	/* box-shadow:0 2px 2px 0 rgb(0 0 0 / 12%), 0 3px 1px -2px rgb(0 0 0 / 6%), 0 1px 5px 0 rgb(0 0 0 / 12%); */
}
.sidebar-container{
	/* padding-top: 52px; */
}
#sideBarMain {
	/* border-right: 2px solid var(--border-color); */
	/* width: 310px; */
	box-shadow: 0 2px 2px 0 rgb(0 0 0 / 12%), 0 3px 1px -2px rgb(0 0 0 / 6%), 0 1px 5px 0 rgb(0 0 0 / 12%);
}

#sideBar #toc-container>.nav {
	display: none;
}

#sideBar.sidebar-toc #sideBarMain {
	display: none;
}

#sideBar.sidebar-toc #toc-container>.nav {
	display: inherit;
}

#sideBarMain>div {

	padding-left: 30px;

	padding-right: 30px;

	background-color: var(--section-bg);

	/* box-shadow: 0 2px 2px 0 rgb(0 0 0 / 12%), 0 3px 1px -2px rgb(0 0 0 / 6%); */
}

#sideBarMain>div:nth-last-child {
	/* 	box-shadow: 0 2px 2px 0 rgb(0 0 0 / 12%), 0 3px 1px -2px rgb(0 0 0 / 6%), 0 1px 5px 0 rgb(0 0 0 / 12%); */

}

#sideBarMain #sidebar_news {
	/* background-color: rgb(36, 37, 37); */
	/* color: rgb(179, 171, 158); */
	line-height: 1.8;
}
#blog-news{
	/* padding: 20px 30px; */
	padding-top: 24px;
}

#sidebar_news h3 {
	display: none;
}

#notice-links {
	display: flex;
	justify-content: space-between;
	margin-bottom: 5px
}

#notice-links a:hover {
	/* color: #fff */
}

#profile_block {
	line-height: inherit !important
}

#sideBar a {
	color: inherit
}

#leftcontentcontainer a:hover {
	color: var(--a-color)
}


#sideBarMain.affix {
	top: 70px;
}

#profile_block {
	margin: 0;
}

#sideBarMain h3 {
	font-size: 16px;
	margin: 0 0 10px 0;
}

#sideBarMain .input_my_zzk {
	width: 174px;
	/* border: 1px solid #999; */
	/* outline: none; */
}

.sidebar-block {
	padding: 16px 0 0 0;
}

.sidebar-block ul {
	margin: 4px 0 4px 0
}

.sidebar-block ul li {
	line-height: 1.5;
	margin-bottom: 5px;
}

#sidebar_toptags ul {
	display: flex;
	flex-wrap: wrap;
}

#sidebar_toptags li {
	margin: 0 12px 12px 0
}

#sidebar_toptags li a {

	white-space: nowrap;

	display: block;

	font-size: 14px;

	background-color: var(--input-bg);

	padding: 2px 8px;

	/* color: #666; */

	border-radius: 4px;
}

#sidebar_toptags li a:hover {

	font-weight: 500;

	color: #fff;

	background-color: var(--theme);
}

#footer {
	text-align: center;
	padding: 24px
}

/* ---------------------頁尾 ---------------------*/
#page_end_html {
	max-width: var(--max-width);
	/* height: 80px; */
	/* background: #fff; */
	margin: 0 auto;
}
#toc-control{
	width: 310px;
}
#toc-control span{
	cursor: pointer;
	position: fixed;
	line-height: 1;
	padding: 4px;
	top: 75px;
	/* left: 232px; */
	margin-left: 305px;
	/* background-color: var(--theme); */
	/* color: #fff; */
	z-index: 800;
	/* border-bottom: 2px solid var(--theme); */
	/* border-left: 2px solid var(--theme); */
	/* box-shadow: -2px 2px 2px  var(--theme); */
	/* text-decoration: line-through; */
}
#toc-contorl .toc-active{
	/* border-top: 2px solid var(--theme); */
	/* border-right: 2px solid var(--theme); */
	text-decoration: none;
}
#btns-box {
	/* margin-right: -100px; */
	float: right;
	line-height: 1;
	/* min-width: 80px; */
}

#btns-box>div {
	position: fixed;
}

#blog-btns {
	bottom: 160px;
}

#btns-box>.icon-ellipsis {
	bottom: 80px;
}

#btns-box .iconfont {
	font-size: 28px;
}

#btns-box .btns-item {
	/* 	position: fixed; */
	margin-bottom: 16px;
	/* 	font-size: 28px; */
	background-color: var(--section-bg);
	cursor: pointer;
	box-shadow: 0 0 2px 2px #ccc;
	width: 42px;
	height: 42px;
	text-align: center;
	line-height: 42px;
	/* 	border-radius: 50%; */
}

#btns-box .btns-item:hover {
	font-weight: 600;
	/* 	font-size:32px */
}

#btn-theme {
	/* position: fixed; */
	/* bottom: 180px; */
	font-size: 32px;
}

#gotop {

	/* bottom: 112px; */

	/* visibility: hidden; */

	font-size: 24px;

	display: none;
}

#gotop.affix {
	position: initial;
	display: block;
	/* visibility: initial; */
}
 

$(function() {
	// $('#mainContent').prepend($('	<div id="sidebar-btn" class="iconfont  icon-leftbutton"></div>'))
	$('header #inout').on('click', function() {
		$(this).toggleClass('outdent');
		$('#sideBar').toggle('fast')
	})

	$('#btns-box>.btns-control').on('click', function() {
		$('#btns-box>#blog-btns').toggle('fast')
	})
	var theme = window.localStorage.getItem('theme') || 'day';
	if (theme == 'night') {
		$('html').addClass('html-night');
		$('#btn-theme').addClass('icon-night').removeClass('icon-day');

	}
	$('header #btn-theme').on('click', function() {
		if (theme == 'day') {
			$(this).addClass('icon-night').removeClass('icon-day');
			$('html').addClass('html-night')
			theme = 'night'
		} else {
			$(this).addClass('icon-day').removeClass('icon-night');
			$('html').removeClass('html-night');
			theme = 'day'

		}
		window.localStorage.setItem('theme', theme)
	})
	// var isArticle = $("#post-date").length == 1;
	var postId = window.location.pathname.match(/\/p\/(\d+)\./) || null;
	if (postId !== null) {
		console.log(postId)
		addPostInfo();

		addPreBtn();
		var toc = createToc(
			"#cnblogs_post_body h2,#cnblogs_post_body h3,#cnblogs_post_body h4,#cnblogs_post_body h5,#cnblogs_post_body h6"
		);
		if (toc !== false) {
			// $('#sideBarMain').hide();
			$('#sideBar').addClass('sidebar-toc sidebar-container');

			// var tocHide = toc.clone().addClass('toc-hide nav');

			var tocContainer = $(
				'<div id="toc-container"></div>'
			);





			$('#sideBar').append(tocContainer.append(toc.addClass('nav toc')))
			$('#toc-control span').removeClass('hide');
			$('#toc-control span').on('click', function() {
				$(this).toggleClass('icon-expend');
				$('#toc-container').toggle();
				$('#sideBarMain').toggle()
			})


			$('body').scrollspy({
				target: '#toc-container'
			})
			var activeLast = $('<div></div>');
			var hideActiveLast = $('<div></div>');

			$('#toc-container').on('activate.bs.scrollspy', function() {
				activeLast.removeClass('active-last');
				hideActiveLast.removeClass('active-last');
				activeLast = $('#toc-container>.toc .active').slice(-1).addClass('active-last');
				hideActiveLast = $('#toc-container>.toc-hide .active').slice(-1).addClass('active-last');

			})
		}

	}

	$('#gotop').on('click', function() {
		$("body,html").animate({
			scrollTop: 0
		}, 300);
	})

	function setComments() {
		var comments = $('#blog-comments-placeholder .feedbackItem');
		if (comments.length == 0) {
			return
		}

	}

	function addPreBtn() {
		var pres = $(".cnblogs-markdown pre");
		if (pres.length == 0) {
			return;
		}
		pres.each(function() {
			var t = $(this).children("code").text();
			var copyBtn = $('<div class="iconfont icon-copy pre-btn btn-copy"></div>').attr(
				"data-clipboard-text",
				t
			);
			var foldBtn = $('<div class="iconfont icon-arrow-down pre-btn btn-fold"></div>')
			$(this).prepend(copyBtn).prepend(foldBtn);
			var c = new ClipboardJS(copyBtn[0]);
			c.on("success", function() {
				copyBtn.removeClass('icon-copy').addClass('icon-check')
			});
			c.on("error", function() {
				copyBtn.text("複製失敗");
			});
			copyBtn.mouseleave(function() {
				copyBtn.text("").removeClass("icon-check").addClass('icon-copy');
			});
			foldBtn.on('click', function() {
				if ($(this).hasClass('icon-arrow-right')) {
					$(this).addClass('icon-arrow-down').removeClass('icon-arrow-right')
				} else {
					$(this).addClass('icon-arrow-right').removeClass('icon-arrow-down')
				}
				$(this).siblings('code').toggle('fast')
			})
		});
	}

	function addPostInfo() {

		var postInfo = $('<div id="post-info"></div>')
			.append($(".post>.postDesc"))
			.append($("#BlogPostCategory"));
		$(".post>.postTitle").after(postInfo);
	}

	function createLi(el, index) {
		return $("<li></li>").html(
			$("<a></a>").attr("href", "#" + el.textContent).text(el.textContent)
		)
	}

	function createToc(selector) {
		var hs = $(selector);
		if (hs.length === 0) {
			return false;
		}
		var min = {
			value: hs[0].tagName[1],
			index: 0
		};


		hs.each(function(index, el) {


			if (el.tagName[1] - min.value < 0) {
				min = {
					index: index,
					value: el.tagName[1]
				};
			}
		});
		var arr = [];
		var toc = $("<ul></ul>");

		var preLevel = ""; //父級序號
		var parentLi = ""; //父級li
		hs.each(function(index, el) {

			var li = createLi(el);

			var t = el.tagName[1];
			$(el).addClass('hs-item')
			if (
				t === min.value ||
				index === 0 ||
				(index < min.index && t === hs[0].tagName[1])
			) {
				toc.append(li);
				arr = [];
				preLevel = "";
				parentLi = li;
			} else {
				var r = t - hs[index - 1].tagName[1];
				preLevel = arr[0].li.data("level");
				if (r === 0) {
					arr[0].li.after(li);
					preLevel = preLevel.slice(0, preLevel.lastIndexOf("."));
				} else if (r > 0) {
					arr[0].li.append($("<ul></ul>").append(li));
					parentLi = arr[0].li;
				} else {
					var item = arr.find(function(value) {
						return t > value.el.tagName[1];
					});
					item.li.children("ul").append(li);
					preLevel = item.li.data("level");
					parentLi = item.li;
				}
				preLevel += ".";
			}
			var span = $('<span class="li-level"></span>');
			$(el)
				.attr("id", el.textContent)
				.append($("<a>#</a>").attr({
					href: "#" + el.textContent
				}));
			li.data({
					level: preLevel + "" + (li.index() + 1)
				})
				.children("a")
				.prepend(span.text(li.data("level") + ". "));


			if (parentLi.children("li").length >= 2) {
				var toggle = $('<button class="li-toggle">-</button>');
				parentLi.prepend(toggle);
				toggle.on("click", function() {
					if (toggle.text() == "-") {
						toggle.text("+").siblings("ul").slideUp("fast");
					} else {
						toggle.text("-").siblings("ul").slideDown("fast");
					}
				});
			}

			arr.unshift({
				el: el,
				li: li,
			});
		});
		return toc;
	}

});