打造一个专注阅读的博客园主题
2024-05-29 18:26:37
文章目录
- 效果展示
- 基本设置
- 代码高亮
- 页面定制 CSS 代码
- 博客侧边栏公告
- 页首 HTML代码
- 页脚 HTML 代码
- 页脚 HTML 代码中标签介绍（一定要看完！）
- silence.min.js 文件的引入（非常重要！）
最近逛百度的时候不经意间发现一篇特别的文章，当然吸引我的不是文章的内容而是这篇文章的主题，当时就一眼相中了它，主题给我的第一印象就是看着很干净和些许的高级感，没有那些吸引眼球的花哨特效。总之当时就一个想法：（我也要！我也要！）
其实博客园这个平台我刚开始注册CSDN的时候就接触过了之后也注册了账号，当时博客园给我的印象就是 “陈年老坛” ，跟现在的各种平台界面比起来属实就是一个“老前辈”的画面了。虽然平台也提供了一些主题和但是感觉都不是我想要的，之后也慢慢没去了解了但是看到了这个主题我又心动了，还是老样子，话不多说直接开干！
这个主题设置最后是在GitHub上找到的，然后跟着博主的教程一步步设置，但是中途也是有遇到一些麻烦可能是教程中漏掉了或者说明的不是很明确也捣鼓了不少时间，所以这里就直接给大家上我的配置文件以及我自己的这套模板，稍加修改就可使用了
效果展示
在文章最后我会提供原作者的 GitHub 主页链接，然后大家可以关注下实时接收主题功能更新通知有问题也可以去主页反馈
以下就是是我的博客园主页啦，大家可以参考下再决定要不要设置
我的博客园主页
注意：像顶部的导航栏目录不是固定的这只是我设置的目录都是可以改
基本设置
首先想要自定义博客园主题就需要先申请开通JS权限，这个很简单，根据提示开通申请理由随便说明下即可比如 “自定义个人博客主页”等等一般都是没问题的，审核的时间快的可能一小会或者几分钟慢的我就不知道了（小概率）反正我的是两三分钟就好了，尽量选择工作日申请吧，申请理由可以写靠谱点别太敷衍了没通过可以重新申请试试（小概率）
这个主题是在博客园的 Custom 皮肤上修改的，所以你需要选中博客皮肤为 Custom ，默认不支持显示博客子标题，所以无需填写
代码高亮
以我下面图片中的内容为主，（这里有个问题就是原作者的说明文档是：渲染引擎设置为 highlight.js ，系统模式时主题设置为 cnblogs ），但是发现这样设置的话代码块并不会高亮换主题也没有变化不知道是不是文档的说明错误了还是咋的，这就不管了，好在自己捣鼓了下发现将渲染引擎设置为 prismjs 显示行号不要勾选，系统模式时主题根据喜好设置即可正常代码高亮，如此就解决了！
页面定制 CSS 代码
取消勾选 禁用模板默认 CSS 代码在图片下方提供，将下方提供的代码复制粘贴到 页面定制 CSS 代码 栏中
页面定制 CSS 代码：
@media only screen and (max-width: 1365px) {.github-corner {display: none}
}@media only screen and (max-width: 1259px) {#home {width: 100% !important}
}@media only screen and (max-width: 990px) {#bannerbar {display: none}#header, .esa-mobile-menu {display: block !important}#header {width: auto;position: fixed !important;background: var(--blog-bg-color)}#header #blogTitle {margin-left: 15px}#header #navigator {display: none;left: 0;top: 61px}#header #navigator #navList > li {float: none;position: relative;background: var(--blog-bg-color);height: 34px;line-height: 34px;width: 120px;border-bottom: 1px solid var(--border-color);border-right: 1px solid var(--border-color)}#header #navigator #navList > li > a {float: none;width: inherit;padding: 0 10px}#header #navigator #navList > li > a .arrow {position: absolute;top: .8rem;right: .8rem;transform: rotate(270deg) scaleX(-1)}#header #navigator #navList > li .esa-sub-navs {position: fixed;width: 130px;top: 0;left: 121px;top: 61px}#header #navigator #navList > li .esa-sub-navs .caret {display: none}#header #navigator #navList > li .esa-sub-navs ul {box-shadow: none;padding: 0;border-radius: 0}#header #navigator #navList > li .esa-sub-navs ul li {height: 34px;line-height: 34px;border: 1px solid var(--border-color);border-top: none}#header #navigator #navList > li .esa-sub-navs ul li a {text-align: left;padding: 0 10px}#header #navigator #navList > li i {display: none}#sideBar {display: none !important}#home {min-width: auto !important}#main {width: 100% !important;padding: 70px 0 0 !important}#main .forFlow {margin-left: 0 !important;padding-left: 15px;padding-right: 15px}#main .forFlow .postBody {padding: 0 !important}#main .forFlow .postDesc {display: none}#main .forFlow #comment_form {padding: 0 !important}#main .forFlow .commentform {margin-left: 0 !important}#main .forFlow .day .postDesc, #main .forFlow .entrylist .entrylistItemPostDesc {display: none}#myposts .postDesc2 {text-align: right !important}#myposts .postDesc2 span {display: none}.esa-toolbar .skin-popup {bottom: calc(50% - 67px) !important;border-radius: 15px !important}
}@font-face {font-family: Material Symbols Outlined;font-style: normal;font-weight: 300;src: url(https://fonts.gstatic.com/s/materialsymbolsoutlined/v7/kJF1BvYX7BgnkSrUwT8OhrdQw4oELdPIeeII9v6oDMzByHX9rA6RzaxHMPdY43zj-jCxv3fzvRNU22ZXGJpEpjC_1i-q_4MrImHCIJIZrDDxHOem.ttf) format("truetype")
}@font-face {font-family: Material Symbols Outlined;font-style: normal;font-weight: 300;src: url(https://fonts.gstatic.com/s/materialsymbolsoutlined/v7/kJF1BvYX7BgnkSrUwT8OhrdQw4oELdPIeeII9v6oDMzByHX9rA6RzaxHMPdY43zj-jCxv3fzvRNU22ZXGJpEpjC_1n-q_4MrImHCIJIZrDDxHOem.ttf) format("truetype")
}.material-symbols-outlined {font-family: Material Symbols Outlined;font-weight: 400;font-style: normal;font-size: 24px;line-height: 1;letter-spacing: normal;text-transform: none;display: inline-block;white-space: nowrap;word-wrap: normal;direction: ltr
}:root {--loading-bg-color: # #b0b0b0
}:root[mode=light] {--blog-bg-color: #fff;--text-color: #596172;--border-color: #eef2f8;--catalog-bg-color: #fff;--panel-bg-color: #f8f8f8;--code-bg-color: #f1f3f4;--code-color: #bababa;--pane-box-shadow: 0px 1px 15px #e6e6e6;--toolbar-box-shadow: 0 2px 4px 1px #e8e8e8;--loading-bg-color: #fff
}:root[mode=dark] {--blog-bg-color: #202020;--text-color: #d8d8d8;--border-color: #2f2f2f;--catalog-bg-color: #252525;--panel-bg-color: #252525;--code-bg-color: #3c3d40;--code-color: #9aa0a6;--pane-box-shadow: 0px 1px 15px #0a0a0a;--toolbar-box-shadow: 0 2px 4px 1px #151515;--loading-bg-color: #222
}:root[theme=a] {--theme-color: #2d8cf0
}:root[theme=b] {--theme-color: #fa7298
}:root[theme=c] {--theme-color: #42b983
}:root[theme=d] {--theme-color: #607d8b
}:root[theme=e] {--theme-color: #5e72e4
}:root[theme=f] {--theme-color: #ff9700
}:root[theme=g] {--theme-color: #ff5722
}:root[theme=h] {--theme-color: #009688
}:root[theme=i] {--theme-color: #673bb7
}:root[theme=j] {--theme-color: #906f61
}* {margin: 0;padding: 0
}body, html {height: 100%
}body {background: var(--blog-bg-color);color: var(--text-color);font-family: Lato, PingFang SC, Microsoft YaHei, sans-serif;font-size: 14px;font-weight: 300
}table {border-collapse: collapse;border-spacing: 0
}td {padding: 5px
}fieldset, img {border: 0
}ul {word-break: break-all
}li {list-style: none
}h1, h2, h3, h4, h5, h6 {font-size: 100%;font-weight: 400
}a {color: var(--text-color);text-decoration: none
}a:hover {color: var(--theme-color);transition: all .3s ease
}::-moz-selection {background: var(--theme-color);color: #fff
}::selection {background: var(--theme-color);color: #fff
}#ad_c1, #ad_c2, #ad_t2, #author_profile, #comment_nav, #comment_pager_top, #green_channel, #homepage_top_pager, #lnkBlogLogo, #under_post_kb, #under_post_news, .blogStats, .c_ad_block, .dayTitle, .navbar, .under-comment-nav, .under-post-card {display: none
}.clear {clear: both
}#home {width: 100%;height: 100%;transition: width .3s ease
}#header {width: 960px;position: relative;top: 0;right: 0;left: 0;margin: 0 auto;border-top: 0;border-bottom: 1px solid var(--border-color);padding-bottom: 0;display: block;height: 60px;z-index: 999
}#blogTitle h1 {font-size: 25px;font-weight: 600;font-family: Georgia;float: left;margin-top: 15px
}#blogTitle h2 {display: none
}#navigator {height: inherit;position: absolute;right: 0;top: 0
}#navList {height: inherit;float: left
}#navList > li {position: relative;float: left;line-height: 60px;padding: 0 15px;font-size: 17px
}#navList > li:hover i {width: 100%;left: 0
}#navList > li > a:after {content: "";position: absolute;width: 100%;height: 4px;bottom: 0;left: 0;background-color: var(--theme-color);visibility: hidden;transform: scaleX(0);transition: .4s ease-in-out
}#navList > li > a:hover:after {visibility: visible;transform: scaleX(1)
}#navList .open {transform: rotate(180deg) scaleX(-1);transition-duration: .3s
}#navList .esa-sub-navs {position: absolute;width: 160px;top: 60px;left: calc(50% - 80px);display: none
}#navList .esa-sub-navs .caret {border-top: 0 solid transparent;border-left: 8px solid transparent;border-right: 8px solid transparent;border-bottom: 8px solid var(--blog-bg-color);width: 0;position: relative;left: calc(50% - 8px)
}#navList .esa-sub-navs ul {background-color: var(--blog-bg-color);box-shadow: var(--pane-box-shadow);border-radius: 4px;padding: 10px
}#navList .esa-sub-navs ul li a {font-size: 15px;overflow: hidden;display: flex;height: 50px;justify-content: center;align-content: center;align-items: center
}#navList .esa-sub-navs ul li a:hover {color: var(--theme-color);background: var(--panel-bg-color);border-radius: 4px
}#main {width: 960px;margin: 0 auto;min-height: calc(100% - 75px);padding: 15px 0
}#mainContent {float: right;margin-left: -25em;width: 100%
}#mainContent .forFlow {margin: 0 auto 0 0;max-width: 960px
}#sideBar {width: 230px;border-right: 1px solid var(--border-color);font-weight: inherit;display: none;min-height: 750px;padding: 0 15px 0 0
}#sideBar #profile_block {margin: 0;font-size: 0;display: flex;flex-wrap: wrap;text-align: left;line-height: 1.6
}#sideBar #profile_block a {box-sizing: border-box
}#sideBar #profile_block a:first-child {font-size: 18px;font-weight: 700;width: 100%;display: block;text-align: center;margin-bottom: 14px
}#sideBar #profile_block a:nth-child(3):after {content: "\56ed\9f84"
}#sideBar #profile_block a:nth-child(5):after {content: "\7c89\4e1d"
}#sideBar #profile_block a:nth-child(7):after {content: "\5173\6ce8"
}#sideBar #profile_block a:nth-child(3), #sideBar #profile_block a:nth-child(5), #sideBar #profile_block a:nth-child(7) {font-size: 14px;width: 33.3333333%;display: block;padding: 0 4px;white-space: nowrap;text-overflow: ellipsis;overflow: hidden;text-align: center
}#sideBar #profile_block a:nth-child(3):after, #sideBar #profile_block a:nth-child(5):after, #sideBar #profile_block a:nth-child(7):after {color: #97979f;font-size: 14px;display: block;text-overflow: ellipsis;overflow: hidden;width: 100%
}#sideBar #profile_block #p_b_follow {margin: 15px 0 10px;text-align: center
}#sideBar #profile_block #p_b_follow a {border: 1px solid var(--border-color);font-size: 13px;padding: 7px 0;border-radius: 4px;width: 230px;font-weight: 300
}#sideBar #profile_block #p_b_follow a:hover {border-color: var(--theme-color)
}.newsItem {margin-bottom: 10px
}.newsItem .catListTitle {display: none
}#blog-calendar {border-top: 1px solid var(--border-color)
}#blog-calendar .CalDayHeader {font-weight: 300
}#blog-calendar .CalTodayDay {color: var(--theme-color);font-weight: 600
}#sideBarMain ul {line-height: 1.6
}.catListTitle {text-align: left;margin: 20px 0;font-size: 20px;font-weight: inherit;border-left: 4px solid var(--theme-color);border-radius: 4px;padding-left: 7px
}#sidebar_search #widget_my_zzk .input_my_zzk {color: #314659;border: 1px solid var(--border-color);background-color: transparent;width: 150px;height: 32px;padding: 0 7px;font-size: 16px;border-radius: 4px
}#sidebar_search #widget_my_zzk .input_my_zzk:focus {outline: none
}#sidebar_search #widget_my_zzk .btn_my_zzk {height: 34px;font-size: 14px;font-weight: 300;background-color: transparent;color: var(--text-color);cursor: pointer;width: 59px;outline: 0;border: 1px solid var(--border-color);border-radius: 4px
}#sidebar_search #widget_my_zzk .btn_my_zzk:hover {color: var(--theme-color);border: 1px solid var(--theme-color);transition: all .3s ease
}#sidebar_search #widget_my_google {display: none
}#sidebar_toptags li {display: inline-grid
}#sidebar_toptags li a {height: 16px;line-height: 16px;padding: 5px 8px;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;max-width: 210px;margin: 0 6px 6px 0;display: inline-grid;border-radius: 4px;background-color: var(--panel-bg-color);color: var(--text-color)
}#sidebar_toptags li a:hover {transition: all .3s ease;color: #fff;background-color: var(--theme-color)
}#sidebar_toptags li a .tag-count {display: none
}#sidebar_categories li, #sidebar_scorerank li, #sidebar_shortcut li {font-size: 15px;height: 40px;padding-left: 3px;line-height: 30px;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;list-style: none
}#sidebar_recentposts li, #sidebar_topcommentedposts li, #sidebar_topdiggedposts li, #sidebar_topviewedposts li {font-size: 15px;padding: 7px 0;text-align: justify;border-bottom: 1px solid var(--border-color)
}#sidebar_recentposts li:first-child, #sidebar_topcommentedposts li:first-child, #sidebar_topdiggedposts li:first-child, #sidebar_topviewedposts li:first-child {border-top: 1px solid var(--border-color)
}#sidebar_recentcomments li {text-align: justify
}#sidebar_recentcomments .recent_comment_title:nth-child(n+2) {padding-top: 10px
}#sidebar_recentcomments .recent_comment_title:first-child {border-top: 1px solid var(--border-color);padding-top: 10px
}#sidebar_recentcomments .recent_comment_body {border-radius: 4px;padding: 5px 10px;margin: 5px 0;background-color: var(--panel-bg-color)
}#sidebar_recentcomments .recent_comment_author {margin-right: 0;text-align: right;padding-bottom: 10px;border-bottom: 1px solid var(--border-color)
}#taglist_title, .entrylistTitle, .myposts_title, .PostListTitle, .thumbTitle {font-size: 20px;font-weight: 300;margin-bottom: 10px;text-align: left
}#taglist_title small, .entrylistTitle small, .myposts_title small, .PostListTitle small, .thumbTitle small {font-weight: inherit !important
}.entrylistDescription {margin: 15px auto;border-left: 4px solid var(--border-color);text-align: justify;padding-left: 7px
}#myposts {margin-left: 0
}#myposts .PostList {border-bottom: 1px solid var(--border-color);padding: 0;margin: 0
}#myposts .PostList:first-of-type {border-top: 1px solid var(--border-color)
}#myposts .postTitl2 {font-size: 17px;margin: 10px 0;text-align: justify
}#myposts .postDesc2 {text-align: right;margin-bottom: 10px;font-size: 14px
}#myposts .postDesc2 > a {display: none
}#myposts .postDesc2:before {font-family: FontAwesome;content: "\f017";opacity: .7
}.post-comment-count:before, .post-view-count:before {content: "\f1c5"
}.post-comment-count:before, .post-view-count:before {font-family: Material Symbols Outlined;padding-left: 10px;padding-right: 5px;font-size: 17px;position: relative;top: 4px
}.post-comment-count:before {content: "\e560"
}.post-digg-count:before {font-family: Material Symbols Outlined;content: "\e9d2";padding-left: 10px;padding-right: 5px;font-size: 17px;position: relative;top: 4px
}.day > .postSeparator {border-bottom: 1px solid var(--border-color);text-align: justify;margin-bottom: 10px;padding-bottom: 10px
}.day .postTitle2 span {display: flex;flex-wrap: wrap;align-items: center
}.day .postTitle2 span span {order: 1;font-size: 0
}.day .postTitle2 span span:after {content: "\7f6e\9876";margin-left: 7px;padding: 2px 10px;border-radius: 4px;font-size: 12px;color: var(--theme-color);background-color: var(--panel-bg-color);border: 1px solid var(--border-color)
}.day, .entrylistItem {border-bottom: 1px solid var(--border-color);text-align: justify;margin-bottom: 15px;padding-bottom: 10px
}.day .postTitle, .entrylist .entrylistPosttitle {font-size: 19px
}.day .postCon, .entrylist .entrylistPostSummary {font-size: 16px;padding: 10px 0
}.day .postCon img, .entrylist .entrylistPostSummary img {border-radius: 4px;margin-left: 10px;height: 120px;width: 180px;border: 1px solid rgba(0, 0, 0, .05)
}.day .postCon a, .entrylist .entrylistPostSummary a {border-bottom: 1px dotted var(--text-color);padding: 2px 5px;font-size: 14px;margin-top: 10px;display: table
}.day .postCon a:after, .entrylist .entrylistPostSummary a:after {content: "\00bb"
}.day .postCon a:hover, .entrylist .entrylistPostSummary a:hover {border-bottom: 1px dotted var(--theme-color)
}.day .postDesc, .entrylist .entrylistItemPostDesc {text-align: right
}.day .postDesc > a, .entrylist .entrylistItemPostDesc > a {display: none
}.toc-container-header {font-size: 20px;font-weight: 700
}#topics .postTitle {font-size: 21px;font-weight: inherit
}#topics .postBody {font-size: 16px;line-height: 1.75
}#topics .postBody a {color: var(--theme-color)
}#topics .postBody a:hover {opacity: .7
}#topics .postBody a[data-lightbox]:hover {opacity: 1
}#topics .postBody h1 {font-size: 21px
}#topics .postBody h2 {font-size: 20px
}#topics .postBody h3 {font-size: 19px
}#topics .postBody h4 {font-size: 18px
}#topics .postBody h5 {font-size: 17px
}#topics .postBody h6 {font-size: 16px
}#topics .postBody p {margin: 13px auto
}#topics .postBody hr {border-top: none;border-bottom: 1px solid var(--border-color)
}#topics .postBody blockquote {border: none;margin: 15px 0;color: inherit;border-radius: 4px;padding: 1px 15px;border-left: 4px solid var(--theme-color);background-color: var(--panel-bg-color)
}#topics .postBody em {padding-right: 3px
}#topics .postBody strong {margin: 0 3px;font-weight: 500
}#topics .postBody img {display: block;margin: 15px 0;border-radius: 3px;box-shadow: var(--pane-box-shadow)
}#topics .postBody .cnblogs-markdown pre {white-space: pre;position: relative
}#topics .postBody ol li, #topics .postBody ul li {margin: 3px 0
}#topics .postBody table {font-size: 15px;width: 100%;margin: 15px 0;display: block;overflow-x: auto;border: none
}#topics .postBody table::-webkit-scrollbar {height: 4px !important
}#topics .postBody table th {background: var(--panel-bg-color);white-space: nowrap;font-weight: 400
}#topics .postBody table td, #topics .postBody table th {border: 1px solid var(--border-color);padding: 6px 15px;min-width: 100px
}#topics .postBody h1 code, #topics .postBody h2 code, #topics .postBody h3 code, #topics .postBody h4 code, #topics .postBody h5 code, #topics .postBody h6 code, #topics .postBody li > code, #topics .postBody p > code, #topics .postBody table code {line-height: 1.2;font-family: consolas !important;vertical-align: middle;margin: 0 3px;background-color: var(--code-bg-color) !important;color: var(--text-color);font-size: 14px !important;padding: .2em .3em !important;border-radius: 3px !important;border: none !important
}#topics .postBody .hljs, #topics .postBody .hljsln {display: block;overflow-x: auto;background: var(--code-bg-color) !important;border: none !important;color: var(--text-color) !important;font-family: Consolas, Monaco, Andale Mono, Ubuntu Mono, monospace !important;font-size: 15px !important;padding: 10px 15px
}#topics .postBody .hljs [class*=hljs-] {color: var(--text-color) !important
}#topics .postBody #post_next_prev {font-size: 14px;margin-top: 10px
}#topics .postBody #post_next_prev a {color: var(--text-color)
}#topics .postDesc {border-top: 1px solid var(--border-color);padding-top: 5px;margin-top: 5px;text-align: right
}#topics #BlogPostCategory, #topics #EntryTag {font-size: 14px;margin-bottom: 5px
}#topics #BlogPostCategory a, #topics #EntryTag a {font-size: 13px;border-radius: 4px;padding: 4px 6px;background-color: var(--panel-bg-color);margin-right: 5px;transition: none;color: var(--text-color)
}#topics #BlogPostCategory a:hover, #topics #EntryTag a:hover {color: #fff;background-color: var(--theme-color);opacity: 1;transition: all .3s ease
}#topics #BlogPostCategory a:after, #topics #EntryTag a:after {content: none
}#topics #BlogPostCategory:before {content: "\e574"
}#topics #BlogPostCategory:before, #topics #EntryTag:before {font-family: Material Symbols Outlined;font-size: 17px;position: relative;top: 3px
}#topics #EntryTag:before {content: "\f05b"
}.cnblogs_code {font-family: Consolas, Monaco, Andale Mono, Ubuntu Mono, monospace !important;border-radius: 3px;overflow-x: auto;background: var(--code-bg-color) !important;border: none !important;color: var(--text-color) !important;font-size: 15px !important;padding: 10px 15px
}.cnblogs_code .cnblogs_code_toolbar {display: none
}.cnblogs_code pre {background: inherit !important;font-family: inherit !important;font-size: inherit !important
}.cnblogs_code pre span {font-family: inherit !important;color: inherit !important
}.cnblogs_code .code_img_closed, .cnblogs_code .code_img_opened {display: none !important
}#footer {border-top: 1px solid var(--border-color);font-size: 13px;text-align: center;padding: 15px 0
}.louzhu {color: var(--theme-color);font-weight: 500
}.feedbackListSubtitle .sendMsg2This {background: transparent;padding-left: 0;font-size: 15px
}.feedbackListSubtitle .sendMsg2This:before {content: "✉️"
}.feedbackManage {float: right
}.feedbackItem .feedbackCon {margin-bottom: 10px;padding: 10px 0;border-bottom: 1px solid var(--border-color)
}.feedbackItem .feedbackCon .comment_vote {margin-top: 12px
}.blog_comment_body {width: auto;border-radius: 4px;padding: 12px;margin-left: 50px;margin-right: 15px;background-color: var(--panel-bg-color);min-height: 19px
}.blog_comment_body img {border-radius: 3px
}#taglist_main {margin-top: 0
}#taglist_main table {width: 100%
}#taglist_main table tr td {padding: 5px 0 5px 15px
}#taglist_main table tr td:first-child {padding-left: 0
}#taglist_main table tr td .small {display: none
}#taglist_main table tr td a {display: flex;padding: 5px;border-radius: 4px;background-color: var(--panel-bg-color);color: var(--text-color);align-content: center;justify-content: center
}#taglist_main table tr td a:hover {color: #fff;background-color: var(--theme-color)
}.topicListFooter {margin-right: 0
}#nav_next_page, .pager {color: var(--text-color);text-align: right;margin-right: 0 !important
}#nav_next_page a, .pager a {color: var(--text-color);padding: 5px 10px;border: 1px solid var(--border-color);border-radius: 4px
}#nav_next_page a:hover, .pager a:hover {color: var(--theme-color);border: 1px solid var(--theme-color)
}.pager span.current {padding: 3px 7px;border: 1px solid var(--theme-color);background-color: var(--theme-color);border-radius: 4px;margin: 0 0 0 5px
}.feedback_area_title {font-size: 20px;border-bottom: 1px solid var(--border-color);margin: 20px 0;padding-bottom: 10px
}#commentform_title {background-image: none;padding-left: 0;font-size: 20px;margin-top: 45px
}#commentform_title > a {display: none
}#commentform_title + span, #tip_comment2 + p {display: none !important
}.commentform .comment_textarea {width: 100%;border: 1px solid var(--border-color);background-color: transparent;padding: 0;transition: none
}.commentform .commentbox_title {border-bottom: 1px solid var(--border-color)
}.commentform .commentbox_title .commentbox_title_left .commentbox_tab {margin: 0;padding: 5px 15px;color: var(--text-color);border-bottom: none
}.commentform .commentbox_title .commentbox_title_left .active {color: var(--theme-color)
}.commentform .commentbox_title .commentbox_title_right {margin: 0 10px 0 0
}.commentform .commentbox_title .commentbox_title_right .comment_svg:hover, .commentform .commentbox_title .commentbox_title_right .comment_svg_stroke:hover {fill: var(--theme-color);stroke: var(--theme-color)
}.commentform .commentbox_footer {border-top: 1px solid var(--border-color)
}.commentform .comment_option {margin-bottom: 10px;margin-right: 10px;fill: var(--text-color);color: var(--text-color)
}.commentform .comment_option:hover {fill: var(--theme-color);color: var(--theme-color)
}.commentform #tbCommentBody, .commentform #tbCommentBodyPreview {padding: 10px 15px;background: transparent;color: var(--text-color);font-weight: 300
}.commentform #tbCommentBodyPreviewBody {margin-left: 0;min-height: 235px;background-color: transparent
}.commentform #btn_comment_submit {width: auto;height: auto;border-width: 0;cursor: pointer;color: #fff;background-color: var(--theme-color);border-color: var(--theme-color);font-weight: 300;-webkit-user-select: none;-moz-user-select: none;-ms-user-select: none;user-select: none;padding: 5px 17px;font-size: 13px;border-radius: 4px;outline: none;transition: all .3s
}.commentform #btn_comment_submit:hover {opacity: .7
}.commentform .comment_my_posted > img {display: none
}.commentform .bq_post_comment {margin-top: 5px;font-size: 13px;display: block;color: var(--text-color);background-color: var(--border-color);border: none;border-radius: 4px;padding: 1px 15px
}::-webkit-scrollbar {width: 3px
}::-webkit-scrollbar-thumb {background-color: var(--text-color)
}#div_digg {margin: 0;width: auto
}#div_digg .buryit, #div_digg .diggit {background: none;height: auto;width: auto;min-width: 75px;margin: 0;font-size: 17px;border-radius: 4px;padding: 3px 10px;background-color: var(--panel-bg-color)
}#div_digg .buryit span, #div_digg .diggit span {font-size: inherit;color: inherit
}#div_digg .buryit:hover, #div_digg .diggit:hover {color: #fff;background-color: var(--theme-color);transition: all .3s ease
}#div_digg .diggit:before {font-family: Material Symbols Outlined;content: "\e8dc";font-size: 17px;position: relative;top: 3px
}#div_digg .buryit {margin-left: 15px
}#div_digg .buryit:before {font-family: Material Symbols Outlined;content: "\e8db";font-size: 17px;position: relative;top: 3px
}.github-corner:hover .octo-arm {-webkit-animation: octocat-wave .56s ease-in-out;animation: octocat-wave .56s ease-in-out
}.github-corner svg {fill: var(--theme-color);z-index: 999;cursor: pointer;position: fixed;top: 0;border: 0;left: 0;transform: scaleX(-1)
}@-webkit-keyframes octocat-wave {0%, to {transform: rotate(0)}20%, 60% {transform: rotate(-25deg)}40%, 80% {transform: rotate(10deg)}
}@keyframes octocat-wave {0%, to {transform: rotate(0)}20%, 60% {transform: rotate(-25deg)}40%, 80% {transform: rotate(10deg)}
}.esa-mobile-menu {display: none;position: fixed;top: 17px;right: 20px;height: 25px;width: 25px;text-align: center;line-height: 25px;z-index: 941113;font-size: 1.5em;cursor: pointer;color: var(--text-color);border-radius: 4px
}.esa-profile-avatar {border-radius: 4px;width: 100%
}.esa-contents {position: fixed;top: 0;right: 0;bottom: 0;background-color: var(--blog-bg-color);border-left: 1px solid var(--border-color);overflow-y: auto;-webkit-user-select: none;-moz-user-select: none;-ms-user-select: none;user-select: none;padding: 1rem 0;width: 252px;transform: translate3d(252px, 0, 0);z-index: 1000
}.esa-contents ul {padding: 0 15px;overflow-y: auto
}.esa-contents ul li {padding: 5px 0;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;cursor: pointer;color: var(--text-color)
}.esa-contents ul li .level1 {margin-left: 0
}.esa-contents ul li .level2 {margin-left: 10px
}.esa-contents ul li .level3 {margin-left: 26px
}.esa-anchor {opacity: 0;transition: opacity .3s ease;margin-left: 8px
}.active {transform: translateZ(0);transition: transform .3s ease
}.noactive {transition-duration: .3s;transform: translate3d(252px, 0, 0)
}.esa-post-signature {padding: 12px 24px 12px 20px;margin-top: 15px;font-size: 15px;background: var(--panel-bg-color);position: relative;border-radius: 4px;border-left: 4px solid var(--theme-color)
}.esa-post-signature p {margin: 0 !important
}.esa-post-signature a {color: var(--text-color) !important
}.esa-sponsor {position: relative;width: 100%;height: 85px;margin: 100px 0
}.esa-sponsor .title {text-align: center;margin-bottom: 15px;min-height: 30px;font-size: 17px;font-weight: 400;opacity: .8
}.esa-sponsor .box {display: flex;align-content: center;justify-content: center
}.esa-sponsor .box li {width: 60px;float: left;margin: 0 !important;text-align: center;border: 1px solid var(--border-color);border-right: 0;background: transparent;cursor: pointer;line-height: 0;opacity: 1;list-style: none;margin: 0;padding: 6px 3px
}.esa-sponsor .box li svg {opacity: .5
}.esa-sponsor .box li:hover {background: var(--panel-bg-color);transition: all .3s ease
}.esa-sponsor .box li:last-child {border-right: 1px solid var(--border-color)
}.esa-sponsor .qrshow {position: absolute;width: 200px;height: 200px;background: var(--blog-bg-color);box-shadow: var(--pane-box-shadow);cursor: pointer;left: calc(50% - 100px);top: -170px;z-index: 999;display: none;border-radius: 4px
}.esa-sponsor .qrshow img {height: 180px;width: 180px;margin: 10px !important;box-shadow: none !important
}.esa-comment-avatar {float: left
}.esa-comment-avatar img {height: 43px;width: 43px;border-radius: 4px;transition: all .5s ease-out;-webkit-transition: all .6s ease-out
}.esa-comment-avatar img:hover {border-radius: 50%
}.esa-toolbar {position: fixed;bottom: 30px;right: 30px;width: 45px;height: 45px;z-index: 1001
}.esa-toolbar .bars {position: relative;width: inherit;height: inherit;cursor: pointer;border-radius: 50%;background: var(--theme-color);z-index: 1;text-align: center;font-size: 28px;font-weight: 700;line-height: 46px;color: #fff;transition: transform .3s ease;box-shadow: var(--toolbar-box-shadow)
}.esa-toolbar .contents, .esa-toolbar .mode, .esa-toolbar .skin, .esa-toolbar .up {position: absolute;cursor: pointer;bottom: 0;right: 0;height: 35px;width: 35px;text-align: center;line-height: 35px;z-index: 0;opacity: 0;border-radius: 4px;box-shadow: var(--toolbar-box-shadow);background-color: var(--blog-bg-color);transition: all .3s ease
}.esa-toolbar .contents:hover, .esa-toolbar .mode:hover, .esa-toolbar .skin:hover, .esa-toolbar .up:hover {color: #fff;background-color: var(--theme-color)
}.esa-toolbar .bars-show {transform: rotate(270deg)
}.esa-toolbar .up-show {transform: translate3d(0, -200%, 0);opacity: 1
}.esa-toolbar .mode-show {transform: translate3d(-140%, -140%, 0);opacity: 1
}.esa-toolbar .skin-show {transform: translate3d(-200%, 0, 0);opacity: 1
}.esa-toolbar .contents-show {transform: translate3d(-350%, 0, 0);opacity: 1
}.esa-toolbar .skin-popup {display: none;position: fixed;left: calc(50% - 100px);bottom: 0;padding: 25px;opacity: 1;width: 150px;height: auto;border-radius: 4px 4px 0 0;background-clip: border-box;box-shadow: var(--toolbar-box-shadow);background-color: var(--blog-bg-color)
}.esa-toolbar .skin-popup .item {text-align: center
}.esa-toolbar .skin-popup .title {font-size: 17px;margin-bottom: .5em
}.esa-toolbar .skin-popup .themes button {font-size: 1em;position: relative;width: calc(1.75em - 5px);height: calc(1.75em - 5px);border-radius: .15em;cursor: pointer;margin: 2.5px;flex-shrink: 0;justify-self: center;transition: all .15s;overflow: hidden;background: transparent;z-index: 1;box-sizing: border-box;outline: none;border: none
}@-webkit-keyframes loading {0% {opacity: 0}to {opacity: 1}
}@keyframes loading {0% {opacity: 0}to {opacity: 1}
}.loading {position: fixed;top: 0;left: 0;bottom: 0;right: 0;display: flex;justify-content: center;align-items: center;z-index: 99999;background: var(--loading-bg-color)
}.loading .box h2 {color: #777;margin: 0;font: .8em verdana;text-transform: uppercase;letter-spacing: .1em;text-align: center
}.loading .box span {display: inline-block;vertical-align: middle;width: .6em;height: .6em;margin: .19em;background: #007db6;border-radius: .6em;-webkit-animation: loading 1s infinite alternate;animation: loading 1s infinite alternate
}.loading .box span:nth-of-type(2) {background: #008fb2;-webkit-animation-delay: .2s;animation-delay: .2s
}.loading .box span:nth-of-type(3) {background: #009b9e;-webkit-animation-delay: .4s;animation-delay: .4s
}.loading .box span:nth-of-type(4) {background: #00a77d;-webkit-animation-delay: .6s;animation-delay: .6s
}.loading .box span:nth-of-type(5) {background: #00b247;-webkit-animation-delay: .8s;animation-delay: .8s
}.loading .box span:nth-of-type(6) {background: #5ab027;-webkit-animation-delay: 1s;animation-delay: 1s
}.loading .box span:nth-of-type(7) {background: #a0b61e;-webkit-animation-delay: 1.2s;animation-delay: 1.2s
}
博客侧边栏公告
侧边栏公告在右侧记得打开
页首 HTML代码
将下方代码复制粘贴到 页首 HTML代码 栏中
<div class="loading"><div class="box"><h2>Loading</h2><span></span><span></span><span></span><span></span><span></span><span></span><span></span></div>
</div>
页脚 HTML 代码
将下方代码复制粘贴到 页脚 HTML 代码 栏中，以下是我的代码模板，图中的 待填 就是填写你自己的链接和需求设置
<script>window.$silence = {avatar: ' 待填',favicon: '待填',github: '待填',defaultMode: 'auto',defaultTheme: 'e',showNavAdmin: true,navbars: [{title: '博客园',target: '_blank',url: '待填'}, {title: 'CSDN',target: '_blank',url: '待填'}, { title: '工具',children: [{title: '在线工具箱',target: '_blank',url: 'https://tool.lu/',}, {title: '猫狸盘搜',target: '_blank',url: 'https://www.alipansou.com/',}, {title: 'drawio绘图',target: '_blank',url: 'https://www.draw.io/index.html',}]}, { title: '搜索',children: [{title: '百度',target: '_blank',url: 'https://www.baidu.com',}, {title: '谷歌',target: '_blank',url: 'https://www.google.com',}, {title: '扩展商店',target: '_blank',url: 'https://www.crxsoso.com/search',}]}],catalog: {enable: true,index: true,active: false,levels: ['h1', 'h2', 'h3', 'h4'],},signature: {enable: true,author: '待填',license: ['本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。', 'https://creativecommons.org/licenses/by-nc-sa/4.0/'],remark: '',},sponsor: {enable: false,wechat: '选填',alipay: '选填'}};
</script>
<script src="待填"></script>
页脚 HTML 代码中标签介绍（一定要看完！）
这是我们需要修改的主要地方，可以根据个人需求设置自己喜欢的样式，当然你要觉得我这个模板还凑活那就直接拿过去填写自己的链接就完事了
下列所有选项均需要配置在 页脚 HTML 代码 处的 window.$silence 中。
<script>window.$silence = {// ...};
</script>
avatar
类型：String
默认值：null
作用：该配置项用来设置左侧栏中博主头像图片，未配置则不会渲染。
注意图片需自行上传至支持外链的存储空间，建议使用图片像素大小为230px*230px，图片过大可能会影响页面加载速度。（这里可以直接把图片上传到博客园管理的文件中然后右键文件名点击 复制链接地址 粘贴到标签中就行）
window.$silence = {avatar: '填写自己的图片所在地址链接'
};
favicon
类型：String
默认值：null
作用：该配置项用来设置网页标题前面的小图标，未设置则继续使用博客园官方默认的图标。
注意：图标类型是 ico 格式，转换类型可通过 convertio 在线格式转换工具转换，图片像素大小可以通过 iloveimg 在线图片编辑工具修改图片大小。同样图片可上传到博客园管理的文件中然后右键文件名复制链接粘到这里
window.$silence = {favicon: '填写图片地址链接'
};
github
类型：String
默认值：null
作用：该配置项用来设置个人 Github 主页地址，会在页面左上角渲染一个 GitHub Corner 挂件，未设置则不会渲染，浏览器窗口宽度小于 1366px 时也不会渲染。
window.$silence = {github: '填写GitHub主页地址链接'
};
defaultMode
类型：String
默认值：‘auto’
作用：该配置项用来设置默认加载的主题模式。可选值如下：
light：日间模式
dark：夜间模式
auto：自动模式
自动模式会根据当前时间自行选择日间或夜间模式：早上 6 点至晚上 6 点前加载日间模式，晚上 6 点至次日早上
6 点前加载夜间模式。
window.$silence = {defaultMode: 'auto'
};
defaultTheme
类型：String
默认值：‘a’
作用：该配置项用来设置默认加载的主题色彩。可选值与色彩对照表如下：
window.$silence = {defaultTheme: 'a'
};
navbars
类型：Arrary
默认值：[]
作用：该配置项用来在导航栏中追加自定义菜单项。
注意目前仅支持到二级菜单，一级菜单项通过 children 属性配置纵向悬浮二级菜单。若希望链接页面总是在一个新打开的窗口中载入，则需要在菜单项中多配置一个值为 _blank 的 target 属性。属性根据个人需求添加想要显示的链接填写标题即可，代码的格式照着复制粘贴改就行
window.$silence = {navbars: [{title: 'CSDN',url: '待填'}, {title: '搜索',children: [{title: '百度',target: '_blank',url: 'https://www.baidu.com',}, {title: '谷歌',target: '_blank',url: 'https://www.google.com',}]}]
};
showNavAdmin
类型：Boolean
默认值：true
作用：该配置项用来控制是否显示导航栏中的「管理」菜单项。
博客园官方的原生导航栏菜单项中除 管理 以外，其余均可在后台控制显示或者隐藏。对于希望完全自主设置导航栏菜单项的园友来说，可能会有隐藏 管理 菜单项的需求。(就是上一张图中最右侧的管理导航栏)
window.$silence = {showNavAdmin: false
};
catalog
类型：Object
默认值：{}
作用：该配置项用来生成在右侧悬浮的博文标题目录。
标题目录悬浮可有效帮助读者实时分析文体结构、加深阅读印象，对一些长文来讲，效果尤佳。另外，该模块不会破坏 markdown 格式博文中使用 [TOC] 标记生成的目录标题锚点，两类标题目录可同时使用。
window.$silence = {catalog: {enable: true,index: true,active: false,levels: ['h1', 'h2', 'h3', 'h4']},
};
其属性详细介绍参考如下：
enable
类型：Boolean
默认值：false
作用：是否启用目录生成功能。
若在博文中未使用标题 h1~h6，即使启用也不会生成悬浮目录。
index
类型：Boolean
默认值：true
作用：是否在生成的标题链接前面添加索引。
部分园友习惯在写文时直接在标题前面加上索引，这种情况可能需要将该属性值设为 false ，不然生成的标题链接会出现索引重复的情况。
active
类型：Boolean
默认值：false
作用：页面加载时是否直接显示目录。
不直接显示情况下会在页面右下角的工具栏中生成一个按钮用来控制悬浮目录的显示和隐藏。
levels
类型：Arrary
默认值：[‘h2’, ‘h3’, ‘h4’]
作用：设置需要生成目录的标题等级。
请根据自己平时的标题等级使用规则自行修改默认值，注意仅支持采集三级博文标题。
signature
类型：Object
默认值：{}
作用：该配置项用来在每篇博文结尾处生成版权签名。(可自行修改)
window.$silence = {signature: {enable: true,author: null,license: ['署名-非商业性使用-相同方式共享 4.0 国际', 'https://creativecommons.org/licenses/by-nc-sa/4.0/'],remark: '备注：你可以在这里自定义其他内容，支持 HTML',}
};
其属性详细介绍参考如下：
enable
类型：Boolean
默认值：false
作用：是否启用签名生成功能。
author
- 类型：String
默认值：null
作用：自定义作者名称，未设置则默认使用博客园显示名称。
license
类型：Arrary
默认值：[‘署名-非商业性使用-相同方式共享 4.0 国际’, ‘https://creativecommons.org/licenses/by-nc-sa/4.0/’]
作用：设置您分享的作品需要采用的 知识共享许可协议。
remark
类型：String
默认值：null
作用：设置其他备注，未设置则不会渲染，支持 HTML 内容。
sponsor
类型：Object
默认值：{}
作用：该配置项用来在每篇博文结尾处生成赞赏按钮。
window.$silence = {sponsor: {enable: true,text: 'Buy me a cup of coffee ☕.',wechat: '填写微信收款码图片地址链接',alipay: '填写支付宝收款码图片地址链接'}
};
其属性详细介绍参考如下：
enable
类型：Boolean
默认值：false
作用：是否启用赞赏按钮生成功能。注意启用后 PayPal、微信或支付宝收款地址请至少设置一种，否则等效 false 。
text
- 类型：String
默认值：‘Buy me a cup of coffee ☕.’
作用：设置赞赏友好提示。
paypal
类型：String
默认值：null
作用：设置 PayPal 收款二维码。
类型：String
默认值：null
作用：设置微信收款二维码。
alipay
类型：String
默认值：null
作用：设置支付宝收款二维码。
silence.min.js 文件的引入（非常重要！）
看见 页脚 HTML 代码 栏中最后一行的待填链接了吗，这里需要引入一个 silence.min.js 文件（文件名可以自定义），手动创建一个 silence.min.js 文件将下方提供的代码复制粘贴到文件中，这里可以把文件同样的像之前那样上传到博客园管理的文件中然后复制地址链接放到这个标签中即可
silence.min.js 文件代码：
!function (t) {var e = {};function a(n) {if (e[n]) return e[n].exports;var s = e[n] = {i: n, l: !1, exports: {}};return t[n].call(s.exports, s, s.exports, a), s.l = !0, s.exports}a.m = t, a.c = e, a.d = function (t, e, n) {a.o(t, e) || Object.defineProperty(t, e, {enumerable: !0, get: n})}, a.r = function (t) {"undefined" != typeof Symbol && Symbol.toStringTag && Object.defineProperty(t, Symbol.toStringTag, {value: "Module"}), Object.defineProperty(t, "__esModule", {value: !0})}, a.t = function (t, e) {if (1 & e && (t = a(t)), 8 & e) return t;if (4 & e && "object" == typeof t && t && t.__esModule) return t;var n = Object.create(null);if (a.r(n), Object.defineProperty(n, "default", {enumerable: !0,value: t}), 2 & e && "string" != typeof t) for (var s in t) a.d(n, s, function (e) {return t[e]}.bind(null, s));return n}, a.n = function (t) {var e = t && t.__esModule ? function () {return t.default} : function () {return t};return a.d(e, "a", e), e}, a.o = function (t, e) {return Object.prototype.hasOwnProperty.call(t, e)}, a.p = "", a(a.s = 12)
}([function (t, e, a) {}, function (t, e, a) {}, function (t, e, a) {}, function (t, e, a) {}, function (t, e, a) {}, function (t, e, a) {}, function (t, e, a) {}, function (t, e, a) {}, function (t, e, a) {}, function (t, e, a) {}, function (t, e, a) {}, function (t, e, a) {}, function (t, e, a) {"use strict";a.r(e);a(0);var n = {version: "3.0.0-rc2",avatar: null,favicon: null,github: null,defaultMode: "auto",defaultTheme: "a",navbars: [],showNavAdmin: !0,catalog: {enable: !1, index: !0, active: !1, levels: ["h2", "h3", "h4"]},signature: {enable: !0,author: null,license: ["本文为博主原创文章，转载请附上原文出处链接和本声明。", "https://creativecommons.org/licenses/by-nc-sa/4.0/"],remark: null},sponsor: {enable: !1, text: "Buy me a cup of coffee ☕.", paypal: null, wechat: null, alipay: null}};function s() {return $("#topics").length > 0}a(1);var o = function () {var t = n.github;t && $("body").append(`<a href="${t}" class="github-corner" title="GitHub" target="_blank">\n <svg width="60" height="60" viewBox="0 0 250 250" style="color:#fff" aria-hidden="true">\n <path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path>\n <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>\n <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>\n </svg>\n </a>`)};a(2);var i = function () {const t = n.navbars, e = $("#navList");t && t.length && (t.reverse().forEach(t => {if (t.target = t.target || "_self", t.children && t.children.length) {var a = t.children.map(t => (t.target = t.target || "_self", `<li><a class="menu" target="${t.target}" href="${t.url}">${t.title}</a></li>`));e.find("li").eq(1).after(`\n <li class="esa-has-subnavs">\n <a class="menu" href="javascript:void(0);">${t.title}\n <svg class="arrow" width="9px" height="9px" viewBox="0 0 13 7" xml:space="preserve" fill="none" stroke="var(--text-color)"><path d="M1,1l6.2,6L13,1"></path></svg>\n </a>\n <div class="esa-sub-navs"><div class="caret"></div><ul>${a.join("")}</ul></div>\n </li>`)} else e.find("li").eq(1).after(`<li><a class="menu" target="${t.target}" href="${t.url}">${t.title}</a></li>`)}), $("li.esa-has-subnavs").hover((function () {$(this).find("svg").addClass("open"), $(this).find(".esa-sub-navs").fadeIn("fast")}), (function () {$(this).find("svg").removeClass("open"), $(this).find(".esa-sub-navs").hide()}))), $.each(e.children("li"), (t, e) => {$(e).children("a").length || $(e).remove()}), $("#header").prepend('<div class="esa-mobile-menu material-symbols-outlined">menu</div>'), $(".esa-mobile-menu").on("click", () => {$("#navigator").fadeToggle()}), n.showNavAdmin || $("#blog_nav_admin").parent().remove()};a(3);var l = function () {$("#footer").append(`<span class="esa-copyright">& Theme <a href="https://github.com/esofar/cnblogs-theme-silence" target="_blank">Silence v${n.version}</a></span>`)};a(4);var r = function () {const t = n.avatar, e = n.favicon;t && $("#sideBarMain").prepend(`<img class="esa-profile-avatar" src="${t}" />`), e && $("#favicon").attr("href", e)};a(5);var c = function () {const t = n.catalog;if (t.enable) {const e = t.levels, a = e[0], n = e[1], s = e[2];let o = $("#cnblogs_post_body").find(e.join(",")), i = $(".esa-toolbar");if (!o.length) return i.find(".contents").remove(), !1;$("body").append('<div class="esa-contents noactive"></div>'), t.active && i.find(".contents").trigger("click");let l = 0, r = 0, c = 0, d = "<ul>";$.each(o, (e, o) => {const i = o.tagName.toLowerCase(), h = $(o).text();let u = $(o).attr("id"), p = "", f = h;if (t.index) i === a ? (l++, r = 0, c = 0, p = `<span class="level1">${l}. </span>`) : i === n ? (r++, c = 0, p = `<span class="level2">${l}.${r}. </span>`) : i === s && (c++, p = `<span class="level3">${l}.${r}.${c}. </span>`); else switch (i) {case a:f = `<span class="level1">${f}</span>`;break;case n:f = `<span class="level2">${f}</span>`;break;case s:f = `<span class="level3">${f}</span>`}u || (u = $(o).text().replace(/\ /g, "-").toLowerCase(), $(o).attr("id", u)), d += `<li class="${i}" title="${h}">\n <a class="esa-anchor-link" href="#${u}">${p + f}</a>\n </li>`, $(o).append(`<a href="#${u}" class="esa-anchor">#</a>`).hover(() => {$(o).find(".esa-anchor").css("opacity", 1)}, () => {$(o).find(".esa-anchor").css("opacity", 0)})}), d += "</ul>", $(".esa-contents").append(d)}};a(6);const d = "https://unpkg.com/lightbox2@2.11.1/dist/css/lightbox.min.css",h = "https://unpkg.com/lightbox2@2.11.1/dist/js/lightbox.min.js";var u = function () {$("head").append(`<link rel="stylesheet" href="${d}"/>`), $.getScript(h, () => {$("#cnblogs_post_body").find("img").wrap((function () {return `<a href="${$(this).attr("src")}" data-title="${$(this).attr("title") || ""}" data-alt="${$(this).attr("alt") || ""}" data-lightbox="roadtrip"></a>`})), $(".code_img_closed, .code_img_opened, .cnblogs_code_copy img").unwrap()})};a(7);var p = function () {const t = n.signature;if (t.enable) {const e = $("#cb_post_title_url").attr("href"), a = t.author || currentBlogApp,n = `<div class="esa-post-signature"> \n <p>作者：${$.trim(a)}</p> \n <p>出处：<a href="${e}">${e}</a></p> \n <p>版权：<a href="${t.license[1]}" target="_blank">${t.license[0]}</a></p> \n <p>${t.remark || ""}</p> \n </div>`;$("#cnblogs_post_body").after(n)}};a(8);var f = function () {const t = n.sponsor;if (!t.enable || t.enable && !t.paypal && !t.alipay && !t.wechat) return !1;$("#blog_post_info").before(`\n <div class="esa-sponsor">\n <div class="title">${t.text}</div>\n <ul class="box">\n ${t.paypal ? '<li class="paypal"><svg t="1599893643429" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1307" width="25" height="25"><path d="M941.021887 369.059735c7.422144 34.295426 5.703717 73.709573-2.303424 116.524012-37.147285 188.515157-162.263434 253.632592-322.771878 253.632592h-25.154854c-19.414575 0-35.428857 14.295855-38.82915 33.710429l-2.303424 10.859-31.407006 197.655729-1.133431 8.555575c-3.985289 19.414575-19.999572 33.71043-39.414146 33.71043H334.30728c-16.014282 0-26.288285-13.125861-23.984861-29.140144 10.274003-63.984004 19.999572-127.968008 30.273575-191.952012s20.548006-127.383011 30.858571-191.367015c1.718428-13.710858 10.859-21.133002 24.569857-21.133003 22.85143 0 45.70286-0.584997 74.843004 0 41.132574 0.584997 88.553862-1.718428 134.805156-11.99243 61.68058-13.710858 117.694005-38.82915 163.945299-82.265148 41.717571-38.82915 69.687721-86.835434 88.553862-140.545435a515.893884 515.893884 0 0 0 19.999571-75.976435c1.133431-6.837148 2.851858-5.703717 6.837148-2.851858 31.407005 23.436427 49.139715 54.843432 55.976863 92.539151z m-98.242867-161.093441c0 46.836291-10.859 91.40572-26.288286 134.805156-29.688578 86.250437-85.702003 147.96758-172.537437 179.959582-46.287857 16.562716-94.842575 23.436427-143.98229 23.98486-34.295426 0.584997-68.55429 0-102.813154 0-37.147285 0-60.547149 18.281144-67.420859 54.843432-8.007141 43.435998-39.414146 245.662013-48.554718 302.772307-0.584997 3.985289-2.303424 5.703717-6.837148 5.703717H105.829543a27.494841 27.494841 0 0 1-27.421716-31.407005L210.946121 38.280716A45.995358 45.995358 0 0 1 256.063984 0h341.638019c24.569858 0 81.131717 10.859 119.412433 25.703288 81.131717 31.407005 125.664584 95.391009 125.664584 182.226444z" fill="var(--text-color)" p-id="1308"></path></svg></li>' : ""}\n ${t.alipay ? '<li class="alipay"><svg t="1599893614075" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1025" width="25" height="25"><path d="M828.571429 624.342857c-44.228571-14.742857-103.657143-37.371429-169.714286-61.257143 39.771429-68.914286 71.428571-147.428571 92.228571-232.685714H533.142857v-78.4h266.971429v-43.771429H533.142857V77.714286h-109.028571c-19.085714 0-19.085714 18.857143-19.085715 18.857143v111.771428H135.085714v43.771429h270.057143v78.4H182.171429v43.771428h432.457142a762.491429 762.491429 0 0 1-62.285714 151.885715c-140.342857-46.171429-290.057143-83.657143-384.114286-60.571429-60.114286 14.857143-98.857143 41.257143-121.714285 68.914286-104.457143 126.857143-29.6 319.542857 191.085714 319.542857C368 853.942857 493.714286 781.257143 591.085714 661.714286 736.342857 731.428571 1024 851.085714 1024 851.085714V680.457143s-36.114286-2.857143-195.428571-56.114286zM217.028571 780.114286c-172 0-222.857143-135.2-137.828571-209.257143 28.342857-25.028571 80.228571-37.257143 107.885714-40 102.171429-10.057143 196.8 28.8 308.457143 83.2-78.628571 102.285714-178.628571 166.057143-278.514286 166.057143z" fill="var(--text-color)" p-id="1026"></path></svg></li>' : ""}\n ${t.wechat ? '<li class="wechat"><svg t="1599893658389" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1451" width="25" height="25"><path d="M1004.416 543.914667c-25.984-58.88-75.008-105.642667-131.925333-134.442667-100.437333-50.858667-225.322667-50.56-325.504 1.28-69.589333 35.712-127.701333 99.712-144.170667 177.578667-13.568 57.344-1.408 119.082667 29.013333 169.002666 45.269333 75.178667 127.104 123.178667 212.096 138.581334 61.568 12.501333 125.269333 5.077333 185.088-12.16 35.925333 13.909333 67.925333 36.437333 102.741334 53.162666a2238.762667 2238.762667 0 0 0-28.842667-89.685333c39.082667-27.733333 74.496-62.336 95.744-105.770667 31.744-60.373333 33.664-135.296 5.76-197.546666z m-423.424-403.882667c-106.453333-59.904-239.018667-68.906667-353.536-27.52-75.264 27.093333-143.36 77.44-185.429333 145.92-38.186667 61.866667-52.48 139.008-34.090667 209.792 18.474667 78.506667 73.002667 144.341333 139.178667 188.288-12.8 36.266667-24.96 72.490667-36.48 109.013333 41.6-21.76 83.2-44.501333 124.842666-66.602666 49.92 16 103.04 23.850667 156.16 22.101333a262.784 262.784 0 0 1-10.88-125.909333c9.6-58.496 41.6-112 85.077334-151.637334 73.642667-68.906667 177.962667-97.962667 277.162666-90.922666-18.602667-91.093333-82.602667-168.064-163.157333-212.48h1.152z m73.941333 426.197333c-8.917333 27.818667-49.322667 36.181333-68.906666 15.018667-21.589333-19.584-13.184-60.501333 15.146666-69.248 31.317333-13.226667 67.498667 22.912 53.76 54.229333z m204.586667 3.925334c-10.922667 25.002667-48.682667 30.848-67.242667 11.52-8.917333-8.149333-11.52-20.437333-14.677333-31.146667 4.437333-19.541333 17.92-39.808 39.68-40.746667 30.08-4.181333 57.002667 32.981333 41.6 60.416h0.64zM554.24 294.784c0.341333 41.002667-54.4 66.602667-85.12 38.784-31.872-22.826667-22.826667-78.378667 14.592-89.856 33.493333-13.44 73.088 14.677333 70.442667 50.56l0.085333 0.512z m-258.517333 10.410667c-7.338667 35.626667-55.082667 52.821333-83.029334 28.928-32.384-22.826667-23.296-79.402667 14.72-90.922667 37.248-14.336 79.573333 23.466667 68.309334 61.994667z" fill="var(--text-color)" p-id="1452"></path></svg></li>' : ""}\n </ul>\n <div class="qrshow">\n <img src="">\n </div>\n </div>`);var e = $(".esa-sponsor");e.find(".box li").hover((function () {var a = null;switch ($(this).attr("class")) {case"paypal":a = t.paypal;break;case"alipay":a = t.alipay;break;case"wechat":a = t.wechat}a && e.find(".qrshow").html(`<img src="${a}">`).show()}), (function () {e.find(".qrshow").hide()}))};a(9);var v = function () {const t = ".feedbackItem > .feedbackCon > .blog_comment_body", e = () => {$(t).before("<div class='esa-comment-avatar'><a target='_blank'><img /></a></div>");let e = $(".feedbackItem > .feedbackCon");$.each(e, (function (t, e) {let a = null, n = $(e).find('span[id$="avatar"]');n.length && (a = $.trim($(n).text())), $(e).find(".esa-comment-avatar img").attr("src", a || "https://pic.cnblogs.com/face/sample_face.gif");const s = $(e).parent().find(".comment_date").next().attr("href");$(e).find(".esa-comment-avatar a").attr("href", $.trim(s))}))};if ($(t).length) e(); else {let a = 1, n = setInterval(() => {$(t).length && (clearInterval(n), e()), 10 == a && clearInterval(n), a++}, 500)}};a(10);var m = function () {$("body").append('<div class="esa-toolbar">\n <div class="material-symbols-outlined bars">more_horiz</div>\n <span class="material-symbols-outlined up" title="返回顶部">keyboard_arrow_up</span>\n <span class="material-symbols-outlined mode" title="切换模式">dark_mode</span>\n <span class="material-symbols-outlined skin" title="切换主题">palette</span>\n <div class="skin-popup">\n <div class="item">\n <div class="title">选择主题</div>\n <div class="themes">\n <button data-theme="a" style="background: #2D8CF0;"></button>\n <button data-theme="b" style="background: #FA7298;"></button>\n <button data-theme="c" style="background: #42B983;"></button>\n <button data-theme="d" style="background: #607D8B;"></button>\n <button data-theme="e" style="background: #5E72E4;"></button>\n <button data-theme="f" style="background: #FF9700;"></button>\n <button data-theme="g" style="background: #FF5722;"></button>\n <button data-theme="h" style="background: #009688;"></button>\n <button data-theme="i" style="background: #673BB7;"></button>\n <button data-theme="j" style="background: #906f61;"></button>\n </div>\n </div>\n </div>\n </div>\n </div>');const t = s() && n.catalog.enable;t && $(".esa-toolbar").append('<span class="material-symbols-outlined contents" title="目录导航">menu</span>');const e = "silence-mode-" + currentBlogApp, a = "silence-theme-" + currentBlogApp, o = (new Date).getHours(),i = sessionStorage.getItem(a) || n.defaultTheme,l = sessionStorage.getItem(e) || ("auto" == n.defaultMode ? o >= 6 && o < 18 ? "light" : "dark" : n.defaultMode);$("html").attr("mode", l), $("html").attr("theme", i);const r = $(".esa-toolbar"), c = $(".skin-popup");r.find(".mode").html("light" == l ? "dark_mode" : "light_mode");var d = document.getElementsByClassName("skin-popup")[0];let h = !1;r.find(".bars").click((function () {h ? (r.find(".bars").removeClass("bars-show"), r.find(".up").removeClass("up-show"), r.find(".mode").removeClass("mode-show"), r.find(".skin").removeClass("skin-show"), t && r.find(".contents").removeClass("contents-show")) : (r.find(".bars").addClass("bars-show"), r.find(".up").addClass("up-show"), r.find(".mode").addClass("mode-show"), r.find(".skin").addClass("skin-show"), t && r.find(".contents").addClass("contents-show")), h = !h})), r.find(".up").click(() => {$("html, body").animate({scrollTop: 0}, 450)}), r.find(".mode").click((function () {let t = $("html").attr("mode"), a = "light" == t ? "dark" : "light";sessionStorage.setItem(e, a), $(this).html(t + "_mode"), $("html").attr("mode", a)})), r.find(".skin").click(t => {t.stopPropagation(), c.slideToggle()}), d.addEventListener("click", (function (t) {if (t.stopPropagation(), "BUTTON" === t.target.nodeName) {console.log(t);var e = t.target.dataset.theme;sessionStorage.setItem(a, e), $("html").attr("theme", e)}})), document.addEventListener("click", (function (t) {d && "block" === d.style.display && (d.style.display = "none")}));let u = !1;r.find(".contents").click(() => {$(".esa-contents").toggleClass((function () {return $(this).hasClass("active") ? ($(this).removeClass("active"), "noactive") : ($(this).removeClass("noactive"), "active")})), u ? ($("#home").css({width: "100%"}), u = !1) : ($("#home").css({width: "calc(100% - 252px)"}), u = !0)}), s() && r.find(".bars").trigger("click")};a(11);const g = {show: () => {$(".loading").show()}, hide: () => {$(".loading").fadeOut()}};var b = g;new class {constructor() {this.init()}init() {const t = window.$silence;t && $.extend(!0, n, t), this.building()}building() {i(), l(), o(), r(), m(), s() ? (c(), u(), p(), f(), v()) : ($(".forFlow").css({marginLeft: "260px"}), $("#sideBar").show()), b.hide()}}
}]);好了以上就是博客园主题的全部设置步骤了，感脚还是比较详细的，只要按照步骤来问题不大，有问题的伙伴可以评论区留言也可以去原作者的GitHub主页反馈，下面提供了原作者的博客园地址以及GitHub主页地址链接，最后希望大家都能配置自己喜欢的博客园主题
原作者博客园主页
原作者GItHub反馈链接
打造一个专注阅读的博客园主题相关推荐
- Silence - 专注于阅读的博客园主题
最近花了点心思整理了下我的博客园主题代码,今天正式和大家分享一下,感兴趣的园友可以了解一下. 主题介绍 Silence 追求大道至简的终极真理,旨在打造一个干净.专注阅读的博客主题,没有二维空间元素. ...
- 一个最简单的博客园文章密码暴力破解器-python3实现
一个最简单的博客园文章密码暴力破解器-python3实现 我之前想写路由器的密码暴力破解器,我手上只有极路由,发现极路由有安全限制,只能允许连续10密码错误,所以我改拿博客园练手. 博客园的博客有个功 ...
- python密码破解工具_一个最简单的博客园文章密码暴力破解器-python3实现
一个最简单的博客园文章密码暴力破解器-python3实现 我之前想写路由器的密码暴力破解器,我手上只有极路由,发现极路由有安全限制,只能允许连续10密码错误,所以我改拿博客园练手. 博客园的博客有个功 ...
- 博客园 页首html代码,可爱的博客园样式美化、自定义博客园主题样式
cute-cnblogs 说明 "我经常有那种感觉,如果这个事情来了,你却没有勇敢地去解决掉,它一定会再来.生活真是这样,它会一次次地让你去做这个功课直到你学会为止." -- &l ...
- 可爱的博客园样式美化、自定义博客园主题样式
cute-cnblogs 说明 "我经常有那种感觉,如果这个事情来了,你却没有勇敢地去解决掉,它一定会再来.生活真是这样,它会一次次地让你去做这个功课直到你学会为止." -- &l ...
- 博客园页面定制html代码,博客园主题分享
博客园主题 分享 选择Custom主题 页面定制CSS代码 /*评论框祖传猫猫*/ .comment_textarea{ background:#f5f5f5 url(https://files-cd ...
- 博客园页面定制html代码,你要的博客园主题都有！！！
基于最近很多小伙伴加我微信想要我的博客园主题,那我就把博客园主题整理一下,送给喜欢的小伙伴,园友们喜欢可以收藏,关注,博客园主题仅供参考,博主顺便再多说一句,虽然我可以分享给你们,但是我更愿意你们加我 ...
- python贴吧发帖脚本-一个发布文章到博客园的 Python 脚本
我的个人独立博客是基于 Hexo 搭建的,因为小站,Google 搜索引擎收录文章比较慢,还搜不到 为了解决这个问题,希望把文章也顺便发布到博客平台博客园上.但不想每次手动复制粘贴,打算利用脚本实现, ...
- 定制和我一样的博客园主题
有园友问我的博客园的主题怎么弄的,我答应了要发一篇博文分享一下我的博客主题配置.其实是很简单的,相信懂 CSS 的人都能自己搞,但如果你懒得花时间,正好可以直接复制我写好的配置代码. PS:按照博客园 ...
最新文章
- 干货丨机器学习研究者必知的八个神经网络架构（经典文章，值得收藏）
- 董明珠：别嫌工资少，满足这些条件！多高都给你
- Linux/Unix mii-tool command
- namespace nvinfer1
- 《深入理解Android：卷III A》一一2.3心系两界的MessageQueue
- 云计算时代，数据中心架构三层到大二层的演变
- 不固定图片宽高瀑布流_APP设计学习：瀑布流式的产品UI设计
- 框架下载_25. Scrapy 框架-下载中间件Middleware
- 麦肯锡70页特辑报告论述《人工智能的未来之路》（完整版PPT）
- 【ModelArts-Lab AI实战营】使用Postman测试Modelarts在线服务（图像分类、物体检测）
- 刷题笔记（2） 将数组中的数字组合成一个最小的数
- 剑指_6从尾到头打印链表（Python）
- 学习一种新编程语言要做的14个练习
- Mysql报错1055
- html网页屏保,屏幕保护是什么
- Cesium模型制作服务
- 手把手教你配置哔哔点啥
- 7 爬虫爬取网页文章（保留图片和文本顺序，原封不动）的数据库设计，且避免重复抓取...
- Speedoffice（excel）如何利用SUMPRODUCT函数求和
- 卖家中心html素材,天猫素材中心入口和使用方法