博客园美化二

博客园美化二

CSS

.cnblogs-markdown .hljs {
    display: block;
    color: #333;
    overflow-x: auto;
    background: #F2F4F5 !important;
    border: none !important;
    font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace !important;
    padding: 1em !important;
    font-size: 14px !important
}

.hljs-comment, .hljs-meta {
    color: #969896
}

.hljs-emphasis, .hljs-quote, .hljs-string, .hljs-strong, .hljs-template-variable, .hljs-variable {
    color: #df5000
}

.hljs-keyword, .hljs-selector-tag, .hljs-type {
    color: #a71d5d
}

.hljs-attribute, .hljs-bullet, .hljs-literal, .hljs-symbol {
    color: #0086b3
}

.hljs-name, .hljs-section {
    color: #63a35c
}

.hljs-tag {
    color: #333
}

.hljs-attr, .hljs-selector-attr, .hljs-selector-class, .hljs-selector-id, .hljs-selector-pseudo, .hljs-title {
    color: #795da3
}

.hljs-addition {
    color: #55a532;
    background-color: #eaffea
}

.hljs-deletion {
    color: #bd2c00;
    background-color: #ffecec
}

.hljs-link {
    text-decoration: underline
}

body {
    cursor: url(https://files-cdn.cnblogs.com/files/zouwangblog/cursor.ico), auto;
    background: #fff;
    color: #314659;
    min-height: 100% !important;
    font-family: Lato, "PingFang SC", "Microsoft YaHei", sans-serif !important;
}

body::before {
    background: url(https://pic.imgdb.cn/item/62d7819df54cd3f9378d5b5e.jpg) center/cover no-repeat;
}

body:before {
    content: '';
    background-repeat: no-repeat;
    background-position: center;
    opacity: 0.05;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
}

a {
    transition: all .3s ease !important
}

a:hover {
    color: #FE9600 !important;
    text-decoration: none !important
}

#ad_c1, #ad_c2, #ad_t2, #author_profile, #blogCalendar, #blogTitle h2, #comment_form_container p:nth-of-type(3), #comments_pager_top, #green_channel, #homepage_top_pager, #sidebar_imagecategory, #sidebar_postarchive, #sidebar_recentcomments, #sidebar_recentposts, #sidebar_scorerank, #sidebar_search, #sidebar_shortcut, #sidebar_topcommentedposts, #tip_comment2, #under_post_kb, #under_post_news, .blogStats, .c_ad_block, .commentbox_title_left, .commentform p {
    display: none
}

#home {
    width: 100%
}

#header {
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    margin: 0 auto;
    border-top: 0;
    background: #fff;
    border-bottom: 0px #ffebf2 solid;
    padding-bottom: 0;
    width: 100%;
    height: 75px;
    z-index: 999;
    opacity: 0;
    transition: all .4s ease;
}

#header #blogTitle {
    position: absolute;
}

#header #blogTitle h1 {
    font-size: 25px;
    font-family: Georgia;
    width: auto;
    margin-left: 0;
    margin-top: 12px;
    padding-left: 15px
}

#header #blogTitle h1 a {
    color: #61687C
}

#header #navigator {
    height: inherit;
    top: 0;
    background-color: transparent;
    z-index: 999;

}

#header #navList {
    height: inherit;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: 100px;
    transition: all .4s ease;
}

#header #navList li {
    position: relative
}

#header #navList li:hover i {
    width: 100%;
    left: 0
}

#header #navList li i {
    width: 0;
    height: 4px;
    background-color: #FE9600;
    content: "";
    position: absolute;
    left: 50%;
    bottom: 0;
    transition: 1s
}

#navList .fa,#navList .iconfont {
    width: 30px!important;
    height: 4px!important;
    background-color: #fff!important;
    content: ""!important;
    position: static!important;
}

#header #navList a:active, #header #navList a:link, #header #navList a:visited {
    font-size: 16px;
    border-right: 0;
    color: #61687C;
    display: block;
    font-weight: 300;
    padding: 28px 0;
    height: inherit;
    -webkit-transition: all .3s;
    transition: all .3s
}

#header #navList a:hover {
    background: 0 0
}

#main {
    width: 800px;
    margin: 100vh auto 0;
    min-height: 750px;
    padding: 70px 10px 0 10px;
    animation-name: fadeIn;
    animation-duration: 1s;
    animation-iteration-count: 1;
    -webkit-animation-name: fadeIn;
    -webkit-animation-duration: 1s;
    -webkit-animation-iteration-count: 1;
    z-index: 9999;
}

#main #mainContent {
    background-color: transparent
}

#main #mainContent .forFlow {
    margin: 0 auto;
    margin-left: 0;
    max-width: 800px
}

#sideBar {
    width: 0px;
    border-right: 1px solid #EEF2F8;
    font-weight: 300;
    display: none;
    min-height: 750px;
    padding: 0
}

#sideBar .newsItem:hover {
    background: url(https://files-cdn.cnblogs.com/files/zouwangblog/caidai.gif);
    background-size: cover;
    color: #999;
}

.newsItem {
    padding: 15px 0 5px 0px;
    margin-bottom: 8px;
}

#sideBar #profile_block {
    margin-top: 0;
    font-size: 15px;
    padding-left: 15px
}

#sideBar #profile_block #p_b_follow {
    margin-top: 10px
}

#sideBar #profile_block a {
    color: #61687C
}

.catListTitle {
    position: relative;
    text-align: left;
    margin-top: 20px;
    padding-left: 30px !important;
    font-size: 20px;
    font-weight: 300;
    border-bottom: none
}

.catListTitle::before {
    color: #61687C;
    position: absolute;
    top: 1px;
    left: -2px
}

#sidebar_categories li, #sidebar_toptags li {
    font-size: 15px;
    height: 40px;
    margin: 0;
    padding-left: 15px;
    padding-right: 15px;
    line-height: 42px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis
}

#sidebar_categories li a, #sidebar_toptags li a {
    color: #61687C
}

#sidebar_categories li:active, #sidebar_categories li:link, #sidebar_categories li:visited, #sidebar_toptags li:active, #sidebar_toptags li:link, #sidebar_toptags li:visited {
    text-decoration: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis
}

#sidebar_categories li:hover, #sidebar_toptags li:hover {
    margin-left: 10px;
    border-radius: 5px;
    margin: 0 5px;
    font-size: 17px
}

#sidebar_topdiggedposts li, #sidebar_topviewedposts li {
    margin: 12px 0;
    font-size: 15px;
    padding-left: 15px;
    padding-right: 15px;
    text-align: justify
}

#sidebar_topdiggedposts li a:active, #sidebar_topdiggedposts li a:hover, #sidebar_topdiggedposts li a:link, #sidebar_topdiggedposts li a:visited, #sidebar_topviewedposts li a:active, #sidebar_topviewedposts li a:hover, #sidebar_topviewedposts li a:link, #sidebar_topviewedposts li a:visited {
    color: #61687C
}

#taglist_title, .PostListTitle, .entrylistTitle, .myposts_title, .thumbTitle {
    padding-bottom: 3px;
    padding-right: 10px;
    width: 100%;
    text-align: left;
    border-bottom: 0 !important;
    font-size: 20px !important;
    font-weight: 300;
    margin-top: 15px
}

#myposts {
    margin-left: 0
}

#myposts .PostList {
    font-size: 13px;
    font-weight: 300;
    border-bottom: 1px solid #EEF2F8;
    padding: 6px 0 10px 0;
    margin-right: 0
}

#myposts .pager:first-of-type {
    display: none
}

#myposts a:link, #myposts a:visited {
    color: #61687C
}

#myposts .postDesc2 {
    color: inherit
}

.c_b_p_desc a:before {
    content: '🔎';
}

.day .postDesc, .entrylist .entrylistItemPostDesc, .post .postDesc {
    font-size: 13px;
    font-weight: 300;
    padding-right: 0;
    color: #61687C !important;
}

.post .postTitle {
    font-size: 25px !important;
    font-weight: 300 !important;
    padding-left: 15px !important;
    border-bottom: none !important
}

.post .postTitle a {
    color: #61687C
}

.post .postBody {
    font-weight: 300;
    font-size: 15px;
    padding: 5px 15px;
    line-height: 1.7;
    color: #61687C;
    border-bottom: 1px solid #EEF2F8
}

.post .postBody a:active, .post .postBody a:link, .post .postBody a:visited {
    color: #e67474;
    position: relative;
    text-decoration: none;
}

.post .postBody a:hover {
    color: orange;
    text-decoration: none
}

.post .postBody a:after {
    content: '';
    position: absolute;
    width: 100%;
    transform: scaleX(0);
    height: 2px;
    bottom: 0;
    left: 0;
    background-color: orange;
    transform-origin: bottom right;
    transition: transform .25s ease-out
}

.post .postBody a:hover:after {
    transform: scaleX(1);
    transform-origin: bottom left
}

.post .postBody h1 {
    font-size: 21px !important;
    color: #61687C
}

.post .postBody h5, .post .postBody h3 {
    font-size: 17px !important;
    color: #314659;
}

.post .postBody h4 {
    font-size: 15px !important;
    color: #314659;
}

.post .postBody p {
    margin: 17px auto
}

.post .postBody hr {
    border-left: none;
    border-right: none;
    border-top: none;
    border-bottom: 1px solid #EEF2F8
}

.post .postBody blockquote {
    border: none;
    color: #61687C;
    margin: 20px 0;
    padding: 0 0 0 10px;
    min-height: 20px;
    background: 0 0;
    border-left: 4px solid #FFC6DE
}

.post .postBody em {
    padding-right: 3px
}

.post .postBody strong {
    margin: 0 3px
}

.post .postBody img {
    max-width: 930px !important;
    display: block;
    margin: 30px auto;
    border-radius: 3px
}

.post .postBody ol li, .post .postBody ul li {
    margin: 3px 0;
    font-size: 15px;
    color: #61687C
}

.post .postBody ol li p, .post .postBody ul li p {
    margin: 0 !important
}

.post .postBody table {
    font-size: 13px;
    border-collapse: collapse;
    border-spacing: 0;
    empty-cells: show;
    border: 1px solid #fbdfeb;
    width: 100%;
    margin-bottom: 24px
}

.post .postBody table th {
    font-family: inherit;
    font-size: inherit;
    background: #f9f9f9 !important;
    white-space: nowrap;
    font-weight: 600;
    border: 1px solid #fbdfeb !important;
    padding: 8px 16px !important
}

.post .postBody table td {
    border: 1px solid #fbdfeb !important;
    padding: 8px 16px !important
}

.post .postBody h1 code, .post .postBody h2 code, .post .postBody h3 code, .post .postBody h4 code, .post .postBody h5 code, .post .postBody h6 code, .post .postBody li code, .post .postBody p code, .post .postBody table code {
    color: #61687C;
    line-height: 1;
    font-family: consolas !important;
    vertical-align: middle;
    margin: 0 3px;
    background: #fbfbfb !important;
    font-size: 14px !important;
    padding: .2em .3em !important;
    border-radius: 3px !important;
    border: 1px solid #eee !important
}

.post .postBody #BlogPostCategory {
    font-size: 13px;
    margin-bottom: 0
}

.post .postBody #BlogPostCategory a {
    margin-left: 5px
}

.post .postBody #EntryTag {
    font-size: 13px;
    color: #61687C
}

.post .postBody #EntryTag a {
    color: #FE9600
}

.post .postBody #post_next_prev {
    font-size: 13px
}

.cnblogs_code {
    background-color: #f2f4f5;
    padding-left: 1em;
    padding-right: 1em;
    border: none !important;
    border-radius: 3px !important;
    font-family: Lucida Console, Consolas, Monaco, Andale Mono, Ubuntu Mono, monospace !important
}

.cnblogs_code div {
    background-color: transparent;
    color: #656c73
}

.cnblogs_code img {
    margin: 0 !important
}

.cnblogs_code pre {
    color: #656c73;
    font-family: inherit !important
}

.cnblogs_code pre span {
    font-family: inherit !important;
    color: inherit !important
}

.cnblogs_code textarea {
    font-family: inherit !important;
    padding: 5px;
    border: 1px solid #3e4c42;
    color: #c5d4ef;
    background-color: #282c34
}

.cnblogs_code textarea:focus {
    outline: 0
}

.cnblogs_code .code_img_closed, .cnblogs_code .code_img_opened {
    display: none !important
}

.cnblogs_code .cnblogs_code_toolbar {
    width: 20px
}

.cnblogs_code .cnblogs_code_toolbar span {
    padding-right: 0
}

.cnblogs_code .cnblogs_code_toolbar a:link img {
    background-color: transparent !important
}

.cnblogs_code .cnblogs_code_collapse {
    color: #656c73;
    border: 1px solid #989fa6;
    border-radius: 2px;
    background-color: transparent;
    display: inline-block;
    cursor: pointer;
    padding: 5px 5px 2px 5px
}

.github-corner svg {
    fill: #FFC6DE
}

#footer {
    border-top: 1px solid #EEF2F8;
    font-weight: 300;
    z-index: 9999;
}

#footer div {
    margin: 5px auto
}

#footer a {
    color: #61687C
}

#footer:after {
    content: '❤';
    color: #ef6b6b;
    font-size: 16px
}

.cnblogs-markdown pre {
    white-space: pre !important;
    position: relative !important
}

#taglist_main {
    margin-top: 0
}

#taglist_main table {
    width: 100%
}

#taglist_main table tr td {
    padding: 5px 20px 5px 0
}

#taglist_main table tr td .small {
    display: none
}

#taglist_main table tr td a {
    display: inline-block;
    font-size: 12px;
    line-height: 1;
    padding: 5px;
    margin: 0;
    width: 100%;
    text-align: center;
    border: 1px solid #61687C;
    border-radius: 2px;
    color: #61687C;
    background-color: transparent
}

