页首css
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; */
}
自定义js
$(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;
}
});
浙公网安备 33010602011771号