基于SimpleMemory皮肤的仿Pixyll主题皮肤
页面css定制代码
css
/* =====================================================
Theme : Pixyll Minimalist
Author: JayZorn
===================================================== */
/* =====================================================
Web Fonts
Playfair Display --- 高对比几何衬线，西文杂志感
· 仅含拉丁字符，中文自动 fallback 至系统宋体
· jsdelivr CDN，国内可访问，无需额外中文字体文件
===================================================== */
@import url("https://cdn.jsdelivr.net/npm/@fontsource/playfair-display@5/index.css");
/* =====================================================
0. 全局变量
· 所有颜色、字体、宽度集中于此，改一处全局生效
· color-scheme: light 防止系统深色模式干扰自定义色
===================================================== */
:root {
--bg-color: #ffffff; /* 页面背景 */
--text-main: #333332; /* 正文文字 */
--text-title: #111111; /* 标题文字 */
--code-bg: #1e1e1e; /* 代码块背景 */
--accent-color: #d63384; /* 行内代码强调色 */
--max-width: 1020px; /* 内容区最大宽度 */
/*
* 字体栈：
* --font-serif : 英文 → Playfair Display / 中文 → 系统宋体（自动 fallback）
* --font-sans : UI 无衬线，用于导航等非正文区域
* --font-mono : 代码块等宽字体
*/
--font-serif: "Playfair Display", "Songti SC", "SimSun", "STSong", serif;
--font-sans: -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", sans-serif;
--font-mono: "Consolas", "Monaco", monospace;
color-scheme: light; /* 强制浅色模式，不受系统深色模式影响 */
}
/* =====================================================
1. 全局基础
===================================================== */
html, body {
-webkit-text-size-adjust: 100% !important; /* 禁止移动端自动缩放字号 */
text-size-adjust: 100% !important;
background-color: var(--bg-color) !important;
}
/* =====================================================
2. 随笔正文排版
· 统一字体、行高、字间距、颜色
· 覆盖博客园默认首行缩进与杂乱字体继承
===================================================== */
/* 正文所有内联/块级元素：统一基础排版 */
#mainContent .postBody,
#mainContent .postBody h1, #mainContent .postBody h2,
#mainContent .postBody h3, #mainContent .postBody h4,
#mainContent .postBody h5, #mainContent .postBody h6,
#mainContent .postBody p, #mainContent .postBody ol,
#mainContent .postBody ul, #mainContent .postBody li,
#mainContent .postBody span, #mainContent .postBody a {
font-family: var(--font-serif) !important;
line-height: 1.8 !important;
letter-spacing: 0.01em !important;
color: var(--text-main) !important;
text-indent: 0 !important;
}
/* 列表缩进与项间距 */
#mainContent .postBody ol,
#mainContent .postBody ul {
margin: 1.5em 0 !important;
padding-left: 1.5em !important;
}
#mainContent .postBody li { margin-bottom: 0.6em !important; }
/* 标题：加粗、深色、移除默认底边框 */
#mainContent .postBody h1, #mainContent .postBody h2,
#mainContent .postBody h3, #mainContent .postBody h4,
#mainContent .postBody h5, #mainContent .postBody h6 {
color: var(--text-title) !important;
font-weight: 700 !important;
margin: 1.8em 0 0.8em !important;
border-bottom: none !important;
}
/* 消除正文顶部多余间距 */
#mainContent .postBody,
#cnblogs_post_body > p:first-child,
#cnblogs_post_body > h1:first-child,
#cnblogs_post_body > h2:first-child {
margin-top: 0 !important;
padding-top: 0 !important;
}
/* =====================================================
3. 页面布局
· PC 端：#home flex 居中，#main 限宽
padding-left: 150px 补偿博客园两栏布局残留的负 margin 偏移
（若日后博客园修改默认布局，可将此值调为 0）
· 移动端：全宽、紧凑内边距、防缩放字号
===================================================== */
/* PC 端 (≥768px) */
@media screen and (min-width: 768px) {
#home {
max-width: 100% !important;
display: flex !important;
flex-direction: column !important;
align-items: center !important;
}
#main {
width: 100% !important;
max-width: var(--max-width) !important;
padding-left: 200px !important;
margin: 40px auto 0 !important;
}
#mainContent { width: 100% !important; float: none !important; }
#mainContent .postBody { padding: 40px 20px !important; font-size: 17px !important; }
#mainContent .postBody p,
#mainContent .postBody li,
#mainContent .postBody span { font-size: 17px !important; }
}
/* 移动端 (≤767px) */
@media screen and (max-width: 767px) {
#main { width: 100% !important; padding: 0 !important; }
#mainContent .postBody { padding: 10px 15px !important; }
#mainContent .postBody,
#mainContent .postBody p, #mainContent .postBody ol,
#mainContent .postBody ul, #mainContent .postBody li,
#mainContent .postBody li p, #mainContent .postBody span {
font-size: 15px !important;
}
#mainContent .postBody ol,
#mainContent .postBody ul { padding-left: 1.2em !important; }
}
/* =====================================================
4. 代码块
· 深色背景 + 白色文字，覆盖 highlight.js 各 token 色
· 行内 code：浅灰背景 + 强调色，与块级代码视觉区分
===================================================== */
/* 块级代码 */
#mainContent .postBody pre, #mainContent .postBody code,
.cnblogs-post-body pre, .cnblogs-markdown pre {
background-color: var(--code-bg) !important;
color: #ffffff !important;
border: none !important;
border-radius: 4px !important;
padding: 20px !important;
font-family: var(--font-mono) !important;
font-size: 14px !important;
line-height: 1.6 !important;
}
/* 覆盖 highlight.js token 颜色，统一白色 */
#mainContent .postBody pre span, #mainContent .postBody code span,
.hljs, .hljs-keyword, .hljs-string, .hljs-comment,
.hljs-operator, .hljs-function, .hljs-title, .hljs-params {
color: #ffffff !important;
background-color: transparent !important;
font-style: normal !important;
}
/* 行内代码（不在 pre 内） */
#mainContent .postBody :not(pre) > code {
background-color: #f3f4f4 !important;
color: var(--accent-color) !important;
padding: 2px 4px !important;
border-radius: 3px !important;
font-family: inherit !important;
}
/* =====================================================
5. 隐藏冗余元素
· 侧边栏、广告、置顶图标、多余按钮等
· 如博客园新增推广组件，在此追加选择器即可
===================================================== */
#topics .postTitle, .entrylistPosttitle, #cb_post_title_url,
#sideBar, #sideBarMain, #navList,
#green_channel, #vip_tip, #BlogPostCategory,
#commentform_title,
#under_post_card1, #under_post_card2,
#cnblogs_ch, #blog_c1,
#tip_comment2, .commentbox_title_right,
.p_arrow, .p_puton, .post_top_icon,
img[src*="zhiding"], span[style*="color: blue"], .pinned-post-mark {
display: none !important;
}
/* =====================================================
6. 页面头部 & 导航栏
===================================================== */
/* 头部容器：上下留白，居中，去边框背景 */
#header {
margin: 80px auto 60px !important;
max-width: var(--max-width) !important;
text-align: center !important;
padding: 0 20px !important;
border: none !important;
background: transparent !important;
}
/* 博客主标题：大字重、紧字距 */
#blogTitle h1 {
font-family: var(--font-serif) !important;
font-size: 42px !important;
font-weight: 800 !important;
letter-spacing: -1px !important;
margin-bottom: 10px !important;
}
#blogTitle h1 a { color: var(--text-title) !important; text-decoration: none !important; }
/* 博客副标题：正常字重，浅灰 */
#blogTitle h2 {
font-family: var(--font-serif) !important;
font-size: 18px !important;
font-weight: 400 !important;
color: #999 !important;
margin-top: 5px !important;
line-height: 1.5 !important;
}
/* 导航栏：顶部细线与头部分隔 */
#navigator {
margin-top: 30px !important;
border-top: 1px solid #eee !important;
padding-top: 20px !important;
}
/* =====================================================
7. 首页文章列表
· 同天/异天随笔间距统一为 56px
原理：.day 本身零间距，节奏全部由 .postTitle margin
和 .day+.day 控制，两者数值相同，视觉节奏一致
· postDesc 与标题/摘要左侧严格对齐（padding: 0）
· 颜色固定为 #bbb，深浅色模式下视觉一致
===================================================== */
/* .day 本身不贡献间距 */
.day { margin: 0 !important; padding: 0 !important; border: none !important; }
/* 不同天的 .day 之间：56px（与同天内帖间距相同） */
.day + .day { margin-top: 56px !important; }
/* 隐藏原有分割线，间距已由 .postTitle margin 接管 */
.postSeparator { display: none !important; }
/* 每篇标题块：56px 顶距 + 细灰分割线（同天第 2 篇起生效） */
.postTitle {
margin-top: 56px !important;
padding-top: 20px !important;
border-top: 1px solid #f0f0f0 !important;
}
/* 每个 .day 内第一篇：去顶距和分割线（由 .day+.day 接管） */
.day > .postTitle:first-child,
.day > a:first-child + .postTitle,
.day > .postTitle:first-of-type {
margin-top: 0 !important;
border-top: none !important;
}
/* 移除标题左侧蓝色竖线 */
.day .postTitle2, .postTitle2, .entrylistPosttitle,
#mainContent .day .postTitle {
border-left: none !important;
padding-left: 0 !important;
margin-left: 0 !important;
}
/* 文章标题链接 */
.postTitle2 {
font-family: var(--font-serif) !important;
font-size: 26px !important;
font-weight: 700 !important;
line-height: 1.3 !important;
color: var(--text-title) !important;
text-decoration: none !important;
}
/* 移除标题伪元素装饰（部分皮肤会添加） */
.postTitle2::before, .postTitle2::after,
.entrylistPosttitle::before {
content: none !important;
display: none !important;
border: none !important;
width: 0 !important;
}
/* 摘要：稍小字号 + 浅灰，与标题形成层级对比 */
.postCon, .c_b_p_desc {
font-family: var(--font-serif) !important;
font-size: 15px !important;
line-height: 1.75 !important;
color: #888 !important;
margin-top: 10px !important;
margin-bottom: 0 !important;
}
/* "阅读全文"链接 */
.c_b_p_desc_readmore {
display: inline-block !important;
margin-top: 8px !important;
font-size: 13px !important;
color: var(--text-title) !important;
font-weight: 600 !important;
text-decoration: underline !important;
}
/* 文章元信息栏（时间、评论数等） */
.postDesc {
font-family: var(--font-serif) !important;
font-size: 12px !important;
text-transform: uppercase !important;
letter-spacing: 1.5px !important;
color: #bbb !important;
margin-top: 10px !important;
margin-bottom: 0 !important;
padding: 0 !important; /* 与标题/摘要左侧严格对齐 */
text-align: left !important;
background-image: none !important;
border: none !important;
}
/* postDesc 内链接（含"编辑"按钮）：Pixyll hover 风格 */
.postDesc a {
color: #bbb !important;
text-decoration: none !important;
border-bottom: 1px solid transparent !important;
transition: color 0.25s ease, border-bottom-color 0.25s ease !important;
}
.postDesc a:hover,
.postDesc .post-edit-link:hover {
color: #111 !important;
border-bottom-color: #111 !important;
}
/* 隐藏 postDesc 内图标字体（iconfont / Font Awesome 等） */
.postDesc i, .postDesc .iconfont, .postDesc [class*="fa-"],
.postDesc .far, .postDesc .fas,
.postDesc::before, .postDesc span::before {
display: none !important;
font-size: 0 !important;
opacity: 0 !important;
}
/* 移除文章底部"上一篇/下一篇"边框 */
#post_next_prev, #blog_post_info_block {
border-top: none !important;
border-bottom: none !important;
}
/* 分页按钮 */
.pager { font-family: var(--font-serif) !important; margin-top: 50px !important; color: #999 !important; }
.pager a { border: 1px solid #eee !important; padding: 8px 16px !important; border-radius: 4px !important; color: #333 !important; }
/* =====================================================
8. 评论区
===================================================== */
/*
* Pixyll 通用链接 hover 风格
* 适用范围：评论导航 / 排序切换 / 评论投票 / 单条评论 Digg
* 规则：默认浅灰无下划线，hover 时文字变黑 + 底部细线浮现
*/
#comment_nav a,
#comment_sort a, #comment_sort span,
.comment_vote a,
.comment_digg a, .comment_bury a {
color: #bbb !important;
text-decoration: none !important;
border-bottom: 1px solid transparent !important;
font-family: var(--font-serif) !important;
transition: color 0.25s ease, border-bottom-color 0.25s ease !important;
}
#comment_nav a:hover,
#comment_sort a:hover,
.comment_vote a:hover,
.comment_digg a:hover, .comment_bury a:hover {
color: #111 !important;
border-bottom-color: #111 !important;
}
/* 投票 / Digg 按钮字号略小 */
.comment_vote a,
.comment_digg a, .comment_bury a { font-size: 12px !important; }
/* 评论排序：当前选中项保持黑色 + 底线 */
#comment_sort .active,
#comment_sort span.selected {
color: #111 !important;
border-bottom-color: #111 !important;
}
/* "评论列表"标题 */
.feedback_area_title { font-family: var(--font-serif) !important; }
/* 评论内容：与正文排版一致 */
.feedbackItem {
font-family: var(--font-serif) !important;
font-size: 17px !important;
line-height: 1.8 !important;
letter-spacing: 0.01em !important;
color: var(--text-main) !important;
text-indent: 0 !important;
}
/* 评论者姓名：加粗，黑色，去下划线 */
.feedbackItem .comment_author,
.feedbackItem .comment_author a,
.feedbackItem .louzhu {
color: #000 !important;
font-weight: 600 !important;
text-decoration: none !important;
}
/* 评论时间与楼层：80% 透明度 */
.feedbackListSubtitle, .feedbackListSubtitle a,
.comment_actions a { color: #000 !important; opacity: 0.8; }
/* 评论输入框：细边框方角，hover/focus 时边框变黑 */
div.commentbox_main,
textarea#tbCommentBody,
.comment_textarea {
border: 1px solid #ddd !important;
background-color: #fff !important;
border-radius: 0 !important;
padding: 12px !important;
font-family: var(--font-serif) !important; /* 输入文字同步衬线字体 */
box-sizing: border-box !important;
transition: border-color 0.3s ease-in-out !important;
}
div.commentbox_main:hover,
textarea#tbCommentBody:hover,
textarea#tbCommentBody:focus { border-color: #000 !important; outline: none !important; }
/* 移除输入框伪元素装饰 */
div.commentbox_main::before,
div.commentbox_main::after { display: none !important; }
/* 评论框 Tab（"编辑" / "预览"）：黑色文字，选中项有外框 */
.commentbox_title a,
.commentbox_title_left a,
.commentbox_title_left .tab_selected,
.commentbox_title_left span {
font-family: var(--font-serif) !important;
color: #000 !important;
text-decoration-color: #000 !important;
border-bottom-color: #000 !important;
font-weight: 500 !important;
}
.commentbox_title_left .tab_selected {
border: 1px solid #000 !important;
background-color: #fff !important;
border-bottom: none !important; /* 选中时底边融入内容区 */
}
.commentbox_title a:hover {
color: #666 !important;
text-decoration-color: #666 !important;
border-bottom-color: #666 !important;
}
.commentbox_title_left { border-bottom: 1px solid #000 !important; }
/* 评论框底部选项（"退出"、表情等） */
#commentbox_opt,
#commentbox_opt a {
font-family: var(--font-serif) !important;
color: #000 !important;
font-size: 13px !important;
}
#commentbox_opt a { text-decoration: none !important; transition: color 0.3s ease !important; }
#commentbox_opt a:hover { color: #bbb !important; }
/* "自动补全"提示 */
.inline_middle { font-family: var(--font-serif) !important; }
/* 提交评论按钮：实心黑底，hover 稍淡 + 阴影 */
#btn_comment_submit {
background-color: #000 !important;
color: #fff !important;
border: 1px solid #000 !important;
padding: 8px 24px !important;
border-radius: 4px !important;
font-family: var(--font-serif) !important;
font-size: 14px !important;
cursor: pointer !important;
transition: all 0.3s ease !important;
}
#btn_comment_submit:hover {
background-color: #333 !important;
border-color: #333 !important;
box-shadow: 0 2px 8px rgba(0,0,0,.2) !important;
}
/*
* 博客统计区域（#blogStats）字体：
* 博客园用内联 style 写死字体，CSS !important 无法覆盖内联样式，
* 暂无有效方案，留此注释供日后排查
*/
/* =====================================================
9. 随笔 Digg（推荐 / 反对）
· 极简 flex 布局，数字大字，无背景无边框
· 用 ::after 伪元素生成文字标签，避免修改 HTML
===================================================== */
#div_digg { margin: 60px 0 !important; display: flex !important; }
.diggit, .buryit {
flex: 1 !important;
text-align: center !important;
background: none !important;
border: none !important;
box-shadow: none !important;
padding: 20px 0 !important;
}
.diggnum, .burynum {
font-size: 22px !important;
font-weight: 600 !important;
color: #111 !important;
display: block !important;
margin-bottom: 6px !important;
}
.diggit::after { content: "推荐"; display: block; font-size: 13px; color: #666; white-space: nowrap; }
.buryit::after { content: "反对"; display: block; font-size: 13px; color: #666; white-space: nowrap; }
.diggit:hover::after, .buryit:hover::after { color: #000; }页脚HTML代码
html
<script>
/**
* hideStubbornElements
*
* 评论框底部会动态插入含 "[Ctrl+Enter]" 字样的提示段落。
* 该元素无固定 id/class，无法用 CSS 精确定位，只能遍历文本内容隐藏。
*
* 触发时机：
* 1. setInterval 轮询：页面加载后每 500ms 执行一次，共 10 次（约 5 秒），
* 覆盖评论框延迟渲染的情况。
* 2. ajaxComplete 事件：评论框经 Ajax 刷新后再次触发，确保动态加载也能处理。
*/
function hideStubbornElements() {
$("p, span").each(function () {
if ($(this).text().indexOf("Ctrl+Enter") >= 0) {
$(this).hide();
}
});
}
$(document).ajaxComplete(function () {
hideStubbornElements();
});
var cleanCount = 0;
var cleanInterval = setInterval(function () {
hideStubbornElements();
if (++cleanCount >= 10) clearInterval(cleanInterval);
}, 500);
</script>特点
- ✨ 很简洁，隐藏了很多元素，详细内容待各位阅读代码（注释Claude已经给我们留的很详细啦）
- 🙃 不易上手。但是记住，"作者"的名字就是个任意门
- 🥷 信息量低。除了正文内容，很难发掘作者其他信息
- 🤖 （摘自Claude）排版：字体栈的设计是这套 CSS 最有特点的地方。英文走 Playfair Display 的高对比度几何衬线，中文自动 fallback 到系统宋体，两者都是衬线系但各有侧重，混排时天然协调，同时完全不需要加载中文 Web Font，页面性能有保障。行高 1.8、字间距 0.01em、字号 17px 的组合是经过调校的阅读舒适值，既不像报纸那样密，也不像 PPT 那样松
- 🤖 （摘自Claude）列表页节奏：同天内多篇随笔的间距和不同天随笔之间的间距统一为 56px，原理是让 .day 本身完全透明（零 margin/padding），所有节奏由 .postTitle 的 margin 和 .day + .day 的 margin-top 统一控制，两个数值相同，视觉上无论是否跨天，每篇文章之间的呼吸感都是一致的。
- 🤩 好看
- 😆 vibe coding 所得
- 🔨 还有很多缺点
效果如图：