#taglist_main table tr td a:hover {
    color: #FE9600 !important;
    border: 1px solid #FE9600;
    text-decoration: none
}

.topicListFooter {
    margin-right: 0
}

#homepage1_HomePageDays_homepage_bottom_pager .pager, #comments_pager_bottom .pager {
    display: inline-block;
    font-size: 12px !important;
    font-weight: 100;
    color: #61687C;
    background-color: transparent !important;
    border-radius: 6px;
}

#nav_next_page, .pager {
    margin-right: 0;
    color: #61687C
}

#nav_next_page a, .pager a {
    padding: 3px 7px;
    border: 1px solid #61687C;
    border-radius: 4px;
    font-family: Monospaced Number;
    margin: 0 3px;
    text-decoration: none;
    color: inherit;
    transition: border .2s ease-in-out, color .2s ease-in-out
}

#nav_next_page a:hover, .pager a:hover {
    color: #FE9600;
    border: 1px solid #FE9600
}

.pager span.current {
    color: #FE9600;
    padding: 3px 7px;
    border: 1px solid #FE9600;
    border-radius: 4px;
    font-family: Monospaced Number;
    margin: 0 3px;
    text-decoration: none;
    background-color: transparent;
}

.esa-clipboard-button {
    font-size: 12px;
    cursor: pointer;
    position: absolute;
    right: 6px;
    top: 6px;
    box-shadow: 0 0 15px 0 rgba(0, 0, 0, .1);
    color: #5e6687;
    padding: 0 6px;
    border-radius: 5px
}

.esa-toolbar {
    position: fixed;
    display: grid;
    z-index: 999;
    bottom: 30px;
    right: 30px
}

.esa-toolbar .esa-toolbar-contents, .esa-toolbar .esa-toolbar-follow, .esa-toolbar .esa-toolbar-gotop {
    height: 45px;
    width: 45px;
    font-weight: 400;
    position: relative;
    outline: 0;
    cursor: pointer;
    border: 1px solid transparent;
    transition: color .2s linear, background-color .2s linear, border .2s linear, box-shadow .2s linear;
    margin-top: 5px;
    border-color: #EEF2F8;
    background-color: #fff;
    background-position: center;
    background-repeat: no-repeat
}

.esa-toolbar .esa-toolbar-contents .tips, .esa-toolbar .esa-toolbar-follow .tips, .esa-toolbar .esa-toolbar-gotop .tips {
    position: absolute;
    left: -60px;
    top: 15px;
    display: none;
    color: #FE9600;
    font-size: 12px
}

.esa-toolbar .esa-toolbar-contents:hover, .esa-toolbar .esa-toolbar-follow:hover, .esa-toolbar .esa-toolbar-gotop:hover {
    color: #FE9600;
    border-color: #FE9600
}

.esa-toolbar .esa-toolbar-gotop {
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABkAAAAZCAYAAADE6YVjAAACL0lEQVRIS+3TwWvTUBwH8O/vJSLrFBURFPSkoIiCVz3IilObFA/aNR0yEEk6EXfxH1D0L5DdyroMHaJL1a1Ikw3H6kVBHHjyIKKgMEQmbOqsTpv8JOkmna4mvQyRvVv4/fL78L7vPcIKLFoBA6tIUyn/e3H1F+xjYB4B8EyGp53RTkxF2VLkneQLTieYBwmQ/cEMfgsJh41U8k0YFAnJW3YPAb2Afxv5CZj2gdAK8BQgjuia8uJvUCiSt+wrBFxaGOJ8WYeTsQr2kscTAG1k5g+eJLV1dySeN4IaIsxMpuXkQMjW4kFh55aW0/F4vOp/D9wZ2+N67gQB25h5RmJx/Gyn8nQ5aFmk17bXtn7mGyDSAoBh6ppiEBHXDzFvje3wpADaxcAcGAkjoz76HfoDyVkPNsj44QA4GDQzrukZ9WKjKK7fG99crX4vA9gP8FePhJpNKw/r+5cgfXft7cLFOIDdCxFdNjT1atjt6S8W12NeHgXoEAPzgEgZWqK0+N8vZMAqHfAAB6CtzOwBlDUyqhkGLNYt63HLJ8zaBLQxUCWQpmvKsF8PEHNotN0jt0igGBjfIHBKT6t+ZE0t/yxjc3yfQEcBdplEl5FWblOfZWcE+CZAEgMfSXC73pGcbGp6XXMuN7lG3vR+GKBkcGeIz1N+qDRIRF1RH1YUvFwuy6+nKyM1iGepluVMtytJ1rlU4l2UIVF6fOjVdOUCs3gZ+uKjDAzrWUXCElpS/3/i+gn3gM6tu0xSdwAAAABJRU5ErkJggg==);
    diplay: none !important;
}

.esa-toolbar .esa-toolbar-contents {
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABkAAAAZCAYAAADE6YVjAAAAuUlEQVRIS2NkoANgpIMdDPSxZO6qbQeQffOf+X98SrD3w0WLdnL/5vi7lRo+ZZy7att/ZIMYGRi0k8K8rs1ctZufheH3B6pYMnv1dgdkg/5x/DmV7uv7bdWqVcwfGXltqWIJNQwhZAZ9Ip6QK6ghP4x8Mnfl1gaUJMzIODUpzOv1pG3b2Lk//6+kSnDRJZ/QxSfUCA5CZgyj1EXIq9SQp09w0aUUpk8+oUelRY2IJWQGfSKekCuoIQ8At39XNxqN1mQAAAAASUVORK5CYII=);
    diplay: none !important;
}

.esa-toolbar .esa-toolbar-follow {
    border-radius: 50%;
}

.esa-profile-avatar {
    margin-left: 15px;
    margin-top: 15px;
    border-radius: 3px;
    width: 200px
}

#sideBarMain .esa-profile-avatar:hover {
    background: url(https://files-cdn.cnblogs.com/files/zouwangblog/caidai.gif);
    background-size: cover;
    color: #999;
}

.esa-profile-avatar:hover, .site-master-avatar:hover {
    -webkit-animation: tada 1s .2s ease both;
    -moz-animation: tada 1s .2s ease both;
}

@keyframes tada {
    0% {
        -webkit-transform: scale(1);
    }
    10%, 20% {
        -webkit-transform: scale(0.9) rotate(-3deg);
    }
    30%, 50%, 70%, 90% {
        -webkit-transform: scale(1.2) rotate(3deg);
    }
    40%, 60%, 80% {
        -webkit-transform: scale(1.2) rotate(-3deg);
    }
    100% {
        -webkit-transform: scale(1) rotate(0);
    }
}

.esa-follow-button {
    z-index: 999;
    display: none;
    position: fixed;
    bottom: 30px;
    right: 30px;
    height: 45px;
    width: 45px;
    font-weight: 400;
    outline: 0;
    cursor: pointer;
    border: 1px solid transparent;
    white-space: nowrap;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    font-size: 12px;
    border-radius: 50px;
    color: #515a6e;
    background-color: #fff;
    border-color: #dcdee2
}

.esa-follow-button:hover {
    color: #FE9600;
    border-color: #FE9600;
    background-color: #fff
}

.esa-mobile-menu {
    display: none;
    position: fixed;
    top: 7px;
    right: 15px;
    z-index: 941113;
    font-size: 1.5em;
    cursor: pointer;
    color: #7f7f7f
}

.esa-mobile-menu:after {
    content: '\2630';
    font-size: 1.5em;
    font-family: fontello
}

.esa-catalog {
    position: fixed;
    top: 120px;
    right: 1px;
    width: auto;
    height: auto;
    z-index: 999999;
    opacity: 0.8;
}

.esa-catalog-title {
    cursor: move;
    padding-left: 12px;
    width: 100%;
    height: 35px;
    line-height: 36px;
    border-bottom: 1px solid #EEF2F8;
    font-size: 14px;
    font-weight: 600;
}

.esa-catalog-title:before {
    content: '☲';
    margin-right: 5px
}

.esa-catalog-close {
    position: absolute;
    right: 15px;
    top: 10px;
    cursor: pointer;
    color: #a2a2a2
}

.esa-catalog-contents {
    overflow: hidden;
    display: none;
    color: #61687C;
    border: 1px solid #EEF2F8;
    min-width: 150px;
    opacity: 1;
    font-size: inherit;
    background-color: transparent;
    z-index: 19941112
}

.esa-catalog-contents ul {
    padding: 10px 15px;
    max-height: 350px;
    overflow-y: auto
}

.esa-catalog-contents ul li {
    margin-top: 5px;
    max-width: 170px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    cursor: pointer;
    color: #34495e;
}

.li_h2 {
    font-weight: bold;
    color: #34495e;
}

.esa-catalog-contents ul li code {
    font-family: inherit
}

.esa-catalog-contents ul li a:hover {
    color: #FE9600;
    text-decoration: none
}

.esa-catalog-contents ul li .level1 {
    margin-left: 0
}

.esa-catalog-contents ul li .level2 {
    margin-left: 10px
}

.esa-catalog-contents ul li .level3 {
    margin-left: 26px
}

.esa-anchor {
    opacity: 0;
    -webkit-transition: opacity .3s ease;
    transition: opacity .3s ease;
    margin-left: 8px
}

.esa-post-signature {
    padding: 12px 24px 12px 30px;
    margin-top: 15px;
    margin-left: 5px;
    border-left-width: 4px;
    font-size: 15px;
    line-height: 2;
    border-left-style: solid;
    background-color: #f8f8f8;
    position: relative;
    border-bottom-right-radius: 2px;
    border-top-right-radius: 2px;
    border-left-color: #FE9600;
    z-index: 1
}

.esa-post-signature:before {
    content: "!";
    background-color: #FE9600;
    position: absolute;
    top: 25px;
    left: -12px;
    color: #fff;
    width: 20px;
    height: 20px;
    border-radius: 100%;
    text-align: center;
    line-height: 20px;
    font-weight: 700;
    font-size: 14px
}

.esa-post-signature p {
    margin: 0 !important
}

.esa-post-signature a {
    color: #61687C !important
}

.esa-layer {
    position: fixed;
    top: 5px;
    text-align: center;
    line-height: 25px;
    font-size: 15px;
    font-family: inherit;
    width: 100%;
    display: none;
    z-index: 9999999
}

.esa-layer-content {
    position: relative;
    background: rgba(0, 0, 0, .7);
    max-width: 250px;
    padding: 3px 9px;
    font-size: 13px;
    border-radius: 5px;
    color: #FFF;
    display: inline-block
}

.esa-reward {
    display: none;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: auto;
    height: auto;
    padding-bottom: 30px;
    background: #fff;
    box-shadow: 0 0 0 2000px rgba(0, 0, 0, .65);
    border-radius: 4px;
    z-index: 1000000
}

.esa-reward h2 {
    text-align: center;
    font-size: 20px;
    color: #61687C;
    font-weight: 400;
    margin: 20px 0 10px 0
}

.esa-reward p {
    text-align: center
}

.esa-reward .esa-reward-container {
    margin: 0 30px;
    text-align: center
}

.esa-reward .alipay, .esa-reward .wechat {
    position: relative;
    display: inline-block;
    width: 200px;
    height: 200px;
    padding: 10px;
    border: 2px solid #FE9600;
    border-radius: 10px;
    box-sizing: border-box;
    margin: 10px
}

.esa-reward .alipay:after, .esa-reward .wechat:after {
    content: '';
    position: absolute;
    left: 30px;
    bottom: -10px;
    color: #61687C;
    background: #fff;
    padding: 0 10px;
    font-size: 16px;
    width: auto;
    text-align: center
}

.esa-reward .alipay img, .esa-reward .wechat img {
    width: 100%;
    width: 170px;
    height: 170px
}

.esa-reward .alipay:after {
    content: '支付宝，扫一扫'
}

.esa-reward .wechat:after {
    content: '微信，扫一扫'
}

.esa-reward-close {
    position: absolute;
    font-size: 15px;
    color: #61687C;
    top: 7px;
    right: 10px;
    cursor: pointer
}

.esa-reward-close:hover {
    transition: all .2s;
    color: #FE9600
}

.esa-reward-close:active {
    transition: all .2s;
    color: #FE9600
}

#div_digg {
    position: static;
    float: none;
    margin: 0px auto 50px;
    z-index: -1;
    width: 370px
}

#div_digg .buryit, #div_digg .diggit, #div_digg .favorite, #div_digg .reward {
    background: #FFF;
    margin: 0;
    display: inline-block;
    width: auto;
    height: 32px;
    border-width: 0;
    cursor: pointer;
    color: #fff;
    user-select: none;
    padding: 0 10px;
    border-radius: 5px;
    transition: color .2s linear, background-color .2s linear, border .2s linear, box-shadow .2s linear
}

#div_digg .favorite {
    background-color: #2db7f5;
    border-color: #2db7f5;
    margin: 0 5px
}

#div_digg .favorite:hover {
    background-color: #57c5f7;
    border-color: #57c5f7
}

#div_digg .reward {
    background-color: #e13d13;
    border-color: #e13d13;
    margin: 0 5px
}

#div_digg .reward:hover {
    background-color: #f16643;
    border-color: #f16643
}

#div_digg .diggit {
    background-color: #18b566;
    border-color: #18b566
}

#div_digg .diggit:hover {
    background-color: #47cb89;
    border-color: #47cb89
}

#div_digg .buryit {
    background-color: #f90;
    border-color: #f90
}

#div_digg .buryit:hover {
    background-color: #ffad33;
    border-color: #ffad33
}

#div_digg .buryit .burynum, #div_digg .diggit .diggnum, #div_digg .favorite .favoritenum, #div_digg .reward .rewardnum {
    color: snow;
    display: inline-block;
    font-size: 15px;
    position: relative;
    top: 5px;
    width: 65px
}

