写了一个vscode风格的博客园主题
前言
现在的博客园皮肤虽然很简洁，但是缺少某些显示。我就在基础上，增加了目录展示、将发表时间放到博客正文上方，风格做成了VS Code的风格。
样式代码
大家可以在《设置》中自行复制到对应内容，期待哪天被博客园官方收录
页面定制css代码（不要勾选《禁用模板默认CSS》）：
点击展开：页面定制 CSS
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap');
:root {
/* VS Code Dark+ 色板 */
--bg: #1e1e1e;
--bg-sidebar: #252526;
--bg-panel: #2d2d2d;
--bg-input: #3c3c3c;
--bg-hover: #2a2d2e;
--bg-active: #37373d;
--text: #d4d4d4;
--text-muted: #858585;
--text-dim: #6a9955;
--border: #3c3c3c;
--border-focus: #6a8fa8;
--accent: #8eb4d4;
--accent-hover: #a8c8e0;
--accent-soft: rgba(142, 180, 212, 0.12);
--selection: #3a5068;
--code-bg: #1e1e1e;
--code-inline-bg: #2d2d2d;
--code-inline: #ce9178;
--string: #ce9178;
--keyword: #8aa4b8;
--function: #dcdcaa;
--nav-bg: #333333;
--nav-text: #cccccc;
--radius: 4px;
--shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
--font-sans: "Segoe UI", "Noto Sans SC", "PingFang SC", "Microsoft YaHei", sans-serif;
--font-mono: "JetBrains Mono", "Cascadia Code", Consolas, "Courier New", monospace;
}
/* ---------- 1. 全局 ---------- */
body.skin-custom {
color: var(--text);
background: var(--bg);
font-family: var(--font-sans);
font-size: 14px;
line-height: 1.7;
}
body.skin-custom ::selection {
background: var(--selection);
color: #fff;
}
body.skin-custom a:link,
body.skin-custom a:visited {
color: var(--accent);
text-decoration: none;
transition: color 0.15s ease;
}
body.skin-custom a:hover {
color: var(--accent-hover);
text-decoration: underline;
}
/* 博客园全站顶栏 · 深色配色（仅视觉，不干预登录入口显示） */
#top_nav.navbar {
position: relative;
z-index: 100;
background: var(--nav-bg) !important;
border-bottom: 1px solid var(--border);
}
#top_nav .navbar-main,
#top_nav .navbar-list {
display: flex;
align-items: center;
}
#top_nav .navbar-list a,
#top_nav .navbar-branding a {
color: var(--nav-text) !important;
}
#top_nav .navbar-list a:hover {
color: #fff !important;
}
#top_nav .navbar-branding img,
#top_nav .navbar-icon,
#top_nav #search_icon,
#top_nav .navbar-search img {
filter: brightness(0) invert(0.88);
opacity: 1;
}
#top_nav .navbar-search {
background: var(--bg-input) !important;
border: 1px solid var(--border);
}
#top_nav #zzk_search_input {
background: transparent !important;
border: 0;
color: var(--text);
}
#top_nav #zzk_search_input::placeholder {
color: var(--text-muted);
}
#top_nav #zzk_search_button {
background: transparent;
border: 0;
}
#top_nav .dropdown-menu {
background: var(--bg-panel);
border: 1px solid var(--border);
border-radius: var(--radius);
box-shadow: var(--shadow);
}
#top_nav .dropdown-menu a {
color: var(--nav-text) !important;
}
#top_nav .dropdown-menu a:hover {
background: var(--bg-hover);
color: #fff !important;
text-decoration: none;
}
#home {
width: min(1400px, 98%);
min-width: 0;
margin: 0 auto;
padding-bottom: 24px;
}
/* ---------- 2. 博客头部 ---------- */
#header {
margin-top: 16px;
padding: 16px 0 0;
border: 0;
background: transparent;
}
#blogTitle {
height: auto;
min-height: 0;
margin-bottom: 10px;
padding: 12px 16px;
border-left: 3px solid var(--accent);
background: var(--bg-sidebar);
}
#blogTitle h1 {
float: none;
width: auto;
margin: 0;
font-family: var(--font-mono);
font-size: 1.4rem;
font-weight: 600;
line-height: 1.3;
}
#blogTitle h1 a.headermaintitle {
color: var(--function);
}
#blogTitle h1 a.headermaintitle:hover {
color: var(--accent-hover);
text-decoration: none;
}
#blogTitle h2 {
float: none;
width: auto;
margin: 4px 0 0;
color: var(--text-muted);
font-size: 0.85rem;
font-family: var(--font-mono);
}
#blogTitle h2:empty {
display: none;
}
#blogTitle h2:not(:empty)::before {
content: "// ";
color: var(--text-dim);
}
#blogLogo,
#lnkBlogLogo {
display: none;
}
/* 博客导航 · 仿 VS Code 标签栏 */
#navigator {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: 8px;
height: auto;
min-height: 0;
padding: 0;
border: 1px solid var(--border);
border-radius: var(--radius);
background: var(--bg-sidebar);
box-shadow: none;
overflow: visible;
}
#navList {
flex: 1 1 auto;
min-height: 0;
margin: 0;
padding: 0;
border-bottom: 0;
}
#navList li {
float: none;
display: inline-block;
}
#navList a.menu {
float: none;
display: inline-block;
width: auto;
height: auto;
padding: 8px 16px;
border: 0;
border-right: 1px solid var(--border);
border-radius: 0;
color: var(--text-muted);
font-size: 13px;
font-weight: 400;
}
#navList a.menu:hover {
color: var(--text);
background: var(--bg-hover);
text-decoration: none;
}
.blogStats {
flex: 0 0 auto;
float: none;
margin: 0 0 0 auto;
padding: 8px 14px;
color: var(--text-muted);
font-family: var(--font-mono);
font-size: 11px;
line-height: 1.5;
text-align: right;
white-space: nowrap;
}
.blogStats span,
#stats_post_count,
#stats_article_count,
#stats-comment_count,
#stats-total-view-count {
color: var(--text-muted);
}
#blog_stats_place_holder,
#blog_stats_place_holder a,
#blog_stats_place_holder span {
color: var(--text-muted);
}
#blog_stats_place_holder a:hover {
color: var(--accent);
text-decoration: none;
}
/* ---------- 3. 主布局 ---------- */
#main {
min-width: 0;
margin-top: 16px;
display: flex;
gap: 0;
align-items: flex-start;
border: 1px solid var(--border);
border-radius: var(--radius);
overflow: hidden;
}
#mainContent {
float: none;
width: auto;
flex: 1 1 auto;
min-width: 0;
margin: 0;
padding: 0;
background: var(--bg);
}
#mainContent .forFlow {
float: none;
width: auto;
margin: 0;
padding: 20px 24px;
border: 0;
border-radius: 0;
background: var(--bg);
box-shadow: none;
}
#sideBar {
float: none;
width: 220px;
flex: 0 0 220px;
min-width: 0;
padding: 0;
border-left: 1px solid var(--border);
background: var(--bg-sidebar);
}
#sideBarMain {
padding: 12px 14px;
border: 0;
border-radius: 0;
background: var(--bg-sidebar);
box-shadow: none;
}
/* ---------- 4. 首页文章列表 ---------- */
.day {
margin-bottom: 24px;
padding-bottom: 18px;
border-bottom: 1px solid var(--border);
}
.day:last-child {
border-bottom: 0;
}
.dayTitle {
margin-bottom: 12px;
padding: 4px 8px;
border: 0;
border-left: 2px solid var(--keyword);
background: var(--bg-panel);
color: var(--text-muted);
font-family: var(--font-mono);
font-size: 12px;
font-weight: 400;
text-align: left;
}
.day.pinned .dayTitle::before {
content: "[pinned] ";
color: var(--function);
}
.postTitle {
float: none;
width: auto;
margin-bottom: 6px;
padding-bottom: 0;
border: 0;
font-size: 1.1rem;
font-weight: 600;
line-height: 1.5;
}
.postTitle a.postTitle2 {
color: var(--text);
}
.postTitle a.postTitle2:hover {
color: var(--accent-hover);
text-decoration: none;
}
.postCon {
float: none;
width: auto;
padding: 6px 0 0;
color: var(--text-muted);
line-height: 1.75;
}
.postCon p {
text-indent: 0;
margin-bottom: 0.6em;
}
.postDesc {
float: none;
width: auto;
margin-top: 10px;
padding: 0;
color: var(--text-muted);
font-family: var(--font-mono);
font-size: 11px;
text-align: left;
}
.postDesc a {
color: var(--text-muted);
}
.postDesc a:hover {
color: var(--accent);
}
.postSeparator {
float: none;
width: auto;
margin: 16px auto;
border-top: 1px solid var(--border);
}
.topicListFooter {
margin-top: 14px;
padding-top: 10px;
border-top: 1px solid var(--border);
color: var(--text-muted);
font-size: 12px;
}
.topicListFooter a {
margin-left: 8px;
}
/* ---------- 5. 文章详情页 ---------- */
/* 覆盖皮肤默认 float + overflow:hidden，避免插入目录后正文被挤到下方 */
#topics {
float: none;
overflow: visible;
}
#topics .post {
display: block;
}
#topics .post::after {
content: "";
display: block;
clear: both;
}
/* 文章页：标题 → 时间 → 正文，收紧垂直间距（纯 CSS，无需页首 JS） */
#topics .post > .clear {
display: none;
height: 0;
margin: 0;
padding: 0;
}
#topics .postTitle {
float: none;
width: auto;
clear: both;
margin: 0 0 0;
padding: 0;
border-bottom: 0;
font-size: 1.5rem;
font-weight: 600;
line-height: 1.3;
}
#topics .postTitle a.postTitle2 {
color: var(--text);
line-height: 1.3;
}
/* 发表时间：紧贴标题，与正文之间留一条细分隔 */
#topics .postTitle a.postTitle2::after {
content: attr(title);
display: block;
margin: 3px 0 0;
padding: 0 0 8px;
border-bottom: 1px solid var(--border);
color: var(--text-muted);
font-family: var(--font-mono);
font-size: 12px;
font-weight: 400;
line-height: 1.4;
}
#topics .postBody {
float: none;
clear: both;
width: auto;
margin-top: 0;
padding-top: 0;
}
#topics #cnblogs_post_body > :first-child {
margin-top: 0;
}
#topics #cnblogs_post_body > p:first-child {
margin-top: 0;
}
/* 文章目录（由页脚 JS 生成；Markdown # / ## / ### → h1 h2 h3） */
#post-toc {
float: none;
clear: both;
width: auto;
margin: 0 0 12px;
padding: 8px 12px;
border: 1px solid var(--border);
border-radius: var(--radius);
background: var(--bg-panel);
font-family: var(--font-mono);
font-size: 12px;
line-height: 1.5;
}
/* 文章页：放宽主内容区，目录真正固定（fixed） */
body.post-toc-active #main,
body.post-toc-active #mainContent,
body.post-toc-active #mainContent .forFlow,
body.post-toc-active #post_detail {
overflow: visible;
}
body.post-toc-active #mainContent .forFlow {
padding: 20px 20px 24px;
}
body.post-toc-active #topics .post {
display: grid;
grid-template-columns: minmax(180px, 220px) minmax(0, 1fr);
column-gap: 40px;
align-items: start;
}
body.post-toc-active #topics .post::after {
display: none;
}
body.post-toc-active #topics .postTitle {
grid-column: 1 / -1;
margin-bottom: 12px;
padding-bottom: 0;
border-bottom: 1px solid var(--border);
}
body.post-toc-active #topics .postTitle a.postTitle2::after {
border-bottom: 0;
padding-bottom: 0;
margin-bottom: 0;
}
#post-toc-spacer {
grid-column: 1;
grid-row: 2;
visibility: hidden;
pointer-events: none;
}
body.post-toc-active #post-toc.is-fixed {
position: fixed;
top: auto;
bottom: var(--toc-bottom, 20px);
left: var(--toc-left, auto);
width: var(--toc-width, 220px);
z-index: 10;
margin: 0;
max-height: calc(100vh - var(--toc-top, 72px) - var(--toc-bottom, 20px));
padding: 10px 12px;
border-left: 2px solid var(--accent);
display: flex;
flex-direction: column;
}
body.post-toc-active #post-toc.is-fixed .post-toc-list {
max-height: none;
flex: 1 1 auto;
overflow-y: auto;
}
body.post-toc-active #topics .postBody {
grid-column: 2;
grid-row: 2;
}
body.post-toc-active #topics .postDesc {
grid-column: 2;
grid-row: 3;
}
#post-toc .post-toc-title {
display: flex;
align-items: center;
justify-content: space-between;
margin: 0 0 6px;
color: var(--text-muted);
font-size: 11px;
font-weight: 600;
letter-spacing: 0.04em;
text-transform: uppercase;
cursor: pointer;
user-select: none;
}
#post-toc .post-toc-title::after {
content: "−";
color: var(--accent);
font-size: 14px;
line-height: 1;
}
#post-toc.is-collapsed .post-toc-title::after {
content: "+";
}
#post-toc.is-collapsed .post-toc-list {
display: none;
}
#post-toc .post-toc-list {
margin: 0;
padding: 0;
list-style: none;
max-height: 220px;
overflow-y: auto;
}
#post-toc .post-toc-list li {
margin: 0;
padding: 0;
}
#post-toc .post-toc-list a {
display: block;
padding: 2px 0;
color: var(--accent);
text-decoration: none;
word-break: break-all;
}
#post-toc .post-toc-list a:hover {
color: var(--accent-hover);
text-decoration: underline;
}
#post-toc .toc-h1 a,
#post-toc .toc-h2 a {
color: var(--text);
font-weight: 500;
}
#post-toc .toc-h2 {
padding-left: 0;
}
#post-toc .toc-h3 {
padding-left: 12px;
}
#post-toc .toc-h4 {
padding-left: 24px;
}
/* 无左侧布局时，时间行底部分隔线保留 */
#topics .post:not(:has(#post-toc[data-toc-ready="1"])) .postTitle a.postTitle2::after,
body:not(.post-toc-active) #topics .postTitle a.postTitle2::after {
border-bottom: 1px solid var(--border);
padding-bottom: 8px;
}
/* 以下 #post-meta-top 规则仅在使用页首 JS 时生效，可忽略 */
body:has(#post-meta-top:not(:empty)) #topics .postTitle a.postTitle2::after {
display: none;
}
/* 标题下新增 meta 行：时间 + 标签同一行 */
#post-meta-top:empty {
display: none;
}
#post-meta-top {
display: flex;
flex-wrap: wrap;
align-items: baseline;
gap: 4px 12px;
margin: 6px 0 14px;
padding: 0 0 12px;
border-bottom: 1px solid var(--border);
color: var(--text-muted);
font-family: var(--font-mono);
font-size: 12px;
line-height: 1.5;
}
#post-meta-top .meta-time {
flex: 0 0 auto;
white-space: nowrap;
}
#post-meta-top .meta-tags {
flex: 0 0 auto;
}
#post-meta-top .meta-tags a {
display: inline-block;
margin: 0 6px 0 0;
padding: 1px 8px;
border: 1px solid var(--border);
border-radius: 3px;
background: var(--bg-panel);
color: var(--accent);
font-size: 11px;
text-decoration: none;
}
#post-meta-top .meta-tags a:hover {
border-color: var(--accent);
background: var(--accent-soft);
color: var(--accent-hover);
}
/* 顶部已有副本时，隐藏原位置重复项 */
body:has(#post-meta-top .meta-tags:not(:empty)) #topics #blog_post_info #EntryTag {
display: none;
}
body:has(#post-meta-top .meta-time:not(:empty)) #topics .postDesc #post-date {
display: none;
}
/* 隐藏文末重复的 "posted @ " 纯文本 */
body:has(#post-meta-top .meta-time:not(:empty)) #topics .postDesc {
font-size: 0;
}
body:has(#post-meta-top .meta-time:not(:empty)) #topics .postDesc a,
body:has(#post-meta-top .meta-time:not(:empty)) #topics .postDesc span:not(#post-date) {
font-size: 12px;
}
/* 文末 postDesc 恢复默认排版 */
#topics .postDesc {
margin-top: 14px;
padding-top: 12px;
border-top: 1px solid var(--border);
color: var(--text-muted);
font-family: var(--font-mono);
font-size: 12px;
}
#topics .postDesc a {
color: var(--text-muted);
}
#topics .postDesc a:hover {
color: var(--accent);
}
/* 正文与分类 / 标签链接样式 */
#topics #BlogPostCategory,
#topics #EntryTag,
#topics .post-meta-item {
margin: 0 0 8px;
padding: 0;
border: 0;
color: var(--text-muted);
font-family: var(--font-mono);
font-size: 12px;
line-height: 1.6;
}
#topics #BlogPostCategory a,
#topics #EntryTag a,
#topics .post-meta-tags a {
display: inline-block;
margin: 2px 6px 0 0;
padding: 1px 8px;
border: 1px solid var(--border);
border-radius: 3px;
background: var(--bg-panel);
color: var(--accent);
font-size: 11px;
}
#topics #BlogPostCategory a:hover,
#topics #EntryTag a:hover,
#topics .post-meta-tags a:hover {
border-color: var(--accent);
background: var(--accent-soft);
color: var(--accent-hover);
text-decoration: none;
}
/* 隐藏博客园免责声明小字 */
#topics .post-meta-disclaimer {
display: none;
}
.postBody,
#cnblogs_post_body.blogpost-body {
padding: 0;
color: var(--text);
line-height: 1.75;
border: 0;
}
.postBody p,
#cnblogs_post_body p {
margin: 0 0 1em;
text-indent: 0;
}
.postBody h1,
.postBody h2,
.postBody h3,
.postBody h4,
#cnblogs_post_body h1,
#cnblogs_post_body h2,
#cnblogs_post_body h3,
#cnblogs_post_body h4 {
margin: 1.5em 0 0.6em;
color: var(--keyword);
font-weight: 600;
}
.postBody h1,
#cnblogs_post_body h1 { font-size: 1.4rem; color: var(--text); }
.postBody h2,
#cnblogs_post_body h2 { font-size: 1.3rem; }
.postBody h3,
#cnblogs_post_body h3 { font-size: 1.1rem; color: var(--function); }
.postBody ul,
.postBody ol,
#cnblogs_post_body ul,
#cnblogs_post_body ol {
margin: 0 0 1em 1.4em;
padding: 0;
}
.postBody li,
#cnblogs_post_body li {
list-style: disc;
margin-bottom: 0.4em;
}
.postBody ol li,
#cnblogs_post_body ol li {
list-style: decimal;
}
/* 行内代码 · VS Code 风格 */
.postBody code,
#cnblogs_post_body code {
padding: 0.1em 0.4em;
border: 1px solid var(--border);
border-radius: 3px;
background: var(--code-inline-bg);
color: var(--code-inline);
font-family: var(--font-mono);
font-size: 0.9em;
word-break: break-all;
}
/* 代码块 */
.postBody pre,
#cnblogs_post_body pre {
margin: 1em 0;
padding: 12px 14px;
overflow-x: auto;
border: 1px solid var(--border);
border-radius: var(--radius);
background: var(--code-bg);
color: var(--text);
line-height: 1.55;
}
.postBody pre code,
#cnblogs_post_body pre code {
padding: 0;
border: 0;
background: transparent;
color: inherit;
font-size: 0.88em;
}
.postBody img,
#cnblogs_post_body img {
display: block;
max-width: 100%;
height: auto;
margin: 1em auto;
border: 1px solid var(--border);
border-radius: var(--radius);
}
.postBody blockquote,
#cnblogs_post_body blockquote {
margin: 1em 0;
padding: 10px 14px;
border-left: 3px solid var(--keyword);
border-radius: 0 var(--radius) var(--radius) 0;
background: var(--bg-panel);
color: var(--text-muted);
}
/* Markdown 表格 · 仅含 th 的数据表，不影响代码块行号 table */
.postBody table:has(th),
#cnblogs_post_body table:has(th),
#cnblogs_post_body.blogpost-body table:has(th) {
width: 100%;
margin: 1em 0;
border-collapse: collapse;
word-break: break-word;
}
.postBody table:has(th) th,
#cnblogs_post_body table:has(th) th,
#cnblogs_post_body.blogpost-body table:has(th) th {
background-color: var(--bg-active) !important;
color: var(--text) !important;
font-weight: 600;
text-align: left;
border: 1px solid var(--border) !important;
padding: 8px 14px;
min-width: 50px;
}
.postBody table:has(th) td,
#cnblogs_post_body table:has(th) td,
#cnblogs_post_body.blogpost-body table:has(th) td {
background-color: var(--bg-panel) !important;
color: var(--text) !important;
border: 1px solid var(--border) !important;
padding: 8px 14px;
min-width: 50px;
}
.postBody table:has(th) tbody tr:nth-child(even) td,
#cnblogs_post_body table:has(th) tbody tr:nth-child(even) td {
background-color: var(--bg-sidebar) !important;
}
.postBody table:has(th) tbody tr:hover td,
#cnblogs_post_body table:has(th) tbody tr:hover td {
background-color: var(--bg-hover) !important;
}
/* 代码块行号 table · 撤销可能残留的表格样式 */
.postBody .syntaxhighlighter table td,
.postBody table.hljs-ln td,
#cnblogs_post_body .syntaxhighlighter table td,
#cnblogs_post_body table.hljs-ln td {
background-color: transparent !important;
border: 0 !important;
min-width: 0;
}
/* 折叠代码块 · details / summary */
.postBody details,
#cnblogs_post_body details {
margin: 1em 0;
padding: 8px 12px;
border: 1px solid var(--border);
border-radius: var(--radius);
background: var(--bg-panel);
}
.postBody summary,
#cnblogs_post_body summary {
cursor: pointer;
color: var(--accent);
font-weight: 500;
user-select: none;
}
.postBody summary:hover,
#cnblogs_post_body summary:hover {
color: var(--accent-hover);
}
.postBody details[open] summary,
#cnblogs_post_body details[open] summary {
margin-bottom: 0.8em;
padding-bottom: 0.6em;
border-bottom: 1px solid var(--border);
}
#EntryTag {
margin-top: 0;
padding-top: 0;
border-top: 0;
color: var(--text-muted);
font-size: 12px;
}
#EntryTag a {
display: inline-block;
margin: 4px 6px 0 0;
padding: 1px 8px;
border: 1px solid var(--border);
border-radius: 3px;
background: var(--bg-panel);
color: var(--accent);
font-family: var(--font-mono);
font-size: 11px;
}
#EntryTag a:hover {
border-color: var(--accent);
background: var(--accent-soft);
color: var(--accent-hover);
text-decoration: none;
}
/* 首页列表的 postDesc 仍保留在卡片底部 */
.postDesc {
margin-top: 10px;
padding: 0;
color: var(--text-muted);
font-family: var(--font-mono);
font-size: 12px;
}
/* ---------- 6. 评论区 ---------- */
.feedback_area_title {
margin-top: 24px;
padding: 0 0 8px;
border-bottom: 1px solid var(--border);
color: var(--text);
font-size: 1rem;
}
.feedbackCon {
margin-bottom: 1em;
padding: 12px 12px 10px 36px;
border-bottom: 1px solid var(--border);
background: transparent;
line-height: 1.7;
}
.feedbackListSubtitle {
margin-bottom: 4px;
color: var(--text-muted);
font-family: var(--font-mono);
font-size: 11px;
}
#divRefreshComments {
margin: 8px 0 12px;
color: var(--text-muted);
font-size: 12px;
}
.commenttb,
.commentTextBox,
textarea,
input[type="text"],
input[type="search"] {
border: 1px solid var(--border);
border-radius: var(--radius);
background: var(--bg-input);
color: var(--text);
}
.commenttb:focus,
.commentTextBox:focus,
textarea:focus,
input[type="text"]:focus {
border-color: var(--border-focus);
outline: none;
}
/* ---------- 7. 侧边栏 · Explorer 风格 ---------- */
.newsItem .catListTitle,
.catListTitle {
display: block;
margin: 0 0 8px;
padding: 4px 0;
border-bottom: 0;
color: var(--text);
font-size: 11px;
font-weight: 700;
text-align: left;
text-transform: uppercase;
letter-spacing: 0.06em;
}
.newsItem,
#sidebar_news {
margin-bottom: 14px;
padding-bottom: 12px;
border-bottom: 1px solid var(--border);
color: var(--text-muted);
font-size: 13px;
line-height: 1.65;
}
#leftcontentcontainer ul {
line-height: 1.7;
}
#leftcontentcontainer li {
margin-bottom: 2px;
}
#leftcontentcontainer li a {
display: block;
padding: 3px 6px;
border-radius: 3px;
color: var(--text-muted);
}
#leftcontentcontainer li a:hover {
background: var(--bg-hover);
color: var(--text);
text-decoration: none;
}
.catListComment .divRecentComment {
color: var(--text-muted);
font-size: 12px;
}
#calendar .Cal,
#calendar table {
color: var(--text-muted);
}
#calendar .CalTodayDay {
color: var(--accent);
font-weight: 700;
}
#calendar table a:hover {
border-radius: 3px;
background: var(--accent-soft);
color: var(--accent-hover);
text-decoration: none;
}
.mySearch #q {
width: 100%;
max-width: 100%;
padding: 5px 8px;
border: 1px solid var(--border);
border-radius: var(--radius);
background: var(--bg-input);
color: var(--text);
}
/* ---------- 8. 列表 / 分类页 ---------- */
.PostListTitle,
.entrylistTitle,
.thumbTitle {
margin-bottom: 16px;
padding-bottom: 8px;
border-bottom: 1px solid var(--border);
color: var(--function);
font-family: var(--font-mono);
font-size: 1.1rem;
font-weight: 600;
text-align: left;
}
.PostList,
.entrylistItem {
margin-bottom: 14px;
padding-bottom: 12px;
border-bottom: 1px solid var(--border);
}
.entrylistPosttitle {
border: 0;
font-size: 1.05rem;
font-weight: 600;
}
.entrylistPostSummary,
.postText2 {
color: var(--text-muted);
}
/* ---------- 9. 页脚 ---------- */
#footer {
margin-top: 20px;
padding: 16px 0 8px;
border-top: 1px solid var(--border);
color: var(--text-muted);
font-family: var(--font-mono);
font-size: 11px;
line-height: 1.8;
text-align: center;
}
#footer a {
color: var(--text-muted);
}
#footer a:hover {
color: var(--accent);
}
/* ---------- 10. 滚动条 · VS Code 风格 ---------- */
::-webkit-scrollbar {
width: 10px;
height: 10px;
}
::-webkit-scrollbar-track {
background: var(--bg);
}
::-webkit-scrollbar-thumb {
background: #424242;
border-radius: 0;
}
::-webkit-scrollbar-thumb:hover {
background: #4f4f4f;
}
/* ---------- 11. 移动端 ---------- */
@media (max-width: 900px) {
#main {
flex-direction: column;
border: 0;
}
#sideBar {
width: 100%;
flex: none;
border-left: 0;
border-top: 1px solid var(--border);
}
#mainContent .forFlow {
padding: 16px 14px;
}
#navList a.menu {
padding: 7px 10px;
font-size: 12px;
}
#topics .postTitle {
font-size: 1.25rem;
}
/* 窄屏：目录回退到正文上方，不做左栏固定 */
body.post-toc-active #topics .post {
display: block;
}
body.post-toc-active #topics .postTitle {
margin-bottom: 0;
padding-bottom: 0;
border-bottom: 0;
}
body.post-toc-active #post-toc.is-fixed {
position: static;
top: auto;
bottom: auto;
left: auto;
width: auto;
z-index: auto;
}
body.post-toc-active #post-toc {
position: static;
max-height: none;
margin: 0 0 12px;
border-left: 1px solid var(--border);
}
body.post-toc-active #post-toc .post-toc-list {
max-height: 200px;
overflow-y: auto;
}
}
/* ---------- 12. 可选微调 ---------- */
#blog_c1,
.under-post-card.below-post-card,
#under_post_card1,
#under_post_card2 {
display: none;
}
页脚 Html 代码（文章目录 TOC）：
点击展开：页脚 Html 代码
<script>
(function () {
var MIN_HEADINGS = 2;
var RETRY_MS = [0, 400, 1000, 2000, 4000];
var TOC_INSET = 10;
var TOC_BOTTOM = 20;
var DESKTOP_MQ = window.matchMedia('(max-width: 900px)');
function slugify(text, index) {
return 'toc-' + index + '-' + text.toLowerCase()
.replace(/[^\w\u4e00-\u9fff]+/g, '-')
.replace(/^-+|-+$/g, '')
.slice(0, 40) || ('section-' + index);
}
function getHeadings(body) {
return body.querySelectorAll('h1, h2, h3, h4');
}
function insertNav(topics, nav) {
var postBody = topics.querySelector('.postBody');
if (postBody) {
postBody.insertAdjacentElement('beforebegin', nav);
return true;
}
var title = topics.querySelector('.postTitle');
if (title) {
title.insertAdjacentElement('afterend', nav);
return true;
}
return false;
}
function ensureSpacer(nav) {
var spacer = document.getElementById('post-toc-spacer');
if (!spacer) {
spacer = document.createElement('div');
spacer.id = 'post-toc-spacer';
spacer.setAttribute('aria-hidden', 'true');
nav.parentNode.insertBefore(spacer, nav);
}
return spacer;
}
function getTocTopClearance() {
var topNav = document.getElementById('top_nav');
if (topNav) {
return Math.ceil(topNav.getBoundingClientRect().bottom) + 12;
}
return 72;
}
function pinToc() {
var nav = document.getElementById('post-toc');
if (!nav || nav.getAttribute('data-toc-ready') !== '1') return;
if (DESKTOP_MQ.matches) {
nav.classList.remove('is-fixed');
nav.style.removeProperty('--toc-left');
nav.style.removeProperty('--toc-width');
nav.style.removeProperty('--toc-bottom');
nav.style.removeProperty('--toc-top');
var oldSpacer = document.getElementById('post-toc-spacer');
if (oldSpacer) oldSpacer.remove();
return;
}
var spacer = ensureSpacer(nav);
nav.classList.add('is-fixed');
var rect = spacer.getBoundingClientRect();
var mainContent = document.getElementById('mainContent');
var left = Math.max(16, rect.left - 28);
if (mainContent) {
left = Math.max(16, mainContent.getBoundingClientRect().left + TOC_INSET);
}
nav.style.setProperty('--toc-left', left + 'px');
nav.style.setProperty('--toc-width', rect.width + 'px');
nav.style.setProperty('--toc-bottom', TOC_BOTTOM + 'px');
nav.style.setProperty('--toc-top', getTocTopClearance() + 'px');
spacer.style.minHeight = nav.offsetHeight + 'px';
}
function schedulePin() {
pinToc();
setTimeout(pinToc, 80);
setTimeout(pinToc, 400);
}
function buildToc() {
var body = document.getElementById('cnblogs_post_body');
var topics = document.getElementById('topics');
if (!body || !topics) return false;
var headings = getHeadings(body);
if (headings.length < MIN_HEADINGS) return false;
var nav = document.getElementById('post-toc');
if (!nav) {
nav = document.createElement('nav');
nav.id = 'post-toc';
nav.setAttribute('aria-label', '文章目录');
nav.innerHTML =
'<div class="post-toc-title" role="button" tabindex="0">目录</div>' +
'<ul class="post-toc-list"></ul>';
if (!insertNav(topics, nav)) return false;
nav.querySelector('.post-toc-title').addEventListener('click', function () {
nav.classList.toggle('is-collapsed');
setTimeout(pinToc, 0);
});
}
var list = nav.querySelector('.post-toc-list');
if (!list) return false;
list.innerHTML = '';
headings.forEach(function (heading, index) {
var text = (heading.textContent || '').trim();
if (!text) return;
if (!heading.id) {
heading.id = slugify(text, index);
}
var li = document.createElement('li');
li.className = 'toc-' + heading.tagName.toLowerCase();
var link = document.createElement('a');
link.href = '#' + heading.id;
link.textContent = text;
li.appendChild(link);
list.appendChild(li);
});
if (!list.children.length) return false;
nav.setAttribute('data-toc-ready', '1');
document.body.classList.add('post-toc-active');
schedulePin();
return true;
}
function tryBuild() {
try {
if (!buildToc()) pinToc();
} catch (e) {
/* 静默失败，不影响页面 */
}
}
function scheduleBuild() {
RETRY_MS.forEach(function (ms) {
setTimeout(tryBuild, ms);
});
}
function patchAfter(name) {
var original = window[name];
if (typeof original !== 'function' || original.__tocPatched) return;
window[name] = function () {
var result = original.apply(this, arguments);
setTimeout(tryBuild, 50);
return result;
};
window[name].__tocPatched = true;
}
patchAfter('markdown_highlight');
patchAfter('fixPostBody');
if (document.readyState === 'loading') {
document.addEventListener('DOMContentLoaded', scheduleBuild);
} else {
scheduleBuild();
}
window.addEventListener('load', scheduleBuild);
window.addEventListener('resize', pinToc);
window.addEventListener('scroll', pinToc, { passive: true });
DESKTOP_MQ.addEventListener('change', pinToc);
})();
</script>
浙公网安备 33010602011771号