#div_digg .favorite .favoritenum:before {
    content: '收藏';
    font-size: 15px
}

#div_digg .reward .rewardnum:before {
    content: '赞赏';
    font-size: 15px
}

#div_digg .diggit .diggnum:before {
    content: '推荐';
    font-size: 15px;
    margin-right: 5px
}

#div_digg .buryit .burynum:before {
    content: '反对';
    font-size: 15px;
    margin-right: 5px
}

.feedbackItem .feedbackListSubtitle {
    color: transparent
}

.feedbackItem .feedbackListSubtitle .sendMsg2This {
    background: 0 0;
    padding-left: 0;
    font-size: 15px
}

.feedbackItem .feedbackListSubtitle .sendMsg2This::before {
    content: '✉️'
}

.feedbackItem a {
    color: #61687C
}

.feedbackItem .louzhu {
    background: #FE9600 !important;
    color: #fff;
    border-radius: 2px;
    margin: 0 2px;
    padding: 0 6px 2px 6px !important
}

.feedbackItem .comment_date {
    color: #666
}

.feedbackItem .comment_quote {
    border: 1px dashed #FE9600;
    border-radius: 3px
}

#comment_nav {
    visibility: hidden
}

.feedbackCon {
    background: 0 0;
    padding: 10px 0 10px 0;
    border-bottom: 1px solid #EEF2F8
}

.feedbackCon .esa-comment-avatar {
    float: left;
    margin-right: 10px
}

.feedbackCon .esa-comment-avatar img {
    border-radius: 50%;
    transition: all .5s ease-out;
    -webkit-transition: all .6s ease-out;
    -moz-transition: all .5s ease-out;
    -ms-transition: all .5s ease-out;
    -o-transition: all .5s ease-out
}

.feedbackCon .esa-comment-avatar img:hover {
    -webkit-transform: rotateZ(360deg);
    -moz-transform: rotateZ(360deg);
    -ms-transform: rotateZ(360deg);
    -o-transform: rotateZ(360deg);
    transform: rotateZ(360deg)
}

.feedbackCon .blog_comment_body {
    border-radius: 3px;
    padding: 8px;
    margin-top: 5px;
    margin-right: 10px;
    margin-left: 6px;
    font-size: 13px;
    display: block;
    color: #858ca5;
    width: auto
}

.feedbackCon .blog_comment_body a {
    color: #FE9600
}

.feedbackCon .blog_comment_body img {
    border-radius: 3px
}

.feedbackCon .comment_vote {
    margin-top: 12px
}

.feedback_area_title {
    border-bottom: 1px solid #EEF2F8;
    margin-bottom: 15px;
    font-size: 13px;
    font-weight: 300;
    padding-left: 0;
    padding-bottom: 5px
}

.commentform #commentform_title {
    background-image: none;
    padding-left: 0;
    font-size: 20px
}

.commentform #tip_comment {
    color: #f37f7f !important;
    margin: 15px 0;
    display: block
}

.commentform .commentbox_title .commentbox_title_right {
    height: 30px;
    float: left
}

.commentform .commentbox_title .comment_icon {
    width: 16px;
    height: 16px;
    border: 1px solid #EEF2F8;
    border-radius: 3px;
    background-color: #fff;
    padding: 3px;
    cursor: pointer
}

.commentform .comment_textarea {
    width: 100% !important;
    height: 200px !important;
    border: 1px solid #EEF2F8;
    border-radius: 6px;
    padding: 5px;
    font-family: inherit;
    font-size: 15px;
    resize: none;
    box-sizing: border-box;
    background-color: transparent;
    color: #61687C
}

.commentform .comment_textarea:focus {
    outline: 0
}

.commentform .comment_textarea:hover, .commentform .comment_textarea:focus {
    border-color: #FE9600;
    position: relative;
    background: url(https://img2018.cnblogs.com/blog/1646268/201907/1646268-20190719134948147-1816156553.png) right -6px top;
    background-size: 200px;
    background-repeat: no-repeat;
}

.commentform #commentbox_opt {
    display: block
}

.commentform #commentbox_opt a {
    color: #61687C
}

.commentform #btn_comment_submit {
    width: auto;
    height: auto;
    border-width: 0;
    cursor: pointer;
    color: #fff;
    background-color: #FE9600;
    border-color: #FE9600;
    user-select: none;
    padding: 5px 20px;
    font-size: 12px;
    border-radius: 5px;
    transition: color .2s linear, background-color .2s linear, border .2s linear, box-shadow .2s linear
}

.commentform #btn_comment_submit:hover {
    opacity: .7
}

.commentform .comment_my_posted > img {
    display: none
}

.commentform .comment_my_posted > a b {
    font-size: 16px;
    font-weight: 300
}

.commentform .bq_post_comment {
    margin-top: 5px;
    font-size: 13px;
    display: block;
    color: #858ca5;
    background-color: #ffecf4;
    border: none;
    border-radius: 3px
}

.github-corner:hover .octo-arm {
    animation: octocat-wave 560ms ease-in-out
}

@keyframes octocat-wave {
    0%, 100% {
        transform: rotate(0)
    }
    20%, 60% {
        transform: rotate(-25deg)
    }
    40%, 80% {
        transform: rotate(10deg)
    }
}

/*滚动条*/
::-webkit-scrollbar {
    width: 6px;
    height: 6px;
    background-color: #eee;
}

::-webkit-scrollbar-thumb {
    border-radius: 1px;
    background: #FE9600;
}

::-webkit-scrollbar-track {
    background: 0 0;
    border-radius: 1px
}

::-moz-selection, ::selection {
    color: #FE9600
}

@keyframes fadeIn {
    0% {
        opacity: 0
    }
    100% {
        opacity: 1
    }
}

@media screen and (min-width: 768px) and (max-width: 980px) {
    #blog-comments-placeholder, #comment_form {
        padding: 10px;
        margin-left: 0
    }
}

@media only screen and (max-width: 767px) {
    #home {
        font-size: 12px !important
    }

    #mainContent .forFlow {
        padding-top: 15px
    }

    #sideBar, .esa-catalog, .postDesc {
        display: none
    }

    .postBody {
        padding: 0 !important
    }

    #main {
        margin-top: 60px;
        padding: 0 15px !important
    }

    #topics .postTitle {
        padding-left: 0 !important;
        padding-top: 10px
    }

    #cnblogs_post_body table {
        display: table !important
    }

    #cnblogs_post_body img {
        width: 100%;
        max-width: none !important
    }

    #comment_nav, #commentbox_main {
        margin: 0
    }

    #comment_form {
        padding: 5px;
        margin-left: 0
    }

    .esa-mobile-menu {
        display: block
    }

    .forFlow {
        margin-right: 0;
        margin-left: 0 !important
    }

    .feedbackItem .feedbackManage {
        width: auto
    }

    .github-corner {
        display: none
    }
}

@media only screen and (max-width: 410px) {
    #div_digg {
        display: grid;
        width: 100%
    }

    #div_digg .buryit, #div_digg .diggit, #div_digg .favorite, #div_digg .reward {
        margin: 5px 0
    }
}

.c-notice {
    padding: 10px 0;
    background: tan;
    font-size: 0.9em;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.16), 0 2px 6px rgba(0, 0, 0, 0.23);
    font-size: 15px;
    text-align: center;
}

.c-portrait {
    text-align: center;
    padding: 50px 0;
    background: #39424b;
    color: #fff;
    margin-bottom: -40px;
    text-align: center;
}

#showsectime {
    font-size: 15px
}

#showsectime:before {
    content: '💕';
}

/**修改选择背景色*/
::selection {
    background: #E5F4FE;
    color: #384654;
}

::-moz-selection {
    background: #E5F4FE;
    color: #384654;
}

/**小工具*/
div.info {
    margin: 1.75em 0;
    padding: .85em 1em;
    font-size: .85em;
    color: #444;
    border-radius: .55em;
    position: relative;
    min-height: 4.7em;
    padding-left: 4.7em !important;
    background-color: #d9edf7;
}

div.info:before {
    content: "\f05a";
    font-family: FontAwesome;
}

div.info:before {
    position: absolute;
    left: 0;
    bottom: 0;
    height: 100%;
    padding: 0em .25em;
    font-size: 3.5em;
    color: #70bbe1;
}

div.info.important {
    background-color: #f2dede;
}

div.info.important:before {
    color: #ce8383;
}

div.info.note {
    background-color: #dff0d8;
}

div.info.note:before {
    color: #93cd7c;
    content: "\f00c";
}

#cnblogs_post_body p {
    margin: 17px auto !important;
    text-indent: 0;
}

#Snow {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 99999;
    background: rgba(125, 137, 95, 0.1);
    pointer-events: none;
}

/*溢出隐藏设置*/
#topics, #mainContent {
    overflow: visible;
}

#postDesc {
    float: none;
}

#waifu-toggle {
    position: fixed;
    writing-mode: vertical-rl;
    bottom: 70px;
    left: 0px;
    background-color: #fa0;
    color: #fff;
    border-radius: 5px;
    padding: 5px;
    font-size: 12px;
    width: 50px;
    cursor: pointer;
}

/*主页样式*/
/**主页头图*/
.main-header {
    display: table;
    width: 100%;
    height: 100vh;
    max-height: 100vh;
    text-align: center;
    background-image: url(https://img2018.cnblogs.com/blog/1646268/201908/1646268-20190806114008215-138720377.jpg);
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: cover;
    overflow: hidden;
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
    box-shadow: 0 1px 2px rgba(150, 150, 150, .7);
}

/*下拉*/
.scroll-down {
    display: block;
    position: absolute;
    bottom: 80px;
    left: 50%;
    margin-left: -16px;
    width: 34px;
    height: 34px;
    font-size: 34px;
    text-align: center;
    animation: float 2s linear infinite;
    text-decoration: none !important;
    color: white !important;
    z-index: 1000;
}

.hidden {
    text-indent: -9999px;
    visibility: hidden;
    display: none;
}

@-webkit-keyframes bounce {
    0%, 10%, 25%, 40%, 50% {
        -webkit-transform: translateY(0);
        transform: translateY(0);
    }
    20% {
        -webkit-transform: translateY(-10px);
        transform: translateY(-10px);
    }
    30% {
        -webkit-transform: translateY(-5px);
        transform: translateY(-5px);
    }
}

@keyframes bounce {
    0%, 10%, 25%, 40%, 50% {
        -webkit-transform: translateY(0);
        transform: translateY(0);
    }
    20% {
        -webkit-transform: translateY(-10px);
        transform: translateY(-10px);
    }
    30% {
        -webkit-transform: translateY(-5px);
        transform: translateY(-5px);
    }
}

@keyframes float {
    0% {
        -webkit-transform: translateY(0);
        -ms-transform: translateY(0);
        transform: translateY(0);
    }
    50% {
        -webkit-transform: translateY(-6px);
        -ms-transform: translateY(-6px);
        transform: translateY(-6px);
    }
    100% {
        -webkit-transform: translateY(0);
        -ms-transform: translateY(0);
        transform: translateY(0);
    }
}

/*网格遮罩*/
.headertop {
    overflow: hidden;
    height: 0;
}

.headertop, .pattern-center {
    animation: header 1s;
}

.headertop.filter-dot:before {
    background-image: url(https://img2018.cnblogs.com/blog/1646268/201908/1646268-20190806130657359-228955661.png);
}

.headertop:before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 3;
    background-attachment: fixed;
}

/*左上角标题*/
.site-branding {
    float: left;
    position: fixed;
    top: 10px;
    height: 75px;
    line-height: 75px;
    z-index: 1000;
}

.site-branding {
    animation: sitetop 1s;
}

.moe-mashiro {
    font-family: 'Moe-Mashiro', 'Merriweather Sans', Helvetica, Tahoma, Arial, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft Yahei', 'WenQuanYi Micro Hei', sans-serif;
}

.logolink.moe-mashiro a {
    color: #464646;
    float: left;
    font-size: 25px;
    font-weight: 800;
    height: 56px;
    line-height: 56px;
    padding-left: 12px;
    padding-right: 15px;
    text-decoration-line: none;
}

.logolink ruby {
    ruby-position: under;
    -webkit-ruby-position: after;
}

.logolink.moe-mashiro .sakuraso, .logolink.moe-mashiro .no {
    font-size: 25px;
    border-radius: 9px;
    padding: 5px 0px 0px 2px;
}
.site-branding a:hover .no {
    -webkit-animation: spin 1.5s linear infinite;
    animation: spin 1.5s linear infinite
}

@-webkit-keyframes spin {
    0% {
        -webkit-transform: rotate(0);
        transform: rotate(0)
    }
    100% {
        -webkit-transform: rotate(359deg);
        transform: rotate(359deg)
    }
}

@keyframes spin {
    0% {
        -webkit-transform: rotate(0);
        -ms-transform: rotate(0);
        transform: rotate(0)
    }
    100% {
        -webkit-transform: rotate(359deg);
        -ms-transform: rotate(359deg);
        transform: rotate(359deg)
    }
}
.logolink .sakuraso {
    background-color: rgba(255, 255, 255, .5);
    border-radius: 5px;
    color: #464646;
    height: auto;
    line-height: 25px;
    margin-right: 0;
    padding-bottom: 0;
    padding-top: 1px;
    text-size-adjust: 100%;
    width: auto;
}

.chinese-font {
    display: none;
    margin-top: -5px;
}

/*主页博主信息*/
.focusinfo {
    position: absolute;
    max-width: 800px;
    padding: 0 10px;
    top: 49.3%;
    left: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    text-align: center;
    z-index: 99;
    -webkit-transition: .4s ease all;
    -moz-transition: .4s ease all;
    -o-transition: .4s ease all;
    transition: .4s ease all;
}

.center-text {
    margin: auto;
    font-family: 'Ubuntu', sans-serif;
    font-size: 80px;
    text-transform: uppercase;
    font-weight: 800;
}

.glitch {
    position: relative;
    color: #fff;
    mix-blend-mode: lighten
}

.glitch:before, .glitch:after {
    position: absolute;
    top: 0;
    width: 100%;
    background: rgba(0, 0, 0, 0);
    clip: rect(0, 0, 0, 0)
}

.glitch:before {
    left: -1px;
    text-shadow: 1px 0 #ff3f1a
}

.glitch:after {
    left: 1px;
    text-shadow: -1px 0 #00a7e0
}

.glitch:hover:before {
    content: attr(data-text);
    text-shadow: 4px 0 #ff3f1a;
    animation: glitch-loop-1 .8s infinite ease-in-out alternate-reverse
}

.glitch:hover:after {
    content: attr(data-text);
    text-shadow: -5px 0 #00a7e0;
    animation: glitch-loop-2 .8s infinite ease-in-out alternate-reverse
}

@-webkit-keyframes glitch-loop-1 {
    0% {
        clip: rect(36px, 9999px, 9px, 0)
    }
    25% {
        clip: rect(25px, 9999px, 99px, 0)
    }
    50% {
        clip: rect(50px, 9999px, 102px, 0)
    }
    75% {
        clip: rect(30px, 9999px, 92px, 0)
    }
    100% {
        clip: rect(91px, 9999px, 98px, 0)
    }
}

@keyframes glitch-loop-1 {
    0% {
        clip: rect(36px, 9999px, 9px, 0)
    }
    25% {
        clip: rect(25px, 9999px, 99px, 0)
    }
    50% {
        clip: rect(50px, 9999px, 102px, 0)
    }
    75% {
        clip: rect(30px, 9999px, 92px, 0)
    }
    100% {
        clip: rect(91px, 9999px, 98px, 0)
    }
}

@-webkit-keyframes glitch-loop-2 {
    0% {
        top: -1px;
        left: 1px;
        clip: rect(65px, 9999px, 119px, 0)
    }
    25% {
        top: -6px;
        left: 4px;
        clip: rect(79px, 9999px, 19px, 0)
    }
    50% {
        top: -3px;
        left: 2px;
        clip: rect(68px, 9999px, 11px, 0)
    }
    75% {
        top: 0;
        left: -4px;
        clip: rect(95px, 9999px, 53px, 0)
    }
    100% {
        top: -1px;
        left: -1px;
        clip: rect(31px, 9999px, 149px, 0)
    }
}

@keyframes glitch-loop-2 {
    0% {
        top: -1px;
        left: 1px;
        clip: rect(65px, 9999px, 119px, 0)
    }
    25% {
        top: -6px;
        left: 4px;
        clip: rect(79px, 9999px, 19px, 0)
    }
    50% {
        top: -3px;
        left: 2px;
        clip: rect(68px, 9999px, 11px, 0)
    }
    75% {
        top: 0;
        left: -4px;
        clip: rect(95px, 9999px, 53px, 0)
    }
    100% {
        top: -1px;
        left: -1px;
        clip: rect(31px, 9999px, 149px, 0)
    }
}

.header-info {
    width: 100%;
    margin: auto;
    font-size: 16px;
    color: #eaeadf;
    background: rgba(0, 0, 0, .5);
    padding: 15px;
    margin-top: 22px;
    letter-spacing: 0;
    line-height: 30px;
    border-radius: 10px;
    box-sizing: initial;
    white-space: nowrap;
}

.header-info:before {
    content: "";
    position: absolute;
    top: 98px;
    left: 20%;
    margin-left: -15px;
    border-width: 15px;
    border-style: solid;
    border-color: transparent transparent rgba(0, 0, 0, .5) transparent;
}

.header-info p {
    margin: 0;
    font-family: 'Ubuntu', sans-serif;
    font-weight: 700;
}

.top-social_v2 {
    height: 35px;
    margin-bottom: -15px;
    margin-left: 10px;
    list-style: none;
    display: inline-block;
}

.top-social_v2 li {
    float: left;
    margin-right: 13px;
}

.top-social_v2 img {
    height: 30px;
    width: 30px;
    padding: 6px;
    background: 0 0;
}

.flipx {
    -moz-transform: scaleX(-1);
    -webkit-transform: scaleX(-1);
    -o-transform: scaleX(-1);
    transform: scaleX(-1);
}

/*波浪特效*/
.wave {
    position: absolute;
    height: 110px;
    width: 100%;
    overflow: hidden;
    bottom: 0;
    z-index: 99;
}

.wave #banner_wave_1, .wave #banner_wave_2 {
    position: absolute;
    width: 200%;
    height: 100%;
    background-size: 50% 100%;

}

.wave #banner_wave_1 {
    top: 20px;
    left: -100%;
    opacity: 1;
    animation: water-right 20s infinite linear;
    background: url(https://img2018.cnblogs.com/blog/1646268/201908/1646268-20190807133952249-1243696775.png) repeat-x;
}

.wave #banner_wave_2 {
    top: 30px;
    left: 0;
    opacity: 1;
    animation: water-left 30s infinite linear;
    background: url(https://img2018.cnblogs.com/blog/1646268/201908/1646268-20190807133945197-1434861417.png) repeat-x;
}

@keyframes water-right {
    0% {
        transform: translateX(0) translateZ(0) scaleY(1)
    }
    50% {
        transform: translateX(25%) translateZ(0) scaleY(0.85)
    }
    100% {
        transform: translateX(50%) translateZ(0) scaleY(1)
    }
}

@keyframes water-left {
    from {
        transform: translate(0%, 0px);
    }
    to {
        transform: translate(-50%, 0px);
    }
}

/*阅读页样式*/
/*头图*/
.pattern-center {
    position: relative;
    top: 0;
    left: 0;
    width: 100%;
    overflow: hidden;
}

.pattern-center:before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
}

.pattern-attachment-img {
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
    background-origin: border-box;
    width: 100%;
    height: 500px;
}

.pattern-center header.pattern-header {
    position: absolute;
    top: 45%;
    left: 0;
    right: 0;
    text-align: center;
    color: #fff;
    text-shadow: 2px 2px 10px #000;
    z-index: 1;
}

.pattern-center h1.cat-title, .pattern-center h1.entry-title {
    color: #fff;
    font-size: 40px;
    font-weight: 500;
    width: 80%;
    margin: auto;
    padding: 0;
    border: 0;
}

.pattern-center:after {
    content: '';
    width: 150%;
    height: 4.375rem;
    background: #fff;
    left: -25%;
    bottom: -2.875rem;
    border-radius: 100%;
    position: absolute;
}

/*随笔页样式*/
.single-center:after {
    display: none
}

header.single-header {
    max-width: 800px;
    padding: 0 10px;
    margin-left: auto;
    margin-right: auto;
    text-align: left !important;
    top: auto !important;
    bottom: 20px
}

.single-center .single-header h1.entry-title {
    margin: 0;
    font-size: 32px;
    width: 100%
}

.single-center .entry-census {
    color: #fff;
    font-size: 14px;
    padding: 18px 0 0;
    line-height: 39px
}

.single-center .entry-census .bull {
    margin: 0 5px
}

.single-center .entry-census span img {
    width: 35px;
    height: 35px;
    border-radius: 100%;
    float: left;
    margin-right: 12px
}

.single-center .entry-census a {
    color: #fff
}

@media (max-width: 860px) {
    .pattern-center-sakura header.single-header {
        padding: 0 4%
    }

    .pattern-attachment-img {
        height: 280px
    }

    .pattern-center-sakura h1.cat-title, .pattern-center-sakura h1.entry-title, .single-center .single-header h1.entry-title {
        font-size: 26px
    }
}

/*回到顶部动画*/
.cd-top {
    position: fixed;
    left: 25px;
    top: -900px;
    z-index: 99;
    width: 70px;
    height: 900px;
    background: url(https://img2018.cnblogs.com/blog/1646268/201908/1646268-20190808095655186-266655888.png) no-repeat center;
    background-size: contain;
    -webkit-transition: all .5s ease-in-out;
    transition: all .5s ease-in-out;
    opacity: 1
}

.cd-top.cd-is-visible {
    opacity: 1;
    top: -326px
}

.cd-top.cd-fade-out {
    opacity: 1
}

.cd-top:hover {
    opacity: 1
}

.cd-top span {
    display: none;
    color: #000;
    position: absolute;
    bottom: 0;
    height: 20px;
    width: 50px;
    text-align: center
}

@media screen and (max-width: 860px) {
    .cd-top {
        display: none;
        height: 60px;
        width: 50px
    }

    .cd-top span {
        height: 10px;
        width: 50px
    }
}

.faa-parent.animated-hover:hover > .faa-spin, .faa-spin.animated, .faa-spin.animated-hover:hover {
    -webkit-animation: spin 1.5s linear infinite;
    animation: spin 1.5s linear infinite
}

.faa-parent.animated-hover:hover > .faa-spin.faa-fast, .faa-spin.animated-hover.faa-fast:hover, .faa-spin.animated.faa-fast {
    -webkit-animation: spin .7s linear infinite;
    animation: spin .7s linear infinite
}

.faa-parent.animated-hover:hover > .faa-spin.faa-slow, .faa-spin.animated-hover.faa-slow:hover, .faa-spin.animated.faa-slow {
    -webkit-animation: spin 2.2s linear infinite;
    animation: spin 2.2s linear infinite
}

@-webkit-keyframes float {
    0% {
        -webkit-transform: translateY(0);
        transform: translateY(0)
    }
    50% {
        -webkit-transform: translateY(-6px);
        transform: translateY(-6px)
    }
    100% {
        -webkit-transform: translateY(0);
        transform: translateY(0)
    }
}

@keyframes float {
    0% {
        -webkit-transform: translateY(0);
        -ms-transform: translateY(0);
        transform: translateY(0)
    }
    50% {
        -webkit-transform: translateY(-6px);
        -ms-transform: translateY(-6px);
        transform: translateY(-6px)
    }
    100% {
        -webkit-transform: translateY(0);
        -ms-transform: translateY(0);
        transform: translateY(0)
    }
}

.faa-float.animated, .faa-float.animated-hover:hover, .faa-parent.animated-hover:hover > .faa-float {
    -webkit-animation: float 2s linear infinite;
    animation: float 2s linear infinite
}

.faa-float.animated-hover.faa-fast:hover, .faa-float.animated.faa-fast, .faa-parent.animated-hover:hover > .faa-float.faa-fast {
    -webkit-animation: float 1s linear infinite;
    animation: float 1s linear infinite
}

.faa-float.animated-hover.faa-slow:hover, .faa-float.animated.faa-slow, .faa-parent.animated-hover:hover > .faa-float.faa-slow {
    -webkit-animation: float 3s linear infinite;
    animation: float 3s linear infinite
}

/*随笔列表*/
.day {
    display: none;
}
.notice, .top-feature, .post-list-thumb, .post-list, .comments {
    animation: main .6s
}

@keyframes main {
    0% {
        opacity: 0;
        transform: translateY(50px)
    }
    100% {
        opacity: 1;
        transform: translateY(0)
    }
}
.post-list-thumb {
    float: left;
    width: 100%;
    height: 300px;
    position: relative;
    margin: 20px 0 20px;
    border-radius: 10px;
    background-color: rgba(255, 255, 255, 0);
    box-shadow: 0 1px 20px -6px rgba(0, 0, 0, .5);
    transition: box-shadow .3s ease
}

@media (min-width: 860px) {
    .post-list-thumb:hover {
        box-shadow: 0 5px 10px 5px rgba(110, 110, 110, .4)
    }
}

@media (max-width: 860px) {
    .post-list-thumb {
        margin: 0;
        height: auto
    }
}

.post-list-thumb i {
    margin-right: 5px;
    color: #989898;
    font-size: 14px
}

.post-list-thumb a {
    color: #504e4e
}

.post-content .post-title {
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    word-wrap: break-word;
    font-size: 18px;
    margin: 15px 0;
    font-weight: 600
}

.postTitle2 {
    text-decoration: none;
}

.post-date, .post-meta, .post-meta a {
    color: #888;
    font-size: 12px
}

.comments-number {
    margin: 0 10px
}

.post-thumb {
    position: relative;
    float: right;
    width: 55%
}

.post-thumb a {
    height: 300px;
    position: absolute;
    display: block;
    background-repeat: no-repeat;
    background-size: cover;
    overflow: hidden;
    border-radius: 0 10px 10px 0
}

.post-thumb a img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    pointer-events: none;
    transition: all .6s
}

.post-list-thumb:hover img {
    transform: scale(1.1)
}

.post-content-wrap {
    position: relative;
    display: inline-block;
    float: left;
    padding-right: 30px;
    padding-left: 0;
    width: 36%;
    margin: 20px 30px 0
}

.float-content {
    position: relative;
    width: 100%;
    right: 0;
    margin: 0;
    padding: 0;
    z-index: 50;
    color: rgba(0, 0, 0, .66)
}

.float-content .post-text {
    display: inline-block;
    text-align: justify;
    font-size: 14px
}

.float-content i {
    font-size: 25px;
    color: #666;
    margin-right: 20px
}

.float-content p {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 5;
    height: 67.5px;
    overflow: hidden;
    margin: 20px 0px 40px;
    line-height: 25px;
}

/*图片在左侧*/
.post-list-thumb-left .post-content-wrap {
    float: right;
    padding-left: 30px;
    padding-right: 0;
    text-align: right;
    margin: 20px 10px 10px 0
}

.post-list-thumb-left .post-thumb {
    float: left
}

.post-list-thumb-left .post-thumb a {
    border-radius: 10px 0 0 10px
}

@media (max-width: 768px) {
    .float-content p {
        height: auto;
        display: block
    }

    .post-bottom {
        display: none
    }

    .post-list-thumb {
        padding: 0;
        border: 0;
        box-shadow: none
    }

    .post-thumb, .post-content-wrap, .float-content {
        width: 100%;
        left: 0
    }

    .post-content-wrap, .post-list-thumb-left .post-content-wrap {
        text-align: left;
        margin: 0;
        padding: 20px;
        float: none;
        box-shadow: none;
        border-top: 0
    }

    .post-list-thumb:before {
        content: '';
        width: 1px;
        height: 100px;
        background-color: rgba(0, 0, 0, 0);
        position: absolute;
        left: 0;
        right: 0;
        margin: auto;
        bottom: -101px;
        z-index: 0
    }

    .float-content {
        box-shadow: none;
        padding: 0;
        margin: 0
    }

    .post-bottom {
        text-align: right
    }

    .post-list-thumb-left .post-thumb a, .post-thumb a {
        border-radius: 10px
    }
}

@media (max-width: 600px) {
    .post-thumb a {
        height: 210px
    }

    .float-content .post-text {
        font-size: 13px;
        margin-bottom: 1em
    }
}

.post-list-show {
    animation: post-list-show .5s;
    -webkit-animation: post-list-show .5s;
    opacity: 1
}

@keyframes post-list-show {
    0% {
        opacity: 0;
        -webkit-transform: translateY(80px);
        transform: translateY(80px)
    }
    100% {
        opacity: 1;
        -webkit-transform: translateY(0);
        transform: translateY(0)
    }
}
/*notice*/
.notice {
    padding: 20px 0px 20px 20px;
    border: 1px dashed #e6e6e6;
    color: #969696;
    position: relative;
    display: inline-block;
    width: 780px;
    background: #fbfbfb50;
    border-radius: 10px;
    font-size: 15px;
}

.notice i {
    float: left;
    color: #999;
    font-size: 18px;
    padding-right: 10px
}

.notice-content {
    display: initial;
    vertical-align: middle
}

@media (max-width: 860px) {
    .notice {
        margin-top: 40px;
        margin-bottom: 20px
    }
}
/*myHeart*/
.myheart {
    color: red;
    font-size: 35px;
}

.throb:before {
    font-style: normal;
    font-weight: normal;
    speak: none;
    display: inline-block;
    text-decoration: inherit;
    width: 1em;

    text-align: center;
    font-variant: normal;
    text-transform: none;
    line-height: 1em;

    -webkit-animation-name: scaleDraw; /*关键帧名称*/
    -webkit-animation-timing-function: ease-in-out; /*动画的速度曲线*/
    -webkit-animation-iteration-count: infinite; /*动画播放的次数*/
    -webkit-animation-duration: 5s; /*动画所花费的时间*/

}

@keyframes scaleDraw { /*定义关键帧、scaleDrew是需要绑定到选择器的关键帧名称*/
    0% {
        transform: scale(1); /*开始为原始大小*/
    }
    25% {
        transform: scale(1.5); /*放大1.1倍*/
    }
    50% {
        transform: scale(1);
    }
    75% {
        transform: scale(1.5);
    }
}
/*标签ui*/
#navigator li ul {
    display: none;
    opacity: 1;
    position: absolute;
    background: #fff;
    padding: 10px;
    top: 46px;
    right: -13px;
    width: 60px;
    text-align: center;
    z-index: 9999;
    border-radius: 5px;
    box-shadow: 0 1px 40px -8px rgba(0, 0, 0, .5);
    -webkit-animation: fadeInUp .3s .1s ease both;
    -moz-animation: fadeInUp .3s .1s ease both
}

#navigator li ul:before {
    content: "";
    position: absolute;
    top: -20px;
    left: 50%;
    margin-left: -10px;
    border-width: 10px;
    border-style: solid;
    border-color: transparent transparent #fff
}

@-webkit-keyframes fadeInUp {
    0% {
        opacity: 0;
        -webkit-transform: translateY(10px)
    }
    100% {
        opacity: 1;
        -webkit-transform: translateY(0)
    }
}

@-moz-keyframes fadeInUp {
    0% {
        opacity: 0;
        -moz-transform: translateY(10px)
    }
    100% {
        opacity: 1;
        -moz-transform: translateY(0)
    }
}

#navigator li:hover ul {
    display: inline-block;
    -webkit-transition: all .4s;
    transition: all .4s
}

#navigator li ul li {
    width: 100%;
    margin: 0;
    -webkit-transition: all 1s ease;
}
.sub-menu {
    top: 70px!important;
}
.sub-menu a {
    padding: 10px 0!important;
}
.sub-menu i {
    width: 20%!important;
    margin-left: -20px;
}
.sub-menu .iconfont {
    font-size: 22px;
}

/*滚动条总进度*/
.scrollCls {
    position: fixed;
    top: 0;
    height: 3px;
    background: orange;
    transiton-property: width,background;
    transition-duration: 1s,1s;
    z-index: 99999;
}

/*aplayer*/
/*.ap {*/
/*left: -66px!important;*/
/*}*/
/*.ap:hover {*/
/*left: 0px!important;*/
/*}*/
/*赞赏*/
.esa-sponsor {
    position: relative;
    width: 100%;
    height: 160px
}

.esa-sponsor .posa {
    position: absolute
}

.esa-sponsor .tr3 {
    transition: all .3s
}

.esa-sponsor .blur {
    -webkit-filter: blur(3px);
    filter: blur(3px)
}

.esa-sponsor .text {
    position: absolute;
    left: calc(50% - 120px);
    top: calc(50% - 60px);
    font-size: 12px;
    width: 70px;
    height: 70px;
    line-height: 70px;
    color: #fff;
    background: #ffd886 url(http://images.cnblogs.com/cnblogs_com/esofar/1504962/o_like.png) no-repeat center 10px;
    background-size: 20px;
    border-radius: 35px;
    text-align: center;
    z-index: -1;
    transform: rotatez(-15deg)
}

.esa-sponsor .github {
    position: absolute;
    left: calc(50% + 135px);
    top: calc(50% - 30px);
    width: 24px;
    height: 24px;
    background: no-repeat center center url(http://images.cnblogs.com/cnblogs_com/esofar/1504962/o_github.png);
    background-size: contain;
    opacity: .3;
    transform: rotatez(15deg)
}

.esa-sponsor .box {
    left: calc(50% - 150px);
    top: calc(50% - 15px);
    background-color: #fff;
    border: 1px solid #ddd;
    border-radius: 6px;
    width: 299px;
    height: 28px;
    float: left;
    z-index: 1;
    margin-left: 0
}

.esa-sponsor .box li {
    width: 99px;
    float: left;
    margin: 0 !important;
    text-align: center;
    border-left: 1px solid #ddd;
    background: no-repeat center center;
    background-color: rgba(204, 217, 220, .1);
    background-size: 45px;
    transition: all .3s;
    cursor: pointer;
    overflow: hidden;
    line-height: 600px;
    height: 28px;
    -webkit-filter: grayscale(1);
    filter: grayscale(1);
    opacity: .5;
    list-style: none;
    list-style-type: none;
    margin: 0;
    padding: 0
}

.esa-sponsor .box li:hover {
    background-color: rgba(204, 217, 220, .3);
    -webkit-filter: grayscale(0);
    filter: grayscale(0);
    opacity: 1
}

.esa-sponsor .box li:first-child {
    border-width: 0
}

.esa-sponsor .box li a {
    display: block
}

.esa-sponsor .box .paypal {
    background-image: url(http://images.cnblogs.com/cnblogs_com/esofar/1504962/o_paypal.png)
}

.esa-sponsor .box .alipay {
    background-image: url(http://images.cnblogs.com/cnblogs_com/esofar/1504962/o_alipay.png)
}

.esa-sponsor .box .wechat {
    background-image: url(http://images.cnblogs.com/cnblogs_com/esofar/1504962/o_wechat.png)
}

.esa-sponsor #QRBox {
    top: 0;
    left: 0;
    z-index: 1;
    background-color: rgba(255, 255, 255, .3);
    display: none;
    perspective: 400px;
    width: 100%;
    height: 100%
}

.esa-sponsor #QRBox #MainBox {
    cursor: pointer;
    position: absolute;
    text-align: center;
    width: 200px;
    height: 200px;
    left: calc(50% - 100px);
    top: calc(50% - 100px);
    background: #fff no-repeat center center;
    background-size: 190px;
    border-radius: 6px;
    box-shadow: 0 2px 7px rgba(0, 0, 0, .3);
    opacity: 0;
    transition: all 1s ease-in-out;
    transform-style: preserve-3d;
    transform-origin: center center;
    overflow: hidden
}

.esa-sponsor #MainBox.showQR {
    opacity: 1;
    animation-name: showQR;
    animation-duration: 3s;
    animation-timing-function: ease-in-out;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
    -webkit-animation: showQR 3s ease-in-out 0s 1 normal forwards
}

@keyframes showQR {
    from {
        transform: rotateX(90deg)
    }
    8% {
        opacity: 1;
        transform: rotateX(-60deg)
    }
    18% {
        opacity: 1;
        transform: rotateX(40deg)
    }
    34% {
        opacity: 1;
        transform: rotateX(-28deg)
    }
    44% {
        opacity: 1;
        transform: rotateX(18deg)
    }
    58% {
        opacity: 1;
        transform: rotateX(-12deg)
    }
    72% {
        opacity: 1;
        transform: rotateX(9deg)
    }
    88% {
        opacity: 1;
        transform: rotateX(-5deg)
    }
    96% {
        opacity: 1;
        transform: rotateX(2deg)
    }
    to {
        opacity: 1
    }
}

.esa-sponsor #MainBox.hideQR {
    opacity: 1;
    animation-name: hideQR;
    animation-duration: .5s;
    animation-timing-function: ease-in-out;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
    -webkit-animation: hideQR .5s ease-in-out 0s 1 normal forwards
}

@keyframes hideQR {
    20%, 50% {
        transform: scale(1.08, 1.08);
        opacity: 1
    }
    to {
        opacity: 0;
        transform: rotateZ(40deg) scale(.6, .6)
    }
}

侧边栏

<link rel="stylesheet" href="//at.alicdn.com/t/font_1346053_111ghkv8md9.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/font-awesome/css/font-awesome.min.css">
<script src="https://blog-static.cnblogs.com/files/blogs/760679/main.js?t=1659155257"></script>
<script type="text/javascript">
    $.silence({
        profile: {
            enable: true,
            avatar: 'https://img2018.cnblogs.com/blog/1646268/201907/1646268-20190701151456277-1502609418.jpg',
            favicon: 'https://www.cnblogs.com/zychh/',
            notice: 'just do it。'
        },
        catalog: {
            enable: true,
            move: true,
            index: true,
            level1: 'h2',
            level2: 'h3',
            level3: 'h4',
        },
        signature: {
            enable: true,
            home: 'https://www.luogu.com.cn/user/536191',
            license: 'CC BY 4.0',
            link: 'https://www.luogu.com.cn/user/536191'
        },
        sponsor: {
            enable: true,
            paypal: null,
            wechat: 'https://www.luogu.com.cn/user/536191',
            alipay: 'https://www.luogu.com.cn/user/536191'
        },
        github: {
            enable: false,
            color: '#fff',
            fill: '#FF85B8',
            link: 'https://www.luogu.com.cn/user/536191'
        },
	topImg: {
		homeTopImg: [
"https://pic.imgdb.cn/item/62d781c7f54cd3f9378e3b1b.jpg",
		"https://pic.imgdb.cn/item/62d781c3f54cd3f9378e1fb3.jpg",
		"https://pic.imgdb.cn/item/62d7819ef54cd3f9378d5ff7.jpg",
		"https://pic.imgdb.cn/item/62d7819df54cd3f9378d5b5e.jpg",
		"https://pic.imgdb.cn/item/62d78198f54cd3f9378d416d.jpg",
		"https://pic.imgdb.cn/item/62d78198f54cd3f9378d3f32.jpg",
		"https://pic.imgdb.cn/item/62d78196f54cd3f9378d37a3.png",
		"https://pic.imgdb.cn/item/62d7f4c4f54cd3f937cf26ad.jpg",
		"https://pic.imgdb.cn/item/62d73f13f54cd3f93797d723.jpg",
		"https://pic.imgdb.cn/item/62da08e2f54cd3f937f2ba14.jpg",
        "https://pic.imgdb.cn/item/62e499fef54cd3f9374e05ca.jpg",
        "https://pic.imgdb.cn/item/62e499fff54cd3f9374e08ce.jpg",
        "https://pic.imgdb.cn/item/62e49a00f54cd3f9374e0e69.jpg",
        "https://img2018.cnblogs.com/blog/1646268/201908/1646268-20190806172418911-2037584311.jpg",
        "https://pic.imgdb.cn/item/62e4ad54f54cd3f937bbfa9f.jpg",
        "https://pic.imgdb.cn/item/62e4ae36f54cd3f937c11af4.jpg",
					],
              notHomeTopImg: [
"https://pic.imgdb.cn/item/62d781c7f54cd3f9378e3b1b.jpg",
		"https://pic.imgdb.cn/item/62d781c3f54cd3f9378e1fb3.jpg",
		"https://pic.imgdb.cn/item/62d7819ef54cd3f9378d5ff7.jpg",
		"https://pic.imgdb.cn/item/62d7819df54cd3f9378d5b5e.jpg",
		"https://pic.imgdb.cn/item/62d78198f54cd3f9378d416d.jpg",
		"https://pic.imgdb.cn/item/62d78198f54cd3f9378d3f32.jpg",
		"https://pic.imgdb.cn/item/62d78196f54cd3f9378d37a3.png",
		"https://pic.imgdb.cn/item/62d7f4c4f54cd3f937cf26ad.jpg",
		"https://pic.imgdb.cn/item/62d73f13f54cd3f93797d723.jpg",
		"https://pic.imgdb.cn/item/62da08e2f54cd3f937f2ba14.jpg",
        "https://pic.imgdb.cn/item/62e499fef54cd3f9374e05ca.jpg",
        "https://pic.imgdb.cn/item/62e499fff54cd3f9374e08ce.jpg",
        "https://pic.imgdb.cn/item/62e49a00f54cd3f9374e0e69.jpg",
        "https://img2018.cnblogs.com/blog/1646268/201908/1646268-20190806172418911-2037584311.jpg",
        "https://pic.imgdb.cn/item/62e4ad54f54cd3f937bbfa9f.jpg",
        "https://pic.imgdb.cn/item/62e4ae36f54cd3f937c11af4.jpg",

					]
		},
                      topInfo: {
					title: 'Hi, ZYC!',
                    text: 'never give up',
					github: "https://www.luogu.com.cn/user/536191",
					weibo: "https://www.luogu.com.cn/user/536191",
					telegram: "",
					music: "https://www.luogu.com.cn/user/536191",
					twitter: "",
					zhihu:"https://www.luogu.com.cn/user/536191",
					mail: "https://www.luogu.com.cn/user/536191",
				}
    });
</script>

<!--倒计时-->
<div id="showsectime"></div>

<script type="text/javascript">
function NewDate(str) { 
str = str.split('-'); 
var date = new Date(); 
date.setUTCFullYear(str[0], str[1] - 1, str[2]); 
date.setUTCHours(0, 0, 0, 0); 
return date; 
} 
function showsectime() {
var birthDay =NewDate("2017-08-23");
var today=new Date();
var timeold=today.getTime()-birthDay.getTime();
var sectimeold=timeold/1000
var secondsold=Math.floor(sectimeold);
var msPerDay=24*60*60*1000; var e_daysold=timeold/msPerDay;
var daysold=Math.floor(e_daysold);
var e_hrsold=(daysold-e_daysold)*-24;
var hrsold=Math.floor(e_hrsold);
var e_minsold=(hrsold-e_hrsold)*-60;
var minsold=Math.floor((hrsold-e_hrsold)*-60); var seconds=Math.floor((minsold-e_minsold)*-60).toString();
document.getElementById("showsectime").innerHTML = daysold+"天"+hrsold+"小时"+minsold+"分"+seconds+"秒";
setTimeout(showsectime, 1000);
}showsectime();
</script>
<!--倒计时end-->

页尾

<!--live2d-->
<script src="https://blog-static.cnblogs.com/files/zouwangblog/autoload.js"></script>
<!--live2dend-->

<!--放大图片-->
<link rel="stylesheet" type="text/css" href="https://blog-static.cnblogs.com/files/zouwangblog/zoom.css">
<script src="https://cdn.bootcss.com/jquery/1.8.3/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/bootstrap/3.2.0/js/transition.js"></script>
<script src="https://blog-static.cnblogs.com/files/zouwangblog/zoom.js"></script>
<script type='text/javascript'>$('#cnblogs_post_body img').attr('data-action', 'zoom');</script>
<!--放大图片end-->

<!--鼠标特效-->
<script src="https://blog-static.cnblogs.com/files/zouwangblog/mouse-click.js"></script>
<canvas width="1777" height="841" style="position: fixed; left: 0px; top: 0px; z-index: 2147483647; pointer-events: none;"></canvas>
<!--鼠标特效 end-->


<!-- Music-->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/aplayer@1.10.0/dist/APlayer.min.css">
<script src="https://blog-static.cnblogs.com/files/zouwangblog/APlayer.min.js"></script>
<script src="https://unpkg.com/meting@1.2/dist/Meting.min.js"></script>
<div id="player" class="aplayer aplayer-withlist aplayer-fixed" data-id="2878443703" data-server="netease" data-type="playlist" data-order="random" data-fixed="true" data-listfolded="true" data-theme="orange"></div>
<!-- Music end -->


<!--雪花特效1&12月自动添加-->

<div class="Snow">
    <canvas id="Snow"></canvas>
</div>
<script src="https://blog-static.cnblogs.com/files/zouwangblog/xue.js"></script>


<!--顶部加载条-->
<link rel="stylesheet" href="https://blog-static.cnblogs.com/files/zouwangblog/nprogress.css">
<script src="https://blog-static.cnblogs.com/files/zouwangblog/nprogress.js"></script>
<script>
NProgress.start();
NProgress.done();
</script>

上传文件main

在设置——文件中上传，得到你的main.js的链接，将侧边栏第三行的链接改成自己的

(function ($) {
	$.extend({
		silence: (options) => {
			var silence = new Silence();
			silence.init(options);
		}
	});

	class Silence {
		constructor() {
			this.defaluts = {
				profile: {
					enable: false,
					avatar: null,
					favicon: null,
				},
				catalog: {
					enable: false,
					move: true,
					index: true,
					level1: 'h2',
					level2: 'h3',
					level3: 'h4',
				},
				signature: {
					author: null,
					enable: false,
					home: 'https://www.cnblogs.com',
					license: 'CC BY 4.0',
					link: 'https://creativecommons.org/licenses/by/4.0'
				},
				sponsor: {
					enable: true,
					paypal: null,
					wechat: 'https://www.cnblogs.com/images/cnblogs_com/zouwangblog/1477590/t_%e5%be%ae%e4%bf%a1%e5%9b%be%e7%89%87_20190704175553.png',
					alipay: 'https://www.cnblogs.com/images/cnblogs_com/zouwangblog/1477590/t_%e5%be%ae%e4%bf%a1%e5%9b%be%e7%89%87_20190704174158.png'
				},
				github: {
					enable: false,
					color: '#fff',
					fill: null,
					link: null,
				},
				topImg: {
					homeTopImg: [
						"https://img2018.cnblogs.com/blog/1646268/201908/1646268-20190806172418911-2037584311.jpg",
					],
					notHomeTopImg: [
						"https://img2018.cnblogs.com/blog/1646268/201908/1646268-20190806172418911-2037584311.jpg"
					]
				},
				topInfo: {
					title: 'Hi,ZYC',
					text: 'never give up.',
					github: "",
					weibo: "",
					telegram: "",
					music: "",
					twitter: "",
					zhihu: "",
					mail: "",
				}
			};

			this.version = '1.0.0';
		}

		get cnblogs() {
			return {
				header: '#header',
				blogTitle: '#blogTitle',
				publicProfile: '#profile_block',
				navigator: '#navigator',
				navList: '#navList',
				sideBar: '#sideBar',
				sideBarMain: '#sideBarMain',
				forFlow: '.forFlow',
				postTitle: '#cb_post_title_url',
				postDetail: '#post_detail',
				postBody: '#cnblogs_post_body',
				postDigg: '#div_digg',
				postCommentBody: '.blog_comment_body',
				feedbackContent: '.feedbackCon',
				postSignature: '#MySignature',
				footer: '#footer',
			};
		}

		get isPostPage() {
			return $(this.cnblogs.postDetail).length > 0;
		}

		/**
		 * 初始化
		 * @param {Object} options 全局配置选项
		 */
		init(options) {
			if (options) {
				$.extend(true, this.defaluts, options);
			}
			this.buildCustomElements();
			this.buildGithubCorner();
			this.buildCopyright();
			this.buildBloggerProfile();
			this.getMainMode();
			this.buildToolbar();
			if (this.isPostPage) {
				this.postHeader();
				this.goIntoReadingMode();
				this.buildPostCatalog();
				this.buildPostCodeCopyBtns();
				this.buildPostSignature();
				this.buildPostFavoriteBtn();
				this.buildPostSponsor();
				this.buildPostCommentAvatars();
				this.setNotHomeTopImg();
			} else {
				this.mainHeader();
				this.goIntoNormalMode();
				this.homeImg();
				this.setHomeSuiBiList();
			}
			this.scrollDy();
		}

		/**
		 * 消息弹窗
		 * @param {String} content 消息内容
		 */
		showMessage(content) {
			$('body').prepend(`<div class="esa-layer"><span class="esa-layer-content">${content}</span></div>`);
			let $layer = $('.esa-layer');
			$layer.fadeIn(200);
			setTimeout(() => {
				$layer.remove();
			}, 2000);
		}

		/**
		 * 通用模式设置
		 */
		getMainMode() {
			$('.site-branding').hover(function () {
				$('.logolink .sakuraso').css({
					'background-color': '#FE9600',
					'color': '#fff'
				})
				$('.chinese-font').css('display', 'block')
			}, function () {
				$('.logolink .sakuraso').css({
					'background-color': 'rgba(255,255,255,.5)',
					'color': '#464646'
				})
				$('.chinese-font').css('display', 'none')
			});
			<!--离开页面改变title-->
			var time;
			var normar_title = document.title;
			document.addEventListener('visibilitychange', function () {
				if (document.visibilityState == 'hidden') {
					clearTimeout(time);
					document.title = '桥豆麻袋(＃°Д°)';
				} else {
					document.title = '你终于回来了(。・∀・)ノ';
					time = setTimeout(function () {
						document.title = normar_title;
					}, 3000);

				}
			});
		}

		/**
		 * 进入阅读模式
		 */
		goIntoReadingMode() {
			let $win = $(window);
			let _that = this;
			if ($win.width() > 767) {
				$(_that.cnblogs.header).css('opacity', '1');
				$('#header #navList').css('margin-left', '0px');
				//修改文章布局
				$('#main').css({'margin': '0 auto', 'padding': '0 10px', 'min-width': '950px'});
			}
		}

		/**
		 * 进入正常模式
		 */
		goIntoNormalMode() {
			let $win = $(window);
			let _that = this;
			var oldScrollY = 0;
			if ($win.width() > 767) {
				$('#main').css({'min-width': '800px'});
				//鼠标悬浮判断，如果页面不是位于顶部则head不消失
				$(_that.cnblogs.header).hover(function () {
					$(_that.cnblogs.header).css('opacity', '1');
					$('#header #navList').css('margin-left', '0px');
				}, function () {
					if ($(document).scrollTop() > 0) {
						$(_that.cnblogs.header).css('opacity', '1');
						$('#header #navList').css('margin-left', '0px');
					} else {
						$(_that.cnblogs.header).css('opacity', '0');
						$('#header #navList').css('margin-left', '100px');
					}

				})
				//鼠标悬浮logo判断
				$('.site-branding').hover(function () {
					$(_that.cnblogs.header).css('opacity', '1');
					$('#header #navList').css('margin-left', '0px');
				}, function () {
					if ($(document).scrollTop() > 0) {
						$(_that.cnblogs.header).css('opacity', '1');
						$('#header #navList').css('margin-left', '0px');
					} else {
						$(_that.cnblogs.header).css('opacity', '0');
						$('#header #navList').css('margin-left', '100px');
					}

				})
				//页面滚动判断
				$win.scroll(function () {
					oldScrollY = this.scrollY;
					if (oldScrollY > 0) {
						$(_that.cnblogs.header).css('opacity', '1');
						$('#header #navList').css('margin-left', '0px');
					} else {
						$(_that.cnblogs.header).css('opacity', '0');
						$('#header #navList').css('margin-left', '100px');
					}
				});
			}
		}

		/**
		 * 构建自定义 DOM 元素
		 */
		buildCustomElements() {
			// Change page title.
			const blogTitle = $(this.cnblogs.blogTitle).find('h1 a').html();
			const autherName = $(this.cnblogs.publicProfile).find('a:eq(0)').html();
			let $title = $('head').find('title');
		    $title.html($title.html().replace(`雪 | ${autherName}`, `${blogTitle}`));

			// Build a tags button on navbar.
			let $navList = $(this.cnblogs.navList);
			$.each($navList.find('li'), (index, nav) => {
				$(nav).append('<i></i>');
			});

			// Build a menu button on mobile browser.
			$('body').prepend(`<div class="esa-mobile-menu"></div>`);
			$('.esa-mobile-menu').on('click', () => {
				$(this.cnblogs.navigator).fadeToggle(200);
			});

			//回到顶部特效
			$('body').prepend(`<a href="#" class="cd-top faa-float animated cd-fade-out"></a>`);
			let $win = $(window);
			let oldScrollY = 0;
			$win.scroll(function () {
				oldScrollY = this.scrollY;
				let height = window.innerHeight;
				let top = '-' + (900 - height + 80) + 'px';
				if (oldScrollY > 0) {
					$('.cd-top').css('top', top);
				} else {
					$('.cd-top').css('top', '-900px');
				}
			});


			$("#navList").append('<li><a id="blog_nav_myyoulian" class="menu" href="https://www.cnblogs.com/zychh/">友链</a><i></i></li><li><a id="blog_nav_myzanshang" class="menu" href="https://www.cnblogs.com/zychh/">赞赏</a><i></i></li><li><a id="blog_nav_myguanyu" class="menu" href="">关于</a><i></i></li>');
			//添加标签icon
			$('#blog_nav_myhome').prepend('<i class="fa fa-fort-awesome" aria-hidden="true"></i>');
			$('#blog_nav_contact').prepend('<i class="fa fa-address-book-o" aria-hidden="true"></i>');
			$('#blog_nav_rss').prepend('<i class="fa fa-rss faa-pulse" aria-hidden="true"></i>');
			$('#blog_nav_admin').prepend('<i class="fa fa-list" aria-hidden="true"></i>');
			$('#blog_nav_myyoulian').prepend('<i class="fa fa-link" aria-hidden="true"></i>');
			$('#blog_nav_myzanshang').prepend('<i class="fa fa-heart" aria-hidden="true"></i>');
			$('#blog_nav_myguanyu').prepend('<i class="fa fa-leaf" aria-hidden="true"></i>');

			//添加li内嵌ui
			let guanyu = '<ul class="sub-menu">' +
					'<li><a href="https://www.cnblogs.com/zychh/ "><i class="fa fa-meetup" aria-hidden="true"></i> 我？</a></li>' +
					'<li><a href="https://www.cnblogs.com/zychh/ "><i class="fa fa-area-chart" aria-hidden="true"></i> 统计</a></li>' +
					'<li><a href="https://www.cnblogs.com/zychh/ "><i class="fa fa-heartbeat" aria-hidden="true"></i> 监控</a></li>' +
					'<li><a href="https://www.cnblogs.com/zychh/"><i class="iconfont icon-taohua" aria-hidden="true"></i> 主题</a></li>' +
					'</ul>';
			$('#blog_nav_myguanyu').after(guanyu);

		}

		/**
		 * 构建主题版权信息
		 */
		buildCopyright() {
			//这里能保留么，算是我的一个小心愿。
			var content = `<div> Powered By <a href="https://www.cnblogs.com" target="_blank">Cnblogs</a> |
            Theme <a href="https://blog.csdn.net/zyc_____?spm=1001.2014.3001.5343" target="_blank">ZYC v${this.version}</a></div>`;
			$(this.cnblogs.footer).append(content);
		}

		/**
		 * 构建博客签名
		 */
		buildPostSignature() {
			const config = this.defaluts.signature;
			if (config.enable) {
				const postUrl = $(this.cnblogs.postTitle).attr('href');
				const authorName = config.author || $(this.cnblogs.publicProfile).find('a:eq(0)').html();

				const content =
						`<div class="esa-post-signature"> 
                    <p>作者：<a href="${config.home}">${authorName}</a></p> 
                    <p>出处：<a href="${postUrl}">${postUrl}</a></p> 
                    <p>本站使用「<a href="${config.link}"  target="_blank">${config.license}</a>」创作共享协议，转载请在文章明显位置注明作者及出处。</p> 
                </div>`;

				$(this.cnblogs.postSignature).html(content).show();
			}
		}

		/**
		 * 构建评论者头像
		 */
		buildPostCommentAvatars() {
			var builder = () => {
				$(this.cnblogs.postCommentBody).before(`<div class='esa-comment-avatar'><a target='_blank'><img /></a></div>`);
				let feedbackCon = $(this.cnblogs.feedbackContent);
				for (var i = 0; i < feedbackCon.length; i++) {
					let avatar = 'https://pic.cnblogs.com/face/sample_face.gif';
					let span = $(feedbackCon[i]).find("span:last")[0];
					if (span) {
						avatar = $(span).html().replace('http://', '//');
					}
					$(feedbackCon[i]).find(".esa-comment-avatar img").attr("src", avatar);
					let href = $(feedbackCon[i]).parent().find(".comment_date").next().attr("href");
					$(feedbackCon[i]).find(".esa-comment-avatar a").attr("href", href);
				}
			}
			if ($(this.cnblogs.postCommentBody).length) {
				builder();
			} else {
				let count = 1;
				// poll whether the feedbacks is loaded.
				let intervalId = setInterval(() => {
					if ($(this.cnblogs.postCommentBody).length) {
						clearInterval(intervalId);
						builder();
					}
					if (count == 10) {
						// no feedback.
						clearInterval(intervalId);
					}
					count++;
				}, 500);
			}
		}

		/**
		 * 构建赞赏模块
		 */
		buildPostSponsor() {
			const sponsor = this.defaluts.sponsor;
			const github = this.defaluts.github;
			const that = this;
			if (!sponsor.enable) {
				return;
			}

			$('#blog_post_info').prepend(`
            <div class="esa-sponsor">
                <a class="github" href="${github.enable ? github.link : 'https://github.com/Kaiyuan/donate-page'}" target="_blank" class="posa tr3" title="Github"></a>
                <div class="text tr3">${sponsor.text || 'Sponsor'}</div>
                <ul class="box posa tr3">
                    <li class="paypal">PayPal</li>
                    <li class="alipay">AliPay</li>
                    <li class="wechat">WeChat</li>
                </ul>
                <div id="QRBox" class="posa left-100">
                    <div id="MainBox"></div>
                </div>
            </div>`);

			const $sponsor = $('.esa-sponsor');
			const QRBox = $('#QRBox');
			const MainBox = $('#MainBox');

			function showQR(QR) {
				if (QR) {
					MainBox.css('background-image', 'url(' + QR + ')');
				}
				$sponsor.find('.text, .box, .github').addClass('blur');
				QRBox.fadeIn(300, function () {
					MainBox.addClass('showQR');
				});
			}

			$sponsor.find('.box>li').click(function () {
				var type = $(this).attr('class');
				if (type === 'paypal') {
					if (!sponsor.paypal) {
						return that.showMessage('博主忘记设置 PayPal 收款地址');
					}
					window.open(sponsor.paypal, '_blank');
				} else if (type === 'alipay') {
					if (!sponsor.alipay) {
						return that.showMessage('博主忘记设置支付宝收款二维码');
					}
					showQR(sponsor.alipay);
				} else if (type === 'wechat') {
					if (!sponsor.wechat) {
						return that.showMessage('博主忘记设置微信收款二维码');
					}
					showQR(sponsor.wechat);
				}
			});

			MainBox.click(function () {
				MainBox.removeClass('showQR').addClass('hideQR');
				setTimeout(function (a) {
					QRBox.fadeOut(300, function () {
						MainBox.removeClass('hideQR');
					});
					$sponsor.find('.text, .box, .github').removeClass('blur');
				}, 600);
			});
		}

		/**
		 * 构建收藏按钮
		 */
		buildPostFavoriteBtn() {
			let builder = () => {
				$(this.cnblogs.postDigg).prepend(`<div class="favorite" onclick="AddToWz(cb_entryId);return false;"><span class="favoritenum" id="favorite_count"></span></div>`);
			};

			if ($(this.cnblogs.postDigg).length) {
				builder();
			} else {
				let intervalId = setInterval(() => {
					if ($(this.cnblogs.postDigg).length) {
						clearInterval(intervalId);
						builder();
					}
				}, 200);
			}
		}

		/**
		 * 构建博客目录
		 */
		buildPostCatalog() {
			const config = this.defaluts.catalog;

			if (config.enable) {
				let levels = [config.level1, config.level2, config.level3];
				let $headers = $(this.cnblogs.postBody).find(levels.join(','));

				if (!$headers.length) {
					return false;
				}

				let $catalog = $(
						`<div class="esa-catalog">
                        <div class="esa-catalog-contents">
                            <div class="esa-catalog-title">目录</div>
                            <a class="esa-catalog-close">✕</a>
                        </div>
                    </div>`);

				let h1c = 0;
				let h2c = 0;
				let h3c = 0;

				let catalogContents = '<ul>';

				let cryptoObj = window.crypto || window.msCrypto; // for IE 11
				let eleIds = cryptoObj.getRandomValues(new Uint32Array($headers.length));

				$.each($headers, (index, header) => {
					const tagName = $(header)[0].tagName.toLowerCase();
					let titleIndex = '';
					let titleContent = $(header).html();
					let title = titleContent;
					if (!config.index) {
						switch (tagName) {
							case config.level1:
								titleContent = `<span class="level1">${titleContent}</span>`;
								break;
							case config.level2:
								titleContent = `<span class="level2">${titleContent}</span>`;
								break;
							case config.level3:
								titleContent = `<span class="level3">${titleContent}</span>`;
								break;
						}
					} else {
						if (tagName === config.level1) {
							h1c++;
							h2c = 0;
							h3c = 0;
							titleIndex = `<span class="level1">${h1c}. </span>`;
						} else if (tagName === config.level2) {
							h2c++;
							h3c = 0;
							titleIndex = `<span class="level2">${h1c}.${h2c}. </span>`;
						} else if (tagName === config.level3) {
							h3c++;
							titleIndex = `<span class="level3">${h1c}.${h2c}.${h3c}. </span>`;
						}
					}

					var idx = eleIds[index];

					catalogContents +=
							`<li class="li_${tagName}" title="${title}">
                            <i class="${idx}" ></i><a class="esa-anchor-link">${(titleIndex + titleContent)}</a>
                        </li>`;

					$(header).attr('id', `${idx}`)
							.html(`<span>${titleContent}</span><a href="#${idx}" class="esa-anchor">#</a>`)
							.hover(() => {
								$(header).find('.esa-anchor').css('opacity', 1);
							}, () => {
								$(header).find('.esa-anchor').css('opacity', 0);
							});
				});
				catalogContents += `</ul>`;

				$catalog.find('.esa-catalog-contents').append(catalogContents);
				$catalog.appendTo('body');

				let $tabContent = $('.esa-catalog-contents');

				$tabContent.fadeIn();

				$('.esa-anchor-link').on('click', function () {
					let position = $('#' + ($(this).prev('i').attr('class'))).offset().top - 80;
					$('html, body').animate({
						scrollTop: position
					}, 300);
				});

				$('.esa-catalog-close').on('click', () => {
					$tabContent.hide();
				});

				if (config.move) {
					let move = {
						start: false,
						pois: [0, 0],
					};
					$('.esa-catalog-title').on('mousedown', function (e) {
						e.preventDefault();
						move.start = true;
						let position = $('.esa-catalog').position();
						let poisX = e.clientX - parseFloat(position.left);
						let poisY = e.clientY - parseFloat(position.top);
						move.pois = [poisX, poisY];
					});
					$(document).on('mousemove', (e) => {
						if (move.start) {
							let offsetX = e.clientX - move.pois[0];
							let offsetY = e.clientY - move.pois[1];
							let fixed = $('.esa-catalog').css('position') === 'fixed';

							e.preventDefault();

							move.stX = fixed ? 0 : $(window).scrollLeft();
							move.stY = fixed ? 0 : $(window).scrollTop();

							let setRig = $(window).width() - $('.esa-catalog').outerWidth() + move.stX;
							let setBot = $(window).height() - $('.esa-catalog').outerHeight() + move.stY;

							offsetX < move.stX && (offsetX = move.stX);
							offsetX > setRig && (offsetX = setRig);
							offsetY < move.stY && (offsetY = move.stY);
							offsetY > setBot && (offsetY = setBot);

							$('.esa-catalog').css({
								left: offsetX,
								top: offsetY,
								right: 'auto',
							});
						}
					}).on('mouseup', (_e) => {
						if (move.start) {
							move.start = false;
						}
					});
				}
			}
		}

		/**
		 * 构建 Github Corner
		 */
		buildGithubCorner() {
			const config = this.defaluts.github;
			if (config.enable) {
				let fillStyle = config.fill ? `fill:${config.fill};` : '';
				$('body').append(
						`<a href="${config.link}" class="github-corner" title="Fork me on GitHub">
                        <svg width="60" height="60" viewBox="0 0 250 250" style="${fillStyle} color:${config.color}; 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>`);
			}
		}

		/**
		 * 构建代码复制按钮
		 */
		buildPostCodeCopyBtns() {
			let $pres = $('.postBody .cnblogs-markdown').find('pre');

			if (!$pres.length) {
				return false;
			}

			$.each($pres, (index, pre) => {
				$(pre).find('code').attr('id', `copy_target_${index}`);
				$(pre).prepend(`<div class="esa-clipboard-button" data-clipboard-target="#copy_target_${index}" title="复制代码">Copy</div>`);
			});

			$.getScript(`https://unpkg.com/clipboard@2.0.0/dist/clipboard.min.js`, () => {
				let clipboard = new ClipboardJS('.esa-clipboard-button');
				clipboard.on('success', (e) => {
					this.showMessage('代码已复制到粘贴板中');
					e.clearSelection();
				});
				clipboard.on('error', (e) => {
					this.showMessage('代码复制失败');
				});
			});
		}

		/**
		 * 构建工具栏
		 */
		buildToolbar() {
			const catalog = this.defaluts.catalog;

			$('body').append(`<div class="esa-toolbar">
                <!--<button class="esa-toolbar-gotop"><div class="tips">返回顶部</div></button>-->
                <!--<button class="esa-toolbar-contents"><div class="tips">阅读目录</div></button>-->
                <button class="esa-toolbar-follow">捕获</button>
            </div>`);

			// let $btnGotop = $('.esa-toolbar-gotop');
			// let $btnContents = $('.esa-toolbar-contents');
			let $btnFollow = $('.esa-toolbar-follow');

			// if (catalog.enable) {
			// 	$btnContents.on('click', () => {
			// 		let $catalog = $('.esa-catalog-contents');
			// 		if ($catalog.css('display') == 'none') {
			// 			$catalog.fadeIn();
			// 		} else {
			// 			$catalog.hide();
			// 		}
			// 	}).hover(() => {
			// 		$btnContents.find('.tips').show();
			// 	}, () => {
			// 		$btnContents.find('.tips').hide();
			// 	});
			// } else {
			// 	$btnContents.remove();
			// }
			//
			// $btnGotop.on('click', () => {
			// 	$(window).scrollTop(0);
			// }).hover(() => {
			// 	$btnGotop.find('.tips').show();
			// }, () => {
			// 	$btnGotop.find('.tips').hide();
			// });
			//
			// $(window).scroll(function () {
			// 	if (this.scrollY > 200) {
			// 		$btnGotop.fadeIn();
			// 	} else {
			// 		$btnGotop.fadeOut();
			// 	}
			// });

			$btnFollow.on('click', () => {
				loadLink(location.protocol + "//common.cnblogs.com/scripts/artDialog/ui-dialog.css", () => {
					loadScript(location.protocol + "//common.cnblogs.com/scripts/artDialog/dialog-min.js", () => {
						if (!isLogined) {
							return login();
						}
						if (c_has_follwed) {
							return this.showMessage('您已经关注过该博主');
						}
						const n = cb_blogUserGuid;
						$.ajax({
							url: "/mvc/Follow/FollowBlogger.aspx",
							data: '{"blogUserGuid":"' + n + '"}',
							dataType: "text",
							type: "post",
							contentType: "application/json; charset=utf-8",
							success: (msg) => {
								msg == "未登录" ? login() : (msg == "关注成功" && followByGroup(n, !0));
								this.showMessage(msg);
							}
						})
					})
				})
			}).hover(() => {
				$btnFollow.find('.tips').show();
			}, () => {
				$btnFollow.find('.tips').hide();
			});
		}

		/**
		 * 构建博主信息
		 */
		buildBloggerProfile() {
			const config = this.defaluts.profile;

			if (!config.enable) {
				return;
			}

			if (!this.isPostPage && config.avatar) {
				$(this.cnblogs.sideBarMain).prepend(`<img class="esa-profile-avatar" src="${config.avatar}" />`);
			}

			if (config.favicon) {
				$('head').append(`<link rel="shortcut icon" href="${config.favicon}" type="image/x-icon" />`);
			}

			//博客logo
			var title = '<div class="site-branding">' +
					'<span class="logolink moe-mashiro">' +
					'<a href="https://www.cnblogs.com/zychh/" alt="雪">' +
					'<ruby><span class="shironeko">雪</span>' +
					'<rt class="chinese-font">雪</rt></ruby></a></span>' +
					'</div>'
			$('body').prepend(title);$('#Header1_HeaderTitle').text('');


		}

		/**
		 * 构建顶部滚动进度条 需要在页面dom元素构建成功之后再计算文档高度。
		 */
		scrollDy() {
			let that = this;
			$('body').prepend(`<div class="scrollCls" id="scrollInfo"></div>`);
			// 可滚动的总高度
			var scrollTotal = this.getScrollHeight() - this.getWindowHeight();
			// 获取dom元素
			var scrollEl = document.getElementById('scrollInfo')
			$(window).scroll(function () {
				// 已经滚动距离
				var sHeight = that.getScrollTop();
				// 占比
				var bl = Math.min((sHeight / scrollTotal) * 100, 100);
				// 设置
				scrollEl.style.width = bl + '%';
			})

		}

		// 已经滚动距离
		getScrollTop() {
			var scrollTop = 0, bodyScrollTop = 0, documentScrollTop = 0;
			if (document.body) {
				bodyScrollTop = document.body.scrollTop;
			}
			if (document.documentElement) {
				documentScrollTop = document.documentElement.scrollTop;
			}
			scrollTop = (bodyScrollTop - documentScrollTop > 0) ? bodyScrollTop : documentScrollTop;
			return scrollTop;
		}

		// 文档的总高度
		getScrollHeight() {
			var scrollHeight = 0, bodyScrollHeight = 0, documentScrollHeight = 0;
			if (document.body) {
				bodyScrollHeight = document.body.scrollHeight;
			}
			if (document.documentElement) {
				documentScrollHeight = document.documentElement.scrollHeight;
			}
			scrollHeight = (bodyScrollHeight - documentScrollHeight > 0) ? bodyScrollHeight : documentScrollHeight;
			return scrollHeight;
		}

		// 窗体高度
		getWindowHeight() {
			var windowHeight = 0;
			if (document.compatMode == "CSS1Compat") {
				windowHeight = document.documentElement.clientHeight;
			} else {
				windowHeight = document.body.clientHeight;
			}
			return windowHeight;
		}

		//=========================设置主页逻辑
		/**
		 * 构建主页头部html
		 * headertop 网格遮罩
		 */
		mainHeader() {
			const config = this.defaluts.topInfo;
			var header =
					`<div class="headertop filter-dot">` +
					`</div>` +
					`<div class="main-header">` +
					`</div>` +
					`<div class="focusinfo no-select">` +
					`       <h1 class="center-text glitch is-glitching Ubuntu-font" data-text="Hi, ZYC!">${config.title}</h1>` +
					`       <div class="header-info"><p><i class="fa fa-quote-left"></i> ${config.text} <i class="fa fa-quote-right"></i></p>` +
					`           <div class="top-social_v2">` +
					`              <li id="bg-pre"><img class="flipx" src="https://img2018.cnblogs.com/blog/1646268/201908/1646268-20190808103709869-648245711.png"></li>` +
					`              <li><a href="${config.github}" target="_blank" class="social-github" title="github"><img src="https://img2018.cnblogs.com/blog/1646268/201908/1646268-20190808095618459-218538626.png"></a></li>` +
					`              <li><a href="${config.weibo}" target="_blank" class="social-sina" title="sina"><img src="https://img2018.cnblogs.com/blog/1646268/201908/1646268-20190808095623418-1617766229.png"></a></li>` +
					`              <li><a href="${config.telegram}" target="_blank" class="social-lofter" title="telegram"><img src="https://img2018.cnblogs.com/blog/1646268/201908/1646268-20190808095628401-835828752.png"></a></li>` +
					`              <li><a href="${config.music}" target="_blank" class="social-wangyiyun" title="CloudMusic"><img src="https://img2018.cnblogs.com/blog/1646268/201908/1646268-20190808095640330-1209750721.png"></a></li>` +
					`              <li><a href="${config.twitter}" target="_blank" class="social-wangyiyun" title="Twitter"><img src="https://img2018.cnblogs.com/blog/1646268/201908/1646268-20190808095635213-701885869.png"></a></li>` +
					`              <li><a href="${config.zhihu}" target="_blank" class="social-wangyiyun" title="Zhihu"><img src="https://img2018.cnblogs.com/blog/1646268/201908/1646268-20190808095650119-1882504549.png"></a></li>` +
					`              <li><a href="${config.mail}" target="_blank" class="social-wangyiyun" title="E-mail"><img src="https://img2018.cnblogs.com/blog/1646268/201908/1646268-20190808095613956-1350546638.png"></a></li>` +
					`              <li id="bg-next"><img src="https://img2018.cnblogs.com/blog/1646268/201908/1646268-20190808103709869-648245711.png"></li>` +
					`           </div>` +
					`      </div>` +
					`</div>` +
					`<div class="wave">` +
					`   <div id="banner_wave_1"></div>` +
					`   <div id="banner_wave_2"></div>` +
					`</div>` +
					`<div class="scroll-down" data-offset="-45">` +
					`        <span class="hidden">Scroll Down</span>` +
					`        <i class="fa fa-chevron-down" aria-hidden="true"></i>` +
					`</div>`;
			$('#home').prepend(header);
		}

		/**
		 * 构建主页头图
		 */
		homeImg() {
			const config = this.defaluts.topImg;
			// 设置主页图片
			let homeTopImg = config.homeTopImg, bgImg;
			let index = this.randomNum(0, homeTopImg.length - 1);
			homeTopImg.length > 0 ?
					(homeTopImg.length > 1 ? bgImg = homeTopImg[index] : bgImg = homeTopImg[0])
					: bgImg = "";
			$('.main-header').css({
				'background-image': 'url(' + bgImg + ')',
			});

			// 头图点击滚动到内容位置
			$('.scroll-down').click(function () {
				let endScroll;
				endScroll = $('#main').offset().top - 20;
				$('html,body').stop().animate({scrollTop: endScroll}, 1000);
			});

			//切换首页壁纸
			$('#bg-pre').click(function () {
				index--;
				if (index < 0) {
					index = homeTopImg.length - 1
				}
				let nextImg = homeTopImg[index]
				$('.main-header').css({
					'background-image': 'url(' + nextImg + ')',
				});
			});
			$('#bg-next').click(function () {
				index++;
				if (index > homeTopImg.length - 1) {
					index = 0
				}
				let preImg = homeTopImg[index]
				$('.main-header').css({
					'background-image': 'url(' + preImg + ')',
				});

			})
		}

		/**
		 * 构建首页随笔列表
		 */
		setHomeSuiBiList() {
			let article_list = document.getElementsByClassName('day');
			let author = $(this.cnblogs.publicProfile).find('a:eq(0)').html() //作者
			for (let i = article_list.length - 1; i >= 0; i--) {
				let time = $('.day').find('div.dayTitle')[i].textContent.replace('年', '-').replace('月', '-').replace('日', ''); //获取年月日
				let postTitle = $('.day').find('div.postTitle')[i].innerHTML;//<a class="postTitle2" href="https://www.cnblogs.com/zychh/">[置顶] 博客园美化</a>
				let readMore = $('.day').find('a.c_b_p_desc_readmore')[i].href;//https://www.cnblogs.com/zychh/
				let content = $('.day').find('div.c_b_p_desc')[i].textContent.replace('阅读全文', ''); //摘要
				let desc = $('.day').find('div.postDesc')[i].textContent;//posted @ 2019-07-16 13:27 ふじさんの雪 阅读 (3073) 评论 (56)<a href="https://i.cnblogs.com/EditPosts.aspx?postid=11194299" rel="nofollow">编辑</a>
				let readNum = desc.substring(desc.indexOf("(") + 1, desc.indexOf(")")); //阅读量
				let comNum = desc.substring(desc.lastIndexOf("(") + 1, desc.lastIndexOf(")")); //评论量
				let bianji = $('.day').find('div.postDesc')[i].firstElementChild.href; //获取编辑链接 https://i.cnblogs.com/EditPosts.aspx?postid=11194299
				let url
				let desc_img = article_list[i].getElementsByClassName('desc_img')[0];
				if (desc_img !== undefined) {
					url = desc_img.src;//https://img2018.cnblogs.com/blog/1646268/201908/1646268-20190807204419622-1770363151.jpg
				} else {
					url = 'https://img2018.cnblogs.com/blog/1646268/201908/1646268-20190807151203983-873040918.jpg'
				}
				let html = `<div class="post post-list-thumb post-list-show">` +
						`  <div class="post-thumb"> <a href="${readMore}"> <img class="lazyload" src="${url}"  data-src="${url}"> </a></div>` +
						`  <div class="post-content-wrap">` +
						`   <div class="post-content">` +
						`     <div class="post-date"> <i class="iconfont icon-time"></i>发布于 ${time}</div>` +
						`     <div class="post-title">${postTitle}</div>` +
						`     <div class="post-meta"> <span><i class="iconfont icon-attention"></i>${readNum} 热度</span> <span class="comments-number"><i class="iconfont icon-mark"></i>${comNum} 条评论</span> <span><i class="iconfont icon-cc-user"></i><a href="https://www.cnblogs.com/zychh/"></a>${author}</span></div>` +
						`     <div class="float-content"><p>${content}</p>` +
						`        <div class="post-bottom">` +
						`           <a href="${readMore}" class="button-normal"><i class="iconfont icon-gengduo"></i></a>` +
						`           <a href="${bianji}" class="button-normal"><i class="iconfont icon-bianji"></i></a>` +
						`        </div>` +
						`     </div>` +
						`  </div>` +
						` </div>` +
						`</div>`;
				$('.forFlow').prepend(html);
			}
			$('.post-list-thumb:odd').addClass('post-list-thumb-left')

			//构建notice
			const config = this.defaluts.profile;
			let notice = `<div class="notice"> <i class="iconfont icon-notification"></i><div class="notice-content">${config.notice}</div></div>`
			$('#main').prepend(notice);
		}

		//=================阅读页逻辑
		/**
		 * 构建阅读页头部html 如果是文章则只显示标题，如果是随笔则显示发布时间，头像，阅读量
		 */
		postHeader() {
			var center =
					'<div class="pattern-center">' +
					' <div class="pattern-attachment-img"><img src="" data-src=""' +
					'    style="width: 100%; height: 100%; object-fit: cover; pointer-events: none;"></div>' +
					' <header class="pattern-header "><h1 class="entry-title"></h1></header>' +
					'</div>';
			$('#home').prepend(center);
			const sbTitle = $('#cb_post_title_url').text();
			$('.entry-title').text(sbTitle);// 设置标题
			$('.postTitle').css('display', 'none');
			let post_date = $('#post-date').text() //发布时间
			let post_view_count = $('#post_view_count').text() //阅读数
			if (window.location.href.indexOf('articles') === -1) {
				var header =
						`<p class="entry-census"><span><a href="https://www.cnblogs.com/zychh/"><img src="//pic.cnblogs.com/face/1646268/20190628143903.png"></a></span><span><a href="https://www.cnblogs.com/zychh/">ZYC</a></span><span class="bull">·</span>${post_date}<span class="bull">·</span>${post_view_count} 次阅读</p>`;
				$('.pattern-header').append(header)
				$('.pattern-center').addClass('single-center')
				$('.pattern-header').addClass('single-header')
			} else {
				return
			}

		}

		/**
		 * 构建非主页头图
		 */
		setNotHomeTopImg = function () {
			const config = this.defaluts.topImg;
			// 设置主页图片
			let notHomeTopImg = config.notHomeTopImg, bgImg;

			notHomeTopImg.length > 0 ?
					(notHomeTopImg.length > 1 ? bgImg = notHomeTopImg[this.randomNum(0, notHomeTopImg.length - 1)] : bgImg = notHomeTopImg[0])
					: bgImg = "";
			$('.pattern-attachment-img img').attr('src', bgImg);
		};

		/**
		 * 随机数
		 */
		randomNum = function (minNum, maxNum) {
			switch (arguments.length) {
				case 1:
					return parseInt(Math.random() * minNum + 1);
					break;
				case 2:
					return parseInt(Math.random() * (maxNum - minNum + 1) + minNum);
					break;
				default:
					return 0;
					break;
			}
		};
	}
})(jQuery);

摘自:

https://cloud.tencent.com/developer/article/1772865

https://www.cnblogs.com/zouwangblog/p/11541835.html